Show Modal}\n open={this.state.confirmModalOpen}\n onClose={this.handleModalClose}\n basic\n size=\"small\"\n >\n \n \n \n Отключая поддержку координатно-матричной линии вы отключаете\n поддержку работы с коммутатором и аналоговыми трубками\n \n \n \n \n Отмена\n \n this.onSubmit(null, null, true)}\n color=\"red\"\n circular\n >\n Все равно отключить\n \n \n \n\n \n {/* */}\n \n \n \n this.setState({\n isIP: !this.state.isIP,\n modifiedMode: true,\n modified: true,\n })\n }\n checked={!this.state.isIP}\n />\n \n {!this.state.isIP && (\n <>\n \n Первая квартира \n \n \n Последняя квартира \n \n \n Смещение \n \n \n Тип коммутатора \n \n \n )}\n\n \n Обновить\n \n \n {/*
*/}\n \n )\n }\n}\n\nconst mapStateToProps = ({ device }) => ({\n data:\n device &&\n device.shadowDevice &&\n device.shadowDevice.properties &&\n device.shadowDevice.properties.base,\n id: device && device.shadowDevice && device.shadowDevice.device_id,\n isIP: device?.shadowDevice?.mode === 'ip',\n})\n\nexport default connect(mapStateToProps, { updateGeneralFlatsInfo, toggleMode })(\n FlatsGeneral,\n)\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport {\n Label,\n Grid,\n Form,\n Segment,\n Checkbox,\n Button,\n Modal,\n Header,\n Icon,\n} from 'semantic-ui-react'\nimport { updateGeneralFlatsInfo } from 'ducks/deviceActions'\n\nconst center = {\n display: 'flex',\n justifyContent: 'center',\n}\n\nclass Switches extends Component {\n state = {\n light: this.props.data.light_status,\n IR: this.props.data.infrared_status,\n collectingKeys: this.props.data.collecting_keys,\n modified: false,\n modifiedCollectingKeys: false,\n eraseKeys: null,\n confirmModalOpen: false,\n }\n\n onLightToggle = (e) =>\n this.setState({ light: !this.state.light, modified: true })\n\n onIRToggle = (e) => this.setState({ IR: !this.state.IR, modified: true })\n\n handleModalOpen = () => this.setState({ confirmModalOpen: true })\n\n handleModalClose = () => this.setState({ confirmModalOpen: false })\n\n collectingKeys = (e) =>\n this.setState({\n collectingKeys: !this.state.collectingKeys,\n modified: true,\n modifiedCollectingKeys: true,\n })\n\n onSubmit = (\n e,\n element,\n ignoreModifiedCollectingKeysCheck = false,\n eraseKeys,\n ) => {\n console.log(\n ignoreModifiedCollectingKeysCheck,\n !ignoreModifiedCollectingKeysCheck,\n this.state.modifiedCollectingKeys,\n )\n if (\n !ignoreModifiedCollectingKeysCheck &&\n this.state.modifiedCollectingKeys &&\n this.state.collectingKeys === true\n ) {\n return this.handleModalOpen()\n }\n this.props.updateGeneralFlatsInfo({\n id: this.props.device_id,\n collectingKeys: this.state.collectingKeys,\n light: this.state.light,\n infrared: this.state.IR,\n eraseKeys,\n })\n this.setState({\n modified: false,\n modifiedCollectingKeys: false,\n confirmModalOpen: false,\n })\n }\n\n render() {\n const { style, ...props } = this.props\n return (\n \n Show Modal}\n open={this.state.confirmModalOpen}\n onClose={this.handleModalClose}\n basic\n size=\"small\"\n >\n \n \n \n При включенном «Автосбор» все поднесенные ключи записываются в\n базу и будут добавлены к уже существующему списку после отключения\n режима.\n \n \n \n \n Отмена\n \n this.onSubmit(null, null, true, false)}\n inverted\n circular\n >\n this.onSubmit(null, null, true, true)}\n inverted\n circular\n >\n \n \n {/* */}\n {/*
*/}\n \n {/* */}\n {/*
*/}\n \n {/* */}\n \n \n \n \n \n \n {/* */}\n\n \n Обновить\n \n \n \n )\n }\n}\n\nconst mapStateToProps = (state) => ({\n data:\n state.device.shadowDevice.properties &&\n state.device.shadowDevice.properties.base,\n device_id: state.device.shadowDevice.device_id,\n})\n\nexport default connect(mapStateToProps, { updateGeneralFlatsInfo })(Switches)\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { Label, Grid, Form, Segment, Button, Header } from 'semantic-ui-react'\n// import Slider from 'components/global/Slider'\nimport { updateSoundConfig } from 'ducks/deviceActions'\nimport Slider, { createSliderWithTooltip, Range } from 'rc-slider'\nimport 'theme/slider.css'\nimport { blue } from 'theme'\n\nconst SliderWithTooltip = createSliderWithTooltip(Slider)\nconst RangeWithTooltip = createSliderWithTooltip(Range)\n\nconst center = {\n display: 'flex',\n justifyContent: 'center',\n}\n\nclass SoundSettings extends Component {\n state = {\n mainVolume: parseInt(this.props.sound_config.sound_config.general, 10),\n micLevel: parseInt(\n this.props.sound_config.sound_config.speak_handset_tx,\n 10,\n ),\n intercomSpeakerVolume: parseInt(\n this.props.sound_config.sound_config.speak_loudspeaker,\n 10,\n ),\n sipVolume: parseInt(this.props.sound_config.sound_config.speak_sip, 10),\n modified: false,\n }\n\n onSubmit = e => {\n this.props.updateSoundConfig({\n uuid: this.props.id,\n general: this.state.mainVolume,\n speak_handset_tx: this.state.micLevel,\n speak_loudspeaker: this.state.intercomSpeakerVolume,\n speak_sip: this.state.sipVolume,\n })\n this.setState({\n modified: false,\n })\n }\n\n // static getDerivedStateFromProps(props,state) {\n // if ()\n // }\n\n onChange = prop => val => this.setState({ [prop]: val, modified: true })\n\n render() {\n const {\n mainVolume,\n micLevel,\n intercomSpeakerVolume,\n sipVolume,\n modified,\n } = this.state\n return (\n \n \n \n \n )\n }\n}\n\nconst mapStateToProps = ({ device }) => ({\n data: device.shadowDevice.properties && device.shadowDevice.properties.base,\n sound_config:\n device.shadowDevice.properties &&\n device.shadowDevice.properties.sound_config,\n id: device.shadowDevice && device.shadowDevice.device_id,\n})\n\nexport default connect(mapStateToProps, { updateSoundConfig })(SoundSettings)\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport {\n Label,\n Grid,\n Form,\n Input,\n Segment,\n Button,\n Header,\n} from 'semantic-ui-react'\nimport { updateDoorOpenTimers } from 'ducks/deviceActions'\n\nconst center = {\n display: 'flex',\n justifyContent: 'center',\n}\n\nclass DoorTimer extends Component {\n state = {\n general: this.props.data.door_open_time_general,\n social_message: this.props.data.door_open_time_social,\n emergency_message: this.props.data.door_open_time_emergency,\n bluetooth: this.props.data.door_open_time_bt,\n modified: false,\n }\n\n onSubmit = e => {\n debugger\n this.props.updateDoorOpenTimers({\n id: this.props.id,\n door_open_time_general: this.state.general,\n door_open_time_social: this.state.social_message,\n door_open_time_emergency: this.state.emergency_message,\n door_open_time_bt: this.state.bluetooth,\n })\n this.setState({\n modified: false,\n })\n }\n\n onChange = e =>\n this.setState({ [e.target.name]: e.target.value, modified: true })\n\n render() {\n const { general, social_message, emergency_message, bluetooth } = this.state\n return (\n \n \n \n \n
\n \n )\n }\n}\n\nconst mapStateToProps = ({ device }) => ({\n data: device.shadowDevice.properties && device.shadowDevice.properties.base,\n id: device.shadowDevice.device_id,\n})\n\nexport default connect(mapStateToProps, { updateDoorOpenTimers })(DoorTimer)\n","import { useRef, useEffect } from 'react'\n\nconst useIsMount = () => {\n const isMountRef = useRef(true)\n useEffect(() => {\n isMountRef.current = false\n }, [])\n return isMountRef.current\n}\n\nexport default useIsMount\n","import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'\nimport { Label, Grid, Form, Segment, Button, Header } from 'semantic-ui-react'\nimport Slider, { createSliderWithTooltip, Range } from 'rc-slider'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { blue } from 'theme'\nimport 'theme/slider.css'\nimport { updateGeneralFlatsInfo } from 'ducks/deviceActions'\nimport useIsMount from 'hooks/useIsMount'\n\n// const RangeWithTooltip = createSliderWithTooltip(Range)\nconst SliderWithTooltip = createSliderWithTooltip(Slider)\n\nconst center = {\n display: 'flex',\n justifyContent: 'center',\n}\n\nconst getDefaultLevels = commutatorType => {\n switch (commutatorType) {\n // ELTYS\n case 3:\n return [1, 1500, 3270]\n default:\n return [550, 1900, 3270]\n }\n}\n\nconst defaultValue = 3270\n\nconst ResistanceLevels = ({ style = {}, ...props }) => {\n const isMount = useIsMount()\n const dispatch = useDispatch()\n\n const device = useSelector(({ device }) => device && device.shadowDevice)\n const baseConfig = device && device.properties && device.properties.base\n const [modified, setModified] = useState(false)\n const [level, setLevel] = useState(\n (baseConfig.adc_levels && baseConfig.adc_levels[2]) || defaultValue,\n )\n useEffect(() => {\n if (!isMount) setModified(true)\n }, [level])\n\n const handleReset = () => setLevel(defaultValue)\n\n const handleSubmit = () => {\n let newLevels = [...baseConfig.adc_levels]\n newLevels.splice(-1, 1, level)\n dispatch(\n updateGeneralFlatsInfo({\n id: device.device_id,\n adc_levels: newLevels,\n }),\n )\n setModified(false)\n }\n\n return (\n \n Регулировка уровней событий \n\n \n {/* \n Уровни событий \n \n \n \n Идет дозвон в трубку квартирную\n \n {levels[0]} - {levels[1]} Ом\n \n \n \n \n \n Сняли трубку\n \n {levels[1]} - {levels[2]} Ом\n \n \n */}\n \n Дозвон в трубку \n \n \n \n {level}+ Ом\n \n \n\n \n \n Обновить\n \n
\n \n \n )\n}\n\n// const mapStateToProps = ({ device }) => ({\n// data:\n// device &&\n// device.shadowDevice &&\n// device.shadowDevice.properties &&\n// device.shadowDevice.properties.base,\n// id: device && device.shadowDevice && device.shadowDevice.device_id,\n// })\n\n// export default connect(mapStateToProps, { updateGeneralFlatsInfo })(\n// FlatsGeneral,\n// )\n\nexport default ResistanceLevels\n","import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'\nimport {\n Label,\n Grid,\n Form,\n Segment,\n Button,\n Header,\n Input,\n} from 'semantic-ui-react'\nimport Slider, { createSliderWithTooltip, Range } from 'rc-slider'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { blue } from 'theme'\nimport 'theme/slider.css'\nimport { updateGeneralFlatsInfo } from 'ducks/deviceActions'\nimport useInput from 'hooks/useInput'\nimport useIsMount from 'hooks/useIsMount'\n\nconst center = {\n display: 'flex',\n justifyContent: 'center',\n}\n\nconst TimeoutSettings = ({ style = {}, ...props }) => {\n const isMount = useIsMount()\n const dispatch = useDispatch()\n\n const device = useSelector(({ device }) => device && device.shadowDevice)\n const baseConfig = device && device.properties && device.properties.base\n const [modified, setModified] = useState(false)\n\n const { bind: bindSpeak, value: flatSpeak } = useInput(\n baseConfig.timeout_flat_speak / 1000,\n )\n const { bind: bindCall, value: flatCall } = useInput(\n baseConfig.timeout_flat_call / 1000,\n )\n useEffect(() => {\n if (!isMount) setModified(true)\n }, [flatCall, flatSpeak])\n\n const handleSubmit = () => {\n dispatch(\n updateGeneralFlatsInfo({\n id: device.device_id,\n timeout_flat_speak: flatSpeak * 1000,\n timeout_flat_call: flatCall * 1000,\n }),\n )\n setModified(false)\n }\n\n return (\n \n \n\n \n \n Длительность дозвона \n\n \n \n \n Продолжительность звонка \n \n \n\n \n Обновить\n \n \n \n )\n}\n\n// const mapStateToProps = ({ device }) => ({\n// data:\n// device &&\n// device.shadowDevice &&\n// device.shadowDevice.properties &&\n// device.shadowDevice.properties.base,\n// id: device && device.shadowDevice && device.shadowDevice.device_id,\n// })\n\n// export default connect(mapStateToProps, { updateGeneralFlatsInfo })(\n// FlatsGeneral,\n// )\n\nexport default TimeoutSettings\n","import React from 'react'\nimport { Accordion, Container, Icon } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { lightRed } from 'theme.js'\nimport Flats from 'components/forms/FlatsGeneral'\nimport Switches from 'components/forms/Switches'\nimport SoundSettings from 'components/forms/SoundSettings'\nimport DoorTimer from 'components/forms/DoorTimer'\nimport ResistanceLevels from 'components/forms/ResistanceLevels'\nimport TimeoutSettings from 'components/forms/TimeoutSettings'\n\nconst Wrapper = styled.div`\n .title {\n &:hover {\n color: white !important;\n background: ${'#000'};\n }\n\n &.active {\n color: white !important;\n background: ${'#000'};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\n\nconst Flex = styled.div`\n display: grid;\n /* grid-auto-rows: 1fr; */\n grid-gap: 1rem;\n & > div {\n margin: 0rem !important;\n }\n\n grid-template-columns: repeat(5, minmax(min-content, 1fr));\n grid-template-areas:\n 'controls timeout slider-1 slider-1 slider-1'\n 'flats door slider-2 slider-2 slider-2';\n grid-template-rows: max-content;\n\n @media screen and (max-width: 568px) {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'controls'\n 'flats'\n 'door'\n 'timeout'\n 'slider-1'\n 'slider-2';\n\n /* grid-template-columns: repeat(12, minmax(auto-fit,1fr)); */\n }\n`\n\nconst GeneralSettings = ({ activeIndex, handleClick }) => (\n \n \n \n общие настройки\n \n \n\n \n \n \n \n \n \n \n)\n\nexport default wrapCategory(GeneralSettings)\n","import React from 'react'\nimport { Accordion, Container, Icon } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { pink, lightRed } from 'theme.js'\nimport { Link } from 'react-router-dom'\n\nconst Wrapper = styled.div`\n a {\n display: block;\n }\n\n .title {\n &:hover {\n color: white !important;\n background: ${pink};\n }\n\n &.active {\n color: white !important;\n background: ${pink};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\n\nconst FlatsListing = ({ id }) => {\n return (\n \n \n \n квартиры\n \n \n \n )\n}\n\nexport default wrapCategory(FlatsListing)\n","import React from 'react'\nimport { Accordion, Container, Icon } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { blue, lightRed } from 'theme.js'\nimport { Link } from 'react-router-dom'\n\nconst Wrapper = styled.div`\n a {\n display: block;\n }\n\n .title {\n &:hover {\n color: white !important;\n background: ${blue};\n }\n\n &.active {\n color: white !important;\n background: ${blue};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\n\nconst KeysListing = ({ id }) => {\n return (\n \n \n \n ключи\n \n \n \n )\n}\n\nexport default wrapCategory(KeysListing)\n","import React from 'react'\nimport { Accordion, Container, Icon } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { olive } from 'theme.js'\nimport { Link } from 'react-router-dom'\n\nconst Wrapper = styled.div`\n a {\n display: block;\n }\n\n .title {\n &:hover {\n color: white !important;\n background: ${olive};\n }\n\n &.active {\n color: white !important;\n background: ${olive};\n }\n }\n`\n\nconst KeysListing = ({ id }) => {\n return (\n \n \n \n Коды доступа\n \n \n \n )\n}\n\nexport default wrapCategory(KeysListing)\n","import React, { Component } from 'react'\nimport {\n Grid,\n Button,\n Icon,\n Accordion,\n Container,\n Message,\n Checkbox,\n} from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport Dropzone from 'react-dropzone'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { purple, lightRed } from 'theme.js'\n\nconst Wrapper = styled.div`\n .title {\n &:hover {\n color: white !important;\n background: ${purple};\n }\n\n &.active {\n color: white !important;\n background: ${purple};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\n\n// const options = [\n// { key: '1', text: '1', value: 1 },\n// { key: '2', text: '234', value: 234 },\n// ]\n\nclass Firmware extends Component {\n state = {\n error: '',\n acceptedFile: [],\n rejectedFile: [],\n bluetoothFirmware: false,\n }\n\n onUpdate = e => false\n\n handleChange = (e, { value }) => this.setState({ selectedFirmware: value })\n\n handleClick = () => {\n if (this.state.acceptedFile.length < 1) {\n this.setState({ error: 'Выберите файл' })\n } else {\n this.props.uploadFirmware({\n uuid: this.props.id,\n file: this.state.acceptedFile[0],\n firmwareType: this.state.bluetoothFirmware ? 'bluetooth' : 'main',\n })\n this.setState({\n acceptedFile: [],\n rejectedFile: [],\n fileName: null,\n error: '',\n })\n }\n }\n\n render() {\n return (\n \n \n \n прошивка\n \n \n \n \n \n Тип прошивки \n \n \n this.setState({ bluetoothFirmware: false })}\n >\n \n this.setState({\n bluetoothFirmware: !this.state.bluetoothFirmware,\n })\n }\n />{' '}\n this.setState({ bluetoothFirmware: true })}\n >\n
\n \n \n {\n this.setState({\n acceptedFile: accepted,\n rejectedFile: rejected,\n fileName: accepted[0].name,\n })\n }}\n >\n {({ getInputProps, getRootProps }) => (\n \n \n Загрузить\n \n \n {this.state.error !== '' && this.state.acceptedFile.length < 1 && (\n \n {this.state.error}
\n \n )}\n \n \n \n \n )\n }\n}\n\nexport default wrapCategory(Firmware)\n","import React from 'react'\nimport { Accordion, Container, Icon } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { yellow, lightRed } from 'theme.js'\nimport { Link } from 'react-router-dom'\n\nconst Wrapper = styled.div`\n a {\n display: block;\n }\n\n .title {\n &:hover {\n color: white !important;\n background: ${yellow};\n }\n\n &.active {\n color: white !important;\n background: ${yellow};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\n\nconst LogsListing = ({ id }) => {\n return (\n \n \n \n логи\n \n \n \n )\n}\n\nexport default wrapCategory(LogsListing)\n","import React, { Component } from 'react'\nimport {\n Grid,\n Dropdown,\n Button,\n Icon,\n Accordion,\n Container,\n Message,\n Form,\n} from 'semantic-ui-react'\nimport Dropzone from 'react-dropzone'\nimport { connect } from 'react-redux'\nimport { updateStandartSounds, resetDeviceSounds } from 'ducks/deviceActions'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { teal, lightRed } from 'theme.js'\n\nconst Wrapper = styled.div`\n .title {\n &:hover {\n color: white !important;\n background: ${teal};\n }\n\n &.active {\n color: white !important;\n background: ${teal};\n }\n }\n\n .content {\n &.active {\n background: ${lightRed};\n }\n }\n`\nconst actionsOptions = [\n {\n key: '1',\n text: '«Выход» Открытие двери из подъезда изнутри(5сек)',\n value: 1,\n duration: 5,\n },\n {\n key: '2',\n text: 'Ключ не верный, несуществующий номер, квартира блокирована(5 сек)',\n value: 2,\n duration: 5,\n },\n { key: '3', text: 'Звонок в 112(5 сек)', value: 3, duration: 5 },\n {\n key: '4',\n text: '«Трель» Звонок в квартиру(5 сек.)',\n value: 15,\n duration: 5,\n },\n {\n key: '5',\n text: '«Гость» При входе гостя в дверь(10 сек)',\n value: 16,\n duration: 10,\n },\n {\n key: '6',\n text: '«Вход» Открытие двери в подъезд по ключу. Обычная трель(5 сек)',\n value: 17,\n duration: 5,\n },\n { key: '7', text: '«Опрос завершен» (10 сек)', value: 18, duration: 10 },\n]\n\nclass StandardSounds extends Component {\n state = {\n selectedAction: null,\n error: '',\n acceptedFile: [],\n }\n\n handleActionChange = (e, { value }) =>\n this.setState({ selectedAction: value, error: '' })\n\n handleSubmit = () => {\n const { acceptedFile, selectedAction } = this.state\n\n this.props.updateStandartSounds({\n id: this.props.id,\n soundId: selectedAction,\n file: acceptedFile[0],\n })\n }\n\n onDrop = (accepted, rejected) => {\n this.setState({\n acceptedFile: accepted,\n rejectedFile: rejected,\n fileName: accepted[0].name,\n })\n }\n\n handleResetSounds = () => {\n this.props.resetDeviceSounds(this.props.id)\n }\n\n render() {\n const { selectedAction, error } = this.state\n\n return (\n \n \n \n Стандартные звуки\n \n \n \n \n \n \n \n \n\n \n \n {({ getInputProps, getRootProps }) => (\n \n \n\n {error.length > 0 && (\n \n \n \n {this.state.error}
\n \n \n \n )}\n \n \n \n \n \n конфигурация SIP\n \n \n\n \n \n \n \n \n \n )\n }\n}\n\nexport default connect(null, { updateSIPConfig })(withRouter(wrapCategory(SIP)))\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { Grid, Form, Input, Button, Popup } from 'semantic-ui-react'\nimport { updateNetworkInfo } from 'ducks/deviceActions'\nimport { amber } from 'theme'\n\nclass NetworkSettings extends Component {\n state = {\n staticIp: this.props.data.network_static_ip || '',\n gateway: this.props.data.network_gateway || '',\n subnet: this.props.data.network_subnet || '',\n dns: this.props.data.network_dns || '',\n mac: this.props.data.network_mac || '02:34:56:78:9A:BC',\n modified: false,\n staticIpValid: true,\n gatewayValid: true,\n subnetValid: true,\n dnsValid: true,\n }\n\n onSubmit = e => {\n const { staticIp, gateway, subnet, dns, mac, modified } = this.state\n\n // validate ip in network fields\n const errors = Object.entries(this.state).reduce((acc, entry) => {\n if (\n entry[0].search('Valid') === -1 && // if state name doesn`t include \"Valid\" string\n entry[0].search('modified') === -1 &&\n entry[0].search('mac') === -1 // or \"mac\"\n ) {\n if (entry[1] !== '') {\n // if state`s value not empty\n if (!this.validate(entry[1])) {\n // if validation fails\n acc = true // set errors to true\n this.setState({\n [`${entry[0]}Valid`]: false,\n }) // show error to the user\n } else {\n this.setState({\n [`${entry[0]}Valid`]: true,\n }) //\n }\n } else {\n this.setState({\n [`${\n entry[0] // validate value\n }Valid`]: true,\n }) // set state\n }\n }\n return acc\n }, false)\n console.log(`${modified} ${errors}`)\n\n if (modified && !errors) {\n this.props.updateNetworkInfo({\n uuid: this.props.deviceId,\n network_static_ip: staticIp,\n network_gateway: gateway,\n network_subnet: subnet,\n network_dns: dns,\n network_mac: mac,\n })\n this.setState({\n modified: false,\n })\n }\n }\n\n validate = value => {\n const ipPattern = RegExp(\n '^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$',\n )\n return ipPattern.test(value)\n }\n\n handleBlur = props => e => {\n const { value } = e.target\n\n this.setState({\n [`${props}Valid`]: value === '' || this.validate(value),\n })\n }\n\n onFocus = props => e => {\n this.setState({\n [`${props}Valid`]: true,\n })\n }\n\n onChange = e =>\n this.setState({ [e.target.name]: e.target.value, modified: true })\n\n render() {\n const {\n staticIp,\n gateway,\n subnet,\n dns,\n mac,\n staticIpValid,\n dnsValid,\n gatewayValid,\n subnetValid,\n } = this.state\n return (\n \n \n \n )\n }\n}\n\nconst mapStateToProps = state => ({\n data:\n state.device.shadowDevice.properties &&\n state.device.shadowDevice.properties.base,\n deviceId: state.device.shadowDevice.device_id,\n})\n\nexport default connect(mapStateToProps, { updateNetworkInfo })(NetworkSettings)\n","import React, { Component } from 'react'\nimport { Grid, Icon, Accordion, Container } from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\nimport { amber } from 'theme.js'\nimport NetworkSettings from '../forms/NetworkSettings'\n\nconst Wrapper = styled.div`\n .title {\n &:hover {\n color: white !important;\n background: ${amber};\n }\n\n &.active {\n color: white !important;\n background: ${amber};\n }\n }\n`\n\nclass Network extends Component {\n render() {\n return (\n \n \n \n Настройка сети\n \n \n \n \n \n \n \n \n \n \n \n )\n }\n}\n\nexport default wrapCategory(Network)\n","import React from 'react'\nimport { connect } from 'react-redux'\nimport { Icon, Button } from 'semantic-ui-react'\n\nconst styles = {\n marginLeft: 'auto',\n marginBottom: '0.625rem',\n background: 'black',\n}\n\nconst PanelStatus = ({ is_online }) => (\n \n \n)\n\nconst mapStateToProps = ({\n device: {\n currentDevice: { is_online },\n },\n}) => ({\n is_online: is_online,\n})\n\nexport default connect(mapStateToProps)(PanelStatus)\n","import React from 'react'\nimport styled from 'styled-components'\nimport { connect } from 'react-redux'\nimport { Header, Icon, Button } from 'semantic-ui-react'\nimport { withRouter } from 'react-router-dom'\nimport { getDeviceInfo, getDeviceInfoShadow } from 'ducks/device'\n\nconst propNames = {\n base: 'Общие настройки',\n flats_config: 'Квартиры',\n sip_credentials: 'Настройки SIP',\n social: 'Социальное информирование',\n poll: 'Опросы',\n emergency: 'Оповещения о ЧС',\n sound_config: 'Настройки звука',\n standard_sounds: 'Стандартные звуки',\n}\n\nconst Wrapper = styled.div`\n & > *:nth-child(2) {\n padding: 0.625rem;\n }\n`\n\nconst UnsyncWrapper = styled(Wrapper)`\n background: white;\n border: 2px solid black;\n border-radius: 10px;\n`\n\nconst Title = styled.div`\n background: black;\n color: white;\n /* height: 1.625rem; */\n padding: 0.625rem;\n display: flex;\n justify-content: center;\n`\n\nclass SyncStatus extends React.Component {\n state = {\n unsync: [],\n }\n\n componentDidMount() {\n this.checkSyncStatus()\n this._updateIntervalId = window.setInterval(this.updateDeviceInfo, 3000)\n }\n\n componentWillUnmount() {\n clearInterval(this._updateIntervalId)\n }\n\n updateDeviceInfo = async () => {\n const { match, history, dispatch } = this.props\n await Promise.all([\n dispatch(getDeviceInfo(match.params.id, history)),\n dispatch(getDeviceInfoShadow(match.params.id)),\n ])\n this.checkSyncStatus()\n }\n\n checkSyncStatus = () => {\n const { currentDevice, shadowDevice } = this.props\n\n const currentProps = Object.entries(currentDevice.properties).map(\n entry => ({\n name: entry[0],\n checksum: entry[1].checksum,\n }),\n )\n const shadowProps = Object.entries(shadowDevice.properties).map(entry => ({\n name: entry[0],\n checksum: entry[1].checksum,\n }))\n\n const unsync = currentProps.filter(\n (prop, ind) => prop.checksum !== shadowProps[ind].checksum,\n )\n this.setState({ unsync })\n }\n\n render() {\n const { unsync } = this.state\n\n return unsync.length > 0 ? (\n \n Статус синхронизации \n \n {unsync.map(prop => (\n \n \n ))}\n
\n \n ) : (\n \n \n \n)\n","import * as d3 from 'd3'\n\n/*\n Sample Usage:\n \n var myData = {\n \"name\": \"Root\",\n \"children\": [\n {\n \"name\": \"Branch 1\",\n \"children\": [\n {\"name\": \"Leaf 3\"},\n {\"name\": \"Leaf 4\"}\n ]\n },\n {\"name\": \"Branch 2\"}\n ]\n };\n \n var chart = MindMap()\n .width(900)\n .height(500)\n ;\n \n d3.select('#chart svg')\n .datum(myData)\n .call(chart)\n ;\n*/\n\nexport default function MindMap() {\n var margin = { top: 20, left: 120, bottom: 20, right: 120 },\n width = 960,\n height = 500,\n duration = 500,\n identity = '_id',\n handleClick = function() {},\n text = function(d) {\n return d.name\n },\n idx = 0,\n enterNode = function(node) {\n node.append('svg:circle').attr('r', 1e-6)\n\n node\n .append('svg:text')\n .attr('text-anchor', 'middle')\n .attr('dy', 14)\n .text(text)\n .style('fill-opacity', 1)\n },\n updateNode = function(node) {\n node.select('text').text(text)\n\n node.select('circle').attr('r', 4.5)\n },\n exitNode = function(node) {\n node.select('circle').attr('r', 1e-6)\n\n node.select('text').style('fill-opacity', 1e-6)\n }\n var connector = MindMap.elbow\n\n var chart = function(selection) {\n selection.each(function(root) {\n var w = width - margin.left - margin.right\n var h = height - margin.top - margin.bottom\n\n var container = d3.select(this)\n var vis = container.attr('width', width).attr('height', height)\n var graphRoot = vis.select('g')\n console.log(graphRoot)\n if (!graphRoot.__groups[0][0]) {\n vis = vis.append('svg:g')\n } else {\n vis = graphRoot\n }\n vis = vis.attr(\n 'transform',\n 'translate(' + (w / 2 + margin.left) + ',' + margin.top + ')',\n )\n\n root.x0 = h / 2\n root.y0 = 0\n\n var tree = d3.tree().size([h, w])\n\n chart.update = function() {\n container\n .transition()\n .duration(duration)\n .call(chart)\n }\n\n // Ensure we have Left and Right node lists\n if (!(root.left || root.right)) {\n var i = 0,\n l = (root.children || []).length\n root.left = []\n root.right = []\n for (; i < l; i++) {\n if (i % 2) {\n root.left.push(root.children[i])\n root.children[i].position = 'left'\n } else {\n root.right.push(root.children[i])\n root.children[i].position = 'right'\n }\n }\n }\n\n // Compute the new tree layout.\n var nodesLeft = tree\n .size([h, w / 2 - 20])\n .children(function(d) {\n return d.depth === 0 ? d.left : d.children\n })\n .nodes(root)\n .reverse()\n var nodesRight = tree\n .size([h, w / 2])\n .children(function(d) {\n return d.depth === 0 ? d.right : d.children\n })\n .nodes(root)\n .reverse()\n root.children = root.left.concat(root.right)\n var nodes = (window.nodes = (function(left, right) {\n var root = right[right.length - 1]\n left.pop()\n left.forEach(function(node) {\n node.y = -node.y\n node.parent = root\n })\n return left.concat(right)\n })(nodesLeft, nodesRight))\n\n // Update the nodes…\n var node = vis.selectAll('g.node').data(nodes, function(d) {\n return d[identity] || (d[identity] = ++idx)\n })\n\n // Enter any new nodes at the parent's previous position.\n var nodeEnter = node\n .enter()\n .append('svg:g')\n .attr('class', 'node')\n .attr('transform', function(d) {\n return 'translate(' + root.y0 + ',' + root.x0 + ')'\n })\n .on('click', handleClick)\n\n enterNode(nodeEnter)\n\n // Transition nodes to their new position.\n var nodeUpdate = node\n .transition()\n .duration(duration)\n .attr('transform', function(d) {\n return 'translate(' + d.y + ',' + d.x + ')'\n })\n\n updateNode(nodeUpdate)\n\n // Transition exiting nodes to the parent's new position.\n var nodeExit = node\n .exit()\n .transition()\n .duration(duration)\n .attr('transform', function() {\n return 'translate(' + root.y + ',' + root.x + ')'\n })\n .remove()\n\n exitNode(nodeExit)\n\n // Update the links…\n var link = vis\n .selectAll('path.link')\n .data(tree.links(nodes), function(d) {\n return d.target[identity]\n })\n\n // Enter any new links at the parent's previous position.\n link\n .enter()\n .insert('svg:path', 'g')\n .attr('class', 'link')\n .attr('d', function() {\n var o = { x: root.x0, y: root.y0 }\n return connector({ source: o, target: o })\n })\n .transition()\n .duration(duration)\n .attr('d', connector)\n\n // Transition links to their new position.\n link\n .transition()\n .duration(duration)\n .attr('d', connector)\n\n // Transition exiting nodes to the parent's new position.\n link\n .exit()\n .transition()\n .duration(duration)\n .attr('d', function() {\n var o = { x: root.x, y: root.y }\n return connector({ source: o, target: o })\n })\n .remove()\n\n // Stash the old positions for transition.\n nodes.forEach(function(d) {\n d.x0 = d.x\n d.y0 = d.y\n })\n })\n }\n\n chart.width = function(_) {\n if (!arguments.length) return width\n width = _\n return chart\n }\n\n chart.height = function(_) {\n if (!arguments.length) return height\n height = _\n return chart\n }\n\n chart.duration = function(_) {\n if (!arguments.length) return duration\n duration = _\n return chart\n }\n\n chart.connector = function(_) {\n if (!arguments.length) return connector\n connector = _\n return chart\n }\n\n chart.click = function(_) {\n if (!arguments.length) return handleClick\n handleClick = _\n return chart\n }\n\n chart.identity = function(_) {\n if (!arguments.length) return identity\n identity = _\n return chart\n }\n\n chart.text = function(_) {\n if (!arguments.length) return text\n text = _\n return chart\n }\n\n chart.nodeEnter = function(_) {\n if (!arguments.length) return enterNode\n enterNode = _\n return chart\n }\n\n chart.nodeUpdate = function(_) {\n if (!arguments.length) return updateNode\n updateNode = _\n return chart\n }\n\n chart.nodeExit = function(_) {\n if (!arguments.length) return exitNode\n exitNode = _\n return chart\n }\n\n chart.margin = function(_) {\n if (!arguments.length) return margin\n margin.top = typeof _.top != 'undefined' ? _.top : margin.top\n margin.right = typeof _.right != 'undefined' ? _.right : margin.right\n margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom\n margin.left = typeof _.left != 'undefined' ? _.left : margin.left\n return chart\n }\n\n return chart\n}\n\nMindMap.elbow = function(d) {\n var source = d.source\n var target = d.target\n var hy = (target.y - source.y) / 2\n return (\n 'M' +\n source.y +\n ',' +\n source.x +\n 'H' +\n (source.y + hy) +\n 'V' +\n target.x +\n 'H' +\n target.y\n )\n}\n\nMindMap.loadFreeMind = function(fileName, callback) {\n d3.xml(fileName, 'application/xml', function(err, xml) {\n // Changes XML to JSON\n var xmlToJson = function(xml) {\n // Create the return object\n var obj = {}\n\n if (xml.nodeType == 1) {\n // element\n // do attributes\n if (xml.attributes.length > 0) {\n obj['@attributes'] = {}\n for (var j = 0; j < xml.attributes.length; j++) {\n var attribute = xml.attributes.item(j)\n obj['@attributes'][attribute.nodeName] = attribute.nodeValue\n }\n }\n } else if (xml.nodeType == 3) {\n // text\n obj = xml.nodeValue\n }\n\n // do children\n if (xml.hasChildNodes()) {\n for (var i = 0; i < xml.childNodes.length; i++) {\n var item = xml.childNodes.item(i)\n var nodeName = item.nodeName\n if (typeof obj[nodeName] == 'undefined') {\n obj[nodeName] = xmlToJson(item)\n } else {\n if (typeof obj[nodeName].push == 'undefined') {\n var old = obj[nodeName]\n obj[nodeName] = []\n obj[nodeName].push(old)\n }\n obj[nodeName].push(xmlToJson(item))\n }\n }\n }\n return obj\n }\n var js = xmlToJson(xml)\n var data = js.map.node\n var parseData = function(data, direction) {\n var key,\n i,\n l,\n dir = direction,\n node = {},\n child\n for (key in data['@attributes']) {\n node[key.toLowerCase()] = data['@attributes'][key]\n }\n node.direction = node.direction || dir\n l = (data.node || []).length\n if (l) {\n node.children = []\n for (i = 0; i < l; i++) {\n dir = data.node[i]['@attributes'].POSITION || dir\n child = parseData(data.node[i], {}, dir)\n ;(node[dir] = node[dir] || []).push(child)\n node.children.push(child)\n }\n }\n return node\n }\n var root = parseData(data, 'right')\n\n return callback(err, root)\n })\n}\n","import React, { useRef, useEffect, useState } from 'react'\nimport MindMapHelper from './mindmaphelper'\nimport * as d3 from 'd3'\nimport useMeasure from '../../hooks/useMeasure'\nimport { yellow, green, red } from 'theme.js'\nimport { useHistory } from 'react-router-dom'\n\n// export default function MindMap({ data }) {\n// const [wrapperRef, bounds] = useMeasure()\n// const mapRef = useRef()\n// const history = useHistory()\n\n// const width = 932\n// const radius = width / 2\n\n// const dotSize = 5\n\n// function autoBox() {\n// const { x, y, width, height } = this.getBBox()\n\n// return [x, y, width, height]\n// // return [bounds.x, bounds.y, bounds.width, bounds.height]\n// // return [0, 0, bounds.width, 500]\n// }\n\n// function initMindMap(ref) {\n// const tree = d3\n// .tree()\n// .size([2 * Math.PI, radius])\n// .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)\n\n// const root = tree(\n// d3\n// .hierarchy(data)\n// .sort((a, b) =>\n// d3.ascending(a.data.serial_number, b.data.serial_number),\n// ),\n// )\n\n// // const svg = d3\n// // .create('svg')\n\n// // Create Event Handlers for mouse\n// function handleMouseOver(d, i) {\n// // Add interactivity\n\n// // Use D3 to select element, change color and size\n// d3.select(this).attr('r', dotSize * 1.5)\n// }\n\n// function handleMouseOut(d, i) {\n// // Use D3 to select element, change color back to normal\n// d3.select(this).attr('r', dotSize)\n// }\n\n// function handleMouseClick({ data }, y) {\n// console.log(data.device_id)\n// history.push(`/${data.device_id}`)\n// // console.log(this)\n// // console.log(d)\n// // const el = d3.select(this)\n// // console.log(el)\n// // el.attr('r', 5)\n// }\n\n// const svg = d3\n// .select(ref)\n// .style('max-width', '100%')\n// .style('font', '10px \"Futura New\"')\n// // .style('font-size', '18px')\n\n// const link = svg\n// .append('g')\n// .attr('fill', 'none')\n// .attr('stroke', d => {\n// return '#555'\n// })\n// .attr('stroke-opacity', 0.4)\n// .attr('stroke-width', 1.5)\n// .selectAll('path')\n// .data(root.links())\n// .join('path')\n// .attr(\n// 'd',\n// d3\n// .linkRadial()\n// .angle(d => d.x)\n// .radius(d => d.y),\n// )\n\n// const node = svg\n// .append('g')\n// .attr('stroke-linejoin', 'round')\n// .attr('stroke-width', 3)\n// .selectAll('g')\n// .data(root.descendants().reverse())\n// .join('g')\n// .attr(\n// 'transform',\n// d => `\n// rotate(${(d.x * 180) / Math.PI - 90})\n// translate(${d.y},0)\n// `,\n// )\n\n// node\n// .append('circle')\n// .attr('fill', ({ data }) => {\n// return data.is_online ? green : red\n// })\n// .attr('r', dotSize)\n// .style('cursor', 'pointer')\n// .on('mouseover', handleMouseOver)\n// .on('mouseout', handleMouseOut)\n// .on('click', handleMouseClick)\n\n// node\n// .append('text')\n// .attr('dy', '0.31em')\n// .attr('x', d => (d.x < Math.PI === !d.children ? 6 : -6))\n// .attr('text-anchor', d =>\n// d.x < Math.PI === !d.children ? 'start' : 'end',\n// )\n// .attr('transform', d => (d.x >= Math.PI ? 'rotate(180)' : null))\n// .text(d => d.data.serial_number)\n// .clone(true)\n// .lower()\n// .attr('stroke', 'white')\n\n// svg.node()\n\n// svg.attr('viewBox', autoBox)\n// }\n\n// useEffect(() => {\n// // d3.select(mapRef.current)\n// // .datum(myData)\n// // .call(chart)\n\n// if (mapRef.current && data) {\n// initMindMap(mapRef.current)\n// }\n// }, [])\n\n// // useEffect(())\n\n// useEffect(() => {\n// d3.select(mapRef.current).attr('viewBox', autoBox)\n// }, [bounds])\n// return (\n// \n// )\n// }\n\n// const links = [\n// { source: 'Microsoft', target: 'Amazon', type: 'licensing' },\n// { source: 'Microsoft', target: 'HTC', type: 'licensing' },\n// { source: 'Samsung', target: 'Apple', type: 'suit' },\n// { source: 'Motorola', target: 'Apple', type: 'suit' },\n// { source: 'Nokia', target: 'Apple', type: 'resolved' },\n// { source: 'HTC', target: 'Apple', type: 'suit' },\n// { source: 'Kodak', target: 'Apple', type: 'suit' },\n// { source: 'Microsoft', target: 'Barnes & Noble', type: 'suit' },\n// { source: 'Microsoft', target: 'Foxconn', type: 'suit' },\n// { source: 'Oracle', target: 'Google', type: 'suit' },\n// { source: 'Apple', target: 'HTC', type: 'suit' },\n// { source: 'Microsoft', target: 'Inventec', type: 'suit' },\n// { source: 'Samsung', target: 'Kodak', type: 'resolved' },\n// { source: 'LG', target: 'Kodak', type: 'resolved' },\n// { source: 'RIM', target: 'Kodak', type: 'suit' },\n// { source: 'Sony', target: 'LG', type: 'suit' },\n// { source: 'Kodak', target: 'LG', type: 'resolved' },\n// { source: 'Apple', target: 'Nokia', type: 'resolved' },\n// { source: 'Qualcomm', target: 'Nokia', type: 'resolved' },\n// { source: 'Apple', target: 'Motorola', type: 'suit' },\n// { source: 'Microsoft', target: 'Motorola', type: 'suit' },\n// { source: 'Motorola', target: 'Microsoft', type: 'suit' },\n// { source: 'Huawei', target: 'ZTE', type: 'suit' },\n// { source: 'Ericsson', target: 'ZTE', type: 'suit' },\n// { source: 'Kodak', target: 'Samsung', type: 'resolved' },\n// { source: 'Apple', target: 'Samsung', type: 'suit' },\n// { source: 'Kodak', target: 'RIM', type: 'suit' },\n// { source: 'Nokia', target: 'Qualcomm', type: 'suit' },\n// ]\n\nconst height = 500\n\nconst mapLinks = (data) => {\n const arr = data.parents || data.children || []\n let res = []\n const isParent = Boolean(data.children)\n if (isParent) {\n res = arr.map((el, idx) => ({\n source: 0, // data.serial_number,\n target: idx + 1, // el.serial_number,\n }))\n } else {\n res = arr.map((el, idx) => ({\n source: idx + 1, // data.serial_number,\n target: 0, // el.serial_number,\n }))\n }\n\n return res\n}\nconst mapNodes = (data) => {\n // const nodesHash = {}\n // links.forEach(function(link) {\n // link.source =\n // nodesHash[link.source] || (nodesHash[link.source] = { name: link.source })\n // link.target =\n // nodesHash[link.target] || (nodesHash[link.target] = { name: link.target })\n // })\n // const nodes = Object.values(nodesHash)\n // console.log('nodes', nodes)\n // return nodes\n const arr = data.parents || data.children || []\n\n const nodes = [\n {\n is_online: data.is_online,\n name: data.serial_number,\n device_id: data.device_id,\n },\n ...arr.map((el) => ({ ...el, name: el.serial_number })),\n ]\n\n return nodes\n}\n\nexport default function MindMap({ data }) {\n const [wrapperRef, bounds] = useMeasure()\n const mapRef = useRef()\n const linksRef = useRef()\n const nodesRef = useRef()\n const history = useHistory()\n\n const [links, setLinks] = useState(null)\n const [nodes, setNodes] = useState(null)\n useEffect(() => {\n if (data && !links) setLinks(mapLinks(data))\n }, [data])\n useEffect(() => {\n if (links) setNodes(mapNodes(data))\n }, [links])\n\n // const nodes = [\n // { name: 0 },\n // { name: 1 },\n // { name: 2 },\n // { name: 3 },\n // { name: 4 },\n // ]\n\n // const links = [\n // { source: 0, target: 1 },\n // { source: 0, target: 2 },\n // { source: 0, target: 3 },\n // { source: 0, target: 4 },\n // ]\n\n function autoBox() {\n const { x, y, width } = this.getBBox()\n return [0, 0, bounds.width, height]\n // return [bounds.x, bounds.y, bounds.width, bounds.height]\n // return [0, 0, bounds.width, 500]\n }\n\n const simulation = useRef()\n function initMindMap(ref) {\n // .style('font', '10px \"Futura New\"')\n\n const dotSize = 6\n function handleMouseOver(d, i) {\n // Add interactivity\n\n // Use D3 to select element, change color and size\n d3.select(this)\n .attr('r', dotSize * 1.5)\n .attr('cursor', 'pointer')\n }\n function handleMouseOut(d, i) {\n // Use D3 to select element, change color back to normal\n d3.select(this).attr('r', dotSize)\n }\n function handleMouseClick({ device_id }, y) {\n history.push(`/${device_id}`)\n }\n\n const width = 400\n const svg = d3\n .select(ref)\n .style('max-width', '100%')\n .style('font', '15px \"Futura New\"')\n // .attr('width', width)\n // .attr('height', height)\n\n // Per-type markers, as they don't inherit styles.\n svg\n .append('defs')\n .selectAll('marker')\n .data(['suit', 'licensing', 'resolved'])\n .enter()\n .append('marker')\n .attr('id', function (d) {\n return d\n })\n .attr('viewBox', '0 -5 10 10')\n .attr('refX', 15)\n .attr('refY', -1.5)\n .attr('markerWidth', 6)\n .attr('markerHeight', 6)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-5L10,0L0,5')\n .attr('fill', '#333')\n\n function linkArc(d) {\n const dx = d.target.x - d.source.x,\n dy = d.target.y - d.source.y,\n dr = Math.sqrt(dx * dx + dy * dy)\n return (\n 'M' +\n d.source.x +\n ',' +\n d.source.y +\n 'A' +\n dr +\n ',' +\n dr +\n ' 0 0,1 ' +\n d.target.x +\n ',' +\n d.target.y\n )\n }\n\n function transform(d) {\n return 'translate(' + d.x + ',' + d.y + ')'\n }\n\n const path = svg\n .append('g')\n .selectAll('path')\n .data(links)\n .enter()\n .append('path')\n .attr('stroke', '#333')\n .attr('fill', 'none')\n .attr('marker-end', function (d) {\n // return 'url(#' + d.type + ')'\n return `url('#resolved')`\n })\n\n function dragstarted(d) {\n if (!d3.event.active) simulation.current.alphaTarget(0.3).restart()\n d.fx = d.x\n d.fy = d.y\n }\n function dragged(d) {\n d.fx = d3.event.x\n d.fy = d3.event.y\n }\n function dragended(d) {\n if (!d3.event.active) simulation.current.alphaTarget(0)\n d.fx = null\n d.fy = null\n }\n const circle = svg\n .append('g')\n .selectAll('circle')\n .data(nodes)\n .enter()\n .append('circle')\n .attr('fill', ({ is_online }) => (is_online ? green : red))\n .attr('r', dotSize)\n .on('mouseover', handleMouseOver)\n .on('mouseout', handleMouseOut)\n .on('click', handleMouseClick)\n .call(\n d3\n .drag()\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended),\n )\n\n const text = svg\n .append('g')\n .selectAll('text')\n .data(nodes)\n .enter()\n .append('text')\n .attr('x', 8)\n .attr('y', '.31em')\n .text(function (d) {\n return d.name\n })\n\n function updateLinks() {\n path.attr('d', linkArc)\n }\n\n function updateNodes() {\n circle.attr('transform', transform)\n text.attr('transform', transform)\n }\n\n function ticked() {\n updateLinks()\n updateNodes()\n }\n\n simulation.current = d3\n .forceSimulation(nodes)\n .force('center', d3.forceCenter(bounds.width / 2, bounds.height / 2))\n .force('link', d3.forceLink().links(links).distance(60))\n .force('charge', d3.forceManyBody().strength(-300))\n .on('tick', ticked)\n\n svg.attr('viewBox', autoBox)\n }\n\n useEffect(() => {\n // d3.select(mapRef.current)\n // .datum(myData)\n // .call(chart)\n\n if (mapRef.current && links && nodes) {\n initMindMap(mapRef.current)\n }\n }, [links, nodes])\n\n useEffect(() => {\n d3.select(mapRef.current).attr('viewBox', autoBox)\n if (simulation.current) {\n simulation.current.force(\n 'center',\n d3.forceCenter(bounds.width / 2, bounds.height / 2),\n )\n }\n }, [bounds])\n\n return (\n \n \n
\n )\n}\n","import { useCallback, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\n\nexport default function useMeasure() {\n const [bounds, set] = useState({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n })\n\n const [observer] = useState(\n () =>\n new ResizeObserver(([entry]) => {\n if (entry) {\n set(entry.contentRect)\n // set(entry.target.getBoundingClientRect())\n }\n }),\n )\n\n const ref = useCallback(\n node => {\n observer.disconnect()\n if (node) {\n observer.observe(node)\n }\n },\n [observer],\n )\n\n return [ref, bounds]\n}\n","import React, { Component } from 'react'\nimport {\n Accordion,\n Container,\n Icon,\n Form,\n Input,\n Button,\n} from 'semantic-ui-react'\nimport styled from 'styled-components'\nimport wrapCategory from 'components/categories/wrapCategory'\n\nimport { yellow } from 'theme.js'\nimport { connect } from 'react-redux'\nimport { withRouter } from 'react-router-dom'\nimport MindMap from '../global/MindMap'\n\nconst Wrapper = styled.div`\n .title {\n &:hover {\n color: white !important;\n background: ${yellow};\n }\n\n &.active {\n color: white !important;\n background: ${yellow};\n }\n }\n\n .content {\n &.active {\n background: ${yellow};\n }\n }\n`\n\nclass Cluster extends Component {\n render() {\n const { activeIndex, handleClick } = this.props\n return (\n \n \n \n Кластер\n \n \n\n \n \n )\n }\n}\n\nconst mapStateToProps = ({ device }) => ({\n shadowDevice: device.shadowDevice,\n})\n\nexport default connect(mapStateToProps)(withRouter(wrapCategory(Cluster)))\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { Redirect, withRouter } from 'react-router-dom'\nimport styled from 'styled-components'\nimport { Grid, Accordion, Loader } from 'semantic-ui-react'\nimport { toastr } from 'react-redux-toastr'\n\nimport {\n getDeviceInfo,\n getDeviceInfoShadow,\n clearCurrentDeviceInfo,\n} from 'ducks/device'\nimport {\n openDoor,\n uploadFirmware,\n updateDeviceSounds,\n clearDeviceStatus,\n startEmergency,\n resetIntercom,\n resetDeviceCamera,\n} from 'ducks/deviceActions'\n\nimport DevicePageHeader from './DevicePageHeader'\nimport Poll from 'components/categories/Poll'\nimport Social from 'components/categories/Social'\nimport Emergency from 'components/categories/Emergency'\nimport GeneralSettings from 'components/categories/GeneralSettings'\nimport FlatsListing from 'components/categories/FlatsListing'\nimport KeysListing from 'components/categories/KeysListing'\nimport AccessCodesListing from 'components/categories/AccessCodesListing'\nimport Firmware from 'components/categories/Firmware'\nimport LogsListing from 'components/categories/LogsListing'\nimport StandardSounds from 'components/categories/StandardSounds'\nimport SIP from 'components/categories/SIP'\nimport Navbar from 'components/global/Navbar'\nimport Network from 'components/categories/Network'\nimport Stickies from '../global/Stickies'\n\nimport Cluster from 'components/categories/Cluster'\n\nconst DevicePageStyled = styled.div`\n min-height: 100vh;\n`\n\nconst copyToClipboard = (content, notification) => {\n // copy to clipboard\n const el = document.createElement('textarea')\n el.value = content\n document.body && document.body.appendChild(el)\n el.select()\n document.execCommand('copy')\n document.body && document.body.removeChild(el)\n toastr.info(notification)\n}\n\nclass DevicePage extends Component {\n state = { activeIndex: -1, isOpen: false, doorDuration: 5 }\n\n componentDidMount() {\n const { match, history } = this.props\n this.props.getDeviceInfo(match.params.id, history)\n this.props.getDeviceInfoShadow(match.params.id)\n }\n\n componentWillUnmount() {\n this.props.clearCurrentDeviceInfo()\n }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n handleDoorDurationChange = (e, { value }) =>\n this.setState({ doorDuration: value })\n\n onStartEmergency = (e) => {\n this.props.startEmergency(this.props.currentDevice.device_id)\n }\n\n onResetIntercom = (e) => {\n this.props.resetIntercom(this.props.currentDevice.device_id)\n }\n\n onResetDeviceCamera = () => {\n this.props.resetDeviceCamera(this.props.currentDevice.device_id)\n }\n\n onOpen = (e) => {\n this.props.openDoor({\n id: this.props.currentDevice.device_id,\n duration: this.state.doorDuration,\n })\n this.setState({ isOpen: true })\n setTimeout(\n () => this.setState({ isOpen: false }),\n this.state.doorDuration * 1000,\n )\n }\n\n updateSounds = (soundType, startTime, endTime, file) => {\n this.props.updateDeviceSounds({\n id: this.props.currentDevice.device_id,\n soundType,\n startTime,\n endTime,\n file,\n })\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.success) {\n toastr.success('Успех!', nextProps.success)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n if (nextProps.error) {\n toastr.error('Что-то пошло не так...', nextProps.error)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n return prevState\n }\n\n copyStreamUrl = () => {\n const { currentDevice } = this.props\n if (!currentDevice) return\n\n // copy to clipboard\n copyToClipboard(\n currentDevice.video.stream.rtsp,\n 'Ссылка на камеру была успешно скопирована',\n )\n }\n\n copyDeviceSerial = () => {\n const { currentDevice } = this.props\n if (!currentDevice) return\n\n // copy to clipboard\n copyToClipboard(\n currentDevice.motherboard_id,\n 'Серийник был успешно скопирован',\n )\n }\n\n render() {\n const { match, currentDevice, shadowDevice, sounds } = this.props\n const { songOptions } = this.state\n\n if (!match.params.id) {\n return \n \n
\n \n )\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n }\n}\n\nconst mapStateToProps = ({ device, deviceActions }) => ({\n currentDevice: device.currentDevice,\n shadowDevice: device.shadowDevice,\n fetched: device.fetched,\n sounds: device.sounds,\n success: deviceActions.success || device.success,\n error: deviceActions.error || device.error,\n})\n\nexport default connect(mapStateToProps, {\n getDeviceInfo,\n getDeviceInfoShadow,\n openDoor,\n uploadFirmware,\n clearDeviceStatus,\n updateDeviceSounds,\n startEmergency,\n resetIntercom,\n clearCurrentDeviceInfo,\n resetDeviceCamera,\n})(withRouter(DevicePage))\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0 0h24v24H0z\",\n fill: \"none\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2zm13.54-7.1l-.71-.7L13 9.29V5h-1v6h6v-1h-4.15z\"\n});\n\nvar SvgPhone = function SvgPhone(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 24 24\",\n fill: \"currentColor\",\n width: \"18px\",\n height: \"18px\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgPhone, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/phone.1e05fbfd.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0 0h24v24H0z\",\n fill: \"none\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM20 4v-.5C20 2.12 18.88 1 17.5 1S15 2.12 15 3.5V4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-.8 0h-3.4v-.5c0-.94.76-1.7 1.7-1.7s1.7.76 1.7 1.7V4z\"\n});\n\nvar SvgPhoneLocked = function SvgPhoneLocked(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 24 24\",\n fill: \"currentColor\",\n width: \"18px\",\n height: \"18px\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgPhoneLocked, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/phone_locked.3ae8c98a.svg\";\nexport { ForwardRef as ReactComponent };","import React, { Component } from 'react'\nimport {\n Button,\n Table,\n Icon,\n Dropdown,\n Input,\n Popup,\n Form,\n Modal,\n Header,\n} from 'semantic-ui-react'\nimport { RIEInput } from 'riek'\nimport Slider, { createSliderWithTooltip } from 'rc-slider'\nimport 'theme/slider.css'\nimport { pink } from 'theme'\nimport { ReactComponent as Phone } from 'assets/phone.svg'\nimport { ReactComponent as PhoneBlocked } from 'assets/phone_locked.svg'\n\nconst SliderWithTooltip = createSliderWithTooltip(Slider)\n\nconst sipOptions = [\n // { key: '1', text: 'после звонка', value: 'after_call' },\n { key: '1', text: 'да', value: 'direct' },\n { key: '2', text: 'нет', value: 'none' },\n]\n\n// const flatOptions = [...Array(10).keys()].map((i) => ({\n// key: i,\n// text: i,\n// value: i,\n// }))\n\nclass Flat extends Component {\n state = {\n blocked: this.props.flat.blocked,\n redirection: this.props.flat.redirection,\n sip_contact: this.props.flat.sip_contact,\n volume: Number(this.props.flat.sound_vol),\n modified: false,\n alias: this.props.flat?.analog_settings?.alias,\n confirmModalOpen: false,\n analogLineBlock: this.props.flat?.analog_settings?.blocked || false,\n }\n\n onBlockToggle = (e) =>\n this.setState({ blocked: !this.state.blocked, modified: true })\n\n onAnalogBlockToggle = (e) =>\n this.setState({\n analogLineBlock: !this.state.analogLineBlock,\n modified: true,\n })\n\n handleChange = (e, { value }) =>\n this.setState({ redirection: value, modified: true })\n\n onSIPChange = (e) => {\n this.setState(e)\n this.setState({ modified: true })\n }\n\n updateFlatInfo = () => {\n this.props.updateFlatInfo({\n uuid: this.props.id,\n num: Number.parseInt(this.props.flat.num, 10),\n blocked: this.state.blocked,\n redirection: this.state.redirection,\n sip_contact: this.state.sip_contact,\n sound_vol: this.state.volume,\n analog_settings: {\n alias: Number(this.state.alias),\n blocked: this.state.analogLineBlock,\n },\n })\n this.setState({ modified: false })\n }\n\n onConfirm = () => {\n const { alias, modified } = this.state\n const { firstFlat, lastFlat } = this.props\n\n if (modified) {\n this.updateFlatInfo()\n }\n }\n\n onVolumeChange = (volume) =>\n this.setState({\n volume,\n modified: true,\n })\n\n handleModalClose = () => this.setState({ confirmModalOpen: false })\n\n render() {\n const {\n blocked,\n redirection,\n sip_contact,\n modified,\n volume,\n analog_settings,\n } = this.state\n\n const isVirtual =\n Number(this.props.flat.num) < this.props.firstFlat ||\n Number(this.props.flat.num) > this.props.lastFlat\n\n return (\n \n Show Modal}\n open={this.state.confirmModalOpen}\n onClose={this.handleModalClose}\n basic\n size=\"small\">\n \n \n Вы действительно хотите удалить квартиру? \n \n \n \n Не удалять\n \n {\n this.props.handleDeleteFlat()\n this.handleModalClose()\n }}\n color=\"red\"\n circular>\n Удалить квартиру\n \n \n \n\n \n \n this.props.lineTest({\n deviceUuid: this.props.id,\n flat: this.props.flat.num,\n })\n }\n color=\"pink\"\n style={{ marginLeft: 8 }}\n />\n }\n content=\"Диагностика линии\"\n position=\"center\"\n />\n \n {this.state.analogLineBlock ? (\n this.setState({ confirmModalOpen: true })}\n color=\"pink\"\n style={{ marginLeft: 8 }}\n />\n \n \n \n №{this.props.flat.num} \n \n \n \n \n \n\n {!this.props.isIP && (\n <>\n \n \n \n \n this.setState({ alias: value, modified: true })\n }\n placeholder={`Номер квартиры`}\n style={{ maxWidth: 80 }}\n type=\"number\"\n size=\"mini\"\n value={this.state.alias}\n />\n \n \n )}\n\n \n {modified && (\n \n Применить\n \n )}\n \n \n )\n }\n}\n\nexport default Flat\n","import React, { useState } from 'react'\nimport {\n Modal,\n Header,\n Button,\n Icon,\n Table,\n Popup,\n Input,\n Form,\n Dropdown,\n Checkbox,\n} from 'semantic-ui-react'\nimport Flat from 'components/listings/Flat'\nimport { useParams } from 'react-router-dom'\nimport * as Yup from 'yup'\nimport { Formik, Field, Form as FormikForm } from 'formik'\nimport styled from 'styled-components'\nimport { RIEInput } from 'riek'\nimport Slider, { createSliderWithTooltip } from 'rc-slider'\nimport 'theme/slider.css'\nimport { pink } from 'theme'\nimport { useDispatch } from 'react-redux'\nimport {\n updateFlatInfo,\n clearDeviceStatus,\n lineTest,\n} from 'ducks/deviceActions'\nimport { getDeviceInfoShadow } from 'ducks/device'\n\nconst SliderWithTooltip = createSliderWithTooltip(Slider)\n\nconst FormField = (props) => Show Modal}\n open={open}\n onClose={onClose}\n // basic\n size=\"small\"\n >\n \n \n \n {({ values, setFieldValue }) => (\n \n \n Номер квартиры \n \n \n {\n setFieldValue('blocked', option.checked)\n }}\n />\n \n \n Переадресация SIP \n\n {\n setFieldValue('redirection', option.value)\n }}\n >\n \n\n \n Адрес переадресации \n \n \n Громкость звонка \n setFieldValue('sound_vol', vol)}\n />\n \n \n Переадресация аналоговой линии \n \n \n \n Закрыть\n \n\n \n Создать\n \n \n \n )}\n \n \n \n )\n}\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport {\n Container,\n Table,\n Loader,\n Button,\n Modal,\n Header,\n} from 'semantic-ui-react'\nimport { Redirect } from 'react-router-dom'\nimport { getDeviceInfoShadow, clearCurrentDeviceInfo } from 'ducks/device'\nimport {\n updateFlatInfo,\n clearDeviceStatus,\n lineTest,\n deleteFlat,\n deleteAllFlats,\n} from 'ducks/deviceActions'\nimport Flat from 'components/listings/Flat'\nimport styled from 'styled-components'\nimport Navbar from 'components/global/Navbar'\nimport { toastr } from 'react-redux-toastr'\nimport AddVirtualFlatModal from 'components/modals/AddVirtualFlatModal'\nimport FlatsGeneral from 'components/forms/FlatsGeneral'\n\nconst Wrapper = styled.div`\n i {\n cursor: pointer;\n }\n`\n\n// const makeFlatOptions = (firstFlat, lastFlat) => {\n// return Array.from(\n// { length: lastFlat - firstFlat + 1 },\n// (v, k) => k + firstFlat,\n// ).map((flatNum) => ({\n// key: flatNum,\n// text: flatNum,\n// value: flatNum,\n// }))\n// }\n\nclass FlatsPage extends Component {\n state = {\n addVirtualFlatModal: false,\n confirmModalOpen: false,\n }\n\n componentDidMount() {\n const { match } = this.props\n this.props.getDeviceInfoShadow(match.params.id)\n }\n\n componentWillUnmount() {\n this.props.dispatch(clearCurrentDeviceInfo())\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.success) {\n toastr.success('Успех!', nextProps.success)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n if (nextProps.error) {\n toastr.error('Что-то пошло не так...', nextProps.error)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n return prevState\n }\n\n handleModalClose = () => this.setState({ confirmModalOpen: false })\n\n // componentDidUpdate() {\n // if (\n // this.state.flatOptions.length < 1 &&\n // this.props.firstFlat &&\n // this.props.lastFlat\n // ) {\n // this.setState({\n // flatOptions: makeFlatOptions(this.props.firstFlat, this.props.lastFlat),\n // })\n // }\n // }\n\n toggleAddVirtualFlatModal = () => {\n this.setState((prev) => ({\n addVirtualFlatModal: !prev.addVirtualFlatModal,\n }))\n }\n\n render() {\n const {\n match,\n flats,\n updateFlatInfo,\n firstFlat,\n lastFlat,\n lineTest,\n } = this.props\n\n if (!match.params.id) {\n return \n
\n )\n }\n\n return (\n \n \n \n Добавить квартиру\n \n\n Show Modal}\n open={this.state.confirmModalOpen}\n onClose={this.handleModalClose}\n basic\n size=\"small\"\n >\n \n \n Вы действительно хотите удалить все квартиры? \n \n \n \n Не удалять\n \n {\n this.props.deleteAllFlats(this.props.match.params.id)\n this.handleModalClose()\n }}\n color=\"red\"\n circular\n >\n Удалить все квартиры\n \n \n \n {this.props.isIP && (\n this.setState({ confirmModalOpen: true })}>\n Удалить все квартиры\n \n )}\n \n \n \n Квартира \n \n Переадресация SIP\n \n \n Адрес переадресации SIP\n \n {!this.props.isIP && (\n <>\n \n Громкость звонка\n \n \n Переадресация аналоговой линии\n \n \n )}\n \n \n\n \n {flats.map((flat, i) => (\n \n this.props.deleteFlat(this.props.match.params.id, flat.num)\n }\n />\n ))}\n \n
\n \n \n )\n }\n}\n\nconst mapStateToProps = (state) => ({\n flats:\n state.device.shadowDevice &&\n state.device.shadowDevice.properties &&\n state.device.shadowDevice.properties.flats_config.flats,\n firstFlat: state.device.shadowDevice?.properties?.base?.flats_first,\n lastFlat: state.device.shadowDevice?.properties?.base?.flats_last,\n error: state.deviceActions.error,\n success: state.deviceActions.success,\n isIP: state.device?.shadowDevice?.mode === 'ip',\n})\n\nexport default connect(mapStateToProps, {\n getDeviceInfoShadow,\n updateFlatInfo,\n clearDeviceStatus,\n lineTest,\n deleteAllFlats,\n deleteFlat,\n})(FlatsPage)\n","import React from 'react'\nimport { List, Icon } from 'semantic-ui-react'\n\nconst ListItemStyle = {\n padding: '1.5rem',\n}\n\nconst Key = ({ hex, onClick, uuid }) => (\n \n \n onClick({ uuid, hex })} />\n \n {hex} \n \n)\n\nexport default Key\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport {\n Grid,\n List,\n Container,\n Loader,\n Form,\n Message,\n Pagination,\n Button,\n Icon,\n Input,\n Popup,\n} from 'semantic-ui-react'\nimport { Redirect } from 'react-router-dom'\nimport { toastr } from 'react-redux-toastr'\nimport { getDeviceInfoShadow, clearCurrentDeviceInfo } from 'ducks/device'\nimport {\n addKey,\n clearDeviceStatus,\n removeKey,\n downloadKeys,\n} from 'ducks/deviceActions'\nimport Dropzone from 'react-dropzone'\nimport Key from 'components/listings/Key'\nimport Navbar from 'components/global/Navbar'\n\nconst KEYS_PER_PAGE = 10\n\nclass KeysPage extends Component {\n state = {\n newKey: '',\n activePage: 1,\n totalPages: 1,\n }\n\n componentDidMount() {\n const { match } = this.props\n this.props.getDeviceInfoShadow(match.params.id)\n }\n\n componentWillUnmount() {\n this.props.dispatch(clearCurrentDeviceInfo())\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.success) {\n nextProps.getDeviceInfoShadow(nextProps.match.params.id)\n toastr.success('Успех!', nextProps.success)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n return { newKey: '', acceptedFile: null }\n }\n if (nextProps.keys) {\n return {\n totalPages: Math.ceil(nextProps.keys.length / KEYS_PER_PAGE),\n currentKeys: nextProps.keys.slice(\n prevState.activePage * KEYS_PER_PAGE - KEYS_PER_PAGE,\n prevState.activePage * KEYS_PER_PAGE,\n ),\n }\n }\n if (nextProps.error) {\n toastr.error('Что-то пошло не так...', nextProps.error)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n return prevState\n }\n\n onChange = e => {\n this.setState({ [e.target.name]: e.target.value })\n }\n\n onAdd = e => {\n const { match } = this.props\n if (this.state.acceptedFile) {\n this.props.addKey({\n uuid: match.params.id,\n file: this.state.acceptedFile[0],\n })\n } else {\n this.props.addKey({\n uuid: match.params.id,\n key: this.state.newKey,\n })\n }\n }\n\n changePage = (e, { activePage }) => {\n this.setState({\n activePage,\n currentKeys: this.props.keys.slice(\n activePage * KEYS_PER_PAGE - KEYS_PER_PAGE,\n activePage * KEYS_PER_PAGE,\n ),\n })\n }\n\n downloadKeys = () => {\n const {\n match: {\n params: { id },\n },\n } = this.props\n this.props.downloadKeys(id)\n }\n\n render() {\n const { match, collectingKeys } = this.props\n const { currentKeys } = this.state\n\n if (!match.params.id) {\n return \n
\n )\n }\n\n return (\n \n
\n
\n \n \n \n {!collectingKeys && (\n \n \n {collectingKeys ? (\n \n \n \n В данный момент включен автосбор. Для добавления и удаления\n ключей выключите Автосбор\n \n \n \n ) : (\n \n \n \n \n\n \n {currentKeys.length < 1 && (\n \n Отсутствуют ключи \n \n )}\n {currentKeys.map((hex, ind) => (\n
\n \n \n \n \n \n )}\n \n \n
\r\n \r\n \r\n \r\n Страница не найдена.\r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport default NotFound\r\n","import React from 'react'\nimport { Table, Dropdown } from 'semantic-ui-react'\n\nconst Emergency = ({ handleChange, emergency, position, options }) => (\n \n \n {position} \n \n \n handleChange(e, props, position)}\n value={emergency[position]}\n options={options}\n />\n \n \n)\n\nexport default Emergency\n","import React, { Component } from 'react'\nimport { Container, Loader, Table, Button } from 'semantic-ui-react'\nimport { connect } from 'react-redux'\nimport Emergency from 'components/listings/Emergency'\nimport { getDeviceInfo } from 'ducks/device'\nimport styled from 'styled-components'\nimport Navbar from 'components/global/Navbar'\n\nconst DevicePageStyled = styled.div`\n min-height: 100vh;\n\n .loading {\n height: 100vh;\n width: 100vw;\n }\n`\n\nclass EmergencyPage extends Component {\n state = {}\n\n componentDidMount() {\n const { match } = this.props\n this.props.getDeviceInfo(match.params.id)\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (\n nextProps.currentDevice &&\n nextProps.currentDevice.properties &&\n nextProps.sounds\n ) {\n const songOptions = nextProps.sounds.map(sound => ({\n text: sound.title,\n key: sound.id,\n value: sound.url\n }))\n return {\n emergency: nextProps.currentDevice.properties.emergency,\n songOptions\n }\n }\n return prevState\n }\n\n handleChange = (e, { value }, position) =>\n this.setState({ emergency: { ...this.state.emergency, [position]: value } })\n\n onSubmit = e => false\n\n render() {\n if (!this.state.emergency || !this.state.songOptions) {\n return (\n \n \n
\n \n )\n }\n\n return (\n \n
\n\n
\n \n \n \n # \n Мелодия \n \n \n\n \n {Object.keys(this.state.emergency).map(position => (\n \n\n \n \n \n \n Обновить данные\n \n \n \n \n
\n \n
\n \n {date} \n \n \n {entry.module}\n \n \n {entry.data ? actions[entry.data.action] : 'None'}\n \n \n \n \n {JSON.stringify(entry, null, 2)}\n \n \n \n \n )\n default:\n return (\n \n \n {date} \n \n \n {modules[entry.module]}\n \n \n {entry.data ? actions[entry.data.action] : 'None'}\n \n \n \n \n {JSON.stringify(entry, null, 2)}\n \n \n \n \n )\n }\n}\n\nexport default LogEntry\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from 'semantic-ui-react'\n\nconst Wrapper = styled.div`\n display: flex;\n position: fixed;\n height: 100%;\n width: 80px;\n left: 0;\n top: 0;\n background: #fbbd0823;\n z-index: 100;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n visibility: ${() => console.log(window.scrollY)};\n\n &:hover {\n background: #fbbd0850;\n }\n`\n\nconst GoToTop = () => (\n window.scrollTo(0, 0)}>\n \n)\n\nexport default GoToTop\n","import React, { Component, Fragment } from 'react'\nimport {\n Dropdown,\n Grid,\n Container,\n Loader,\n Table,\n Button,\n Message,\n} from 'semantic-ui-react'\nimport { connect } from 'react-redux'\nimport LogEntry from 'components/listings/LogEntry'\nimport {\n getDeviceLogs,\n getDeviceInfoShadow,\n clearCurrentDeviceInfo,\n} from 'ducks/device'\nimport {\n clearDeviceStatus,\n getNetInfo,\n getURLInfo,\n getDeviceKeysCount,\n} from 'ducks/deviceActions'\nimport styled from 'styled-components'\nimport Navbar from 'components/global/Navbar'\nimport GoToTop from 'components/global/GoToTop'\n\nconst DevicePageStyled = styled.div`\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n`\n\nconst options = [\n { key: '1', text: '10', value: 10 },\n { key: '2', text: '25', value: 25 },\n { key: '3', text: '50', value: 50 },\n { key: '4', text: '75', value: 75 },\n]\n\nclass LogsPage extends Component {\n state = {\n logsQty: options[0].value,\n showButtons: false,\n error: false,\n activePage: 1,\n }\n\n componentDidMount() {\n const { match } = this.props\n this.props.getDeviceInfoShadow(match.params.id)\n this.props.getDeviceLogs(\n match.params.id,\n this.state.logsQty,\n this.state.activePage,\n )\n window.addEventListener('keydown', this.showButtons)\n // this._updateIntervalId = window.setInterval(this.updateDeviceInfo, 1000)\n }\n\n componentWillUnmount() {\n this.props.dispatch(clearDeviceStatus())\n clearInterval(this._updateIntervalId)\n this.props.dispatch(clearCurrentDeviceInfo())\n window.removeEventListener('keydown', this.showButtons)\n }\n\n updateDeviceInfo = async () => {\n const { match } = this.props\n if (this.state.activePage === 1) {\n this.props.getDeviceLogs(\n match.params.id,\n this.state.logsQty,\n this.state.activePage,\n )\n }\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.error) {\n props.dispatch(clearDeviceStatus())\n return { error: true }\n }\n return state\n }\n\n onChange = (e, { value }) =>\n this.setState({\n logsQty: value,\n })\n\n showButtons = e => {\n if (e.keyCode === 16) {\n this.setState({\n showButtons: !this.state.showButtons,\n })\n console.log(this.state.showButtons)\n console.log(e.keyCode)\n }\n }\n\n onClick = e =>\n this.props.getDeviceLogs(\n this.props.match.params.id,\n this.state.logsQty,\n this.state.activePage,\n )\n\n nextPage = e => {\n this.props.getDeviceLogs(\n this.props.match.params.id,\n this.state.logsQty,\n this.state.activePage + 1,\n )\n this.setState({ activePage: this.state.activePage + 1 })\n }\n\n prevPage = e => {\n if (this.state.activePage < 1) {\n return\n }\n this.props.getDeviceLogs(\n this.props.match.params.id,\n this.state.logsQty,\n this.state.activePage - 1,\n )\n this.setState({ activePage: this.state.activePage - 1 })\n }\n\n getNetInfo = () => {\n this.props.getNetInfo({\n deviceUuid: this.props.match.params.id,\n logsQty: this.state.logsQty,\n activePage: this.state.activePage,\n })\n }\n\n getURLInfo = () => {\n this.props.getURLInfo({\n deviceUuid: this.props.match.params.id,\n logsQty: this.state.logsQty,\n activePage: this.state.activePage,\n })\n }\n\n getDeviceKeysCount = () => {\n this.props.getDeviceKeysCount({\n deviceUuid: this.props.match.params.id,\n logsQty: this.state.logsQty,\n activePage: this.state.activePage,\n })\n }\n\n render() {\n const { logs } = this.props\n\n if (this.state.error)\n return (\n \n \n \n Произошла ошибка при загрузке логов панели. Убедитесь, что панель\n зарегистрирована.\n \n \n \n )\n if (!logs.collection || logs.collection.length < 1) {\n return (\n \n \n
\n \n )\n }\n\n return (\n \n
\n
\n\n
\n \n \n \n {this.state.showButtons && (\n \n \n )}\n \n Обновить данные\n \n \n \n\n \n {logs.isFetching ? (\n \n
\n ) : (\n \n \n \n \n Дата\n \n \n Модуль\n \n \n Действие\n \n \n Детали\n \n \n \n\n \n {logs.collection.map((entry, i) => (\n \n\n \n \n \n \n \n \n \n \n {/* */}\n\n {/* */}\n \n
\n )}\n \n \n \n
\n \n \n \n {value.length == 3 ? `0${value}` : value}\n \n \n действует{' '}\n {exp_time ? ` до ${new Date(exp_time).toLocaleString()}` : ' бессрочно'}\n \n \n)\n\nexport default Key\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport {\n Grid,\n List,\n Container,\n Loader,\n Form,\n Message,\n Pagination,\n Button,\n Icon,\n Input,\n Popup,\n} from 'semantic-ui-react'\nimport { Redirect } from 'react-router-dom'\nimport { toastr } from 'react-redux-toastr'\nimport { getDeviceInfoShadow, clearCurrentDeviceInfo } from 'ducks/device'\nimport {\n clearDeviceStatus,\n getDeviceAccessCodes,\n addAccessCode,\n deleteAccessCode,\n} from 'ducks/deviceActions'\nimport Navbar from 'components/global/Navbar'\nimport MaskedInput from 'react-text-mask'\nimport AccessCode from 'components/listings/AccessCode'\n\nconst maskBuilder = (v) => {\n if (!v || v.length == 0) return ['0', /\\d/, /\\d/, /\\d/]\n return v.length >= 4 && v.length <= 5 ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/] : ''\n}\n\nclass AccessCodesPage extends Component {\n state = {\n keyValue: '',\n expTime: '',\n }\n\n componentDidMount() {\n const { match } = this.props\n this.props.getDeviceInfoShadow(match.params.id)\n this.props.getDeviceAccessCodes(match.params.id)\n }\n\n componentWillUnmount() {\n this.props.dispatch(clearCurrentDeviceInfo())\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.success) {\n nextProps.getDeviceInfoShadow(nextProps.match.params.id)\n toastr.success('Успех!', nextProps.success)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n return { newKey: '', acceptedFile: null }\n }\n\n if (nextProps.error) {\n toastr.error('Что-то пошло не так...', nextProps.error)\n setTimeout(() => nextProps.clearDeviceStatus(), 1000)\n }\n return prevState\n }\n\n onChange = (e) => {\n this.setState({ [e.target.name]: e.target.value })\n }\n\n handleSubmit = (e) => {\n e.preventDefault()\n\n this.props.addAccessCode({\n deviceUuid: this.props.match.params.id,\n key: this.state.keyValue,\n expTime: this.state.expTime,\n })\n }\n\n handleDeleteClick = (keyValue) => {\n this.props.deleteAccessCode({\n deviceUuid: this.props.match.params.id,\n key: keyValue,\n })\n }\n\n render() {\n const { match, accessCodes } = this.props\n\n if (!match.params.id) {\n return \n
\n )\n }\n\n return (\n \n
\n
\n \n\n \n {accessCodes.length < 1 && (\n \n Отсутствуют коды доступа \n \n )}\n {accessCodes.map(({ value, exp_time, uuid }) => (\n this.handleDeleteClick(uuid)}\n />\n ))}\n
\n \n
\n
\n )\n }\n\n return (\n \n \n \n \n \n \n \n\n \n {keys.length < 1 && (\n \n Отсутствуют BLE ключи \n \n )}\n {keys.map((hex, ind) => (\n \n this.props.removeBLEKeyRequest(match.params.id, hex)\n }\n />\n ))}\n
\n \n \n \n \n \n
\n )\n }\n}\n\nconst mapStateToProps = ({ device, deviceActions }) => ({\n keys:\n device.shadowDevice.properties && device.shadowDevice.properties.ble_keys,\n})\n\nexport default connect(mapStateToProps, {\n getDeviceInfoShadow,\n addBLEKeyRequest,\n removeBLEKeyRequest,\n})(KeysPage)\n","import React from 'react'\nimport { Route, withRouter, Switch } from 'react-router-dom'\nimport RequireAuth from 'components/global/RequireAuth'\nimport LoginPage from 'components/pages/LoginPage'\nimport HomePage from 'components/pages/HomePage'\nimport DevicePage from 'components/pages/DevicePage'\nimport FlatsPage from 'components/pages/FlatsPage'\nimport KeysPage from 'components/pages/KeysPage'\nimport NotFound from 'components/pages/NotFound'\nimport EmergencyPage from 'components/pages/EmergencyPage'\nimport LogsPage from 'components/pages/LogsPage'\nimport AccessCodesPage from 'components/pages/AccessCodesPage'\nimport BLEKeysPage from 'components/pages/BLEKeysPage'\n\nconst App = () => (\n \n \n)\n\nexport default withRouter(App)\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,\n ),\n)\n\nexport default function register(showUpdateToast) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location)\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl)\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://goo.gl/SC7cgQ',\n )\n })\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl, showUpdateToast)\n }\n })\n }\n}\n\nfunction registerValidSW(swUrl, showUpdateToast) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing\n const waitingServiceWorker = registration.waiting\n\n const handleRefresh = () => {\n showUpdateToast(() => {\n installingWorker.postMessage({ type: 'SKIP_WAITING' })\n window.location.reload()\n })\n }\n\n if (waitingServiceWorker) {\n waitingServiceWorker.addEventListener('statechange', event => {\n if (event.target.state === 'activated') {\n window.location.reload()\n }\n })\n handleRefresh()\n }\n\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.')\n handleRefresh()\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.')\n }\n }\n }\n }\n })\n .catch(error => {\n console.error('Error during service worker registration:', error)\n })\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload()\n })\n })\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl)\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.',\n )\n })\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister()\n })\n }\n}\n","import { combineReducers } from 'redux'\nimport devices from './devices'\nimport auth from './auth'\nimport device from './device'\nimport deviceActions from './deviceActions'\nimport ble from './ble'\nimport { reducer as toastr } from 'react-redux-toastr'\n\nimport { all, fork, spawn } from 'redux-saga/effects'\nimport { authSaga } from './auth'\nimport { devicesSaga } from './devices'\nimport { deviceSagas } from './device'\nimport { deviceActionsSagas } from './deviceActions'\nimport { bleKeysSagas } from './ble'\n\nexport default combineReducers({\n auth,\n devices,\n device,\n deviceActions,\n toastr,\n ble,\n})\n\n//fork for \"mission critical\" tasks, i.e. \"if this task fails, please crash the whole app\",\n//and spawn for \"not critical\" tasks,\nexport function* rootSaga() {\n yield all([\n fork(authSaga),\n spawn(devicesSaga),\n spawn(deviceSagas),\n fork(deviceActionsSagas),\n fork(bleKeysSagas),\n ])\n}\n","import { createStore, applyMiddleware } from 'redux'\n// import throttle from 'lodash/throttle'\nimport rootReducer from 'ducks/index'\nimport { loadState } from './localStorage'\nimport { composeWithDevTools } from 'redux-devtools-extension'\nimport createSagaMiddleware from 'redux-saga'\nimport { rootSaga } from 'ducks/index'\n\nconst sagaMiddleware = createSagaMiddleware()\n\nconst configureStore = () => {\n const persistedState = loadState()\n const middleware = [sagaMiddleware]\n const store = createStore(\n rootReducer,\n persistedState,\n composeWithDevTools(applyMiddleware(...middleware))\n )\n\n sagaMiddleware.run(rootSaga)\n\n return store\n}\n\nexport default configureStore\n","import React, { Fragment } from 'react'\nimport ReactDOM from 'react-dom'\nimport App from 'components/App'\nimport registerServiceWorker from './serviceWorker'\nimport { BrowserRouter } from 'react-router-dom'\nimport { Provider } from 'react-redux'\nimport configureStore from 'store/configureStore'\nimport ReduxToastr, { toastr } from 'react-redux-toastr'\nimport 'theme/semantic.css'\nimport 'react-redux-toastr/lib/css/react-redux-toastr.min.css'\nimport 'index.css'\n\nconst store = configureStore()\n//store.dispatch({ type: 'CLEAR' })\n\nconst Root = () => (\n \n \n \n \n \n \n)\n\nReactDOM.render(