\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nSlider.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n * See [CSS API](#css-api) below for more details.\r\n */\r\n classes: PropTypes.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),\r\n /**\r\n * If `true`, the slider will be disabled.\r\n */\r\n disabled: PropTypes.bool,\r\n /**\r\n * The maximum allowed value of the slider.\r\n * Should not be equal to min.\r\n */\r\n max: PropTypes.number,\r\n /**\r\n * The minimum allowed value of the slider.\r\n * Should not be equal to max.\r\n */\r\n min: PropTypes.number,\r\n /**\r\n * Callback function that is fired when the slider's value changed.\r\n */\r\n onChange: PropTypes.func,\r\n /**\r\n * Callback function that is fired when the slide has stopped moving.\r\n */\r\n onDragEnd: PropTypes.func,\r\n /**\r\n * Callback function that is fired when the slider has begun to move.\r\n */\r\n onDragStart: PropTypes.func,\r\n /**\r\n * If `true`, the slider will be reversed.\r\n */\r\n reverse: PropTypes.bool,\r\n /**\r\n * The granularity the slider can step through values.\r\n */\r\n step: PropTypes.number,\r\n /**\r\n * @ignore\r\n */\r\n theme: PropTypes.object.isRequired,\r\n /**\r\n * The value of the slider.\r\n */\r\n value: PropTypes.number.isRequired,\r\n /**\r\n * If `true`, the slider will be vertical.\r\n */\r\n vertical: PropTypes.bool,\r\n};\r\n\r\nSlider.defaultProps = {\r\n min: 0,\r\n max: 100,\r\n component: 'div',\r\n};\r\n\r\nexport default withStyles(styles, { name: 'MuiSlider', withTheme: true })(Slider);","/**\n * Copyright 2018 bluefox this.toggleState(e)} style={Object.assign({}, styles.button, styles.buttonBig, this.props.useBright ? {color: 'white'} : {color: 'black'}, this.props.style || {})}>\r\n {this.state.visible ? : }\r\n
);\r\n } else {\r\n const iconStyle = {marginTop: 1, verticalAlign: 'top'};\r\n return (\r\n this.toggleState(e)} className=\"small-visibility-button\">\r\n {this.state.visible ? : }\r\n
\r\n )\r\n }\r\n }\r\n}\r\n\r\nexport default SmallVisibilityButton","import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\n\nconst styles = {\n state: {\n stroke: 'currentColor',\n fill: 'none',\n strokeWidth: 12,\n strokeLinejoin: 'round',\n strokeMiterlimit: 10\n }\n};\n\nclass IconHome extends Component {// override constructor\n static propTypes = {\n isOn: PropTypes.bool.isRequired,\n };\n\n constructor(props) {\n super(props, true)\n }\n\n\n render() {\n return (\n \n )\n }\n}\n\n\n// which makes this reusable component for other views\nexport default IconHome;","/**\n * Copyright 2018 bluefox - \n {children}\n
\n \n {this.getListHeader(useBright)}\n
\n );\n } else {\n return (\n - {list}
\n \n {this.getListHeader(useBright)}\n \n
\n );\n }\n }\n}\nexport default withStyles(myStyles)(MenuList);\n","/**\n * Copyright 2018 bluefox - \n
\n this.handleChange(e.target.value)}\n margin=\"normal\"\n />\n this.handleChange('')} style={Object.assign({}, styles.delButton, color ? {} : {opacity: 0, cursor: 'default'})}> \n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport ButtonBase from '@material-ui/core/ButtonBase';\n\nconst styles = theme => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n minWidth: 300,\n width: '100%',\n overflowX: 'hidden',\n overflowY: 'auto',\n marginLeft: 22\n },\n image: {\n position: 'relative',\n height: 200,\n /*[theme.breakpoints.down('xs')]: {\n width: '100% !important', // Overrides inline-style\n height: 100,\n },*/\n '&:hover, &$focusVisible': {\n zIndex: 1,\n '& $imageBackdrop': {\n opacity: 0.15,\n },\n '& $imageMarked': {\n opacity: 0,\n },\n '& $imageTitle': {\n border: '4px solid currentColor',\n },\n },\n },\n focusVisible: {},\n imageButton: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: theme.palette.common.white,\n },\n imageSrc: {\n position: 'absolute',\n left: 5,\n right: 5,\n top: 5,\n bottom: 5,\n backgroundSize: 'cover',\n backgroundPosition: 'center 40%',\n color: 'white'\n },\n imageBackdrop: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n backgroundColor: theme.palette.common.black,\n opacity: 0.4,\n transition: theme.transitions.create('opacity'),\n },\n imageTitle: {\n position: 'relative',\n padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`,\n },\n imageMarked: {\n height: 3,\n width: 18,\n backgroundColor: theme.palette.common.white,\n position: 'absolute',\n bottom: -2,\n left: 'calc(50% - 9px)',\n transition: theme.transitions.create('opacity'),\n },\n});\n\nclass ImageList extends React.Component {\n constructor(props) {\n super(props);\n this.classes = props.classes;\n }\n onSelect(image, i) {\n this.props.onSelect && this.props.onSelect(image);\n }\n\n render() {\n return (\n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Dropzone from 'react-dropzone';\n\nimport {MdDelete as IconDelete} from 'react-icons/md';\nimport {MdFileUpload as IconOpen} from 'react-icons/md';\nimport {MdClose as IconClose} from 'react-icons/md';\nimport {MdCameraAlt as IconCam} from 'react-icons/md';\n\nimport Button from '@material-ui/core/Button';\nimport PropTypes from 'prop-types';\nimport ImageList from './ImageList';\nimport ReactCrop/*, { makeAspectCrop } */from 'react-image-crop';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport 'react-image-crop/dist/ReactCrop.css'\n\n// Icons\nimport IconList from '../../icons/icons';\nimport I18n from \"../../i18n\";\n\nconst style = {\n label: {\n color: 'rgba(0, 0, 0, 0.54)',\n fontSize: 12,\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif',\n lineHeight: 1,\n paddingTop: 10,\n paddingBottom: 5\n },\n dropzone: {\n marginTop: 20,\n width: '100%',\n height: 65,\n border: '2px dashed black',\n textAlign: 'center',\n paddingTop: 45,\n borderRadius: 10\n },\n dropzoneRejected: {\n border: '2px dashed red',\n },\n dropzoneAccepted: {\n border: '2px dashed green',\n },\n deleteIcon: {\n color: 'white',\n opacity: 0.9,\n position: 'absolute',\n top: 10,\n right: 10\n },\n openIcon: {\n color: 'white',\n opacity: 0.9,\n position: 'absolute',\n right: 10,\n zIndex: 10\n },\n camIcon: {\n position: 'absolute',\n bottom: 8,\n right: 3,\n zIndex: 10,\n cursor: 'pointer'\n },\n imageBar: {\n bar: {\n\n },\n imageButton: {\n\n },\n image: {\n\n }\n },\n 'chart-dialog': {\n zIndex: 2101\n },\n 'chart-dialog-paper': {\n width: 'calc(100% - 2em)',\n maxWidth: 'calc(100% - 2em)',\n height: 'calc(100% - 2em)',\n maxHeight: 'calc(100% - 2em)'\n },\n 'chart-dialog-img': {\n\n },\n 'chart-dialog-content': {\n width: 'calc(100% - 4em)',\n height: 'calc(100% - 4em)',\n cursor: 'pointer',\n textAlign: 'center',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n },\n};\n\nclass ImageSelector extends React.Component {\n static propTypes = {\n image: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]).isRequired,\n onUpload: PropTypes.func.isRequired,\n maxSize: PropTypes.number,\n height: PropTypes.number, // height of the shown image\n images: PropTypes.array,\n icons: PropTypes.bool,\n label: PropTypes.string,\n accept: PropTypes.string,\n textAccepted: PropTypes.string,\n textRejected: PropTypes.string,\n textWaiting: PropTypes.string,\n aspect: PropTypes.number // if set, the crop function will be called\n };\n\n constructor(props) {\n super(props);\n const state = {\n imageStatus: 'wait',\n image: this.props.image,\n beforeCrop: null,\n images: this.props.images,\n opened: !this.props.image,\n cropOpened: false,\n crop: null,\n cropWidth: 100,\n cropHeight: 100\n };\n if (this.props.icons) {\n this.icons = IconList.List;\n }\n this.cropPixels = null;\n this.inputRef = React.createRef();\n this.cropRef = React.createRef();\n this.state = state;\n }\n\n componentWillUpdate(nextProps, nextState) {\n if (!this.props.icons && JSON.stringify(nextProps.images) !== JSON.stringify(this.state.images)) {\n this.setState({images: nextProps.images});\n }\n }\n\n /**\n * Crop image in the browser.\n *\n * @param {Object} imageData - Image File Object\n * @param {Object} crop - crop Object provided by react-image-crop\n * @param {String} fileName - File name\n * @param {Function} cb - Callback\n */\n static cropImage(imageData, crop, fileName, cb) {\n const canvas = document.createElement('canvas');\n canvas.width = crop.width;\n canvas.height = crop.height;\n\n const ctx = canvas.getContext('2d');\n const image = new Image();\n image.onload = function() {\n ctx.drawImage(\n image,\n crop.x,\n crop.y,\n crop.width,\n crop.height,\n 0,\n 0,\n crop.width,\n crop.height\n );\n\n cb(null, {data: canvas.toDataURL('image/jpeg'), name: fileName});\n };\n image.src = imageData;\n }\n\n static readFileDataUrl(file, cb) {\n const reader = new FileReader();\n reader.onload = () => {\n cb(null, {data: reader.result, name: file.name});\n };\n reader.onabort = () => {\n console.error('file reading was aborted');\n cb('file reading was aborted');\n };\n reader.onerror = (e) => {\n console.error('file reading has failed');\n cb('file reading has failed: ' + e);\n };\n\n reader.readAsDataURL(file)\n }\n\n handleSelectImage(file) {\n if (typeof file === 'object') {\n if (this.props.aspect) {\n this.setState({beforeCrop: file, cropOpened: true});\n } else {\n this.setState({image: file.data});\n this.props.onUpload && this.props.onUpload(file);\n }\n } else {\n this.setState({image: file});\n this.props.onUpload && this.props.onUpload(file);\n }\n }\n\n handleDropImage(files) {\n if (files && files.hasOwnProperty('target')) {\n files = files.target.files;\n }\n\n if (!files && !files.length) return;\n const file = files[files.length - 1];\n\n if (!file) {\n return;\n }\n ImageSelector.readFileDataUrl(file, (err, result) => {\n if (err) {\n alert(err);\n } else {\n this.handleSelectImage(result);\n }\n });\n }\n\n removeImage() {\n this.setState({image: '', opened: true});\n this.props.onUpload && this.props.onUpload('');\n }\n\n static isMobile() {\n return /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent);\n }\n\n onCamera() {\n this.inputRef.current.click();\n }\n\n onCropEnd(){\n ImageSelector.cropImage(this.state.beforeCrop.data, this.cropPixels, this.state.beforeCrop.name, (err, file) => {\n this.setState({cropOpened: false, image: file.data});\n this.props.onUpload && this.props.onUpload(file);\n });\n }\n\n onImageLoaded(image, tryCount) {\n tryCount = tryCount || 0;\n let cropHeight;\n let cropWidth;\n let width;\n let height;\n if (!this.cropRef.current && tryCount < 10) {\n return setTimeout(() => this.onImageLoaded(image, tryCount + 1), 200);\n }\n let aspect = this.props.aspect || 1;\n\n if (this.cropRef.current) {\n if (this.cropRef.current.clientWidth > this.cropRef.current.clientHeight) {\n cropHeight = this.cropRef.current.clientHeight;\n if (cropHeight > image.naturalHeight) {\n cropHeight = image.naturalHeight;\n }\n cropWidth = cropHeight * (image.naturalWidth / image.naturalHeight);\n height = 100;\n width = (image.naturalHeight / image.naturalWidth) * 100 * aspect;\n if (width > 100) {\n height = 100 / width * 100;\n width = 100;\n }\n } else {\n cropWidth = this.cropRef.current.clientWidth;\n if (cropWidth > image.naturalWidth) {\n cropWidth = image.naturalWidth;\n }\n cropHeight = cropWidth * (image.naturalHeight / image.naturalWidth);\n width = 100;\n height = (image.naturalWidth / image.naturalHeight) * 100 / aspect;\n\t\t\t\tif (height > 100) {\n width = 100 / height * 100;\n height = 100;\n }\n }\n }\n this.setState({\n cropHeight,\n cropWidth,\n crop: {x: 0, y: 0, width, height, aspect: aspect}\n });\n }\n\n render() {\n const _style = Object.assign({}, style.dropzone, this.state.imageStatus === 'accepted' ? style.dropzoneAccepted : (this.state.imageStatus === 'accepted' ? style.dropzoneRejected : {}));\n\n return (\r\n *\r\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n **/\r\nimport React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {withStyles} from '@material-ui/core/styles';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Chip from '@material-ui/core/Chip';\r\nimport {MdAdd as AddIcon} from 'react-icons/md';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nconst styles = theme => ({\r\n line: {\r\n width: 'calc(100% - 6px)',\r\n display: 'flow-root'\r\n },\r\n inputLine: {\r\n width: 'calc(100% - 6px)',\r\n },\r\n label: {\r\n fontSize: 12,\r\n color: 'rgba(0, 0, 0, 0.54)'\r\n },\r\n chips: {\r\n width: 'calc(100% - 110px)'\r\n },\r\n input: {\r\n width: 'calc(100% - 48px)',\r\n },\r\n button: {\r\n marginLeft: 8\r\n },\r\n icon: {\r\n height: 20,\r\n marginRight: 10\r\n }\r\n});\r\n\r\nclass ChipsControl extends Component {\r\n static propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.type = this.props.type || (typeof this.props.value === 'number' ? 'number' : 'text');\r\n let chips = (this.props.value || '').split(/[,;]/).map(word => word.trim());\r\n this.state = {\r\n chips: chips,\r\n add: ''\r\n }\r\n }\r\n\r\n onAdd() {\r\n const chips = JSON.parse(JSON.stringify(this.state.chips));\r\n chips.push(this.state.add);\r\n chips.sort();\r\n this.setState({chips, add: ''});\r\n this.props.onChange(chips.join(','));\r\n }\r\n onKeyDown(e) {\r\n if (e.keyCode === 13 || e.keyCode === 9) {\r\n this.onAdd();\r\n }\r\n }\r\n handleDelete(word) {\r\n const chips = JSON.parse(JSON.stringify(this.state.chips));\r\n chips.splice(chips.indexOf(word), 1);\r\n this.setState({chips});\r\n this.props.onChange && this.props.onChange(chips.join(','));\r\n }\r\n\r\n render() {\r\n const {classes, label} = this.props;\r\n\r\n return (\r\n \r\n *\r\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n **/\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport NativeSelect from '@material-ui/core/NativeSelect';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport {withStyles} from '@material-ui/core/styles';\r\nimport Input from '@material-ui/core/Input';\r\nimport Theme from '../../theme';\r\n\r\nconst styles = () => (Theme.dialog.info);\r\n\r\n// expected\r\n// options = [\r\n// {label: 'Group1',\r\n// children: [{value: 'item1', label: 'Item 1'}, 'item2']\r\n// },\r\n// {value: 'item3', label: 'Item 3'},\r\n// 'item4'\r\n// }\r\n\r\nfunction getOptions(options, root, path) {\r\n root = root || [];\r\n path = path || '';\r\n\r\n const items = options.map(opt => {\r\n if (typeof opt === 'object' && opt.hasOwnProperty('children')) {\r\n const subItems = getOptions(opt.children, root, path + opt.label + '-');\r\n if (subItems && subItems.length) {\r\n root.push(());\r\n }\r\n return null;\r\n } else if (typeof opt === 'object') {\r\n return ();\r\n } else {\r\n return ();\r\n }\r\n });\r\n if (!path) {\r\n items.forEach(e => e && root.push(e));\r\n return root;\r\n } else {\r\n return items.filter(e => e);\r\n }\r\n}\r\n\r\nconst SelectControl = ({classes, label, value, onChange, options}) => {\r\n if (typeof value === 'object' && value.value !== undefined) {\r\n value = value.value;\r\n }\r\n\r\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport Switch from '@material-ui/core/Switch';\nimport {withStyles} from '@material-ui/core/styles';\nimport Moment from 'react-moment';\nimport Theme from '../../theme';\n\nconst styles = () => (Theme.dialog.info);\n\nconst BoolControl = ({classes, label, value, onChange, language, icon}) => {\n let Icon;\n if (icon) {\n if (typeof icon === 'object') {\n Icon = icon;\n Icon = (
);\n }\n }\n\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport Theme from '../theme';\nimport Paper from '@material-ui/core/Paper';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport {MdClose as CloseIcon} from 'react-icons/md';\nimport Button from '@material-ui/core/Button';\nimport I18n from '../i18n';\n\nclass SmartDialogGeneric extends Component {\n\n static COLOR_MODES = {\n RGB: 0,\n HUE: 1,\n R_G_B: 2,\n TEMPERATURE: 3\n };\n\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string,\n windowWidth: PropTypes.string,\n\n onClose: PropTypes.func,\n onCollectIds: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.stateRx = {\n toast: ''\n };\n\n // disable context menu after long click\n window.addEventListener('contextmenu', SmartDialogGeneric.onContextMenu, false);\n this.refModal = React.createRef();\n this.dialogStyle = {};\n this.closeOnPaperClick = false;\n this.savedParent = null;\n\n this.subscribes = null;\n this.subscribed = false;\n this.editMode = this.props.editMode;\n this.positionTuned = false;\n\n }\n\n componentReady () {\n // ↓ ignore error here\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state = this.stateRx;\n delete this.stateRx;\n }\n\n static onContextMenu(e) {\n if (!e.shiftKey && !e.ctrlKey) {\n e.preventDefault();\n console.log('Ignore context menu' + e);\n return false;\n }\n }\n\n componentDidMount() {\n // move this element to the top of body\n if (this.refModal) {\n this.savedParent = this.refModal.current.parentElement;\n document.body.appendChild(this.refModal.current);\n }\n\n if (this.subscribes && !this.subscribed) {\n this.subscribed = true;\n this.props.onCollectIds(this, this.subscribes, true);\n }\n\n if (!this.positionTuned) {\n Object.assign(this.dialogStyle, {left: 'calc(50% - ' + (this.refModal.current.firstChild.offsetWidth / 2) + 'px)'});\n this.forceUpdate();\n }\n }\n\n componentWillUnmount() {\n this.refModal && this.savedParent.appendChild(this.refModal.current);\n\n if (this.props.onCollectIds && this.subscribed) {\n this.props.onCollectIds(this, this.subscribes, false);\n this.subscribed = null;\n }\n }\n\n // default handler\n updateState(id, state) {\n const newState = {};\n if (state) {\n newState[id] = {val: state.val, ts: state.ts, lc: state.lc};\n } else {\n newState[id] = null;\n }\n this.setState(newState);\n }\n\n mayClose() {\n return !(this.click && Date.now() - this.click < 50);\n }\n\n onClose(forceClose) {\n if (forceClose || this.mayClose()) {\n window.removeEventListener('contextmenu', SmartDialogGeneric.onContextMenu, false);\n this.props.onClose && this.props.onClose();\n }\n }\n\n handleToastClose() {\n this.setState({toast: ''});\n }\n\n generateContent() {\n return null;\n }\n\n onClick(e) {\n if (!this.closeOnPaperClick) {\n e && e.stopPropagation();\n this.click = Date.now();\n }\n }\n\n showCloseButton() {\n if (this.props.windowWidth < 500) {\n return ()\n } else {\n return null;\n }\n }\n\n setDialogStyle(style) {\n this.dialogStyle = style || {};\n this.forceUpdate();\n }\n\n render() {\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIOselectNS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Paper from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\n\nimport {MdSave as OkIcon} from 'react-icons/md';\nimport {MdContentCopy as CopyIcon} from 'react-icons/md';\n\nimport ColorPicker from '../basic-controls/react-color-picker/ColorPicker';\nimport ImageSelector from '../basic-controls/react-image-selector/ImageSelector';\nimport ChipsControl from '../basic-controls/react-info-controls/ChipsControl';\nimport SelectControl from '../basic-controls/react-info-controls/SelectControl';\nimport BoolControl from '../basic-controls/react-info-controls/BoolControl';\n\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport Utils from '../Utils';\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nconst styles = {\n descCopyIcon: {\n position: 'absolute',\n top: 0,\n right: 0,\n background: 'rgba(255,255,255,0.7)'\n },\n descDivId: {\n fontSize: 'smaller'\n },\n descTitle: {\n fontWeight: 'bold'\n },\n descCopied: {\n position: 'absolute',\n top: 3,\n right: 3,\n background: 'white'\n }\n\n};\nclass SmartDialogSettings extends SmartDialogGeneric {\n\n // expected:\n // settings - array of [{id, icon, color, ...}]\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n getImages: PropTypes.func,\n dialogKey: PropTypes.string,\n windowWidth: PropTypes.number,\n settings: PropTypes.array.isRequired,\n objectInfo: PropTypes.object,\n onSave: PropTypes.func.isRequired,\n onClose: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.stateRx.changed = false;\n this.stateRx.unsavedDialog = false;\n this.stateRx.values = {\n\n };\n this.stateRx.images = [];\n this.stateRx.anchorEl = null;\n\n this.props.settings.forEach(e => {\n this.stateRx.values[e.name] = e.value === '__default__' ? '' : e.value;\n });\n\n // This is asynchronous\n this.props.getImages && this.props.getImages(function(images) {\n this.setState({images});\n }.bind(this));\n\n this.dialogStyle = Theme.dialog.settingsBack;\n\n this.componentReady();\n }\n\n onClose() {\n if (!super.mayClose()) return;\n\n if (!this.ignoreUnsaved && this.isChanged()) {\n this.setState({unsavedDialog: true});\n } else {\n super.onClose(true);\n }\n }\n\n onSave() {\n const settings = {};\n this.props.settings.forEach(item => {\n settings[item.name] = this.state.values[item.name];\n });\n this.props.onSave(settings);\n this.ignoreUnsaved = true;\n this.onClose();\n }\n\n handleWarningCancel = () => {\n this.ignoreUnsaved = false;\n this.click = Date.now();\n this.setState({unsavedDialog: false});\n };\n\n handleWarningIgnore = () => {\n this.ignoreUnsaved = true;\n this.setState({unsavedDialog: false});\n this.click = 0;\n this.onClose();\n };\n\n handleText(name, ev) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = ev.target.value;\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n\n handleToggle(name, ev) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = ev ? ev.target.checked : !this.state.values[name];\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n\n handleValue(name, value) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = value;\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n\n handleUploadImage(name, files, pictures) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = pictures[pictures.length - 1];\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n handleDropImage(name, file) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = file;\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n\n handleIcon(name, file) {\n const newValue = {values: JSON.parse(JSON.stringify(this.state.values))};\n this.click = Date.now();\n newValue.values[name] = typeof file === 'object' ? file.data : file;\n newValue.changed = this.isChanged(name, newValue.values[name]);\n this.setState(newValue);\n }\n\n onDelete() {\n this.props.onSave(false);\n this.ignoreUnsaved = true;\n this.onClose();\n }\n\n isChanged(name, newVal) {\n return !!this.props.settings.find(item => {\n if (item.name === name) {\n return newVal !== item.value;\n } else {\n return item.value !== this.state.values[item.name]\n }\n });\n }\n\n copyId(event) {\n this.setState({anchorEl: event.currentTarget});\n setTimeout(() => {\n this.setState({anchorEl: null});\n }, 2000);\n }\n\n generateObjectInfo() {\n if (this.props.settingsId) {\n return (\n \n \n \n \n \n {this.state.anchorEl ? () : null}\n );\n } else {\n return null;\n }\n }\n\n generateContent() {\n const result = this.props.settings.map(function (e, i) {\n const divider = i !== this.props.settings.length - 1 ? () : null;\n\n let item;\n if (e.type === 'delete') {\n item = ( this.onDelete()}\n >{I18n.t('Delete')});\n } else if (e.type === 'boolean') {\n item = ( this.handleToggle(e.name)}\n icon={e.icon}\n language={I18n.getLanguage()}\n value={this.state.values[e.name] || false}\n />);\n } else if (e.type === 'color') {\n item = ( this.handleValue(e.name, color)}\n />);\n } else if (e.type === 'chips') {\n item = ( this.handleValue(e.name, value)}\n />);\n } else if (e.type === 'select') {\n item = ( this.handleValue(e.name, value)}\n label={I18n.t(e.name)}\n options={e.options}\n />);\n } else if (e.type === 'icon') {\n item = ( this.handleIcon(e.name, file)}\n textAccepted={I18n.t('All files will be accepted')}\n textRejected={I18n.t('Some files will be rejected')}\n textWaiting={I18n.t('Drop some files here or click...')}\n />);\n } else if (e.type === 'image') {\n item = ( this.handleDropImage(e.name, file)}\n textAccepted={I18n.t('All files will be accepted')}\n textRejected={I18n.t('Some files will be rejected')}\n textWaiting={I18n.t('Drop some files here or click...')}\n />);\n } else if (e.type === 'number') {\n // input field\n item = ( this.handleText(e.name, ev)}\n margin=\"normal\"\n />);\n } else {\n // input field\n item = ( this.handleText(e.name, ev)}\n margin=\"normal\"\n />);\n }\n\n if (0 && divider) {\n return [item, divider];\n } else {\n return ({item} );\n }\n }.bind(this));\n\n result.push(this.generateObjectInfo());\n\n return [\n (\n ),\n (\n {I18n.t('Ignore changes?')} \n \n {I18n.t('Changes are not saved.')} \n \n \n \n \n \n );\n }\n}\n\nexport default SmartDialogSettings;","/**\n * Copyright 2018 bluefox \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport Utils from '../Utils';\nimport I18n from '../i18n';\nimport Theme from '../theme';\n\nimport {MdVisibility as IconCheck} from 'react-icons/md';\nimport {MdRemove as IconRemoved} from 'react-icons/md';\nimport {MdEdit as IconEdit} from 'react-icons/md';\nimport {MdArrowUpward as IconDirectionUp} from 'react-icons/md';\nimport {MdArrowDownward as IconDirectionDown} from 'react-icons/md';\nimport {MdSwapVert as IconDirection} from 'react-icons/md';\n\nimport Dialog from '../Dialogs/SmartDialogSettings';\n\nclass SmartGeneric extends Component {\n static propTypes = {\n objects: PropTypes.object.isRequired,\n states: PropTypes.object.isRequired,\n tile: PropTypes.object.isRequired,\n channelInfo: PropTypes.object.isRequired,\n ignoreIndicators: PropTypes.array,\n enumNames: PropTypes.array,\n windowWidth: PropTypes.number,\n user: PropTypes.string\n };\n\n constructor(props, noSubscribe) {\n super(props);\n this.channelInfo = this.props.channelInfo;\n this.subscribes = null;\n this.subscribed = false;\n this.defaultIcon = null;\n\n this.width = Theme.tile.width;\n this.height = Theme.tile.height;\n this.doubleState = false; // has on/off or only info\n\n this.showCorner = false; // set it to true to show the corner\n this.stateRx = {\n executing: false,\n settings: {},\n showSettings: false,\n editMode: null,\n ignoreIndicators: this.props.ignoreIndicators || []\n };\n this.defaultEnabling = true; // overload this property to hide element by default\n\n this.editMode = this.props.editMode;\n\n this.lastEnabledChange = 0;\n\n if (typeof noSubscribe !== 'boolean' || !noSubscribe) {\n if (this.channelInfo.states) {\n let ids = [];\n this.channelInfo.states.forEach(function (state) {\n if (!state.id) return;\n\n if (state.id.startsWith('system.adapter.')) {\n ids.push(state.id);\n } else\n if (!state.noSubscribe &&\n this.props.objects[state.id] &&\n this.props.objects[state.id].type === 'state' &&\n ids.indexOf(state.id) === -1)\n {\n const pos = state.id.lastIndexOf('.');\n if (pos !== -1 && this.stateRx.ignoreIndicators.indexOf(state.id.substring(pos + 1)) !== -1) {\n return;\n }\n\n ids.push(state.id);\n }\n }.bind(this));\n\n if (ids.length) {\n this.subscribes = ids;\n\n // do not want to mutate via setState, because it is constructor\n ids.forEach(id => this.stateRx[id] = this.props.states[id] ? this.props.states[id].val : null);\n }\n }\n }\n\n if (this.channelInfo && this.channelInfo.states) {\n this.indicators = {};\n let state = this.channelInfo.states.find(state => state.id && state.name === 'WORKING');\n this.indicators.workingId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'UNREACH');\n this.indicators.unreachId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'LOWBAT');\n this.indicators.lowbatId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'MAINTAIN');\n this.indicators.maintainId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ERROR');\n this.indicators.errorId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'DIRECTION');\n this.indicators.directionId = state && state.id;\n\n if (this.indicators.directionId) {\n this.direction = {\n undef: true,\n up: 'unused',\n down: 'unused'\n };\n const obj = this.props.objects[this.indicators.directionId];\n if (obj && obj.common) {\n if (obj.common.type === 'number') {\n if (obj.common.states) {\n for (const index in obj.common.states) {\n if (!obj.common.states.hasOwnProperty(index)) continue;\n if (obj.common.states[index].match(/up/i)) {\n this.direction.up = index.toString();\n } else if (obj.common.states[index].match(/down/i)) {\n this.direction.down = index.toString();\n } else if (obj.common.states[index].match(/undef/i)) {\n this.direction.undef = index.toString();\n }\n }\n } else {\n this.direction.undef = 1;\n }\n }\n }\n }\n\n if (this.indicators.errorId) {\n this.errorText = '';\n }\n }\n\n // will be done in componentReady\n // this.state = stateRx;\n }\n\n componentReady () {\n if (this.id && this.props.objects[this.id]) {\n this.settingsId = this.id;\n } else\n if (this.instanceId !== undefined) {\n this.settingsId = this.instanceId;\n }\n\n if (this.stateRx.showDialog !== undefined) {\n this.showCorner = true;\n this.onMouseUpBind = this.onMouseUp.bind(this);\n this.props.tile.registerHandler('onMouseDown', this.onTileMouseDown.bind(this));\n }\n\n if (this.settingsId) {\n if (this.props.objects[this.settingsId] && this.props.objects[this.settingsId].type === 'instance') {\n this.stateRx.settings = {\n enabled: true,\n name: this.props.objects[this.settingsId].common.name + '.' + this.instanceNumber\n }\n } else {\n this.stateRx.settings = Utils.getSettings(\n this.props.objects[this.settingsId],\n {\n user: this.props.user,\n language: I18n.getLanguage(),\n name: this.getObjectNameCh()\n },\n this.defaultEnabling\n );\n }\n if (this.stateRx.settings.background) {\n this.props.tile.setBackgroundImage(this.stateRx.settings.background || '', true);\n }\n }\n\n this.stateRx.nameStyle = {fontSize: SmartGeneric.getNameFontSize(this.stateRx.settings.name)};\n\n this.props.tile.setVisibility(this.stateRx.settings.enabled);\n\n this.props.tile.setColorOn(this.stateRx.settings.colorOn || Theme.tile.tileOn.background);\n this.props.tile.setColorOff(this.stateRx.settings.colorOff || Theme.tile.tileOff.background);\n\n if (this.stateRx.settings && this.stateRx.settings.doubleSize) {\n this.width = 2;\n }\n\n if (this.width > 1) {\n this.props.tile.setSize(this.width);\n }\n\n // ↓ ignore error here\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state = this.stateRx;\n delete this.stateRx;\n }\n\n componentDidMount () {\n if (this.state.settings.enabled && this.subscribes && !this.subscribed) {\n this.subscribed = true;\n this.props.onCollectIds(this, this.subscribes, true);\n }\n }\n\n static getObjectName(objects, id, label, channelName, enumNames) {\n let name;\n if (label) {\n name = label;\n } else\n if (!id) {\n name = 'No elements';\n } else {\n //if (objects[enumName]) {\n // enumName = SmartGeneric.getObjectName(objects, enumName);\n //}\n\n let item = objects[id];\n if (item && item.common && item.common.name) {\n name = Utils.getObjectName(objects, id, null, {language: I18n.getLanguage()});\n\n if (enumNames) {\n if (typeof enumNames === 'object') {\n enumNames.forEach(e => {\n let reg = new RegExp('\\\\b' + e + '\\\\b');\n const newName = name.replace(reg, ' ').replace(/\\s\\s/g, '').trim();\n if (newName) {\n name = newName;\n }\n });\n } else {\n let reg = new RegExp('\\\\b' + enumNames + '\\\\b');\n const newName = name.replace(reg, ' ').replace(/\\s\\s/g, '').trim();\n if (newName) {\n name = newName;\n }\n }\n }\n if (channelName) {\n let reg = new RegExp(channelName + '[.: ]?');\n const newName = name.replace(reg, ' ').trim();\n if (newName) {\n name = newName;\n }\n }\n\n if (name && name === name.toUpperCase()) {\n name = name[0] + name.substring(1).toLowerCase();\n }\n } else {\n let pos = id.lastIndexOf('.');\n name = id.substring(pos + 1).replace(/_/g, ' ');\n name = Utils.CapitalWords(name);\n\n if (enumNames) {\n if (typeof enumNames === 'object') {\n enumNames.forEach(e => {\n let reg = new RegExp('\\\\b' + e + '\\\\b');\n name = name.replace(reg, ' ').replace(/\\s\\s/g, '').trim();\n });\n } else {\n let reg = new RegExp('\\\\b' + enumNames + '\\\\b');\n name = name.replace(reg, ' ').replace(/\\s\\s/g, '').trim();\n }\n }\n\n if (channelName) {\n let reg = new RegExp(channelName + '[.: ]?');\n name = I18n.t(name.replace(reg, ' ').trim());\n }\n }\n }\n return name.trim();\n }\n\n static getParentId(id) {\n const pos = id.lastIndexOf('.');\n if (pos !== -1) {\n return id.substring(0, pos);\n } else {\n return id;\n }\n }\n\n getObjectNameCh() {\n const channelId = SmartGeneric.getParentId(this.id);\n if (this.props.objects[channelId] && (this.props.objects[channelId].type === 'channel' || this.props.objects[channelId].type === 'device')) {\n return SmartGeneric.getObjectName(this.props.objects, channelId, null, null, this.props.enumNames) || ' ';\n } else {\n return SmartGeneric.getObjectName(this.props.objects, this.id, null, null, this.props.enumNames) || ' ';\n }\n }\n\n // default handler\n updateState(id, state) {\n // update indicators\n let val;\n if (this.indicators && id === this.indicators.directionId) {\n val = (state.val !== null && state.val !== undefined) ? state.val.toString() : '';\n } else if (this.indicators && id === this.indicators.errorId) {\n if (typeof state.val === 'string' ) {\n let i = parseInt(state.val.trim(), 10);\n if (i.toString() === state.val.trim()) {\n val = i;\n } else {\n val = state.val === 'true' || state.val === 'on' || state.val === 'ON';\n }\n } else {\n val = typeof state.val === 'number' ? state.val : state.val === true || state.val === 'true' || state.val === 'on' || state.val === 'ON';\n }\n const obj = this.props.objects[id];\n if (obj && obj.common) {\n if (obj.common.min !== undefined && obj.common.min === val) {\n val = false;\n this.errorText = '';\n } else if (obj.common.states && obj.common.states[val] !== undefined) {\n this.errorText = I18n.t(obj.common.states[val]);\n val = true;\n }\n }\n } else {\n val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON';\n }\n const newState = {};\n newState[id] = val;\n this.setState(newState);\n }\n\n // default handler\n onControl(id, val) {\n\n }\n\n // default handler\n onLongClick(e) {\n if (e) {\n e.preventDefault();\n e.stopPropagation();\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n this.setState({showDialog: true});\n }\n\n onDialogClose() {\n this.setState({showDialog: false});\n }\n\n onMouseUp() {\n document.removeEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.removeEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.onToggleValue && this.onToggleValue();\n }\n }\n\n onTileMouseDown(e) {\n if (this.state.showDialog) return;\n //e.preventDefault();\n e.stopPropagation();\n\n this.timer = setTimeout(this.onLongClick.bind(this), 500);\n\n document.addEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.addEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n }\n\n componentWillUnmount() {\n if (this.props.onCollectIds && this.subscribed) {\n this.props.onCollectIds(this, this.subscribes, false);\n this.subscribed = null;\n }\n }\n\n saveSettings(newSettings, cb) {\n const settings = newSettings || this.state.settings;\n if (this.props.onSaveSettings && this.settingsId) {\n this.props.onSaveSettings(this.settingsId, settings, {enabled: this.defaultEnabling}, () => {\n // subscribe if enabled and was not subscribed\n if (this.subscribes && settings.enabled && !this.subscribed) {\n this.subscribed = true;\n this.props.onCollectIds(this, this.subscribes, true);\n } else\n // unsubscribe if disabled and was subscribed\n if (!settings.enabled && this.subscribed) {\n this.subscribed = false;\n this.props.onCollectIds(this, this.subscribes, false);\n }\n\n this.props.tile.setColorOn(settings.colorOn || Theme.tile.tileOn);\n this.props.tile.setColorOff(settings.colorOff || Theme.tile.tileOff);\n this.props.tile.setVisibility(settings.enabled);\n this.width = settings.doubleSize ? 2 : 1;\n this.props.tile.setSize(this.width);\n cb && cb(settings);\n });\n } else if (this.customSettings) {\n // custom URL\n const enumSettings = Utils.getSettings(this.props.objects[this.customSettings.settingsId], {user: this.props.user});\n let pos = -1;\n\n if (enumSettings) {\n enumSettings.URLs.forEach((e, i) => {\n if (e.id === this.id) {\n pos = i;\n return false;\n }\n });\n }\n\n if (pos !== -1) {\n if (newSettings) {\n newSettings = Object.assign({}, this.customSettings, newSettings);\n enumSettings.URLs[pos] = newSettings;\n } else {\n enumSettings.URLs.splice(pos, 1);\n }\n const enumId = (newSettings && newSettings.settingsId) || this.customSettings.settingsId;\n this.props.onSaveSettings && this.props.onSaveSettings(enumId, enumSettings, function () {\n if (!newSettings) {\n this.props.tile.setDelete(enumId);\n } else {\n\n }\n cb && cb(newSettings);\n }.bind(this));\n }\n }\n }\n\n toggleEnabled() {\n let settings = JSON.parse(JSON.stringify(this.state.settings));\n settings.enabled = !settings.enabled;\n\n this.saveSettings(settings, () => this.setState({settings}));\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.editMode !== this.state.editMode) {\n this.setState({editMode: nextProps.editMode});\n //this.props.tile.setVisibility(nextProps.editMode || this.state.settings.enabled);\n }\n if (JSON.stringify(nextProps.ignoreIndicators) !== JSON.stringify(this.state.ignoreIndicators)) {\n this.setState({ignoreIndicators: nextProps.ignoreIndicators});\n }\n }\n\n roundValue(value, decimals) {\n if (decimals !== undefined || typeof this.state.settings.decimals !== 'undefined') {\n return value.toFixed(decimals !== undefined ? decimals : this.state.settings.decimals);\n } else {\n return value;\n }\n }\n\n // following indicators are supported\n // indicator.working\n // indicator.lowbat\n // indicator.maintenance.lowbat\n // indicator.maintenance.unreach\n // indicator.maintenance\n // indicator.error\n getIndicators() {\n let result = [];\n const that = this;\n let titles = [];\n this.channelInfo.states.forEach(state => {\n if (state.indicator && state.id) {\n const pos = state.id.lastIndexOf('.');\n if (pos !== -1 && this.state.ignoreIndicators.indexOf(state.id.substring(pos + 1)) !== -1) {\n return;\n }\n let Icon = state.icon;\n if (state.id === that.indicators.directionId) {\n const strVal = that.state[state.id];\n if (strVal === that.direction.up) {\n Icon = IconDirectionUp;\n } else if (strVal === that.direction.down) {\n Icon = IconDirectionDown;\n } else if (strVal === that.direction.undef) {\n Icon = IconDirection;\n } else {\n return;\n }\n } else if ((!that.state[state.id] && !state.inverted) || (that.state[state.id] && state.inverted)) {\n return;\n }\n\n titles.push(I18n.t(state.id.split('.').pop()));\n\n result.push((
this.handleClick()}>\n \n
\n { this.state.displayColorPicker ? \n
\n )\n }\n}\n\nexport default ColorPicker","/**\n * Copyright 2018 bluefox this.handleClose()}/>\n this.handleChange(color)} />\n
: null }\n\n \n {this.props.images.map(function(image, i) {\n let Image;\n\n if (typeof image === 'object') {\n Image = image.icon;\n }\n return (\n this.onSelect(image, i)}\n focusRipple\n key={'images-' + i}\n className={this.classes.image}\n focusVisibleClassName={this.classes.focusVisible}\n style={{width: 64, height: 64, background: 'grey', marginRight: 2, marginBottom: 2}}\n >\n {Image ?\n (
\n );\n }\n\n}\n\nImageList.propTypes = {\n classes: PropTypes.object.isRequired,\n images: PropTypes.array.isRequired,\n onSelect: PropTypes.func.isRequired\n};\n\nexport default withStyles(styles)(ImageList);","import {Component} from \"react\";\nclass IconList extends Component {\n static List = [\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNDQ4LDQ5MC42NjdoLTMydi00ODBDNDE2LDQuNzc5LDQxMS4yMjEsMCw0MDUuMzMzLDBIMTA2LjY2N0MxMDAuNzc5LDAsOTYsNC43NzksOTYsMTAuNjY3djQ4MEg2NAoJCWMtNS44ODgsMC0xMC42NjcsNC43NzktMTAuNjY3LDEwLjY2N0M1My4zMzMsNTA3LjIyMSw1OC4xMTIsNTEyLDY0LDUxMmgzODRjNS44ODgsMCwxMC42NjctNC43NzksMTAuNjY3LTEwLjY2NwoJCUM0NTguNjY3LDQ5NS40NDUsNDUzLjg4OCw0OTAuNjY3LDQ0OCw0OTAuNjY3eiBNMzk0LjY2Nyw0OTAuNjY3SDExNy4zMzNWMjEuMzMzaDI3Ny4zMzNWNDkwLjY2N3oiLz4KCTxwYXRoIGQ9Ik0zNDEuMzMzLDI3Ny4zMzNjMTcuNjQzLDAsMzItMTQuMzU3LDMyLTMyYzAtMTcuNjQzLTE0LjM1Ny0zMi0zMi0zMmMtMTcuNjQzLDAtMzIsMTQuMzU3LTMyLDMyCgkJQzMwOS4zMzMsMjYyLjk3NiwzMjMuNjkxLDI3Ny4zMzMsMzQxLjMzMywyNzcuMzMzeiBNMzQxLjMzMywyMzQuNjY3YzUuODg4LDAsMTAuNjY3LDQuNzc5LDEwLjY2NywxMC42NjcKCQlTMzQ3LjIyMSwyNTYsMzQxLjMzMywyNTZzLTEwLjY2Ny00Ljc3OS0xMC42NjctMTAuNjY3UzMzNS40NDUsMjM0LjY2NywzNDEuMzMzLDIzNC42Njd6Ii8+CjwvZz4KPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjk4LjY2NywyOTguNjY3YzE3LjY0MywwLDMyLTE0LjM1NywzMi0zMmMwLTE3LjY0My0xNC4zNTctMzItMzItMzJjLTE3LjY0MywwLTMyLDE0LjM1Ny0zMiwzMgoJCUMyNjYuNjY3LDI4NC4zMDksMjgxLjAyNCwyOTguNjY3LDI5OC42NjcsMjk4LjY2N3ogTTI5OC42NjcsMjU2YzUuODY3LDAsMTAuNjY3LDQuNzc5LDEwLjY2NywxMC42NjdzLTQuOCwxMC42NjctMTAuNjY3LDEwLjY2NwoJCWMtNS44NjcsMC0xMC42NjctNC43NzktMTAuNjY3LTEwLjY2N1MyOTIuOCwyNTYsMjk4LjY2NywyNTZ6Ii8+Cgk8cGF0aCBkPSJNNDQ4LDQ5MC42NjdoLTMydi00ODBDNDE2LDQuNzc5LDQxMS4yMjEsMCw0MDUuMzMzLDBIMTA2LjY2N2MtMC41OTcsMC0xLjEzMSwwLjI1Ni0xLjcwNywwLjM0MQoJCWMtMC41NTUsMC4wODUtMS4wODgsMC4xNDktMS42MjEsMC4zMmMtMC45MzksMC4zMi0xLjc0OSwwLjc4OS0yLjU2LDEuMzQ0Yy0wLjMyLDAuMjEzLTAuNzA0LDAuMjc3LTEuMDAzLDAuNTMzCgkJYy0wLjEwNywwLjA4NS0wLjE0OSwwLjIxMy0wLjI1NiwwLjMyYy0wLjc2OCwwLjcwNC0xLjM2NSwxLjU3OS0xLjg5OSwyLjQ5NmMtMC4yMTMsMC4zNDEtMC41MTIsMC42MTktMC42NjEsMC45ODEKCQlDOTYuMzYzLDcuNjgsOTYsOS4xMDksOTYsMTAuNjY3djQ4MEg2NGMtNS44ODgsMC0xMC42NjcsNC43NzktMTAuNjY3LDEwLjY2N0M1My4zMzMsNTA3LjIyMSw1OC4xMTIsNTEyLDY0LDUxMmg0Mi42NjcKCQljMC41NzYsMCwxLjE3My0wLjA0MywxLjc0OS0wLjE0OWwyNTYtNDIuNjY3YzUuMTQxLTAuODUzLDguOTE3LTUuMzEyLDguOTE3LTEwLjUxN1Y1My4zMzNjMC01LjIyNy0zLjc3Ni05LjY2NC04LjkxNy0xMC41MTcKCQlMMjM1LjU0MSwyMS4zMzNoMTU5LjEyNXY0ODBjMCw1Ljg4OCw0Ljc3OSwxMC42NjcsMTAuNjY3LDEwLjY2N0g0NDhjNS44ODgsMCwxMC42NjctNC43NzksMTAuNjY3LTEwLjY2NwoJCUM0NTguNjY3LDQ5NS40NDUsNDUzLjg4OCw0OTAuNjY3LDQ0OCw0OTAuNjY3eiBNMzUyLDYyLjM1N3YzODcuMjY0bC0yMzQuNjY3LDM5LjEyNVYyMy4yNTNMMzUyLDYyLjM1N3oiLz4KPC9nPgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIuMDA2IDUxMi4wMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMi4wMDYgNTEyLjAwNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBzdHlsZT0iZmlsbDojQzUyODI4OyIgZD0iTTUwMi4zNzksMjExLjI0OWMwLDc0LjY1Ni02MC41MiwxMzUuMTc2LTEzNS4xNzYsMTM1LjE3NmMtNi40NjksMC4wMS0xMi45MTktMC40NzMtMTkuMzExLTEuNDQ4CgljLTY2LjQ4Ny05LjU5OC0xMTUuODM3LTY2LjU1NS0xMTUuODY2LTEzMy43MjhjLTAuMDE5LTY3LjIxMiw0OS4zNDktMTI0LjIyNywxMTUuODY2LTEzMy44MjUKCWM2LjQwMi0wLjg4OCwxMi44NTEtMS4zNDIsMTkuMzExLTEuMzUyQzQ0MS44NTksNzYuMDcyLDUwMi4zNzksMTM2LjU5Myw1MDIuMzc5LDIxMS4yNDl6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNGNDQzMzU7IiBkPSJNNDYzLjc1NywyMTEuMjQ5Yy0wLjAyOSw2Ny4xNzMtNDkuMzc4LDEyNC4xMzEtMTE1Ljg2NSwxMzMuNzI4CgljLTY2LjQ4Ny05LjU5OC0xMTUuODM3LTY2LjU1NS0xMTUuODY2LTEzMy43MjhjLTAuMDE5LTY3LjIxMiw0OS4zNDktMTI0LjIyNywxMTUuODY2LTEzMy44MjUKCUM0MTQuNDA4LDg3LjAyMiw0NjMuNzY3LDE0NC4wMzcsNDYzLjc1NywyMTEuMjQ5eiIvPgo8Zz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGREQ4MzQ7IiBkPSJNMzgwLjUyNywyMzAuNTZoLTI2LjY0OWMtNC4yNTgsMC4xMjYtNy44OTgtMy4wMTMtOC40LTcuMjQybC03LjI0Mi05MC40NzIKCQljLTAuMjEyLTQuNDcsMy4yMzUtOC4yNzUsNy43MDUtOC40OTdjMC4yMzItMC4wMSwwLjQ2My0wLjAxLDAuNjk1LDBoNDEuMDM2YzQuNDgtMC4xNjQsOC4yMzYsMy4zMzEsOC40LDcuODAyCgkJYzAuMDEsMC4yMzIsMC4wMSwwLjQ2MywwLDAuNjk1bC03LjI0Miw5MC40NzJDMzg4LjMyOSwyMjcuNDk5LDM4NC43MzcsMjMwLjYzNywzODAuNTI3LDIzMC41NnoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGREQ4MzQ7IiBkPSJNMzYyLjA4NSwyNjkuMTgxaDEwLjIzNWM3Ljg0LDAsMTQuMTk0LDYuMzUzLDE0LjE5NCwxNC4xOTR2MTAuMjM1CgkJYzAsNy44NC02LjM1MywxNC4xOTQtMTQuMTk0LDE0LjE5NGgtMTAuMjM1Yy03Ljg0LDAtMTQuMTk0LTYuMzUzLTE0LjE5NC0xNC4xOTR2LTEwLjIzNQoJCUMzNDcuODkyLDI3NS41MzUsMzU0LjI0NSwyNjkuMTgxLDM2Mi4wODUsMjY5LjE4MXoiLz4KPC9nPgo8cGF0aCBzdHlsZT0iZmlsbDojRjU3QzAwOyIgZD0iTTMwOC4wMTUsMzMyLjcxNGMtOC42NDItNC4xOS0xNi44MDEtOS4yOTgtMjQuMzMyLTE1LjI1NmMtOS42NjUtNy42MzctMTguMjc4LTE2LjU0LTI1LjU4Ny0yNi40NTYKCWMtMTYuOTk0LTIzLjExNS0yNi4xMzctNTEuMDY4LTI2LjA3LTc5Ljc1NGMtMC4wMS05Ljc0MiwxLjAzMy0xOS40NDYsMy4wOS0yOC45NjZjMi4wNjYtMTAuMDAzLDUuMzExLTE5LjcyNiw5LjY1NS0yOC45NjYKCWMtMjQuNDI4LTM5LjIwMS01MC42OTEtNzguMTEzLTg1LjU0Ny0xMDguMzM0Yy0yLjYwNy0yLjIyMS01LjIxNC00LjQ0Mi03LjkxNy02LjU2NmMtNC41OTYtMy44MDQtOS4zOTUtNy4zNDgtMTQuMzg3LTEwLjYyMQoJYy00LjM2NC0yLjgxOS04Ljk4OS01LjIxNC0xMy44MDctNy4xNDVjMS42NDEsNy4zMzgsMy40NzYsMTQuNzczLDQuNzMxLDIyLjIwOGMxLjY3LDguODkzLDIuNjc1LDE3LjkwMSwyLjk5MywyNi45MzkKCWMwLDIuMzE3LDAsNC43MzEsMCw3LjE0NWMtMC4xOTMsNTIuOTAyLTIyLjE5OCwxMDMuMzgxLTYwLjgyOSwxMzkuNTIxYy0xNy40OTYsMTQuOTU2LTMyLjMyNiwzMi43OC00My44MzYsNTIuNzE5CglDNy4yMzcsMzA2LjQ5LDQuODUzLDM1MC4wNDYsMTkuNjA2LDM4OS4xOTljNS4zMywxNC40MzUsMTIuODEzLDI3Ljk4MiwyMi4yMDgsNDAuMTY3YzI2LjEwOCwzMy41NDMsNjQuMTUxLDU1LjcyMiwxMDYuMjEsNjEuODkxCgljLTE4LjA0Ni01LjU5LTMzLjc2NS0xNi45MTYtNDQuODAxLTMyLjI0OWMtMS4zNDItMS43ODYtMi41NjgtMy42NS0zLjY2OS01LjZjLTIuNTc4LTQuMjE5LTQuNzQxLTguNjktNi40NjktMTMuMzI1CgljLTcuNzA1LTIwLjgzNi02LjM0NC00My45NDIsMy43NjYtNjMuNzI2YzYuMTk5LTEwLjY4OSwxNC4xMjYtMjAuMjg2LDIzLjQ2My0yOC4zODdjMjAuNjA1LTE5LjIwNSwzMi4zNDYtNDYuMDg2LDMyLjQ0Mi03NC4yNQoJYzAtMS4zNTIsMC0yLjYwNywwLTMuODYyYy0wLjI5LTkuMjIxLTEuODgzLTE4LjM1NS00LjczMS0yNy4xMzJjMy43NTYsMS45NzksNy4zOTYsNC4xNzEsMTAuOTExLDYuNTY2CgljMTIuMDQsOC4xMywyMi4zMjMsMTguNjA2LDMwLjIyMiwzMC44MDFjOS4wMTgsMTMuOTQyLDE0LjQ1NCwyOS44OTMsMTUuODM1LDQ2LjQ0M2MwLDIuNDE0LDAsNC44MjgsMCw3LjMzOHYxLjA2MgoJYzAuMDEsMjAuNzMtNi4zNjMsNDAuOTU4LTE4LjI0OSw1Ny45MzNjMjIuOTgsMTMuMDM1LDM4LjYyMi04LjU5Myw0NC45OTQtMjguOTY2YzEuMzAzLTQuMTgxLDIuMTQ0LTguNDg3LDIuNTEtMTIuODQyCgljMTcuNDE4LDE1Ljc3NywyNy44MzcsMzcuODQsMjguOTY2LDYxLjMxMmMwLDEuNzM4LDAsMy40NzYsMCw1LjIxNGMtMi43MDQsMzMuNjc4LTI1LjM0Niw2Mi40NTEtNTcuNDUsNzIuOTk1CgljNzMuMzUzLTExLjc4OSwxMjguNzE3LTcyLjg4OSwxMzMuMjQ1LTE0Ny4wNTNDMzI4LjI2MiwzNDEuMjMsMzE3Ljg1NCwzMzcuNTksMzA4LjAxNSwzMzIuNzE0eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRkY5ODAxOyIgZD0iTTI2My4xMTcsNDE3LjQ4OWMwLTEuNzM4LDAtMy40NzYsMC01LjIxNGMtMS4xMy0yMy40NzItMTEuNTQ4LTQ1LjUzNS0yOC45NjYtNjEuMzEyCgljLTAuMzY3LDQuMzU1LTEuMjA3LDguNjYxLTIuNTEsMTIuODQyYy01Ljk4NiwyMC40Ny0yMi4wMTQsNDIuMDk4LTQ0Ljk5NCwyOC45NjZjMTEuODg2LTE2Ljk3NCwxOC4yNTgtMzcuMjAyLDE4LjI0OS01Ny45MzN2LTAuOTY2CgljMC0yLjUxLDAtNC45MjQsMC03LjMzOGMtMS4zODEtMTYuNTQ5LTYuODE3LTMyLjUtMTUuODM1LTQ2LjQ0M2MtNy44OTgtMTIuMTk1LTE4LjE4MS0yMi42NzEtMzAuMjIyLTMwLjgwMQoJYy0xMC4xMzgtMTQuOTY2LTIzLjgzOS0yNy4xOC0zOS44NzctMzUuNTMyYzIuODQ4LDguNzc3LDQuNDQyLDE3LjkxMSw0LjczMSwyNy4xMzJjMCwxLjI1NSwwLDIuNTEsMCwzLjg2MgoJYy0wLjA5NywyOC4xNjUtMTEuODM4LDU1LjA0Ni0zMi40NDIsNzQuMjVjLTkuMjk4LDguMTExLTE3LjE5NiwxNy42OTgtMjMuMzY2LDI4LjM4N2MtMTAuMDQyLDE5LjgxMy0xMS4zMzYsNDIuOTE5LTMuNTczLDYzLjcyNgoJYzYuNzExLDE3LjY4OSwxOS4xOTUsMzIuNTg3LDM1LjQzNiw0Mi4yOTFjMS4xMDEsMS45NSwyLjMyNywzLjgxNCwzLjY2OSw1LjZjMTAuOTMsMTUuMjY1LDI2LjUxNCwyNi41ODEsNDQuNDE1LDMyLjI0OQoJYy00Mi4wNTktNi4xNy04MC4xMDItMjguMzQ4LTEwNi4yMS02MS44OTJjLTkuMzI3LTEyLjIwNC0xNi43NDMtMjUuNzQxLTIyLjAxNC00MC4xNjdDNC44NTMsMzUwLjA0Niw3LjIzOCwzMDYuNDksMjYuMTcyLDI2OS4xODEKCWMxMS41MjktMjAuMTIyLDI2LjQxNy0zOC4xMiw0NC4wMjktNTMuMjAyYzM4LjYzMS0zNi4xNCw2MC42MzYtODYuNjE5LDYwLjgyOS0xMzkuNTIxYzAtMi40MTQsMC00LjgyOCwwLTcuMTQ1CgljLTAuMzE5LTkuMDM4LTEuMzIzLTE4LjA0Ni0yLjk5My0yNi45MzljLTEuMjU1LTcuNDM1LTMuMDktMTQuODY5LTQuNzMxLTIyLjIwOGM0LjgxOCwxLjkzMSw5LjQ0Myw0LjMyNiwxMy44MDcsNy4xNDUKCWM1LjEyNywzLjI5MywxMC4wNjEsNi44NjUsMTQuNzczLDEwLjcxOGMyLjcwNCwyLjEyNCw1LjMxMSw0LjM0NSw3LjkxNyw2LjU2NmMzNC44NTYsMzAuMjIyLDYxLjExOSw2OS4xMzMsODUuNTQ3LDEwOC4zMzQKCWMtNC4zNDUsOS4yNC03LjU4OSwxOC45NjMtOS42NTUsMjguOTY2Yy0yLjI3OSw5LjYyNi0zLjUxNSwxOS40NjUtMy42NjksMjkuMzUzYy0wLjA2OCwyOC42ODYsOS4wNzYsNTYuNjM5LDI2LjA3LDc5Ljc1NAoJYzcuMzA5LDkuOTE2LDE1LjkyMiwxOC44MTgsMjUuNTg3LDI2LjQ1NmM3LjUzMSw1Ljk1NywxNS42OSwxMS4wNjUsMjQuMzMyLDE1LjI1NkMzMDIuNTc5LDM2NS4wNywyODYuODMxLDM5NC44MDksMjYzLjExNyw0MTcuNDg5egoJIi8+CjxwYXRoIGQ9Ik0xNDcuODMxLDUwMC45MTJoLTEuNDQ4Yy02MS43NTYtOC43LTExMy45NjMtNTAuMTUtMTM2LjQzMi0xMDguMzM0Yy0xNS40NjgtNDEuNjE1LTEyLjgxMy04Ny43OTcsNy4zMzgtMTI3LjM1NQoJYzEyLjAyMS0yMS4wOTcsMjcuNTY2LTM5Ljk2NCw0NS45Ni01NS44MDljMzYuNzk3LTM0LjI0OCw1Ny43NjktODIuMjA3LDU3LjkzMy0xMzIuNDczYzAtMi4zMTcsMC00LjUzOCwwLTYuNzU5CgljLTAuMjktOC41ODQtMS4yMjYtMTcuMTM4LTIuOC0yNS41ODdjLTAuOTY2LTUuNjk3LTIuMjIxLTExLjItMy40NzYtMTYuNzA0bC0xLjE1OS01LjExN2MtMS4xNzgtNS4yMDQsMi4wNzYtMTAuMzcsNy4yOC0xMS41NDgKCWMxLjk4OS0wLjQ1NCw0LjA3NS0wLjI2MSw1Ljk0OCwwLjU0MWM1LjM5NywyLjE2MywxMC41NzMsNC44NDcsMTUuNDQ5LDguMDE0YzUuMzQ5LDMuNDQ3LDEwLjUxNSw3LjE4NCwxNS40NDksMTEuMgoJYzQxLjAzNiwzMi43MzIsNzAuODcxLDc3LjI0NCw5NS41ODksMTE3LjMxNGMxLjg3MywyLjg5NywyLjA1Nyw2LjU4NSwwLjQ4Myw5LjY1NWMtNC4yNjgsOC41MzUtNy41MDIsMTcuNTQ0LTkuNjU1LDI2Ljg0MgoJYy0xLjc4Niw4LjctMi42NTUsMTcuNTczLTIuNjA3LDI2LjQ1NmMwLjAxLDU5LjE5OCw0MS4zNzQsMTEwLjMzMyw5OS4yNTgsMTIyLjcyMWM0LjUyOCwwLjk3NSw3LjczNCw1LjAyMSw3LjYyOCw5LjY1NQoJYy0zLjE4Niw3Ny4yNDQtNjEuMjE2LDE0MS43NDItMTQxLjE2MywxNTYuMTI5Yy01LjI1MywwLjkyNy0xMC4yNTQtMi41ODgtMTEuMTgxLTcuODRjLTAuODIxLTQuNjczLDEuODczLTkuMjUsNi4zNTMtMTAuNzk1CgljMjkuOTktOS44LDUwLjUxNy0zNy40OTIsNTEuMTc0LTY5LjAzN2MtMC4yMTItMTQuNzkyLTUuMjYyLTI5LjEwMi0xNC4zODctNDAuNzQ2Yy00LjA4NCwxMi45MDktMTIuNjM5LDIzLjkzNi0yNC4xMzksMzEuMDkxCgljLTEwLjU4Miw1LjU5LTIzLjM0Nyw1LjAzLTMzLjQwOC0xLjQ0OGMtNC42NDQtMi42MjYtNi4yNzYtOC41MTYtMy42NTktMTMuMTZjMC4xNDUtMC4yNjEsMC4yOTktMC41MDIsMC40NzMtMC43NDMKCWMxMC43NjYtMTUuMzYyLDE2LjUzLTMzLjY2OSwxNi41MTEtNTIuNDI5di0wLjc3MmMtMC4yMDMtMTcuMTQ4LTUuMjUzLTMzLjg4MS0xNC41OC00OC4yNzcKCWMtNS4zMzktOC4wOTEtMTEuODQ3LTE1LjM1Mi0xOS4zMTEtMjEuNTMyYzAsMS45MzEsMCwzLjg2MiwwLDUuNzkzYzAsMS4wNjIsMCwyLjUxLDAsNC4xNTIKCWMtMC4wMTksMzAuODQtMTIuODUxLDYwLjI4OS0zNS40MzYsODEuMjk5Yy04LjUzNSw3LjM2Ny0xNS44MDYsMTYuMDY3LTIxLjUzMiwyNS43OGMtOC44MDYsMTcuNDE4LTkuOTI2LDM3LjcyNC0zLjA5LDU2LjAwMgoJYzguODI1LDIxLjYzOCwyNy4wNzQsMzguMDQzLDQ5LjUzMyw0NC41MTJjNS4zMywwLjgwMSw5LjAwOSw1Ljc3NCw4LjIwNywxMS4xMDRDMTU4LjEzMyw0OTguMDM1LDE1My4xNiw1MDEuNzA0LDE0Ny44MzEsNTAwLjkxMnoKCSBNMTM3LjExMywzOS40Nzh2MS43MzhjMS43MzgsOS4zMDgsMi43NzEsMTguNzMyLDMuMDksMjguMTk0YzAsMi4zMTcsMCw0LjkyNCwwLDcuNDM1Yy0wLjExNiw1NS41NDgtMjMuMjEyLDEwOC41NjYtNjMuODIzLDE0Ni40NzMKCWMtMTYuODIsMTQuMy0zMS4wNTIsMzEuMzgtNDIuMDk4LDUwLjQ5OGMtMTcuNzE4LDM0Ljc1LTIwLjA2NCw3NS4zNDItNi40NjksMTExLjkwN2MxMi4yNzIsMzIuMzc1LDM1LjQ1NSw1OS40NTgsNjUuNTYxLDc2LjU2OAoJYy05Ljg1OC0xNC43MTUtMTUuMTQtMzIuMDE4LTE1LjE1OS00OS43MjZjMC4xMDYtMTMuOTUyLDMuNDA4LTI3LjY5Miw5LjY1NS00MC4xNjdjNi42NTMtMTEuNzIyLDE1LjIzNi0yMi4yMzcsMjUuMzk0LTMxLjA5MQoJYzE4LjgwOS0xNy40MzgsMjkuNDc4LTQxLjk0MywyOS40NDktNjcuNTg4YzAtMS4wNjIsMC0yLjEyNCwwLTMuMDljLTAuMjIyLTguNDY4LTEuNjUxLTE2Ljg0OS00LjI0OC0yNC45MTEKCWMtMS42MzItNS4wNzksMS4xNTktMTAuNTE1LDYuMjM3LTEyLjE0N2MyLjQ4MS0wLjgwMSw1LjE3NS0wLjU2LDcuNDczLDAuNjU3YzE4LjE0Myw5LjQ5MSwzMy41MzMsMjMuNDkyLDQ0LjcwNSw0MC42NDkKCWMxMS4zNjQsMTcuNTU0LDE3LjQ5NiwzNy45ODUsMTcuNjY5LDU4Ljg5OHYxLjE1OWMwLjAxOSwxOC4xOTEtNC40NjEsMzYuMTAyLTEzLjAzNSw1Mi4xMzljMS42NjEtMC4xNjQsMy4yNjQtMC42NTcsNC43MzEtMS40NDgKCWM5LjY1NS01LjMxLDE3LjI4My0yMi40OTcsMTguMzQ1LTM1LjQzNmMwLjQzNC01LjMxLDUuMDg4LTkuMjY5LDEwLjQwOS04Ljg0NGMyLjI2OSwwLjE4Myw0LjM5MywxLjE1OSw2LjAwNiwyLjc2MQoJYzE5LjYwMSwxNy4zNjEsMzEuMjI2LDQyLjAwMSwzMi4xNTMsNjguMTY4Yy0wLjAzOSwxNi43NzItNC43ODksMzMuMjA1LTEzLjcxMSw0Ny40MDhjMzguNTkzLTIzLjY2Niw2NC4xMDMtNjMuODIzLDY5LjEzMy0xMDguODE3CgljLTYyLjc3LTE3LjM3LTEwNi4yMi03NC40OTItMTA2LjIxLTEzOS42MThjLTAuMDEtMTAuNDE4LDEuMDkxLTIwLjgwOCwzLjI4My0zMC45OTRjMS45Ni05LjAxOCw0LjgwOC0xNy44MTQsOC40OTctMjYuMjYzCgljLTIzLjI3LTM3LjA3Ny01MS4yNy03OC40MDItODguNTQxLTEwOC4wNDVDMTQyLjgzOSw0My42MywxNDAuMDEsNDEuNDY3LDEzNy4xMTMsMzkuNDc4eiIvPgo8cGF0aCBkPSJNMzY3LjIwMywzNTYuMDgxYy0zMi40NjItMC4wMS02My45ODctMTAuOTItODkuNTA2LTMwLjk5NGMtMzUuMDQtMjcuMzY0LTU1LjQ2MS02OS4zODQtNTUuMzI2LTExMy44MzgKCWMtMC4wMS0xMC40MTgsMS4wOTEtMjAuODA4LDMuMjgzLTMwLjk5NGMyLjM3NS0xMC43NTYsNi4wMDYtMjEuMTg0LDEwLjgxNC0zMS4wOTFjMjMuOTY1LTUwLjQ5OCw3NC44MzktODIuNjk5LDEzMC43MzUtODIuNzQ3CgljNzkuOTg2LDAuMDE5LDE0NC44MTMsNjQuODc1LDE0NC44MDMsMTQ0Ljg2MWMtMC4wMSw0NC40MDUtMjAuMzkyLDg2LjM0OS01NS4yOTcsMTEzLjgwOQoJQzQzMS4yMzgsMzQ1LjI0NywzOTkuNjg0LDM1Ni4xNzcsMzY3LjIwMywzNTYuMDgxeiBNMzY3LjIwMyw4NS43MjhjLTQ4LjQ3LDAuMDE5LTkyLjU4NiwyNy45NDMtMTEzLjM1NSw3MS43NAoJYy00LjI2OCw4LjU2NC03LjUwMiwxNy42MTItOS42NTUsMjYuOTM5Yy0xLjc3Nyw4LjgzNS0yLjYyNiwxNy44MzQtMi41MSwyNi44NDJjMC4wMSw1OS4xOTgsNDEuMzc0LDExMC4zMzMsOTkuMjU4LDEyMi43MjEKCWM4LjYzMiwxLjg1NCwxNy40MzgsMi43OSwyNi4yNjMsMi44YzY5LjMyNiwwLDEyNS41MjEtNTYuMTk1LDEyNS41MjEtMTI1LjUyMVM0MzYuNTE5LDg1LjcyOCwzNjcuMjAzLDg1LjcyOHoiLz4KPHBhdGggZD0iTTM4MC41MjcsMjQwLjIxNWgtMjYuNjQ5Yy05LjI3OSwwLjA5Ny0xNy4xMDktNi44OTQtMTguMDU2LTE2LjEyNWwtNy4yNDItOTAuMDg1Yy0wLjM3Ny00Ljc4OSwxLjI3NS05LjUxMSw0LjUzOC0xMy4wMzUKCWMzLjQ4Ni0zLjc2Niw4LjM5MS01Ljg5OSwxMy41MTgtNS44OWg0MS4wMzZjNS4xMjctMC4wMSwxMC4wMzIsMi4xMjQsMTMuNTE4LDUuODljMy4zMDIsMy41MDUsNC45ODIsOC4yMzYsNC42MzUsMTMuMDM1CglsLTcuMjQyLDkwLjQ3MkMzOTcuNDQ0LDIzMy41NTMsMzg5LjY3MSwyNDAuMzMxLDM4MC41MjcsMjQwLjIxNXogTTM1NS4wMzcsMjIwLjkwNGgyNC41MjVsNi45NTItODYuODk5aC0zOC42MjJMMzU1LjAzNywyMjAuOTA0eiIKCS8+CjxwYXRoIGQ9Ik0zNzIuMzIsMzE3LjQ1OWgtMTAuMjM1Yy0xMy4xNTEtMC4wNDgtMjMuODAxLTEwLjY5OC0yMy44NDktMjMuODQ5di0xMC4yMzVjMC4wNDgtMTMuMTUxLDEwLjY5OC0yMy44MDEsMjMuODQ5LTIzLjg0OQoJaDEwLjEzOGMxMy4xODksMCwyMy44ODgsMTAuNjYsMjMuOTQ2LDIzLjg0OXYxMC4xMzhDMzk2LjE2OSwzMDYuNjkzLDM4NS41LDMxNy40MDEsMzcyLjMyLDMxNy40NTl6IE0zNjIuMTgyLDI3OC44MzcKCWMtMi40ODEsMC4wNDgtNC40OSwyLjA1Ny00LjUzOCw0LjUzOHYxMC4xMzhjMC4wNDgsMi40ODEsMi4wNTcsNC40OSw0LjUzOCw0LjUzOGgxMC4xMzhjMi40ODEtMC4wNDgsNC40OS0yLjA1Nyw0LjUzOC00LjUzOAoJdi0xMC4xMzhjLTAuMDQ4LTIuNDgxLTIuMDU3LTQuNDktNC41MzgtNC41MzhIMzYyLjE4MnoiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIuMjI0IDUxMi4yMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMi4yMjQgNTEyLjIyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMjEuNzEsNDI3LjU3M2MtNDIuMjM5LTE2Ljc4Mi02OS45NjgtNTcuNjMyLTY5Ljk3My0xMDMuMDgzYzAuMDEyLTcuOTc2LDAuODctMTUuOTI4LDIuNTYtMjMuNzIzCgkJCWMyLjE4NC0xMC4wNTIsNS44MDUtMTkuNzM4LDEwLjc1Mi0yOC43NTdjMi4wNS0zLjcwOCwxLjA2OS04LjM1OS0yLjMwNC0xMC45MjNjLTMuMjMtMi40MjYtNi4zMDctNS4wNDgtOS4yMTYtNy44NTEKCQkJYy04LjQ2NC04LjI0Ni0xNS4yNzEtMTguMDM3LTIwLjA1My0yOC44NDNjLTQuODMyLTExLjE4MS03LjMzLTIzLjIzMi03LjMzOS0zNS40MTNjMC4xMTItMTMuOTgsMy41NjUtMjcuNzMxLDEwLjA2OS00MC4xMDcKCQkJYzIuMjE5LTQuMDk2LDQuNDM3LTguMTA3LDYuOTk3LTEyLjExN2MxLjg3NS0yLjg0OCwxLjg3NS02LjUzOSwwLTkuMzg3bC0xNy44MzUtMjguNDE2bC0xNy4wNjctMjcuMzkyCgkJCWMtMS45ODEtMy4yMTgtNC42ODgtNS45MjUtNy45MDYtNy45MDZjLTExLjM1OC02Ljk5Mi0yNi4yMzMtMy40NTItMzMuMjI1LDcuOTA2bC01MC4xNzYsODAuNjQKCQkJYy0xMS4yNjQsMTguMDkxLTIyLjg2OSwzNi43NzktMzQuOTAxLDU0Ljc4NGwtMy40MTMsNS4wMzVjLTE0LjM2NiwyMC41NzYtMjcuNjExLDQxLjkxMi0zOS42OCw2My45MTUKCQkJYy0xMS42MzQsMjIuNTU5LTE3LjY5MSw0Ny41NzgtMTcuNjY0LDcyLjk2Yy0wLjAzNCwyMS44ODgsNC40MDksNDMuNTUxLDEzLjA1Niw2My42NTljMTcuMTY0LDM5LjM0Myw0OC45Niw3MC40NjYsODguNjYxLDg2Ljc4NAoJCQljMjAuNDk0LDguNTM5LDQyLjQ4MSwxMi45MTksNjQuNjgzLDEyLjg4NWMyMi4xOTYsMC4wNjEsNDQuMTgzLTQuMjksNjQuNjgzLTEyLjhjMTkuNzMzLTguMDkxLDM3LjcwMy0xOS45NDUsNTIuOTA3LTM0LjkwMQoJCQljNy41MzktNy4zNywxNC4zNDEtMTUuNDU4LDIwLjMwOS0yNC4xNDljMC4zNzctMC41NDYsMC42ODktMS4xMzQsMC45MjktMS43NTJDMzI4LjI3NSw0MzQuMjMsMzI2LjEwMiw0MjkuMjgzLDMyMS43MSw0MjcuNTczegoJCQkgTTI5My4zNzksNDUyLjQ5Yy0xMy42NTIsMTMuMzUzLTI5Ljc2NSwyMy45MzEtNDcuNDQ1LDMxLjE0N2MtMzcuMjgxLDE1LjM0My03OS4xMTMsMTUuMzQzLTExNi4zOTUsMAoJCQljLTM1LjU3OS0xNC42NDctNjQuMDY4LTQyLjU1NS03OS40NDUtNzcuODI0Yy03LjczNC0xNy45NzgtMTEuNzEzLTM3LjM0Ny0xMS42OTEtNTYuOTE3Yy0wLjA2LTIyLjY3NSw1LjMyNS00NS4wMzMsMTUuNzAxLTY1LjE5NQoJCQljMTEuNzk3LTIxLjQzOCwyNC43MjktNDIuMjMyLDM4Ljc0MS02Mi4yOTNsMy40MTMtNS4wMzVjMTIuMjAzLTE4LjE3NiwyMy44OTMtMzcuMDM1LDM1LjI0My01NS4yMTFsNTAuMTc2LTgwLjcyNQoJCQljMS4yNzEtMi4xMzIsMy41NzctMy40MzEsNi4wNTktMy40MTNjMi41OTcsMC4wNTYsNC45NTUsMS41Myw2LjE0NCwzLjg0bDE3LjA2NywyNy4zOTJsMTQuOTMzLDI0LjA2NAoJCQljLTEuNjIxLDIuNTYtMy4yNDMsNS40NjEtNC44NjQsOC41MzNjLTcuNzM2LDE0LjkyNC0xMS43NzUsMzEuNDg4LTExLjc3Niw0OC4yOTljLTAuMDU1LDE0LjQ4NiwyLjg0OSwyOC44Myw4LjUzMyw0Mi4xNTUKCQkJYzUuNjksMTIuNzksMTMuNzcxLDI0LjM3NiwyMy44MDgsMzQuMTMzYzEuNzA3LDEuNjIxLDMuNDEzLDMuMTU3LDUuMjA1LDQuNjkzYy00LjA5Niw4LjYwNS03LjE4OCwxNy42NTMtOS4yMTYsMjYuOTY1CgkJCWMtMS45MzUsOS4wMDItMi45MDgsMTguMTg0LTIuOTAxLDI3LjM5MmMwLjA0LDQ4LjUxOCwyNy40MDIsOTIuODc3LDcwLjc0MSwxMTQuNjg4CgkJCUMzMDEuNjgyLDQ0My44NjIsMjk3LjY2NCw0NDguMzA4LDI5My4zNzksNDUyLjQ5eiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik0xMDAuMDE0LDQ0Mi41OTJjLTAuMDU4LDAtMC4xMTQtMC4wMDgtMC4xNzItMC4wMDljLTAuMDU3LDAuMDAxLTAuMTEzLDAuMDA5LTAuMTcsMC4wMDlIMTAwLjAxNHoiLz4KCQkJPHBhdGggZD0iTTEwNS42NDYsNDI4Yy0xMC40MzItMTAuMjEzLTE4Ljc3OC0yMi4zNTYtMjQuNTc2LTM1Ljc1NWMtNS43NjUtMTMuNzE4LTguNjY5LTI4LjQ2OS04LjUzMy00My4zNDkKCQkJCWMtMC4wNS0xNy4xOCw0LjAxNy0zNC4xMjMsMTEuODYxLTQ5LjQwOGMwLjIxNS0wLjM0OSwwLjQwNC0wLjcxMywwLjU2Ni0xLjA5YzEuODY3LTQuMzI3LTAuMTI3LTkuMzQ5LTQuNDU1LTExLjIxNgoJCQkJYy00LjMyNy0xLjg2Ny05LjM0OSwwLjEyNy0xMS4yMTYsNC40NTVjLTkuMTE5LDE3LjcwNy0xMy44NTksMzcuMzQyLTEzLjgyNCw1Ny4yNTljLTAuMDM3LDE3LjIyLDMuNDQ3LDM0LjI2NywxMC4yNCw1MC4wOTEKCQkJCWM2LjY5LDE1LjQxNiwxNi4zMTIsMjkuMzg1LDI4LjMzMSw0MS4xMzFjMS41NDksMS41MzYsMy42MjYsMi40MTIsNS44MDIsMi40NjZjMi4yMDEtMC4wNTMsNC4zLTAuOTQ5LDUuODUzLTIuNTE1CgkJCQlDMTA5LjAxNSw0MzYuNzIxLDEwOC45OTIsNDMxLjMxOCwxMDUuNjQ2LDQyOHoiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDE5LjE2MSwxNDAuNTk3Yy04LjA0NS0xNC41MjItMTYuODc2LTI4LjU5NC0yNi40NTMtNDIuMTU1bC0xLjcwNy0yLjQ3NUMzODEuNDQzLDgyLjQsMzcyLjkxLDY4LjE0OSwzNjQuMzc3LDU0LjQxCgkJCUwzMzUuNzksOC43NTdjLTEuNDk2LTIuMzg0LTMuNTEyLTQuNC01Ljg5Ni01Ljg5NmMtOC43NDItNS40ODYtMjAuMjc3LTIuODQ2LTI1Ljc2Myw1Ljg5NkwyNzUuNjMsNTQuNDEKCQkJYy04LjUzMywxNC4wOC0xNy40MDgsMjcuOTg5LTI2LjQ1Myw0MS44OTljLTYuOTk3LDEwLjE1NS0xNC4wOCwyMC41NjUtMjAuMzk1LDMxLjIzMmMtMi41Niw0LjA5Ni01LjEyLDguNDQ4LTcuNjgsMTMuMzEyCgkJCWMtNy43MzYsMTQuOTI0LTExLjc3NSwzMS40ODgtMTEuNzc2LDQ4LjI5OWMtMC4wNTUsMTQuNDg2LDIuODQ5LDI4LjgzLDguNTMzLDQyLjE1NWM1LjY5LDEyLjc5LDEzLjc3MSwyNC4zNzUsMjMuODA4LDM0LjEzMwoJCQljMy4zOTIsMy4yOSw2Ljk4Miw2LjM2NywxMC43NTIsOS4yMTZjMS40NzcsMS4xMDgsMy4yNzQsMS43MDcsNS4xMiwxLjcwN2wxLjg3Ny0wLjI1NmMyLjQzNy0wLjUxOSw0LjUyNi0yLjA3OCw1LjcxNy00LjI2NwoJCQljOS43MjQtMTguMTI3LDI0LjMyNi0zMy4xNzMsNDIuMTU1LTQzLjQzNWMzMi44NzgtMTguNjIyLDcyLjkwMi0xOS41MiwxMDYuNTgxLTIuMzg5YzAuNDQ2LDAuMjM2LDAuOTEyLDAuNDMyLDEuMzkzLDAuNTg1CgkJCWM0LjQ5LDEuNDMzLDkuMjkxLTEuMDQ1LDEwLjcyNC01LjUzNUM0MzQuNTI1LDE5NC40MDUsNDMyLjA2OCwxNjUuNDM5LDQxOS4xNjEsMTQwLjU5N3ogTTQxMi4wNzgsMjA2LjMwNAoJCQljLTM2LjkwOS0xNS4xMzktNzguNzI5LTEyLjQ2NC0xMTMuNDA4LDcuMjUzYy0xNy41MzcsMTAuMTQ5LTMyLjM5OSwyNC4zMzgtNDMuMzQ5LDQxLjM4N2wtMS43OTItMS43MDcKCQkJYy04LjQ2NC04LjI0Ni0xNS4yNzEtMTguMDM3LTIwLjA1My0yOC44NDNjLTQuODMyLTExLjE4MS03LjMzLTIzLjIzMi03LjMzOS0zNS40MTNjLTAuMDA3LTE0LjA0NiwzLjM1OC0yNy44ODgsOS44MTMtNDAuMzYzCgkJCWMyLjIxOS0zLjg0LDQuNTIzLTguMTkyLDcuMTY4LTEyLjM3M2M2LjE0NC0xMC40MTEsMTMuMTQxLTIwLjY1MSwyMC4wNTMtMzAuNzJjOS4zODctMTMuODI0LDE4LjQzMi0yOC4xNiwyNi45NjUtNDIuMDY5CgkJCWwyOC41MDEtNDUuMzk3YzAuMjgxLTAuNDg2LDAuODA0LTAuNzgxLDEuMzY1LTAuNzY4YzAuNTYxLTAuMDEzLDEuMDg1LDAuMjgyLDEuMzY1LDAuNzY4bDI3LjkwNCw0NS4zMTIKCQkJYzguNjE5LDEzLjkwOSwxNy41NzksMjguMjQ1LDI2Ljk2NSw0Mi4wNjlsMS43MDcsMi40NzVjOS4yNTgsMTMuMDQsMTcuODAzLDI2LjU3MSwyNS42LDQwLjUzMwoJCQlDNDEyLjkxLDE2Ni4xOTQsNDE1LjkyMSwxODYuNjEsNDEyLjA3OCwyMDYuMzA0eiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI3Ny4zMzcsMjI4Ljc0NmMtNS4zMjUtNS4xNy05LjYxMi0xMS4zMS0xMi42MjktMTguMDkxYy0yLjkzOC02Ljg0OC00LjQ0OC0xNC4yMjMtNC40MzctMjEuNjc1CgkJCWMtMC4wMDUtOC41NTIsMi4wNDQtMTYuOTgsNS45NzMtMjQuNTc2YzEuNzA3LTMuMTU3LDMuNDk5LTYuNCw1LjYzMi05LjcyOGwwLjUxMi0wLjg1M2MwLjEzOC0wLjIwNCwwLjI2OC0wLjQxNCwwLjM4OC0wLjYyOQoJCQljMi4zMDEtNC4xMTMsMC44MzEtOS4zMTMtMy4yODItMTEuNjEzYy00LjExMy0yLjMwMS05LjMxMy0wLjgzMS0xMS42MTMsMy4yODJsLTAuNTEyLDAuNzY4CgkJCWMtMi4yMTksMy41ODQtNC4zNTIsNy4yNTMtNi4yMjksMTAuODM3Yy01LjIxMSwxMC4wNDUtNy45MzIsMjEuMTk1LTcuOTM2LDMyLjUxMmMtMC4wMDIsOS44MDMsMi4wMDIsMTkuNTAyLDUuODg4LDI4LjUwMQoJCQljMy44OTIsOC43ODcsOS40MjQsMTYuNzUxLDE2LjI5OSwyMy40NjdjMS42MDMsMS41NDUsMy43NDcsMi40MDMsNS45NzMsMi4zODl2MC4wODVjMi4zMzYsMC4wMTQsNC41NzUtMC45Myw2LjE5Ni0yLjYxMQoJCQlDMjgwLjgzLDIzNy40MTksMjgwLjczLDIzMi4wMTcsMjc3LjMzNywyMjguNzQ2eiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQyMS43MjEsMjEwLjgyNmMtMzguODc1LTE5LjgwMS04NS4wOTItMTguNzc2LTEyMy4wNTEsMi43MzFjLTIwLjU3OSwxMS44NTgtMzcuNDI4LDI5LjIzOS00OC42NCw1MC4xNzYKCQkJYy01LjczNCwxMC40NjYtOS45MywyMS43MDMtMTIuNDU5LDMzLjM2NWMtMS45MzUsOS4wMDItMi45MDgsMTguMTg0LTIuOTAxLDI3LjM5MmMwLDcwLjY5Miw1Ny4zMDgsMTI4LDEyOCwxMjgKCQkJYzQ3Ljg5OSwwLjA3MSw5MS44MjktMjYuNjA2LDExMy44NTUtNjkuMTRDNTA5LjAzMywzMjAuNTc1LDQ4NC40OTYsMjQzLjMzNCw0MjEuNzIxLDIxMC44MjZ6IE0zNjIuNjcsNDM1LjQyNAoJCQljLTYxLjI2NywwLTExMC45MzMtNDkuNjY3LTExMC45MzMtMTEwLjkzM2MwLjAwNi04LjAwNCwwLjg2NC0xNS45ODUsMi41Ni0yMy44MDhjMi4xNzgtMTAuMDgxLDUuNzk5LTE5Ljc5NiwxMC43NTItMjguODQzCgkJCWMxOS4zNTUtMzUuODk0LDU2Ljg0Mi01OC4yNzUsOTcuNjIxLTU4LjI4M2M2MS4yNjcsMCwxMTAuOTMzLDQ5LjY2NiwxMTAuOTMzLDExMC45MzNTNDIzLjkzNyw0MzUuNDI0LDM2Mi42Nyw0MzUuNDI0eiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM5Mi43MDcsMjQ0LjcwNGMtMy4wODUtMy4zMjEtNy40MTQtNS4yMDctMTEuOTQ3LTUuMjA1aC0zNi4yNjdjLTQuNTMzLTAuMDAyLTguODYyLDEuODg0LTExLjk0Nyw1LjIwNQoJCQljLTIuODc5LDMuMTE2LTQuMzMyLDcuMjktNC4wMTEsMTEuNTJsNi40LDc5LjUzMWMwLjc5Niw4LjE5NCw3LjcyNSwxNC40MTksMTUuOTU3LDE0LjMzNmgyMy41NTIKCQkJYzguMDg2LDAuMTA1LDE0Ljk1OC01Ljg4NSwxNS45NTctMTMuOTA5bDYuNC03OS45NTdDMzk3LjEwMiwyNTEuOTgxLDM5NS42MTcsMjQ3LjgwNiwzOTIuNzA3LDI0NC43MDR6IE0zNzMuNTkzLDMzMy4wMjRoLTIxLjY3NQoJCQlsLTYuMzE1LTc2LjhoMzQuMTMzTDM3My41OTMsMzMzLjAyNHoiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zNjcuMTA3LDM2Ny4xNTdoLTguOTZjLTExLjYyMSwwLjA0Ny0yMS4wMzEsOS40NTYtMjEuMDc3LDIxLjA3N3Y5LjA0NWMwLjA0NywxMS42MjEsOS40NTYsMjEuMDMxLDIxLjA3NywyMS4wNzdoOS4wNDUKCQkJYzExLjY1NC0wLjA0NywyMS4wNzctOS41MDgsMjEuMDc3LTIxLjE2M3YtOC45NkMzODguMjIzLDM3Ni41OCwzNzguNzYyLDM2Ny4xNTcsMzY3LjEwNywzNjcuMTU3eiBNMzcxLjIwMywzOTcuMTk0CgkJCWMtMC4wNDUsMi4xOTYtMS44MTUsMy45NjUtNC4wMTEsNC4wMTFoLTguOTZjLTIuMTk2LTAuMDQ1LTMuOTY1LTEuODE1LTQuMDExLTQuMDExdi04Ljk2YzAuMDQ1LTIuMTk2LDEuODE1LTMuOTY1LDQuMDExLTQuMDExCgkJCWg4Ljk2YzIuMTk2LDAuMDQ1LDMuOTY1LDEuODE1LDQuMDExLDQuMDExVjM5Ny4xOTR6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIuMDAyIDUxMi4wMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMi4wMDIgNTEyLjAwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBzdHlsZT0iZmlsbDojQzUyODI4OyIgZD0iTTQ4MS45MjksMzI0LjM1YzAsNjUuOTUxLTUzLjQ2NCwxMTkuNDE1LTExOS40MTUsMTE5LjQxNWMtNS43MTUsMC4wMDktMTEuNDEzLTAuNDE4LTE3LjA1OS0xLjI3OQoJYy01OC43MzUtOC40NzgtMTAyLjMzLTU4Ljc5NS0xMDIuMzU2LTExOC4xMzVjLTAuMDE3LTU5LjM3NSw0My41OTUtMTA5Ljc0MiwxMDIuMzU2LTExOC4yMjFjNS42NTUtMC43ODUsMTEuMzUzLTEuMTg2LDE3LjA1OS0xLjE5NAoJQzQyOC40NjUsMjA0LjkzNSw0ODEuOTI5LDI1OC4zOTgsNDgxLjkyOSwzMjQuMzV6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNGNDQzMzU7IiBkPSJNNDQ3LjgxLDMyNC4zNWMtMC4wMjYsNTkuMzQxLTQzLjYyMSwxMDkuNjU3LTEwMi4zNTYsMTE4LjEzNQoJYy01OC43MzUtOC40NzgtMTAyLjMzLTU4Ljc5NS0xMDIuMzU2LTExOC4xMzVjLTAuMDE3LTU5LjM3NSw0My41OTUtMTA5Ljc0MiwxMDIuMzU2LTExOC4yMjEKCUM0MDQuMjI0LDIxNC42MTYsNDQ3LjgyNywyNjQuOTc1LDQ0Ny44MSwzMjQuMzV6Ii8+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0ZERDgzNDsiIGQ9Ik0zNzQuMjg1LDM0MS40MDloLTIzLjU0MmMtMy43NjIsMC4xMTEtNi45NzctMi42NjEtNy40MjEtNi4zOTdsLTYuMzk3LTc5LjkyMwoJCWMtMC4xODgtMy45NDksMi44NTctNy4zMSw2LjgwNy03LjUwNmMwLjIwNS0wLjAwOSwwLjQwOS0wLjAwOSwwLjYxNCwwaDM2LjI1MWMzLjk1OC0wLjE0NSw3LjI3NiwyLjk0Myw3LjQyMSw2Ljg5MgoJCWMwLjAwOSwwLjIwNSwwLjAwOSwwLjQwOSwwLDAuNjE0bC02LjM5Nyw3OS45MjNDMzgxLjE4NSwzMzguNzE0LDM3OC4wMTIsMzQxLjQ3NywzNzQuMjg1LDM0MS40MDl6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojRkREODM0OyIgZD0iTTM1Ny45OTMsMzc1LjUyN2g5LjA0MWM2LjkyNiwwLDEyLjUzOSw1LjYxMiwxMi41MzksMTIuNTM5djkuMDQxCgkJYzAsNi45MjYtNS42MTIsMTIuNTM5LTEyLjUzOSwxMi41MzloLTkuMDQxYy02LjkyNiwwLTEyLjUzOS01LjYxMi0xMi41MzktMTIuNTM5di05LjA0MQoJCUMzNDUuNDU0LDM4MS4xNCwzNTEuMDc1LDM3NS41MjcsMzU3Ljk5MywzNzUuNTI3eiIvPgo8L2c+CjxwYXRoIHN0eWxlPSJmaWxsOiMwMzc3QkM7IiBkPSJNMzE4LjQxNSw0MzUuMjM1Yy01LjYzOCw4LjIyMy0xMi4wNjksMTUuODgyLTE5LjE5MiwyMi44NTkKCWMtMTQuNDMyLDE0LjE1OS0zMS40NjYsMjUuMzkzLTUwLjE1NCwzMy4wOTVjLTE5LjQ1Niw4LjExMi00MC4zMjgsMTIuMjgzLTYxLjQxMywxMi4yODNjLTYuODc1LDAuMDE3LTEzLjc0MS0wLjQzNS0yMC41NTYtMS4zNjUKCWMtMTQuMDQ4LTEuNzMyLTI3Ljc5OC01LjM3NC00MC44NTctMTAuODMzYy0zNy42MzMtMTUuNDktNjcuNzU5LTQ1LjAwMi04NC4wMTctODIuMzExYy04LjE2My0xOS4wMy0xMi4zNjgtMzkuNTE4LTEyLjM2OC02MC4yMTkKCWMwLjA4NS0yNC4wMzYsNS45MzctNDcuNjk4LDE3LjA1OS02OS4wMDVjMTIuOTkxLTIzLjQ5MSwyNy4yMjctNDYuMjczLDQyLjY0OC02OC4yMzdjMTUuMjY4LTIyLjc3NCwyOS41MTMtNDYuMTQ1LDQ0LjAxMy02OS4zNDYKCWwzNC4xMTktNTQuNTA0bDcuMzM1LTExLjc3MWM0LjUwNC03LjM1MywxNC4xMTctOS42NTYsMjEuNDY5LTUuMTQzYzIuMDk4LDEuMjg4LDMuODY0LDMuMDQ1LDUuMTQzLDUuMTQzbDM0LjcxNiw1NS44NjkKCWMtMi42NDQsNC4xOC01LjAzMiw4LjUzLTcuMzM1LDEyLjcwOWMtNy4zNjEsMTMuNjczLTExLjMxLDI4LjkxNS0xMS41MTUsNDQuNDM5YzAuMDE3LDEzLjMxNSwyLjczOCwyNi40OTMsOC4wMTgsMzguNzI1CgljNS4yMDMsMTEuODMxLDEyLjY0OSwyMi41NTIsMjEuOTIxLDMxLjU2YzMuMTQ3LDMuMDQ1LDYuNDgzLDUuODk0LDkuOTgsOC41M2MtNS4zNCw5LjczMi05LjI0NiwyMC4xOS0xMS42LDMxLjA0OAoJYy0xLjgxNyw4LjQxLTIuNzM4LDE2Ljk4My0yLjcyOSwyNS41ODlDMjQzLjE0MSwzNzMuMjUsMjcyLjk3OCw0MTcuMTc4LDMxOC40MTUsNDM1LjIzNXoiLz4KPHBhdGggc3R5bGU9ImZpbGw6IzAyQTlGNDsiIGQ9Ik0yNzcuMjE3LDQzNS4yMzVjLTUuNjM4LDguMjIzLTEyLjA2OSwxNS44ODItMTkuMTkyLDIyLjg1OQoJYy0xNC40MzIsMTQuMTU5LTMxLjQ2NiwyNS4zOTMtNTAuMTU0LDMzLjA5NWMtMTMuMDUsNS40MDgtMjYuNzU3LDkuMDUtNDAuNzcyLDEwLjgzM2MtMTQuMDQ4LTEuNzMyLTI3Ljc5OC01LjM3NC00MC44NTctMTAuODMzCgljLTM3LjYzMy0xNS40OS02Ny43NTktNDUuMDAyLTg0LjAxNy04Mi4zMTFjLTguMTU0LTE5LjAwNC0xMi4zNTktMzkuNDU4LTEyLjM2OC02MC4xMzRjMC4wODUtMjQuMDM2LDUuOTM3LTQ3LjY5OCwxNy4wNTktNjkuMDA1CgljMTIuOTkxLTIzLjQ5MSwyNy4yMjctNDYuMjczLDQyLjY0OC02OC4yMzdjMTUuMjY4LTIyLjc3NCwyOS41MTMtNDYuMTQ1LDQ0LjAxMy02OS4zNDZsMzQuMTE5LTU0LjUwNAoJYzkuMjEyLDE0LjY3MSwxOC4zMzksMjkuNDI3LDI3LjQ2NSw0NC4wOThjLTIuNjQ0LDQuMTgtNS4wMzIsOC41My03LjMzNSwxMi43MDljLTcuMTA1LDEzLjcwNy0xMC44MjQsMjguOTE1LTEwLjgzMyw0NC4zNTQKCWMwLjAxNywxMy4zMTUsMi43MzgsMjYuNDkzLDguMDE4LDM4LjcyNWM1LjIwMywxMS44MzEsMTIuNjQ5LDIyLjU1MiwyMS45MjEsMzEuNTZjMy4xNDcsMy4wNDUsNi40ODMsNS44OTQsOS45OCw4LjUzCgljLTUuNTg3LDkuNzI0LTkuNzI0LDIwLjIxNS0xMi4yODMsMzEuMTMzYy0xLjgxNyw4LjQxLTIuNzM4LDE2Ljk4My0yLjcyOSwyNS41ODlDMjAxLjk0MywzNzMuMjUsMjMxLjc4LDQxNy4xNzgsMjc3LjIxNyw0MzUuMjM1eiIKCS8+CjxwYXRoIHN0eWxlPSJmaWxsOiMwMzc3QkM7IiBkPSJNNDExLjM4OCwxNDQuNTQ1Yy04LjQxLTE1LjEwNi0xNy42MzktMjkuNzM0LTI3LjYzNi00My44NDIKCWMtOS44OTQtMTQuNTg2LTE5LjE5Mi0yOS41OTgtMjguNDg5LTQ0LjUyNUwzMjguMzk1LDEzLjUzYy0zLjAzNy00LjcwOC05LjMyMy02LjA2NS0xNC4wMzEtMy4wMjgKCWMtMS4yMTEsMC43ODUtMi4yNDMsMS44MTctMy4wMjgsMy4wMjhsLTEyLjc5NCwyMC4yMTVsLTE0LjA3NCwyMi40MzNjLTkuMjk3LDE0LjkyNy0xOC41OTUsMjkuOTM5LTI4LjQ4OSw0NC41MjUKCWMtNi45OTQsMTAuMjM2LTEzLjk4OSwyMC40NzEtMjAuMzAxLDMxLjEzM2MtMi42NDQsNC4xOC01LjAzMiw4LjUzLTcuMzM1LDEyLjcwOWMtNy4xMDUsMTMuNzA3LTEwLjgyNCwyOC45MTUtMTAuODMzLDQ0LjM1NAoJYzAuMTQ1LDI2LjQ5MywxMC45MzUsNTEuODE4LDI5LjkzOSw3MC4yODRjMy4xNDcsMy4wNDUsNi40ODMsNS44OTQsOS45OCw4LjUzYzE3LjI2NC0zMi4wNDYsNDguMTkyLTU0LjQ2Miw4NC4wMTctNjAuOTAyCgljNi45NTItMS4yNzEsMTQuMDA2LTEuOTAyLDIxLjA2OC0xLjg3N2M1LjE4NiwwLjAwOSwxMC4zNzIsMC4zMjQsMTUuNTI0LDAuOTM4YzEzLjgyNywxLjgzNCwyNy4yMTgsNi4wODIsMzkuNTc4LDEyLjUzOQoJQzQyNS40NjIsMTkzLjk0OSw0MjMuMjE5LDE2Ny4zNTMsNDExLjM4OCwxNDQuNTQ1eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojMDJBOUY0OyIgZD0iTTM3OS41NzMsMTg4Ljg5OWMwLjAxNyw1LjcyMy0wLjUwMywxMS40My0xLjUzNSwxNy4wNTljLTUuMTUyLTAuNjQ4LTEwLjMzOC0wLjk4OS0xNS41MjQtMS4wMjQKCWMtNy4wNjMtMC4wMjYtMTQuMTE3LDAuNjA2LTIxLjA2OCwxLjg3N2MtMzUuODI0LDYuNDQtNjYuNzUzLDI4Ljg1Ni04NC4wMTcsNjAuOTAyYy0zLjQ5Ny0yLjYzNi02LjgzMi01LjQ4NS05Ljk4LTguNTMKCWMtMzEuMDk5LTI5Ljc0My0zOC44NzgtNzYuNDE3LTE5LjEwNi0xMTQuNjM4YzIuMzAzLTQuMzUsNC42OTEtOC41Myw3LjMzNS0xMi43MDljNi4zMTItMTAuNjYyLDEzLjMwNi0yMC44OTgsMjAuMzAxLTMxLjEzMwoJYzkuODk0LTE0LjU4NiwxOS4xOTItMjkuNTk4LDI4LjQ4OS00NC41MjVsMTQuMDc0LTIyLjQzM2wxNC4wNzQsMjIuNDMzYzkuMjk3LDE0LjkyNywxOC41OTUsMjkuOTM5LDI4LjQ4OSw0NC41MjUKCWM5Ljk5NywxNC4xMDgsMTkuMjI2LDI4LjczNiwyNy42MzYsNDMuODQyQzM3NS44NTQsMTU4LjI1MiwzNzkuNTY0LDE3My40NiwzNzkuNTczLDE4OC44OTl6Ii8+CjxwYXRoIGQ9Ik0xODcuNjU2LDUxMi4wMDJjLTIyLjE5NCwwLjAzNC00NC4xNjYtNC4zNDItNjQuNjU1LTEyLjg4Yy0zOS42OC0xNi4zMDktNzEuNDctNDcuNDI1LTg4LjYyMy04Ni43NDYKCWMtOC42NDEtMjAuMDk2LTEzLjA4NC00MS43NTMtMTMuMDUtNjMuNjMxYy0wLjAyNi0yNS4zNjcsNi4wMy01MC4zNzYsMTcuNjU2LTcyLjkyOGMxMi4wNjEtMjEuOTg5LDI1LjMwNy00My4zMjIsMzkuNjYzLTYzLjg4NwoJbDMuNDEyLTUuMDMyYzEyLjAyNy0xNy45OTgsMjMuNjI3LTM2LjY3NywzNC44ODYtNTQuNzZMMTY3LjEsNzEuNTMxYzYuOTg2LTExLjM1MywyMS44NjEtMTQuODkzLDMzLjIxNC03Ljg5OAoJYzMuMjE2LDEuOTc5LDUuOTIsNC42ODMsNy44OTgsNy44OThsMTcuMDU5LDI3LjM4bDE3LjgyNywyOC40MDRjMS44NzcsMi44NDksMS44NzcsNi41MzQsMCw5LjM4MwoJYy0yLjU1OSw0LjAwOS00Ljc3Nyw4LjAxOC02Ljk5NCwxMi4xMTJjLTYuNSwxMi4zNjgtOS45NTQsMjYuMTE4LTEwLjA2NSw0MC4wODljMC4wMDksMTIuMTcyLDIuNTA4LDI0LjIyNCw3LjMzNSwzNS4zOTgKCWM0Ljc3NywxMC43OTksMTEuNTgzLDIwLjU5MSwyMC4wNDUsMjguODNjMi45MDksMi43OTgsNS45ODgsNS40MjUsOS4yMTIsNy44NDdjMy4zNjksMi41NTksNC4zNSw3LjIwOCwyLjMwMywxMC45MTgKCWMtNC45NDcsOS4wMTYtOC41NjQsMTguNjk3LTEwLjc0NywyOC43NDVjLTEuNjg5LDcuNzg4LTIuNTUsMTUuNzM3LTIuNTU5LDIzLjcxMmMwLjAwOSw0NS40MjksMjcuNzIxLDg2LjI2LDY5Ljk0MywxMDMuMDM4CgljNC4zOTMsMS43MDYsNi41NTksNi42NTMsNC44NTMsMTEuMDQ2Yy0wLjIzOSwwLjYxNC0wLjU1NCwxLjIwMy0wLjkzLDEuNzQ5Yy01Ljk2Miw4LjY4My0xMi43NjksMTYuNzY5LTIwLjMwMSwyNC4xMzkKCWMtMTUuMiwxNC45NTItMzMuMTYzLDI2LjgtNTIuODg0LDM0Ljg4NkMyMzEuODIzLDUwNy43MTEsMjA5Ljg0Miw1MTIuMDYxLDE4Ny42NTYsNTEyLjAwMnogTTE4Ny42NTYsNzYuOTkKCWMtMi40ODItMC4wMTctNC43ODUsMS4yNzktNi4wNTYsMy40MTJsLTUwLjE1NCw4MC42OWMtMTEuMzQ0LDE4LjE2OC0yMy4wMywzNy4wMTktMzUuMjI3LDU1LjE4N2wtMy40MTIsNS4wMzIKCWMtMTQuMDA2LDIwLjA1My0yNi45MzcsNDAuODQtMzguNzI1LDYyLjI2NmMtMTAuMzcyLDIwLjE1Ni0xNS43NTQsNDIuNTAzLTE1LjY5NSw2NS4xNjZjLTAuMDI2LDE5LjU1OCwzLjk1OCwzOC45MjEsMTEuNjg2LDU2Ljg5MwoJYzE1LjM3LDM1LjI1Myw0My44NTEsNjMuMTUzLDc5LjQxMSw3Ny43OWMzNy4yNjYsMTUuMzM2LDc5LjA3OCwxNS4zMzYsMTE2LjM0NCwwYzE3LjY3My03LjIxNiwzMy43NzctMTcuNzg0LDQ3LjQyNS0zMS4xMzMKCWM0LjI4Mi00LjE4LDguMjk5LTguNjIzLDEyLjAyNy0xMy4zMDZjLTQzLjMyMi0yMS44MDItNzAuNjY4LTY2LjEzOS03MC43MTEtMTE0LjYzOGMtMC4wMDktOS4yMDMsMC45NjQtMTguMzgxLDIuOS0yNy4zOAoJYzIuMDMtOS4zMDYsNS4xMTgtMTguMzU2LDkuMjEyLTI2Ljk1NGMtMS43OTEtMS41MzUtMy40OTctMy4wNzEtNS4yMDMtNC42OTFjLTEwLjAzMS05Ljc0OS0xOC4xMDgtMjEuMzMzLTIzLjc5OC0zNC4xMTkKCWMtNS42ODEtMTMuMzE1LTguNTgxLTI3LjY1My04LjUzLTQyLjEzNmMwLTE2LjgwMyw0LjAzNS0zMy4zNTksMTEuNzcxLTQ4LjI3OGMxLjYyMS0zLjA3MSwzLjI0MS01Ljk3MSw0Ljg2Mi04LjUzbC0xNC45MjctMjQuMDU0CglsLTE3LjA1OS0yNy4zOEMxOTIuNjEyLDc4LjUyNSwxOTAuMjU4LDc3LjA1LDE4Ny42NTYsNzYuOTl6Ii8+CjxwYXRoIGQ9Ik05OS45NzEsNDQyLjRjLTIuMjM1LTAuMDA5LTQuMzg0LTAuODk2LTUuOTcxLTIuNDc0Yy0xMi4wMS0xMS43MzctMjEuNjMxLTI1LjctMjguMzE4LTQxLjExMwoJYy02Ljc5LTE1LjgxNC0xMC4yNy0zMi44NTYtMTAuMjM2LTUwLjA2OWMtMC4wMzQtMTkuOTA4LDQuNy0zOS41MzUsMTMuODE4LTU3LjIzNGMxLjg2OC00LjMyNSw2Ljg4My02LjMyLDExLjIwOC00LjQ1MgoJczYuMzIsNi44ODMsNC40NTIsMTEuMjA4Yy0wLjE2MiwwLjM3NS0wLjM1LDAuNzQyLTAuNTYzLDEuMDkyYy03LjgzOSwxNS4yNzctMTEuOTA3LDMyLjIxNi0xMS44NTYsNDkuMzg3CgljLTAuMTM2LDE0Ljg3NiwyLjc2NCwyOS42MTUsOC41Myw0My4zMzFjNS43OTIsMTMuMzkyLDE0LjE0MiwyNS41MjksMjQuNTY1LDM1LjczOWMzLjM0NCwzLjMxOCwzLjM2OSw4LjcxNywwLjA1MSwxMi4wNjEKCWMtMS41OTUsMS42MDQtMy43NjIsMi41MTYtNi4wMjIsMi41MjVMOTkuOTcxLDQ0Mi40TDk5Ljk3MSw0NDIuNHoiLz4KPHBhdGggZD0iTTI1Ny40MjgsMjc2LjI0MmMtMS44NDIsMC0zLjY0Mi0wLjU5Ny01LjExOC0xLjcwNmMtMy43Ny0yLjg0OS03LjM2MS01LjkyOC0xMC43NDctOS4yMTIKCWMtMTAuMDMxLTkuNzQ5LTE4LjEwOC0yMS4zMzMtMjMuNzk4LTM0LjExOWMtNS42ODEtMTMuMzE1LTguNTgxLTI3LjY1My04LjUzLTQyLjEzNmMwLTE2LjgwMyw0LjAzNS0zMy4zNTksMTEuNzcxLTQ4LjI3OAoJYzIuNTU5LTQuODYyLDUuMTE4LTkuMjEyLDcuNjc3LTEzLjMwNmM2LjMxMi0xMC42NjIsMTMuMzkyLTIxLjA2OCwyMC4zODYtMzEuMjE4YzkuMDQxLTEzLjkwMywxNy45MTItMjcuODA3LDI2LjQ0Mi00MS44ODEKCUwzMDQsOC43NTNjNS40ODUtOC43MzQsMTcuMDE3LTExLjM3OSwyNS43NTEtNS44OTRjMi4zOCwxLjQ5Myw0LjQwMSwzLjUxNCw1Ljg5NCw1Ljg5NGwyOC41NzQsNDUuNjM0CgljOC41MywxMy43MzMsMTcuMDU5LDI3Ljk3NywyNi42MTIsNDEuNTM5bDEuNzA2LDIuNDc0YzkuNTcsMTMuNTU0LDE4LjM5OCwyNy42MTksMjYuNDQyLDQyLjEzNgoJYzEyLjkwNSwyNC44MywxNS4zNjIsNTMuNzg4LDYuODI0LDgwLjQzNGMtMS40MzMsNC40ODctNi4yMzUsNi45NjktMTAuNzIyLDUuNTM2Yy0wLjQ3OC0wLjE1NC0wLjk0Ny0wLjM1LTEuMzktMC41ODkKCWMtMzMuNjY2LTE3LjExOS03My42NzEtMTYuMjIzLTEwNi41MzUsMi4zODhjLTE3LjgxOCwxMC4yNjEtMzIuNDEzLDI1LjI5OS00Mi4xMzYsNDMuNDE2Yy0xLjE5NCwyLjE5Mi0zLjI3NSwzLjc0NS01LjcxNSw0LjI2NQoJTDI1Ny40MjgsMjc2LjI0MnogTTMxOS44NjUsMTcuMjgzYy0wLjU2My0wLjAwOS0xLjA4MywwLjI4MS0xLjM2NSwwLjc2OGwtMjguNDg5LDQ1LjM3OGMtOC41MywxMy45MDMtMTcuNTcxLDI4LjIzMy0yNi45NTQsNDIuMDUxCgljLTYuOTA5LDEwLjA2NS0xMy45MDMsMjAuMzAxLTIwLjA0NSwzMC43MDdjLTIuNjQ0LDQuMTgtNC45NDcsOC41My03LjE2NSwxMi4zNjhjLTYuNDQ4LDEyLjQ3LTkuODE4LDI2LjMwNS05LjgwOSw0MC4zNDUKCWMwLjAwOSwxMi4xNzIsMi41MDgsMjQuMjI0LDcuMzM1LDM1LjM5OGM0Ljc3NywxMC43OTksMTEuNTgzLDIwLjU5MSwyMC4wNDUsMjguODNsMS43OTEsMS43MDYKCWMxMC45NDQtMTcuMDQyLDI1LjgwMi0zMS4yMjcsNDMuMzMxLTQxLjM2OWMzNC42NjQtMTkuNzEyLDc2LjQ2OC0yMi4zODIsMTEzLjM1OS03LjI1YzMuODM4LTE5LjY4NiwwLjgyNy00MC4wODktOC41My01Ny44MzEKCWMtNy43OTYtMTMuOTU0LTE2LjMzNC0yNy40ODItMjUuNTg5LTQwLjUxNmwtMS43MDYtMi40NzRjLTkuMzgzLTEzLjgxOC0xOC4zMzktMjguMTQ4LTI2Ljk1NC00Mi4wNTFMMzIxLjIzLDE4LjA1CglDMzIwLjk1NywxNy41NjQsMzIwLjQyOCwxNy4yNzQsMzE5Ljg2NSwxNy4yODN6Ii8+CjxwYXRoIGQ9Ik0yNzEuMjQ2LDI0My4yMzNjLTIuMjI2LDAuMDE3LTQuMzY3LTAuODQ0LTUuOTcxLTIuMzg4Yy02Ljg3NS02LjcxMy0xMi40MDItMTQuNjcxLTE2LjI5Mi0yMy40NTYKCWMtMy44ODEtOC45OTktNS44ODUtMTguNjg4LTUuODg1LTI4LjQ4OWMwLTExLjMxLDIuNzIxLTIyLjQ1OSw3LjkzMy0zMi40OThjMS44NzctMy41ODIsNC4wMDktNy4yNSw2LjIyNy0xMC44MzNsMC41MTItMC43NjgKCWMyLjMwMy00LjExMSw3LjQ5OC01LjU3OCwxMS42MDktMy4yODRjNC4xMTEsMi4zMDMsNS41NzgsNy40OTgsMy4yODQsMTEuNjA5Yy0wLjExOSwwLjIxMy0wLjI0NywwLjQyNi0wLjM5MiwwLjYzMWwtMC41MTIsMC44NTMKCWMtMi4xMzIsMy4zMjctMy45MjQsNi41NjgtNS42Myw5LjcyNGMtMy45MzIsNy41OTEtNS45NzksMTYuMDE5LTUuOTcxLDI0LjU2NWMtMC4wMDksNy40NDYsMS41MDEsMTQuODI1LDQuNDM1LDIxLjY2NQoJYzMuMDIsNi43ODEsNy4zMDEsMTIuOTE0LDEyLjYyNCwxOC4wODNjMy4zOTUsMy4yNjcsMy40ODksOC42NjYsMC4yMjIsMTIuMDYxYy0xLjYyMSwxLjY4LTMuODU1LDIuNjI3LTYuMTkzLDIuNjFWMjQzLjIzMwoJTDI3MS4yNDYsMjQzLjIzM3oiLz4KPHBhdGggZD0iTTM2Mi41MTQsNDUyLjI5NGMtNzAuNjYsMC0xMjcuOTQ1LTU3LjI4NS0xMjcuOTQ1LTEyNy45NDVjLTAuMDA5LTkuMjAzLDAuOTY0LTE4LjM4MSwyLjktMjcuMzgKCWMyLjUyNS0xMS42Niw2LjcyMS0yMi44OTQsMTIuNDUzLTMzLjM1MWMxMS4yMDgtMjAuOTMyLDI4LjA0NS0zOC4yOTgsNDguNjE5LTUwLjE1NGMzNy45NC0yMS40OTUsODQuMTM2LTIyLjUxOCwxMjIuOTk3LTIuNzI5CgljNjIuNzQ0LDMyLjQ4OSw4Ny4yNzUsMTA5LjcsNTQuNzc3LDE3Mi40NTJDNDU0LjMxLDQyNS42OTksNDEwLjM5OSw0NTIuMzcxLDM2Mi41MTQsNDUyLjI5NHogTTM2Mi41MTQsMjEzLjQ2NAoJYy00MC43NjMsMC4wMDktNzguMjM0LDIyLjM4Mi05Ny41NzksNTguMjU3Yy00Ljk0Nyw5LjA0MS04LjU3MiwxOC43NTctMTAuNzQ3LDI4LjgzYy0xLjY5Nyw3LjgyMi0yLjU1LDE1Ljc5Ny0yLjU1OSwyMy43OTgKCWMwLDYxLjI0Myw0OS42NDMsMTEwLjg4NSwxMTAuODg1LDExMC44ODVzMTEwLjg4NS00OS42NDIsMTEwLjg4NS0xMTAuODg1UzQyMy43NTYsMjEzLjQ2NCwzNjIuNTE0LDIxMy40NjR6Ii8+CjxwYXRoIGQ9Ik0zNzQuMjg1LDM0OS45MzloLTIzLjU0MmMtOC4yMzEsMC4wODUtMTUuMTU3LTYuMTQxLTE1Ljk1LTE0LjMzbC02LjM5Ny03OS40OTZjLTAuMzI0LTQuMjMxLDEuMTM0LTguNDAyLDQuMDA5LTExLjUxNQoJYzMuMDg4LTMuMzE4LDcuNDEyLTUuMjAzLDExLjk0Mi01LjIwM2gzNi4yNTFjNC41MjksMCw4Ljg1NCwxLjg4NSwxMS45NDEsNS4yMDNjMi45MDksMy4xMDUsNC4zOTMsNy4yNzYsNC4wOTQsMTEuNTE1CglsLTYuMzk3LDc5LjkyM0MzODkuMjM3LDM0NC4wNjIsMzgyLjM3MSwzNTAuMDQ5LDM3NC4yODUsMzQ5LjkzOXogTTM1MS43NjYsMzMyLjg3OWgyMS42NjVsNi4xNDEtNzYuNzY3aC0zNC4xMTlMMzUxLjc2NiwzMzIuODc5eiIKCS8+CjxwYXRoIGQ9Ik0zNjcuMDM0LDQxOC4xNzZoLTkuMDQxYy0xMS42MTctMC4wNDMtMjEuMDI2LTkuNDUxLTIxLjA2OC0yMS4wNjh2LTkuMDQxYzAuMDQzLTExLjYxNyw5LjQ1MS0yMS4wMjYsMjEuMDY4LTIxLjA2OGg4Ljk1NgoJYzExLjY1MSwwLDIxLjEwMiw5LjQxNywyMS4xNTMsMjEuMDY4djguOTU2QzM4OC4xMDMsNDA4LjY3NCwzNzguNjg2LDQxOC4xMzMsMzY3LjAzNCw0MTguMTc2eiBNMzU4LjA3OCwzODQuMDU3CgljLTIuMTkyLDAuMDQzLTMuOTY2LDEuODE3LTQuMDA5LDQuMDA5djguOTU2YzAuMDQzLDIuMTkyLDEuODE3LDMuOTY2LDQuMDA5LDQuMDA5aDguOTU2YzIuMTkyLTAuMDQzLDMuOTY2LTEuODE3LDQuMDA5LTQuMDA5Cgl2LTguOTU2Yy0wLjA0My0yLjE5Mi0xLjgxNy0zLjk2Ni00LjAwOS00LjAwOUgzNTguMDc4eiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBjb3B5cmlnaHQgMjAxNyBibHVlZm94IGRvZ2Fmb3hAZ21haWwuY29tIC0tPgo8c3ZnIGlkPSJnbG93eSIgd2lkdGg9IjE3MCIgaGVpZ2h0PSIxNzAiIHZpZXdCb3g9Ii0yMCAtMjAgMTkwIDE5MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgoKICAgIDxkZWZzPgogICAgICAgIDxmaWx0ZXIgaWQ9IndoaXRlLWdsb3ciIHg9Ii01MDAwJSIgeT0iLTUwMDAlIiB3aWR0aD0iMTAwMDAlIiBoZWlnaHQ9IjEwMDAwJSI+CiAgICAgICAgICAgIDxmZUZsb29kIHJlc3VsdD0iZmxvb2QiIGZsb29kLWNvbG9yPSIjNzBDNUZGIiBmbG9vZC1vcGFjaXR5PSIxIj48L2ZlRmxvb2Q+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0iZmxvb2QiIHJlc3VsdD0ibWFzayIgaW4yPSJTb3VyY2VHcmFwaGljIiBvcGVyYXRvcj0iaW4iPjwvZmVDb21wb3NpdGU+CiAgICAgICAgICAgIDxmZU1vcnBob2xvZ3kgaW49Im1hc2siIHJlc3VsdD0iZGlsYXRlZCIgb3BlcmF0b3I9ImRpbGF0ZSIgcmFkaXVzPSIyIj48L2ZlTW9ycGhvbG9neT4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIGluPSJkaWxhdGVkIiByZXN1bHQ9ImJsdXJyZWQiIHN0ZERldmlhdGlvbj0iNSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlTWVyZ2U+CiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49ImJsdXJyZWQiPjwvZmVNZXJnZU5vZGU+CiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+CiAgICAgICAgICAgIDwvZmVNZXJnZT4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KCiAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAgICAgIC5zdGF0ZSB7CiAgICAgICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgICAgIHN0cm9rZS13aWR0aDogNTsKICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIH0KICAgIDwvc3R5bGU+CgogICAgPHBhdGggY2xhc3M9InBhdGggc3RhdGUgc3RPZmYiIGQ9Ik0wLDEwOXYzNi4zYzAsNS4zLDMuNyw5LjcsOC4zLDkuN2g1MC4xdi0yM2gzN3YyM0gxNTNWODRIMGwyOC40LTI5VjEzaDE4LjF2MjRMNzYuNSwwbDY2LjIsNjkiIC8+Cjwvc3ZnPgoK\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMS40NDggNTExLjQ0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjQ0OCA1MTEuNDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIHN0eWxlPSJmaWxsOiMyMTk2RjM7IiBkPSJNMzQ0LjU1NiwxMTIuMjE2QzMxOC4zOCw3OC44NCwyOTEuMzQsNDQuMzQ0LDI2OS41MTYsNy4zMmMtNS43Ni05Ljc2LTIxLjgyNC05Ljc2LTI3LjU1MiwwCgljLTIxLjg1NiwzNy4wMjQtNDguODk2LDcxLjUyLTc1LjA3MiwxMDQuODk2Yy01My4wNTYsNjcuNjgtMTAzLjE2OCwxMzEuNjE2LTEwMy4xNjgsMjA3LjIzMmMwLDEwNS44ODgsODYuMTEyLDE5MiwxOTIsMTkyCglzMTkyLTg2LjExMiwxOTItMTkyQzQ0Ny43MjQsMjQzLjgzMiwzOTcuNjEyLDE3OS44OTYsMzQ0LjU1NiwxMTIuMjE2eiIvPgo8Zz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGQUZBRkE7IiBkPSJNMjA3LjcyNCwyODcuNDQ4Yy0yNi40NjQsMC00OC0yMS41MzYtNDgtNDhzMjEuNTM2LTQ4LDQ4LTQ4czQ4LDIxLjUzNiw0OCw0OAoJCVMyMzQuMTg4LDI4Ny40NDgsMjA3LjcyNCwyODcuNDQ4eiBNMjA3LjcyNCwyMjMuNDQ4Yy04LjgzMiwwLTE2LDcuMTY4LTE2LDE2czcuMTY4LDE2LDE2LDE2czE2LTcuMTY4LDE2LTE2CgkJUzIxNi41NTYsMjIzLjQ0OCwyMDcuNzI0LDIyMy40NDh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojRkFGQUZBOyIgZD0iTTMwMy43MjQsNDQ3LjQ0OGMtMjYuNDY0LDAtNDgtMjEuNTM2LTQ4LTQ4czIxLjUzNi00OCw0OC00OHM0OCwyMS41MzYsNDgsNDgKCQlTMzMwLjE4OCw0NDcuNDQ4LDMwMy43MjQsNDQ3LjQ0OHogTTMwMy43MjQsMzgzLjQ0OGMtOC44LDAtMTYsNy4yLTE2LDE2czcuMiwxNiwxNiwxNnMxNi03LjIsMTYtMTYKCQlTMzEyLjUyNCwzODMuNDQ4LDMwMy43MjQsMzgzLjQ0OHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGQUZBRkE7IiBkPSJNMTc1LjcyNCw0MTUuNDQ4Yy00LjA5NiwwLTguMTkyLTEuNTY4LTExLjMyOC00LjY3MmMtNi4yNC02LjI0LTYuMjQtMTYuMzg0LDAtMjIuNjI0bDE2MC0xNjAKCQljNi4yNC02LjI0LDE2LjM4NC02LjI0LDIyLjYyNCwwczYuMjQsMTYuMzg0LDAsMjIuNjI0bC0xNjAsMTYwQzE4My45MTYsNDEzLjg4LDE3OS44Miw0MTUuNDQ4LDE3NS43MjQsNDE1LjQ0OHoiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgoJIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MDguMTYgNTA4LjE2IgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOC4xNiA1MDguMTY7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik01MDQuMTgsMTMuNjdjLTAuMTQtMC4wMDEtMC4yODEsMC4wMDYtMC40MiwwLjAySDRjLTIuMjA5LDAtNCwxLjc5MS00LDR2NDcuMjhjMCwyLjIwOSwxLjc5MSw0LDQsNGgxOS43MmwtMTMuNDQsNDIuMDQKCQljLTAuNjg1LDIuMSwwLjQ2Myw0LjM1OCwyLjU2Myw1LjA0M2MwLjM5OSwwLjEzLDAuODE3LDAuMTk3LDEuMjM3LDAuMTk3aDkuNjRsLTEzLjQ0LDQyLjA0Yy0wLjY4NSwyLjEsMC40NjMsNC4zNTgsMi41NjMsNS4wNDMKCQljMC4zOTksMC4xMywwLjgxNywwLjE5NywxLjIzNywwLjE5N2g5LjY0bC0xMy40NCw0Mi4wNGMtMC42ODUsMi4xLDAuNDYzLDQuMzU4LDIuNTYzLDUuMDQzYzAuMzk5LDAuMTMsMC44MTcsMC4xOTcsMS4yMzcsMC4xOTcKCQloOS42NGwtMTMuNDQsNDIuMDRjLTAuNjg1LDIuMSwwLjQ2Myw0LjM1OCwyLjU2Myw1LjA0M2MwLjM5OSwwLjEzLDAuODE3LDAuMTk3LDEuMjM3LDAuMTk3aDkuNjRsLTEzLjQ0LDQyLjA4CgkJYy0wLjM4OSwxLjIwOC0wLjE4MSwyLjUyOSwwLjU2LDMuNTZjMC43NTUsMS4wMzQsMS45NiwxLjY0MywzLjI0LDEuNjRoOS42NGwtMTMuNDQsNDIuMDhjLTAuMzg5LDEuMjA4LTAuMTgxLDIuNTI5LDAuNTYsMy41NgoJCWMwLjc1NSwxLjAzNCwxLjk2LDEuNjQzLDMuMjQsMS42NGg5LjY0bC0xMy40NCw0Mi4wOGMtMC4zODksMS4yMDgtMC4xODEsMi41MjksMC41NiwzLjU2YzAuNzU1LDEuMDM0LDEuOTYsMS42NDMsMy4yNCwxLjY0aDkuNjQKCQlsLTEzLjQ0LDQyLjE2Yy0wLjM4OSwxLjIwOC0wLjE4MSwyLjUyOSwwLjU2LDMuNTZjMC43NTUsMS4wMzQsMS45NiwxLjY0MywzLjI0LDEuNjRoOS42NGwtMTMuNDQsNDIKCQljLTAuMzg5LDEuMjA4LTAuMTgxLDIuNTI5LDAuNTYsMy41NmMwLjc1NSwxLjAzNCwxLjk2LDEuNjQzLDMuMjQsMS42NGg0NzkuOGMxLjI4LDAuMDAzLDIuNDg1LTAuNjA2LDMuMjQtMS42NAoJCWMwLjc0MS0xLjAzMSwwLjk0OS0yLjM1MiwwLjU2LTMuNTZsLTEzLjQ0LTQyLjA4aDkuNjRjMS4yOCwwLjAwMywyLjQ4NS0wLjYwNiwzLjI0LTEuNjRjMC43NDEtMS4wMzEsMC45NDktMi4zNTIsMC41Ni0zLjU2CgkJbC0xMy40NC00Mi4wOGg5LjY0YzEuMjgsMC4wMDMsMi40ODUtMC42MDYsMy4yNC0xLjY0YzAuNzQxLTEuMDMxLDAuOTQ5LTIuMzUyLDAuNTYtMy41NmwtMTMuNDQtNDIuMDhoOS42NAoJCWMxLjI4LDAuMDAzLDIuNDg1LTAuNjA2LDMuMjQtMS42NGMwLjc0MS0xLjAzMSwwLjk0OS0yLjM1MiwwLjU2LTMuNTZsLTEzLjQ0LTQyLjA4aDkuNjRjMS4yOCwwLjAwMywyLjQ4NS0wLjYwNiwzLjI0LTEuNjQKCQljMC43NDEtMS4wMzEsMC45NDktMi4zNTIsMC41Ni0zLjU2bC0xMy42NC00Mi4wOGg5Ljg0YzIuMjA2LDAuMTEsNC4wODQtMS41OSw0LjE5NC0zLjc5NmMwLjAyNC0wLjQ4OS0wLjA0MS0wLjk3OC0wLjE5NC0xLjQ0NAoJCWwtMTMuNDQtNDIuMDRoOS40NGMyLjIwNiwwLjExLDQuMDg0LTEuNTksNC4xOTQtMy43OTZjMC4wMjQtMC40ODktMC4wNDEtMC45NzgtMC4xOTQtMS40NDRsLTEzLjQ0LTQyLjA0aDkuNDQKCQljMi4yMDYsMC4xMSw0LjA4NC0xLjU5LDQuMTk0LTMuNzk2YzAuMDI0LTAuNDg5LTAuMDQxLTAuOTc4LTAuMTk0LTEuNDQ0bC0xMy40NC00Mi4wNGg5LjQ0YzIuMjA2LDAuMTEsNC4wODQtMS41OSw0LjE5NC0zLjc5NgoJCWMwLjAyNC0wLjQ4OS0wLjA0MS0wLjk3OC0wLjE5NC0xLjQ0NGwtMTMuNDQtNDIuMDRoMTkuNzJjMi4yMDksMCw0LTEuNzkxLDQtNFYxNy42OUM1MDguMTcxLDE1LjQ4MSw1MDYuMzg5LDEzLjY4MSw1MDQuMTgsMTMuNjd6CgkJIE05OS4wOCw0ODYuNDlIMTkuNTZsMTIuNTYtMzkuMjhoNjYuOTZWNDg2LjQ5eiBNOTkuMDgsNDM5LjIxSDE5LjU2bDEyLjU2LTM5LjI4aDY2Ljk2VjQzOS4yMXogTTk5LjA4LDM5MS45M0gxOS41NmwxMi41Ni0zOS4yOAoJCWg2Ni45NlYzOTEuOTN6IE05OS4wOCwzNDQuNjVIMTkuNTZsMTIuNTYtMzkuMjhoNjYuOTZWMzQ0LjY1eiBNOTkuMDgsMjk3LjM3SDE5LjU2bDEyLjU2LTM5LjI4aDY2Ljk2VjI5Ny4zN3ogTTk5LjA4LDI1MC4wOQoJCUgxOS41NmwxMi41Ni0zOS4yOGg2Ni45NlYyNTAuMDl6IE05OS4wOCwyMDIuODFIMTkuNTZsMTIuNTYtMzkuMjhoNjYuOTZWMjAyLjgxeiBNOTkuMDgsMTU1LjUzSDE5LjU2bDEyLjU2LTM5LjI4aDY2Ljk2VjE1NS41M3oKCQkgTTk5LjA4LDEwOC4yNUgxOS41NmwxMi41Ni0zOS4yOGg2Ni45NlYxMDguMjV6IE0xMjUuODgsNDg2LjQ5aC0xOC44di0zOS4yOGgxOC44VjQ4Ni40OXogTTEyNS44OCw0MzkuMjFoLTE4Ljh2LTM5LjI4aDE4LjgKCQlWNDM5LjIxeiBNMTI1Ljg4LDM5MS45M2gtMTguOHYtMzkuMjhoMTguOFYzOTEuOTN6IE0xMjUuODgsMzQ0LjY1aC0xOC44di0zOS4yOGgxOC44VjM0NC42NXogTTEyNS44OCwyOTcuMzdoLTE4Ljh2LTM5LjI4aDE4LjgKCQlWMjk3LjM3eiBNMTI1Ljg4LDI1MC4wOWgtMTguOHYtMzkuMjhoMTguOFYyNTAuMDl6IE0xMjUuODgsMjAyLjgxaC0xOC44di0zOS4yOGgxOC44VjIwMi44MXogTTEyNS44OCwxNTUuNTNoLTE4Ljh2LTM5LjI4aDE4LjgKCQlWMTU1LjUzeiBNMTI2LjA0LDEwOC4yNWgtMTguOTZWNjguOTdoMTguOTZWMTA4LjI1eiBNMzczLjg4LDQ4Ni40OWgtMjQwdi0zOS4yOGgyNDBWNDg2LjQ5eiBNMTMzLjg4LDQzOS4yMXYtMzkuMjhoMjM5LjY4djM5LjI4CgkJSDEzMy44OHogTTM3My44OCwzOTEuOTNoLTI0MHYtMzkuMjhoMjQwVjM5MS45M3ogTTM3My44OCwzNDQuNjVoLTI0MHYtMzkuMjhoMjQwVjM0NC42NXogTTM3My44OCwyOTcuMzdoLTI0MHYtMzkuMjhoMjQwVjI5Ny4zN3oKCQkgTTM3My44OCwyNTAuMDloLTI0MHYtMzkuMjhoMjQwVjI1MC4wOXogTTM3My44OCwyMDIuODFoLTI0MHYtMzkuMjhoMjQwVjIwMi44MXogTTM3My44OCwxNTUuNTNoLTI0MHYtMzkuMjhoMjQwVjE1NS41M3oKCQkgTTEzMy44OCwxMDguMjVWNjguOTdoMjM5Ljg0djM5LjI4SDEzMy44OHogTTQwMC41Miw0ODYuNDloLTE4LjY0bC0wLjMyLTM5LjI4aDE4Ljk2VjQ4Ni40OXogTTQwMC41Miw0MzkuMjFoLTE4Ljk2di0zOS4yOGgxOC45NgoJCVY0MzkuMjF6IE00MDAuNTIsMzkxLjkzaC0xOC45NnYtMzkuMjhoMTguOTZWMzkxLjkzeiBNNDAwLjUyLDM0NC42NWgtMTguOTZ2LTM5LjI4aDE4Ljk2VjM0NC42NXogTTQwMC44NCwyOTcuMzdoLTE4Ljk2di0zOS4yOAoJCWgxOC45NlYyOTcuMzd6IE00MDAuODQsMjUwLjA5aC0xOC45NnYtMzkuMjhoMTguOTZWMjUwLjA5eiBNNDAwLjg0LDIwMi44MWgtMTguOTZ2LTM5LjI4aDE4Ljk2VjIwMi44MXogTTQwMC44NCwxNTUuNTNoLTE4Ljk2CgkJdi0zOS4yOGgxOC45NlYxNTUuNTN6IE0zODEuODgsMTA4LjI1VjY4Ljk3aDE4Ljh2MzkuMjhIMzgxLjg4eiBNNDQ1LjQ0LDExNi4yNXYzOS4yOGgtMzYuOTJ2LTM5LjI4SDQ0NS40NHogTTQwOC42OCwxMDguMjVWNjguOTcKCQloMzYuOTJ2MzkuMjhINDA4LjY4eiBNNDQ1LjQ0LDE2My41M3YzOS4yOGgtMzYuOTJ2LTM5LjI4SDQ0NS40NHogTTQ0NS40NCwyMTAuODF2MzkuMjhoLTM2Ljkydi0zOS4yOEg0NDUuNDR6IE00NDUuNDQsMjU4LjA5CgkJdjM5LjI4aC0zNi45MnYtMzkuMjhINDQ1LjQ0eiBNNDQ1LjQ0LDMwNS4zN3YzOS4yOGgtMzYuNzZsLTAuMTYtMzkuMjhINDQ1LjQ0eiBNNDg4LjEyLDQ4Ni40OWgtNzkuNDR2LTM5LjI4aDY2Ljk2TDQ4OC4xMiw0ODYuNDkKCQl6IE00ODguMTIsNDM5LjIxaC03OS40NHYtMzkuMjhoNjYuOTZMNDg4LjEyLDQzOS4yMXogTTQ4OC4xMiwzOTEuOTNoLTc5LjQ0di0zOS4yOGgzNi45MnYxNy40NGMwLDIuMjA5LDEuNzkxLDQsNCw0CgkJYzIuMjA5LDAsNC0xLjc5MSw0LTR2LTE3LjQ0aDIyLjA0TDQ4OC4xMiwzOTEuOTN6IE00ODguMTIsMzQ0LjY1aC0zNC42di0zOS4yOGgyMi4wNEw0ODguMTIsMzQ0LjY1eiBNNDg4LjEyLDI5Ny4zN2gtMzQuNnYtMzkuMjgKCQloMjIuMDRMNDg4LjEyLDI5Ny4zN3ogTTQ4OC4xMiwyNTAuMDloLTM0LjZ2LTM5LjI4aDIyLjA0TDQ4OC4xMiwyNTAuMDl6IE00ODguMTIsMjAyLjgxaC0zNC42di0zOS4yOGgyMi4wNEw0ODguMTIsMjAyLjgxegoJCSBNNDg4LjEyLDE1NS41M2gtMzQuNnYtMzkuMjhoMjIuMDRMNDg4LjEyLDE1NS41M3ogTTQ4OC4xMiwxMDguMjVoLTM0LjZWNjguOTdoMjIuMDRMNDg4LjEyLDEwOC4yNXogTTQ5OS42OCw2MC45N0g4VjIxLjY5CgkJaDQ5MS43Nkw0OTkuNjgsNjAuOTd6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8Zz4KCTxwYXRoIGQ9Ik00NTQuMzIsMzcuMzNoLTEzLjc2Yy0yLjIwOSwwLTQsMS43OTEtNCw0YzAsMi4yMDksMS43OTEsNCw0LDRoMTMuNzZjMi4yMDksMCw0LTEuNzkxLDQtNAoJCUM0NTguMzIsMzkuMTIxLDQ1Ni41MjksMzcuMzMsNDU0LjMyLDM3LjMzeiIgIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjxnPgoJPHBhdGggZD0iTTQxNC44NCwzNy4zM2gtOTZjLTIuMjA5LDAtNCwxLjc5MS00LDRjMCwyLjIwOSwxLjc5MSw0LDQsNGg5NmMyLjIwOSwwLDQtMS43OTEsNC00CgkJQzQxOC44NCwzOS4xMjEsNDE3LjA0OSwzNy4zMyw0MTQuODQsMzcuMzN6IiAgZmlsbD0iY3VycmVudENvbG9yIi8+CjwvZz4KPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDI0Ljk4NiAyNC45ODYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0Ljk4NiAyNC45ODY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7IiBkPSJNMTcuNTQ4LDE3Ljk2MWwtMC43NzEtMC43NjljMCwwLTEuMjI1LDEuMzA1LTEuMzA0LDEuMzA1Yy0wLjA4MSwwLTEuMzA4LTEuMzA1LTEuMzA4LTEuMzA1CgkJbC0wLjc3MSwwLjc2OWMwLDAsMS4zMDYsMS4xOTgsMS4zMDYsMS4zMDhjMCwwLjEwNi0xLjMwNiwxLjMwOC0xLjMwNiwxLjMwOGwwLjc3MSwwLjc2N2MwLDAsMS4yMTctMS4zMDUsMS4zMDgtMS4zMDUKCQljMC4wODksMCwxLjMwNCwxLjMwNSwxLjMwNCwxLjMwNWwwLjc3MS0wLjc2N2MwLDAtMS4zMDctMS4yMTgtMS4zMDctMS4zMDhDMTYuMjQyLDE5LjE3NywxNy41NDgsMTcuOTYxLDE3LjU0OCwxNy45NjF6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7IiBkPSJNMTUuNDcyLDE0LjQzNWMtMi42NjcsMC00LjgzLDIuMTY0LTQuODMsNC44MzFzMi4xNjMsNC44Myw0LjgzLDQuODNzNC44My0yLjE2Myw0LjgzLTQuODMKCQlTMTguMTM5LDE0LjQzNSwxNS40NzIsMTQuNDM1eiBNMTUuNDcyLDIzLjM0OGMtMi4yNTIsMC00LjA4MS0xLjgyOC00LjA4MS00LjA4MmMwLTIuMjU5LDEuODI5LTQuMDgxLDQuMDgxLTQuMDgxCgkJYzIuMjU0LDAsNC4wODIsMS44MjIsNC4wODIsNC4wODFDMTkuNTU0LDIxLjUyLDE3LjcyNiwyMy4zNDgsMTUuNDcyLDIzLjM0OHoiLz4KCTxjaXJjbGUgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgY3g9IjEwLjA2IiBjeT0iMi4yMDciIHI9IjIuMjA3Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7IiBkPSJNMTAuMiwyMC40NzZ2My4yNmwwLjAwOSwwLjAwOWMwLjAwOSwwLjY4OCwwLjU2NSwxLjIzOCwxLjI1MSwxLjIzOAoJCWMwLjY0MywwLDEuMTY3LTAuNDg3LDEuMjM2LTEuMTFjLTAuMDgzLTAuMDUyLTAuMTczLTAuMDkzLTAuMjUzLTAuMTQ2QzExLjMzLDIyLjk3NiwxMC41MTcsMjEuODIxLDEwLjIsMjAuNDc2eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTEyLjQ1NSwxNC43MjRjMC4wOC0wLjA1NywwLjE2OC0wLjA5NywwLjI1My0wLjE0NmwtMC4wMDItNi42ODdoMC42MDZ2NS4wNDcKCQljMCwwLjAwMywwLDAuMDA2LDAsMC4wMDdjMCwwLjUxNiwwLjQxNywwLjkzMiwwLjkzMiwwLjkzMmMwLjUxNiwwLDAuOTMzLTAuNDE2LDAuOTMzLTAuOTMyYzAtMC4wMDEsMC0wLjAwNCwwLTAuMDA3VjcuNTEKCQljLTAuMjA2LTIuNDItMy4wMTMtMi4zODUtMy4wMTMtMi4zODVINy43NEM0LjU3Miw1LjE4NSw0LjY4NSw3LjUxLDQuNjg1LDcuNTFsLTAuMDAxLDUuNDI4aDAuMDAzCgkJYy0wLjAwMiwwLjAxNC0wLjAwMiwwLjAyNS0wLjAwMiwwLjA0YzAsMC41MTUsMC40MTcsMC45MzIsMC45MzIsMC45MzJjMC41MTQsMCwwLjkyOS0wLjQxNywwLjkyOS0wLjkzMgoJCWMwLTAuMDE1LDAtMC4wMjUtMC4wMDEtMC4wNGgwLjAwMVY3LjkxNEg3LjEzTDcuMTIzLDIzLjcyNWMwLDAuNjkzLDAuNTYyLDEuMjYxLDEuMjU3LDEuMjYxczEuMjU3LTAuNTY1LDEuMjU3LTEuMjYxVjEzLjUyMwoJCWgwLjU2MnY0LjQ1N0MxMC41MTcsMTYuNjI5LDExLjMzNiwxNS40NzQsMTIuNDU1LDE0LjcyNHoiLz4KPC9nPgoKPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDYzLjkwNyA2My45MDciIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvcjtlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYzLjkwNyA2My45MDc7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiCgk+CjxnPgoJPGNpcmNsZSBjeD0iMzAuNTE1IiBjeT0iNi4xMzYiIHI9IjYuMTM2Ii8+Cgk8cGF0aCBkPSJNNDcuMzk5LDI3LjQ1NUM0Mi4zNDYsMjQuNTMsMzguMiwyMC41NzksMzQuNzEsMTUuOTMxYy0yLjE5My0zLjA4NC03Ljk5MS0yLjkyMy0xMC4zNDctMC4wOTcKCQljLTMuNTg0LDMuNDg3LTYuNjI1LDcuMDgxLTkuMDM3LDEwLjY3N2MtMC45ODYsMS40NzMtMC41OTQsMy40NjYsMC44NzgsNC40NTJjMC41NDksMC4zNjgsMS4xNjgsMC41NDQsMS43ODMsMC41NDQKCQljMS4wMzQsMCwyLjA1LTAuNDk5LDIuNjY4LTEuNDIzYzEuMDU5LTEuNTc3LDIuMjYtMy4xNTksMy41OS00LjczNGMtMC4wNTEsMy4zMzMsMC4xMTYsOS4zNDcsMC4yLDEyLjA1CgkJYzAuMDI4LDAuOS0wLjE3NywxLjc4LTAuNTk1LDIuNTc5Yy0zLjMwOCw2LjMxNy01LjQyNCwxMi4yOTQtNy41NzIsMTkuNjA2Yy0wLjUyNiwxLjc4NSwwLjQ5NywzLjY1OCwyLjI4MSw0LjE4MwoJCWMwLjQwNCwwLjExOSwwLjgxMiwwLjE1OSwxLjIwNiwwLjEyOWMxLjM1OC0wLjEwNCwyLjU3Mi0xLjAyOSwyLjk3OC0yLjQxMWMxLjk4Mi02Ljc0MiwzLjg5Ny0xMi4yMDEsNi44ODQtMTcuOTgxCgkJYzAuMTUyLDAuMDA2LDAuMzA0LDAuMDA2LDAuNDU4LTAuMDAxYzEuOTA3LDUuNjksMy44MTUsMTEuMzgzLDUuNzI1LDE3LjA3M2MxLjM4Nyw0LjE0Nyw3LjgyMiwxLjk5Myw2LjQzMS0yLjE1NQoJCWMtMi4wODctNi4yMjEtNC4xNzEtMTIuNDM5LTYuMjUxLTE4LjY1OWMtMC4xMjEtMC4zNTctMC40MTQtMS43NTUtMC40NTUtMi4yMTFjLTAuMzQ0LTMuODMyLTAuNDY5LTcuNjUyLTAuNDMyLTExLjQ3NwoJCWMyLjkyOCwyLjgwNSw2LjE3NSw1LjIzOCw5Ljc4Miw3LjMyOEM0OC40ODIsMzUuNDkxLDUwLjk0OCwyOS41MTIsNDcuMzk5LDI3LjQ1NXoiLz4KPC9nPgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjM2NS40NDVweCIgaGVpZ2h0PSIzNjUuNDQ1cHgiIHZpZXdCb3g9IjAgMCAzNjUuNDQ1IDM2NS40NDUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM2NS40NDUgMzY1LjQ0NTsiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIHN0eWxlPSJmaWxsOiBjdXJyZW50Q29sb3IiID4KCTxwYXRoIHN0eWxlPSJmaWxsOiBjdXJyZW50Q29sb3IiIGQ9Ik0xNDYuNywxNjIuNzc1aC0yNi44Yy0zLjY2NSwwLTYuNjQ3LDIuOTgyLTYuNjQ3LDYuNjQ3djI2LjYwMmMwLDMuNjY2LDIuOTgyLDYuNjQ2LDYuNjQ3LDYuNjQ2aDI2LjgKCQljMy42NjYsMCw2LjY0Ny0yLjk4Miw2LjY0Ny02LjY0NnYtMjYuNjAyQzE1My4zNDcsMTY1Ljc1NywxNTAuMzY1LDE2Mi43NzUsMTQ2LjcsMTYyLjc3NXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiBjdXJyZW50Q29sb3IiIGQ9Ik0yNDUuNTQ3LDE2Mi43NzVoLTI2LjgwMWMtMy42NjYsMC02LjY0NiwyLjk4Mi02LjY0Niw2LjY0N3YyNi42MDJjMCwzLjY2NiwyLjk4MSw2LjY0Niw2LjY0Niw2LjY0NmgyNi44MDEKCQljMy42NjQsMCw2LjY0Ni0yLjk4Miw2LjY0Ni02LjY0NnYtMjYuNjAyQzI1Mi4xOTMsMTY1Ljc1NywyNDkuMjExLDE2Mi43NzUsMjQ1LjU0NywxNjIuNzc1eiIvPgo8L2c+CjxwYXRoICBzdHlsZT0iZmlsbDogY3VycmVudENvbG9yIiBkPSJNMzQ1LjQ0NSwxLjIwNEgyMGMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MzIzLjAzN2MwLDExLjA0NSw4Ljk1NCwyMCwyMCwyMGgzMjUuNDQ1YzExLjA0NSwwLDIwLTguOTU1LDIwLTIwVjIxLjIwNAoJQzM2NS40NDUsMTAuMTU5LDM1Ni40OTIsMS4yMDQsMzQ1LjQ0NSwxLjIwNHogTTE4Mi43MjMsMjg3LjY2Yy01Ny45NTUsMC0xMDQuOTM3LTQ2Ljk4MS0xMDQuOTM3LTEwNC45MzcKCWMwLTU3Ljk1Nyw0Ni45ODItMTA0LjkzOCwxMDQuOTM3LTEwNC45MzhjNTcuOTU1LDAsMTA0LjkzNyw0Ni45ODIsMTA0LjkzNywxMDQuOTM4QzI4Ny42NiwyNDAuNjc5LDI0MC42NzgsMjg3LjY2LDE4Mi43MjMsMjg3LjY2Cgl6Ii8+Cgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjQ1LjY1OXB4IiBoZWlnaHQ9IjQ1LjY1OXB4IiB2aWV3Qm94PSIwIDAgNDUuNjU5IDQ1LjY1OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUuNjU5IDQ1LjY1OTsiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMwLjYxOSwyNy4zMDlWNy43ODFDMzAuNjE5LDMuNDksMjcuMTI0LDAsMjIuODMzLDBjLTQuMjksMC03Ljc4NSwzLjQ5MS03Ljc4NSw3Ljc4djE5LjUyOAoJCWMtMS45MDIsMS45NDktMy4wNSw0LjYwNC0zLjA1LDcuNTIyYzAsNS45NzIsNC44NTcsMTAuODI4LDEwLjgyOSwxMC44MjhjNS45NywwLDEwLjgzNC00Ljg1NiwxMC44MzQtMTAuODI4CgkJQzMzLjY2MSwzMS45MTIsMzIuNTIsMjkuMjU4LDMwLjYxOSwyNy4zMDl6IE0yMi44MjUsNDIuNjZjLTQuMzE2LDAtNy44MjQtMy41MTItNy44MjQtNy44MjhjMC0yLjUyNywxLjE3NC00Ljc3OSwzLjA3Ny02LjIxMQoJCVYxNi4yMzdoMy4zNzJjMC41NTIsMCwxLTAuNDcsMS0xLjAyMmMwLTAuNTUzLTAuNDQ4LTEuMDIxLTEtMS4wMjFoLTMuMzcydi0yLjQ2NmgzLjM3MmMwLjU1MiwwLDEtMC40MzQsMS0wLjk4NgoJCWMwLTAuNTUyLTAuNDQ4LTAuOTg2LTEtMC45ODZoLTMuMzcyVjcuNzhjMC0yLjYzNiwyLjExOS00Ljc4LDQuNzU0LTQuNzhjMi42MzcsMCw0Ljc1NiwyLjE0NCw0Ljc1Niw0Ljc4MXYyMC44NzEKCQljMS45MDMsMS40MzQsMy4wNDcsMy42NzEsMy4wNDcsNi4xOEMzMC42MzUsMzkuMTQ4LDI3LjE0MSw0Mi42NiwyMi44MjUsNDIuNjZ6Ii8+Cgk8cGF0aCBkPSJNMjUuMzM0LDMwLjQ2M1YxOC42MzJoLTUuMDAydjExLjgzMWMtMS41NDksMC44NzQtMi41MzcsMi41MDItMi41MzcsNC4zNjljMCwyLjc4OCwyLjI1MSw1LjA0Niw1LjAzOCw1LjA0NgoJCWMyLjc4OCwwLDUuMDM0LTIuMjU4LDUuMDM0LTUuMDQ2QzI3Ljg2NywzMi45NjYsMjYuODg1LDMxLjMzNywyNS4zMzQsMzAuNDYzeiIvPgo8L2c+Cjwvc3ZnPgo=\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMzQxLjMzMywyODguNTkzVjg1LjMzM0MzNDEuMzMzLDM4LjIwNSwzMDMuMTI4LDAsMjU2LDBzLTg1LjMzMywzOC4yMDUtODUuMzMzLDg1LjMzM3YyMDMuMjU5CgkJQzE0NC40OCwzMTIuMDMsMTI4LDM0Ni4wOTEsMTI4LDM4NGMwLDcwLjY5Myw1Ny4zMDgsMTI4LDEyOCwxMjhzMTI4LTU3LjMwNywxMjgtMTI4QzM4NCwzNDYuMDkxLDM2Ny41MiwzMTIuMDMsMzQxLjMzMywyODguNTkzegoJCSBNMjU2LDQ2OS4zMzNjLTQ3LjEyOCwwLTg1LjMzMy0zOC4yMDUtODUuMzMzLTg1LjMzM2MwLTI0LjYzNywxMC40NDEtNDcuNDkyLDI4LjQ1NS02My42MTVsMTQuMjEyLTEyLjcyVjg1LjMzMwoJCWMwLTIzLjU2NCwxOS4xMDMtNDIuNjY3LDQyLjY2Ny00Mi42NjdzNDIuNjY3LDE5LjEwMiw0Mi42NjcsNDIuNjY3djIyMi4zMzJsMTQuMjEyLDEyLjcyCgkJYzE4LjAxNCwxNi4xMjMsMjguNDU1LDM4Ljk3NywyOC40NTUsNjMuNjE1QzM0MS4zMzMsNDMxLjEyOCwzMDMuMTI4LDQ2OS4zMzMsMjU2LDQ2OS4zMzN6Ii8+CjwvZz4KPGc+Cgk8cmVjdCB4PSIyMzQuNjY3IiB5PSIxNzAuNjY3IiB3aWR0aD0iNDIuNjY3IiBoZWlnaHQ9IjI1NiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iMjU2IiBjeT0iMzg0IiByPSI2NCIvPgo8L2c+Cjwvc3ZnPgo=\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzNjFweCIKCSBoZWlnaHQ9IjM2MXB4IiB2aWV3Qm94PSIwIDAgMzYxIDM2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYxIDM2MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTsgc3Ryb2tlOiBjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjEwO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgZD0iTTI2Ny44MjYsMjYzLjMwM2MwLDMuOTEtMy4xNTYsNy4wODItNy4wNSw3LjA4MgoJCWwtMTU3Ljg4NSwwLjAyMWMtMy44OTQsMC03LjA1LTMuMTcxLTcuMDUtNy4wODN2LTE1Ny41YzAtMy45MTEsMy4xNTYtNy4wODMsNy4wNS03LjA4M2wxNTcuODg1LTAuMDIxCgkJYzMuODk0LDAsNy4wNSwzLjE3Miw3LjA1LDcuMDgzVjI2My4zMDN6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDogY3VycmVudENvbG9yOyIgZD0iTTI1OC41LDE4NS41ODRjMi4yMTMsMCw0LjQyNiwwLDYuNjM5LDBjMi43MjYsMCw1LTIuMjc0LDUtNXMtMi4yNzQtNS01LTUKCQkJYy0yLjIxMywwLTQuNDI2LDAtNi42MzksMGMtMi43MjYsMC01LDIuMjc0LTUsNVMyNTUuNzc0LDE4NS41ODQsMjU4LjUsMTg1LjU4NEwyNTguNSwxODUuNTg0eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTsgc3Ryb2tlOiBjdXJyZW50Q29sb3I7IHN0cm9rZS13aWR0aDogMTA7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsiIGQ9Ik0yNjcuODI2LDEwMy4yMDhjMCwyLjQ4NS0yLjcxMSw0LjUtNi4wNTMsNC41CgkJbC0xNTkuODgsMC4wMjFjLTMuMzQyLDAtNi4wNTItMi4wMTUtNi4wNTItNC41di05YzAtMi40ODUsMi43MS00LjUsNi4wNTItNC41bDE1OS44OC0wLjAyMWMzLjM0MiwwLDYuMDUzLDIuMDE1LDYuMDUzLDQuNVYxMDMuMjA4CgkJeiIvPgo8L3N2Zz4K\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzNjFweCIKCSBoZWlnaHQ9IjM2MXB4IiB2aWV3Qm94PSIwIDAgMzYxIDM2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYxIDM2MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjcuODI2LDI2My4zMDNjMCwzLjkxLTMuMTU2LDcuMDgyLTcuMDUsNy4wODIKCQlsLTE1Ny44ODUsMC4wMjFjLTMuODk0LDAtNy4wNS0zLjE3MS03LjA1LTcuMDgzdi0xNTcuNWMwLTMuOTExLDMuMTU2LTcuMDgzLDcuMDUtNy4wODNsMTU3Ljg4NS0wLjAyMQoJCWMzLjg5NCwwLDcuMDUsMy4xNzIsNy4wNSw3LjA4M1YyNjMuMzAzeiIvPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTIyOC41LDIwNS41ODRjMi4yMTMsMCw0LjQyNiwwLDYuNjM5LDBjMi43MjYsMCw1LTIuMjc0LDUtNXMtMi4yNzQtNS01LTUKCQkJYy0yLjIxMywwLTQuNDI2LDAtNi42MzksMGMtMi43MjYsMC01LDIuMjc0LTUsNVMyMjUuNzc0LDIwNS41ODQsMjI4LjUsMjA1LjU4NEwyMjguNSwyMDUuNTg0eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjcuODI2LDEwMy4yMDhjMCwyLjQ4NS0yLjcxMSw0LjUtNi4wNTMsNC41CgkJbC0xNTkuODgsMC4wMjFjLTMuMzQyLDAtNi4wNTItMi4wMTUtNi4wNTItNC41di05YzAtMi40ODUsMi43MS00LjUsNi4wNTItNC41bDE1OS44OC0wLjAyMWMzLjM0MiwwLDYuMDUzLDIuMDE1LDYuMDUzLDQuNVYxMDMuMjA4CgkJeiIvPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTIzMi44MjYsMjgwLjkwNWMtMC4zMzksMy4zNTYtMTguODEzLTAuNzgyLTIwLjkxOS0xLjA2Yy0xNS4wMjQtMS45OC0zMC4wNDktMy45Ni00NS4wNzMtNS45NAoJCQljLTE1LjAyNS0xLjk4LTMwLjA0OS0zLjk2LTQ1LjA3NC01Ljk0Yy00LjgzNS0wLjYzOC05LjY3MS0xLjI3NS0xNC41MDctMS45MTJjLTEuNDU2LTAuMTkyLTYuMjAxLTAuMDU1LTYuNDEyLTIuMTQ3CgkJCWMtMC42MjEtNi4xNTcsMC0xMi42OTksMC0xOC44NzhjMC0xNC41LDAtMjksMC00My41YzAtMjcuMzU5LDAtNTQuNzE4LDAtODIuMDc2YzAtMS43MSwwLTMuNDIsMC01LjEzCgkJCWMwLTIuNTUxLDUuMTg0LTEuMDE1LDYuNDEyLTAuODUzYzExLjgxMywxLjU1NywyMy42MjUsMy4xMTQsMzUuNDM4LDQuNjdjMjcuOTA4LDMuNjc4LDU1LjgxNiw3LjM1Niw4My43MjMsMTEuMDM1CgkJCWMxLjQ1NywwLjE5Miw2LjIwMSwwLjA1NSw2LjQxMiwyLjE0N2MwLjE2OSwxLjY3MywwLDMuNDUxLDAsNS4xM2MwLDExLjIxNywwLDIyLjQzNCwwLDMzLjY1MWMwLDMwLjY0MiwwLDYxLjI4MywwLDkxLjkyNQoJCQlDMjMyLjgyNiwyNjguMzIsMjMyLjgyNiwyNzQuNjEyLDIzMi44MjYsMjgwLjkwNWMwLDYuNDQ4LDEwLDYuNDQ4LDEwLDBjMC00OC4xNTEsMC05Ni4zMDMsMC0xNDQuNDU0YzAtMS43MSwwLTMuNDIsMC01LjEzCgkJCWMwLTcuNjE5LTYuMTM3LTEwLjc5My0xMi42NzMtMTEuNjU1Yy05LjUxMS0xLjI1My0xOS4wMjEtMi41MDctMjguNTMxLTMuNzZjLTI5LjQ3LTMuODg0LTU4Ljk0LTcuNzY4LTg4LjQxMS0xMS42NTIKCQkJYy0zLjI5OS0wLjQzNS02LjU5OC0wLjg3LTkuODk3LTEuMzA0Yy02LjU1NS0wLjg2NC0xMi40NzMsNC45LTEyLjQ3MywxMS4zOGMwLDYuNTIxLDAsMTMuMDQyLDAsMTkuNTYzCgkJCWMwLDMwLjcwNSwwLDYxLjQxLDAsOTIuMTE1YzAsMTEuMDUyLDAsMjIuMTA0LDAsMzMuMTU0YzAsMi4wMjMtMC4wNzEsNC4wNCwwLjEzMiw2LjA1M2MwLjcxNyw3LjExMSw2LjYwNiw5LjU2MywxMi43NTksMTAuMzc0CgkJCWMyNS42MDksMy4zNzUsNTEuMjE4LDYuNzUsNzYuODI3LDEwLjEyNWMxMy4yOTksMS43NTMsMjYuNTk4LDMuNTA2LDM5Ljg5Niw1LjI1OWMzLjIzMiwwLjQyNiw2LjQ2NSwwLjg1Miw5LjY5NywxLjI3OAoJCQljNy4wNjMsMC45MzEsMTIuMDExLTQuNzc4LDEyLjY3My0xMS4zNDZDMjQzLjQ3MywyNzQuNDksMjMzLjQ2NywyNzQuNTUzLDIzMi44MjYsMjgwLjkwNXoiLz4KCTwvZz4KPC9zdmc+Cg==\",\n \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzNjFweCIKCSBoZWlnaHQ9IjM2MXB4IiB2aWV3Qm94PSIwIDAgMzYxIDM2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYxIDM2MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjcuODI2LDI2My4zMDNjMCwzLjkxLTMuMTU2LDcuMDgyLTcuMDUsNy4wODIKCQlsLTE1Ny44ODUsMC4wMjFjLTMuODk0LDAtNy4wNS0zLjE3MS03LjA1LTcuMDgzdi0xNTcuNWMwLTMuOTExLDMuMTU2LTcuMDgzLDcuMDUtNy4wODNsMTU3Ljg4NS0wLjAyMQoJCWMzLjg5NCwwLDcuMDUsMy4xNzIsNy4wNSw3LjA4M1YyNjMuMzAzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjcuODI2LDEwMy4yMDhjMCwyLjQ4NS0yLjcxMSw0LjUtNi4wNTMsNC41CgkJbC0xNTkuODgsMC4wMjFjLTMuMzQyLDAtNi4wNTItMi4wMTUtNi4wNTItNC41di05YzAtMi40ODUsMi43MS00LjUsNi4wNTItNC41bDE1OS44OC0wLjAyMWMzLjM0MiwwLDYuMDUzLDIuMDE1LDYuMDUzLDQuNVYxMDMuMjA4CgkJeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjUuNzMyLDI2NS4xNzgKCQljMC41ODQsMi44ODctMS42MjksNS4yMjgtNC45NDIsNS4yMjhIMTAzLjQ1N2MtMy4zMTMsMC02LjQ3NC0yLjM0MS03LjA1OC01LjIyOEw3NS4yNCwxMzAuNjMzCgkJYy0wLjU4NC0yLjg4NywxLjYyOC01LjIyOCw0Ljk0Mi01LjIyOGgxNTcuMzMzYzMuMzEzLDAsNi40NzQsMi4zNCw3LjA1OCw1LjIyOEwyNjUuNzMyLDI2NS4xNzh6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7IiBkPSJNMjQ3LjE5NCwxOTkuNjY3YzIuMjEzLDAsNC40MjYsMCw2LjYzOSwwYzIuNzI2LDAsNS0yLjI3NCw1LTVzLTIuMjc0LTUtNS01CgkJCWMtMi4yMTMsMC00LjQyNiwwLTYuNjM5LDBjLTIuNzI2LDAtNSwyLjI3NC01LDVTMjQ0LjQ2OSwxOTkuNjY3LDI0Ny4xOTQsMTk5LjY2N0wyNDcuMTk0LDE5OS42Njd6Ii8+Cgk8L2c+Cjwvc3ZnPgo=\",\n ];\n}\nexport default IconList;","/**\n * Copyright 2018 bluefox \n 
),\n (),\n ()\n ] : null}\n {this.state.opened &&\n [\n ((this.state.images && this.state.images.length) || this.icons) && (),\n ImageSelector.isMobile() && !this.props.icons ?\n () : null,\n ( this.handleDropImage(files)}\n accept={this.props.accept || 'image/jpeg, image/png'}\n style={_style}>\n {\n ({isDragActive, isDragReject}) => {\n if (isDragActive) {\n if (this.state.imageStatus !== 'accepted') {\n this.setState({imageStatus: 'accepted'});\n }\n\n return this.props.textAccepted || 'All files will be accepted';\n } else\n if (isDragReject) {\n if (this.state.imageStatus !== 'rejected') {\n this.setState({imageStatus: 'rejected'});\n }\n return this.props.textRejected || 'Some files will be rejected';\n } else {\n if (this.state.imageStatus !== 'wait') {\n this.setState({imageStatus: 'wait'});\n }\n return this.props.textWaiting || 'Drop some files here or click...';\n }\n }\n }\n )\n ]\n }\n {this.state.cropOpened ? ( this.setState({cropOpened: false})}\n className={this.props.classes['chart-dialog']}\n aria-labelledby=\"alert-dialog-title\"\n >\n {I18n.t('Crop image')} \n \n \n \n \n \n \n ): null}\n
);\n }\n}\n\nexport default withStyles(style)(ImageSelector);\n","/**\r\n * Copyright 2018 bluefox {this.props.label}
\n {this.state.image ? [\n (\n this.setState({crop})}\n onComplete={(crop, pixelCrop) => this.cropPixels = pixelCrop}\n crop={this.state.crop}\n keepSelection={true}\n onImageLoaded={image => this.onImageLoaded(image)}\n aspect={this.props.aspect || 1}\n src={this.state.beforeCrop.data} />\n
\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ChipsControl);","/**\r\n * Copyright 2018 bluefox {label}
\r\n \r\n {\r\n this.state.chips.map(word => ( this.handleDelete(word)}\r\n className={classes.chip}\r\n />))\r\n }\r\n
\r\n \r\n this.setState({add: event.target.value})}\r\n margin=\"normal\"\r\n />\r\n \r\n
\r\n \r\n {label} \r\n onChange(event.target.value)}\r\n input={}\r\n >\r\n {getOptions(options)}\r\n \r\n
);\r\n};\r\n\r\nSelectControl.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n options: PropTypes.array.isRequired,\r\n onChange: PropTypes.func // if no onChange => readOnly\r\n};\r\n\r\nexport default withStyles(styles)(SelectControl);","/**\n * Copyright 2018 bluefox \n \n {Icon}\n {label}\n \n onChange && onChange()}\n />\n {value && value.lc ? () : null}\n
);\n};\n\nBoolControl.propTypes = {\n classes: PropTypes.object.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.object\n ]),\n language: PropTypes.string.isRequired,\n icon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n onChange: PropTypes.func // if no onChange => readOnly\n};\n\nexport default withStyles(styles)(BoolControl);","/**\n * Copyright 2018 bluefox this.onClose()}\n style={Theme.dialog.back}>\n \n {this.generateContent()}\n {this.state.toast}}\n />\n {this.showCloseButton()}\n \n\n {this.getAdditionalElements && this.getAdditionalElements()}\n\n
);\n }\n}\n\n//export default withStyles(styles)(SmartDialogGeneric);\nexport default SmartDialogGeneric;","/**\n * Copyright 2018 bluefox {I18n.t('Name')}: {Utils.getObjectName(this.props.objects, this.props.settingsId)}
\n {I18n.t('Description')}: {Utils.getObjectName(this.props.objects, this.props.settingsId, null, null, true)}
\n ID: {this.props.settingsId}
\n {this.props.name}
\n \n- {result}
{result}
);\n } else {\n return null;\n }\n }\n\n getDefaultIcon() {\n if (this.defaultIcon !== null) {\n return this.defaultIcon;\n }\n if (this.id) {\n let icon = Utils.getObjectIcon(this.id, this.props.objects[this.id]);\n if (!icon) {\n let parentId = SmartGeneric.getParentId(this.id);\n if (this.props.objects[parentId] && this.props.objects[parentId].type === 'channel') {\n icon = Utils.getObjectIcon(parentId, this.props.objects[parentId]);\n if (!icon) {\n parentId = SmartGeneric.getParentId(parentId);\n if (this.props.objects[parentId] && this.props.objects[parentId].type === 'device') {\n icon = Utils.getObjectIcon(parentId, this.props.objects[parentId]);\n }\n }\n }\n }\n if (icon) {\n this.defaultIcon = icon;\n } else {\n this.defaultIcon = '';\n }\n } else {\n this.defaultIcon = '';\n }\n return this.defaultIcon;\n }\n\n getDialogSettings(settings) {\n settings = settings || [];\n\n settings.unshift({\n name: 'background',\n value: this.state.settings.background || '',\n aspect: this.state.settings.doubleSize ? 2 : 1,\n type: 'image'\n });\n\n if (this.doubleState) {\n settings.unshift({\n name: 'iconOff',\n value: this.state.settings.iconOff || '',\n type: 'icon'\n });\n }\n settings.unshift({\n name: 'icon',\n value: this.state.settings.icon || '',\n type: 'icon'\n });\n // If colors for on and for off\n if (this.doubleState) {\n settings.unshift({\n name: 'colorOff',\n value: this.state.settings.colorOff || '',\n type: 'color'\n });\n }\n\n settings.unshift({\n name: 'doubleSize',\n value: this.state.settings.doubleSize || '',\n type: 'boolean'\n });\n\n settings.unshift({\n name: 'colorOn',\n value: this.state.settings.colorOn || '',\n type: 'color'\n });\n settings.unshift({\n name: 'name',\n value: this.state.settings.name || '',\n type: 'string'\n });\n if (this.id) {\n /*settings.unshift({\n name: 'useCommon',getObjectIcon\n value: this.state.settings.useCommon || false,\n type: 'boolean'\n });*/\n let icon = this.getDefaultIcon();\n if (icon) {\n settings.unshift({\n name: 'useDefaultIcon',\n value: this.state.settings.useDefaultIcon || '',\n type: 'boolean',\n icon\n });\n }\n }\n\n return settings;\n }\n\n saveDialogSettings(settings, cb) {\n if (settings) {\n settings.enabled = this.state.settings.enabled;\n if (settings.background && typeof settings.background === 'object') {\n settings.background.name = this.settingsId.replace(/[\\s*?./\\\\]/g, '_') + '.' + settings.background.name.toLowerCase().split('.').pop();\n }\n }\n\n this.saveSettings(settings, newSettings => {\n if (settings.background) {\n this.props.tile.setBackgroundImage(settings.background + '?ts=' + Date.now(), true);\n } else {\n this.props.tile.setBackgroundImage('', false);\n }\n cb && cb(newSettings);\n });\n }\n\n showSettings() {\n this.setState({showSettings: true});\n }\n\n onSettingsClose() {\n this.setState({showSettings: false});\n }\n\n getAdditionalName() {\n return null;\n }\n\n // following function used\n // getStateText\n // getIcon\n // getFirstName\n // getAdditionalName\n //\n getStandardContent(stateId, noPointerEvents) {\n let styleState;\n let styleName;\n let styleText;\n if (this.width === 2) {\n styleText = Object.assign({}, Theme.tile.tileText2);\n styleName = Object.assign({}, Theme.tile.tileName2, this.state.nameStyle || {});\n styleState = this.getStateText ? Object.assign(\n {},\n Theme.tile.tileState2,\n stateId ? (this.state[stateId] ? Theme.tile.tileStateOn : Theme.tile.tileStateOff) : {}\n ) : null;\n } else {\n styleText = Object.assign({}, Theme.tile.tileText);\n styleName = Object.assign({}, Theme.tile.tileName, this.state.nameStyle || {});\n styleState = this.getStateText ? Object.assign(\n {},\n Theme.tile.tileState,\n stateId ? (this.state[stateId] ? Theme.tile.tileStateOn : Theme.tile.tileStateOff) : {}\n ) : null;\n if (this.state.settings.background) {\n styleName.marginTop = 4;\n }\n }\n\n if (this.state.settings.background) {\n styleText.color = 'black';\n styleText.background = 'rgba(255,255,255,0.7)';\n }\n\n return [\n this.getIcon ? ({this.getIcon()}
): null,\n (\n
)\n ];\n }\n\n wrapContent(content) {\n if (this.state.editMode) {\n return [\n ({this.getFirstName ? this.getFirstName() : this.state.settings.name}{this.getAdditionalName()}
\n {this.getStateText ? ({this.getStateText()}
) : null}\n {this.channelInfo.type}
),\n (\n {this.state.settings.enabled ?\n [(
),\n this.state.showSettings ? (\n ): null];\n } else if (this.state.settings.enabled) {\n return [\n (\n \n
),\n (\n
\n )]\n :\n (\n \n
)\n }\n {content}\n {this.channelInfo.type}
),\n (\n {this.showCorner ? (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {FaAngleDoubleUp as IconUp} from 'react-icons/fa';\nimport {FaAngleDoubleDown as IconDown} from 'react-icons/fa';\nimport {TiLightbulb as IconLamp} from 'react-icons/ti';\nimport {MdStop as IconStop} from 'react-icons/md'\nimport {darken} from '@material-ui/core/styles/colorManipulator';\nimport Button from '@material-ui/core/Button';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\nimport SmartDialogGeneric from './SmartDialogGeneric';\n\nclass SmartDialogSlider extends SmartDialogGeneric {\n // expected:\n\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string,\n windowWidth: PropTypes.number,\n\n onClose: PropTypes.func,\n\n onStop: PropTypes.func,\n onToggle: PropTypes.func,\n\n onValueChange: PropTypes.func,\n startValue: PropTypes.number,\n startToggleValue: PropTypes.bool,\n type: PropTypes.number\n };\n static types = {\n value: 0,\n dimmer: 1,\n blinds: 2\n };\n\n static buttonStyle = {\n position: 'absolute',\n left: 'calc(50% - 2em)',\n height: '1.3em',\n width: '4em',\n borderRadius: '1em',\n background: 'white',\n border: '1px solid #b5b5b5',\n paddingTop: '0.1em',\n fontSize: '2em',\n textAlign: 'center',\n cursor: 'pointer',\n boxShadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)'\n };\n static buttonStopStyle = {\n position: 'absolute',\n left: 'calc(50% + 6em)',\n bottom: '4.5em',\n height: '2em',\n width: '2.5em'\n };\n static sliderStyle = {\n position: 'absolute',\n zIndex: 11,\n width: 200,\n border: '1px solid #b5b5b5',\n borderRadius: '2em',\n overflow: 'hidden',\n background: 'white',\n cursor: 'pointer',\n boxShadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',\n height: 'calc(100% - 12em - 48px)',\n top: 'calc(4em + 48px)',\n left: 'calc(50% - 100px)'\n };\n\n constructor(props) {\n super(props);\n this.stateRx.value = this.externalValue2localValue(this.props.startValue || 0);\n this.stateRx.toggleValue = this.props.startToggleValue || false;\n this.onMouseMoveBind = this.onMouseMove.bind(this);\n this.onMouseUpBind = this.onMouseUp.bind(this);\n this.lastControl = 0;\n\n this.refSlider = React.createRef();\n\n this.type = this.props.type || SmartDialogSlider.types.dimmer;\n this.step = this.props.step || 20;\n this.button = {\n time: 0,\n name: '',\n timer: null,\n timeUp: 0\n };\n this.closeOnPaperClick = true; // used in generic\n this.componentReady();\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.startValue !== this.state.value && !this.mouseDown && Date.now() - this.lastControl > 1000) {\n this.setState({value: nextProps.startValue});\n }\n if (nextProps.startToggleValue !== undefined && nextProps.startToggleValue !== this.state.toggleValue) {\n this.setState({toggleValue: nextProps.startToggleValue});\n }\n }\n\n eventToValue(e) {\n const pageY = e.touches ? e.touches[e.touches.length - 1].clientY : e.clientY;\n\n let value = 100 - Math.round((pageY - this.top) / this.height * 100);\n\n if (value > 100) {\n value = 100;\n } else if (value < 0) {\n value = 0;\n }\n this.setState({value});\n if (Date.now() - this.lastControl > 200 && this.type !== SmartDialogSlider.types.blinds) {\n this.lastControl = Date.now();\n this.props.onValueChange && this.props.onValueChange(this.localValue2externalValue(this.state.value));\n }\n }\n\n onMouseMove(e) {\n e.preventDefault();\n e.stopPropagation();\n this.eventToValue(e);\n }\n\n onMouseDown(e) {\n e.preventDefault();\n e.stopPropagation();\n\n this.mouseDown = true;\n\n if (!this.height) {\n if (this.refSlider.current) {\n this.height = this.refSlider.current.offsetHeight;\n this.top = this.refSlider.current.offsetTop;\n } else {\n return;\n }\n }\n\n this.eventToValue(e);\n\n document.addEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.addEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n }\n\n localValue2externalValue(value) {\n if (this.props.min !== undefined && this.props.max !== undefined) {\n return value * (this.props.max - this.props.min) / 100 + this.props.min;\n } else {\n return value;\n }\n }\n\n externalValue2localValue(value) {\n if (this.props.min !== undefined && this.props.max !== undefined) {\n return ((value - this.props.min) / (this.props.max - this.props.min)) * 100;\n } else {\n return value;\n }\n }\n\n onMouseUp(e) {\n e.preventDefault();\n e.stopPropagation();\n this.click = Date.now();\n this.mouseDown = false;\n console.log('Stopped');\n document.removeEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.removeEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n\n this.lastControl = Date.now();\n this.props.onValueChange && this.props.onValueChange(this.localValue2externalValue(this.state.value));\n }\n\n getTopButtonName() {\n switch (this.props.type) {\n case SmartDialogSlider.types.blinds:\n return \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport SmartGeneric from './SmartGeneric';\nimport Icon from '../icons/Jalousie'\nimport Theme from '../theme';\nimport Dialog from '../Dialogs/SmartDialogSlider';\n\nconst styles = {\n overlap: {\n zIndex: 2,\n position: 'absolute',\n bottom: 0,\n left: 0,\n opacity: 0.8,\n background: '#FFF',\n width: '100%'\n }\n};\n\nclass SmartBlinds extends SmartGeneric {\n // props = {\n // objects: OBJECT\n // tile: parentDiv\n // states: STATES\n // onControl: function\n // };\n\n constructor(props) {\n super(props);\n\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state && this.props.objects[state.id]&& this.props.objects[state.id].common) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'STOP');\n this.stopId = state && state.id;\n }\n\n if (this.id) {\n this.max = this.props.objects[this.actualId].common.max;\n if (this.max === undefined) {\n this.max = 100;\n }\n this.max = parseFloat(this.max);\n\n this.min = this.props.objects[this.actualId].common.min;\n if (this.min === undefined) {\n this.min = 0;\n }\n this.min = parseFloat(this.min);\n\n }\n this.props.tile.setState({state: true});\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n this.stateRx.setValue = null;\n this.key = 'smart-blinds-' + this.id + '-';\n this.doubleState = true; // used in generic: If colors for on and for off\n\n this.componentReady();\n if (this.state.settings.toggleOnClick) {\n this.props.tile.setState({isPointer: true});\n }\n }\n\n realValueToPercent(val) {\n if (val === undefined) {\n if (this.props.states[this.actualId]) {\n val = this.props.states[this.actualId].val || 0;\n } else {\n val = 0;\n }\n }\n val = parseFloat(val);\n val = Math.round((val - this.min) / (this.max - this.min) * 100);\n if (this.state.settings.inverted) {\n val = 100 - val;\n }\n return val;\n }\n\n percentToRealValue(percent) {\n percent = parseFloat(percent);\n if (this.state.settings.inverted) {\n percent = 100 - percent;\n }\n return Math.round((this.max - this.min) * percent / 100);\n }\n\n updateState(id, state) {\n let newState = {};\n const val = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n if (this.actualId === id || (this.id === id && this.id === this.actualId && state.ack)) {\n if (!isNaN(val)) {\n newState[id] = val;\n this.setState(newState);\n } else {\n newState[id] = null;\n this.setState(newState);\n\n }\n\n // hide desired value\n if (this.state.setValue === newState[id] && state.ack) {\n this.setState({setValue: null});\n }\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n } else if (id === this.id) {\n newState[id] = val;\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n setValue(percent) {\n console.log('Control ' + this.id + ' = ' + this.percentToRealValue(percent));\n this.setState({executing: true, setValue: percent});\n this.props.onControl(this.id, this.percentToRealValue(percent));\n }\n\n onStop() {\n this.setState({executing: false});\n this.stopId && this.props.onControl && this.props.onControl(this.stopId, true);\n }\n\n onToggleValue() {\n if (this.state.settings.toggleOnClick) {\n let newValue;\n const percent = this.realValueToPercent();\n if (percent) {\n newValue = 0;\n } else {\n newValue = 100;\n }\n this.setValue(newValue);\n }\n }\n\n getIcon() {\n let customIcon;\n if (this.state.settings.useDefaultIcon) {\n customIcon = (})
);\n } else {\n if (this.state.settings.icon) {\n customIcon = (
);\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\n\nimport {GoDiffModified as IconButton} from 'react-icons/go';\nimport {MdStop as IconStop} from 'react-icons/md';\nimport {MdPlayArrow as IconPlay} from 'react-icons/md';\nimport {MdPause as IconPause} from 'react-icons/md';\nimport {MdReplay as IconReplay} from 'react-icons/md';\nimport {MdShuffle as IconShuffle} from 'react-icons/md';\nimport {MdVolumeMute as IconMute} from 'react-icons/md';\nimport {MdVolumeUp as IconUnmute} from 'react-icons/md';\nimport {MdFastForward as IconForward} from 'react-icons/md';\nimport {MdFastRewind as IconPrev} from 'react-icons/md';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nclass SmartButton extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n }\n this.defaultEnabling = false; // used in the SmartGeneric\n this.stateRx.pressed = false;\n\n this.icon = IconButton;\n this.style = {};\n let name = this.props.objects && this.props.objects[this.id] && this.props.objects[this.id].common && this.props.objects[this.id].name;\n if (typeof name === 'object') {\n name = name.en;\n }\n let stateName = name + '_' + this.id.split('.').pop();\n\n if (stateName.match(/play/i)) {\n this.icon = IconPlay;\n this.style = {color: 'green'};\n } else if (stateName.match(/stop/i)) {\n this.icon = IconStop;\n this.style = {color: 'red'};\n } else if (stateName.match(/pause/i)) {\n this.icon = IconPause;\n this.style = {color: 'grey'};\n } else if (stateName.match(/unmute/i)) {\n this.icon = IconUnmute;\n this.style = {color: 'blue'};\n } else if (stateName.match(/mute/i)) {\n this.icon = IconMute;\n this.style = {color: 'blue'};\n } else if (stateName.match(/forw/i)) {\n this.icon = IconForward;\n this.style = {color: 'yellow'};\n } else if (stateName.match(/prev/i)) {\n this.icon = IconPrev;\n this.style = {color: 'yellow'};\n } else if (stateName.match(/replay/i)) {\n this.icon = IconReplay;\n } else if (stateName.match(/shuff/i)) {\n this.icon = IconShuffle;\n }\n this.key = 'smart-button-' + this.id + '-';\n\n this.props.tile.setState({isPointer: true});\n this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n onTileClick() {\n this.props.onControl(this.id, true);\n this.setState({pressed: true});\n setTimeout(() => this.setState({pressed: false}), 500);\n }\n\n getIcon() {\n let customIcon;\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n const Icon = this.icon;\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport {TiLightbulb as Icon} from 'react-icons/ti'\n\nimport SmartGeneric from './SmartGeneric';\nimport Theme from '../theme';\nimport Dialog from '../Dialogs/SmartDialogSlider';\nimport I18n from '../i18n';\n\nclass SmartDimmer extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state && this.props.objects[state.id] && this.props.objects[state.id].common) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ON_SET');\n this.onId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ON_ACTUAL');\n this.onActualId = state ? state.id : this.onId;\n }\n\n if (this.id) {\n this.max = this.props.objects[this.actualId].common.max;\n if (this.max === undefined) {\n this.max = 100;\n }\n this.max = parseFloat(this.max);\n\n this.min = this.props.objects[this.actualId].common.min;\n if (this.min === undefined) {\n this.min = 0;\n }\n this.min = parseFloat(this.min);\n\n this.props.tile.setState({\n isPointer: true\n });\n }\n\n this.key = 'smart-dimmer-' + this.id + '-';\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n this.stateRx.setValue = null;\n this.doubleState = true; // used in generic\n\n this.componentReady();\n }\n\n realValueToPercent(val) {\n if (val === undefined) {\n if (this.props.states[this.actualId]) {\n val = this.props.states[this.actualId].val || 0;\n } else {\n val = 0;\n }\n }\n val = parseFloat(val);\n return Math.round((val - this.min) / (this.max - this.min) * 100);\n }\n\n percentToRealValue(percent) {\n percent = parseFloat(percent);\n return Math.round((this.max - this.min) * percent / 100);\n }\n\n updateState(id, state) {\n let newState = {};\n\n if (this.onActualId === id || (this.onId === id && this.onId === this.onActualId && state.ack)) {\n let val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON' || state.val === 'ein' || state.val === 'EIN';\n newState[id] = val;\n\n this.setState(newState);\n\n this.props.tile.setState({\n state: val\n });\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n } else\n if (this.actualId === id || (this.id === id && this.id === this.actualId && state.ack)) {\n const val = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n if (!isNaN(val)) {\n newState[id] = this.realValueToPercent(val);\n this.setState(newState);\n\n if (!this.onActualId) {\n const tileState = val !== this.min;\n this.props.tile.setState({\n state: tileState\n });\n }\n } else {\n newState[id] = null;\n this.setState(newState);\n if (!this.onActualId) {\n this.props.tile.setState({\n state: false\n });\n }\n }\n\n // hide desired value\n if (this.state.setValue === newState[id] && state.ack) {\n this.setState({setValue: null});\n }\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n } else if (id === this.id) {\n newState[id] = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n this.setState(newState);\n } else if (id === this.onId) {\n newState[id] = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON' || state.val === 'ein' || state.val === 'EIN';\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n setValue(percent) {\n if (percent) {\n this.lastNotNullPercent = percent;\n } else {\n const p = this.realValueToPercent();\n if (p) {\n this.lastNotNullPercent = p;\n }\n }\n\n console.log('Control ' + this.id + ' = ' + this.percentToRealValue(percent));\n this.setState({executing: true, setValue: percent});\n this.props.onControl(this.id, this.percentToRealValue(percent));\n }\n\n onToggleValue() {\n if (this.onId) {\n this.props.onControl(this.onId, !this.state[this.onActualId]);\n } else {\n let newValue;\n const percent = this.realValueToPercent();\n if (percent) {\n newValue = 0;\n } else {\n newValue = this.lastNotNullPercent || 100;\n }\n this.setValue(newValue);\n }\n }\n\n getIcon() {\n let customIcon;\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {withStyles} from '@material-ui/core/styles';\n// import Moment from 'react-moment';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\n\nconst styles = theme => ({\n line: {\n width: 'calc(100% - 6px)'\n },\n input: {\n width: 'calc(60% - 10px)'\n },\n button: {\n width: '40%',\n marginLeft: 10\n },\n icon: {\n height: 20,\n marginRight: 10\n }\n});\n\nclass InputControl extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.object.isRequired,\n icon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n type: PropTypes.string,\n onChange: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n this.type = this.props.type || (typeof this.props.value === 'number' ? 'number' : 'text');\n this.state = {\n val: this.props.value ? this.props.value.val : '?',\n ts: this.props.value ? this.props.value.ts : 0,\n lc: this.props.value ? this.props.value.lc : 0\n }\n }\n\n onChange(val) {\n this.setState({val});\n }\n\n onKeyDown(e) {\n if (e.keyCode === 13) {\n this.props.onChange(this.type === 'number' ? parseFloat(this.state.val) : this.state.val);\n }\n }\n\n render() {\n const {classes, label, icon, onChange} = this.props;\n let Icon;\n if (icon) {\n if (typeof icon === 'object') {\n Icon = icon;\n Icon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport {withStyles} from '@material-ui/core/styles';\nimport Moment from 'react-moment';\nimport Theme from '../../theme';\n\nconst styles = () => (Theme.dialog.info);\n\nconst InfoControl = ({classes, label, value, onChange, language, icon, unit}) => {\n let Icon;\n if (icon) {\n if (typeof icon === 'object') {\n Icon = icon;\n Icon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Theme from '../theme';\nimport I18n from '../i18n';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport Button from '@material-ui/core/Button';\nimport Slider from '@material-ui/lab/Slider';\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport Typography from '@material-ui/core/Typography';\nimport BoolControl from '../basic-controls/react-info-controls/BoolControl'\nimport InputControl from '../basic-controls/react-info-controls/InputControl'\nimport InfoControl from '../basic-controls/react-info-controls/InfoControl'\n\nclass SmartDialogInfo extends SmartDialogGeneric {\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n objects: PropTypes.object,\n states: PropTypes.object,\n onValueChange: PropTypes.func,\n points: PropTypes.array.isRequired\n };\n\n constructor(props) {\n super(props);\n this.props.points.forEach(e => {\n const state = this.props.states[e.id];\n if (state) {\n this.stateRx[e.id] = {val: state.val, ts: state.ts, lc: state.lc};\n } else {\n this.stateRx[e.id] = null;\n }\n this.subscribes = this.subscribes || [];\n this.subscribes.push(e.id);\n });\n this.refDialog = React.createRef();\n\n this.componentReady();\n }\n\n controlValue(id, value) {\n this.setState({toast: I18n.t('sent')});\n this.props.onValueChange && this.props.onValueChange(id, value);\n }\n\n handleToggle(id) {\n const newState = {};\n const state = this.state[id];\n newState[id] = {val: !(state && state.val)};\n if (state) {\n newState[id].lc = state.lc;\n newState[id].ts = state.ts;\n }\n this.setState(newState);\n this.controlValue(id, newState[id].val);\n }\n\n handleValue(id, value) {\n const newState = {};\n newState[id] = {val: value};\n const state = this.state[id];\n if (state) {\n newState[id].lc = state.lc;\n newState[id].ts = state.ts;\n }\n if (this.state[id].val !== newState[id].val) {\n this.setState(newState);\n }\n this.controlValue(id, value);\n }\n\n generateContent() {\n const result = this.props.points.map((e, i) => {\n const divider = i !== this.props.points.length - 1 ? () : null;\n\n let item;\n\n if (e.common && e.common.write) {\n if (e.common.type === 'boolean') {\n // switch\n if (e.common.read !== false) {\n item = ( this.handleToggle(e.id)}\n />);\n } else { // button: read = false, write = true\n item = ({e.name} - {this.state[e.id] ? this.state[e.id].val : '?'}{e.unit} ),\n ( this.handleValue(e.id, value)}\n /*label={\n this.handleValue(e.id, value)}\n />);\n }\n } else {\n if (e.common && e.common.type === 'boolean') {\n item = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\nimport IconThermometer from '../icons/ThermometerSimple';\nimport IconHydro from '../icons/Humidity';\nimport {MdInfo as IconInfo} from 'react-icons/md';\nimport Utils from '../Utils';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\nimport Dialog from '../Dialogs/SmartDialogInfo';\nimport PropTypes from 'prop-types';\n\nconst invisibleDefaultRoles = [\n /^timer.off$/,\n /^inhibit$/,\n];\n\nclass SmartInfo extends SmartGeneric {\n // expected:\n static propTypes = {\n tile: PropTypes.object.isRequired,\n objects: PropTypes.object.isRequired,\n states: PropTypes.object.isRequired,\n onCollectIds: PropTypes.func,\n onControl: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n let hasControls = false;\n if (this.channelInfo.states) {\n let infoIDs = this.channelInfo.states.filter(state => state.id && state.name === 'ACTUAL').map(state => state.id);\n // place numbers first\n if (infoIDs.length > 1) {\n infoIDs.sort((a, b) => {\n const objA = this.props.objects[a];\n const objB = this.props.objects[b];\n const typeA = objA && objA.common && objA.common.type;\n const typeB = objB && objB.common && objB.common.type;\n if (typeA && !typeB) return 1;\n if (!typeA && typeB) return -1;\n if (typeA === 'number' && typeB !== 'number') return -1;\n if (typeA !== 'number' && typeB === 'number') return 1;\n return 0;\n });\n }\n if (infoIDs[0]) {\n this.id = infoIDs[0];\n } else {\n this.id = '';\n }\n\n if (infoIDs[1]) {\n this.secondary = {\n id: infoIDs[1]\n };\n }\n const name = this.getObjectNameCh();\n this.infos = infoIDs.map(id => SmartInfo.getObjectAttributes(this.props.objects, id, name));\n hasControls = !!this.infos.find(item => item.common && item.common.write);\n }\n\n if (!this.infos.find(state => !invisibleDefaultRoles.find(test => !test.test(state.role)))) {\n this.defaultEnabling = false;\n }\n\n // make tile with opacity 1\n this.props.tile.state.state = true;\n\n if (this.infos && (this.infos.length > 2 || hasControls)) {\n this.stateRx.showDialog = false; // support dialog in this tile (used in generic class)\n }\n\n this.props.tile.setState({\n isPointer: this.showCorner\n });\n\n this.key = 'smart-info-' + this.id + '-';\n\n this.componentReady();\n }\n\n static getObjectAttributes(objects, id, channelName) {\n if (!id || !objects[id] || !objects[id].common) return null;\n const role = objects[id].common.role || '';\n const unit = objects[id].common.unit || '';\n let title = objects[id].common.name || id.split('.').pop();\n if (!title) {\n title = id.split('.').pop();\n }\n if (typeof title === 'object') {\n title = title[I18n.getLanguage()] || title.en || id.split('.').pop();\n }\n\n title = title.replace(/[._]/g, ' ').trim();\n if (title.toUpperCase() !== channelName.toUpperCase()) {\n title = title.replace(channelName, '').trim();\n }\n\n title = Utils.splitCamelCase(title);\n\n if (role.match(/humidity/i)) {\n return {\n id: id,\n icon: IconHydro,\n iconStyle: {color: '#0056c3'},\n unit: unit ? ' ' + unit : ' %',\n role: role,\n name: title,\n common: objects[id].common\n }\n } else if (role.match(/temperature/i)) {\n return {\n id: id,\n icon: IconThermometer,\n iconStyle: {color: '#e54100'},\n unit: unit ? ' ' + unit : '°',\n name: title,\n role: role,\n common: objects[id].common\n }\n } else {\n return {\n id: id,\n unit: unit ? ' ' + unit : '',\n icon: Utils.getObjectIcon(id, objects[id]),\n name: title,\n role: role,\n common: objects[id].common\n }\n }\n }\n\n updateState(id, state) {\n if (this.infos && this.infos.find(e => e.id === id)) {\n const newState = {};\n newState[id] = state.val;\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n getIcon() {\n let customIcon;\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n const Icon = this.infos[0].icon || IconInfo;\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport SmartGeneric from './SmartGeneric';\nimport {TiLightbulb as Icon} from 'react-icons/ti';\nimport Theme from '../theme';\nimport Dialog from '../Dialogs/SmartDialogSlider';\n\nclass SmartSlider extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state && this.props.objects[state.id] && this.props.objects[state.id].common) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n }\n\n if (this.id) {\n this.max = this.props.objects[this.actualId].common.max;\n this.min = this.props.objects[this.actualId].common.min;\n\n this.props.tile.setState({\n isPointer: true\n });\n\n this.unit = this.props.objects[this.actualId].common.unit;\n this.unit = this.unit ? ' ' + this.unit : '';\n }\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n this.stateRx.setValue = null;\n this.key = 'smart-slider-' + this.id + '-';\n this.doubleState = true; // used in generic\n\n this.icon = Icon;\n\n this.componentReady();\n }\n\n updateState(id, state) {\n let newState = {};\n const val = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n\n if (this.actualId === id || (this.id === id && this.id === this.actualId && state.ack)) {\n if (!isNaN(val)) {\n newState[id] = val;\n this.setState(newState);\n\n const tileState = val !== this.min;\n this.props.tile.setState({state: tileState});\n } else {\n newState[id] = null;\n this.setState(newState);\n this.props.tile.setState({state: false});\n }\n\n // hide desired value\n if (this.state.setValue === newState[id] && state.ack) {\n this.setState({setValue: null});\n }\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n } else if (id === this.id) {\n newState[id] = val;\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n setValue(value) {\n console.log('Control ' + this.id + ' = ' + value);\n if (this.actualId !== this.id) {\n this.setState({executing: true, setValue: value});\n }\n this.props.onControl(this.id, value);\n }\n\n getIcon() {\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n let IconCustom = this.icon;\n if (IconCustom) {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport Moment from 'react-moment';\nimport SmartGeneric from './SmartGeneric';\nimport IconWindowOpened from '../icons/WindowOpened';\nimport IconWindowClosed from '../icons/WindowClosed';\nimport IconMotionOn from '../icons/MotionOn';\nimport IconMotionOff from '../icons/MotionOff';\nimport IconFireOn from '../icons/FireOn';\nimport IconFireOff from '../icons/FireOff';\nimport IconFloodOn from '../icons/FloodOn';\nimport IconFloodOff from '../icons/FloodOff';\nimport IconDoorOpened from '../icons/DoorOpened';\nimport IconDoorClosed from '../icons/DoorClosed';\nimport {MdBrightness1 as IconSun1} from 'react-icons/md';\nimport {MdBrightness2 as IconSun2} from 'react-icons/md';\nimport {MdBrightness3 as IconSun3} from 'react-icons/md';\nimport {MdBrightness4 as IconSun4} from 'react-icons/md';\nimport {MdBrightness5 as IconSun5} from 'react-icons/md';\nimport {MdBrightness6 as IconSun6} from 'react-icons/md';\nimport {MdBrightness7 as IconSun7} from 'react-icons/md';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\nimport Types from '../States/SmartTypes';\n// import IconLockOpened from \"react-icons/lib/md/lock-open\";\n// import IconLockClosed from \"react-icons/lib/md/lock\";\n\nconst IconSuns = [IconSun1, IconSun2, IconSun3, IconSun4, IconSun5, IconSun6, IconSun7];\n\nclass SmartState extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'SECOND');\n if (state) {\n this.secondary = {\n id: state.id\n };\n }\n }\n\n if (this.secondary && this.props.objects[this.secondary.id] && this.props.objects[this.secondary.id].common) {\n // detect type of secondary info\n const secondary = this.props.objects[this.secondary.id].common;\n if (secondary.role.match(/brightness/i)) {\n this.secondary.icon = val => {\n if (val > this.secondary.max) {\n return IconSuns[IconSuns.length - 1];\n } else\n if (val < this.secondary.min) {\n return IconSuns[0];\n } else {\n const num = (val - this.secondary.min) / (this.secondary.max - this.secondary.min);\n return IconSuns[Math.round((IconSuns.length - 1) * num)];\n }\n };\n this.secondary.iconStyle = {color: '#c3c300'};\n } else {\n this.secondary.iconStyle = {};\n }\n this.secondary.title = secondary.name || this.secondary.id.split('.').pop();\n if (typeof this.secondary.title === 'object') {\n this.secondary.title = this.secondary.title[I18n.getLanguage()] || this.secondary.title.en;\n }\n this.secondary.min = secondary.min === undefined ? 0 : secondary.min;\n this.secondary.max = secondary.max === undefined ? 100 : secondary.max;\n this.secondary.unit = secondary.unit || '';\n }\n\n if (this.channelInfo.type === Types.window) {\n this.iconOn = IconWindowOpened;\n this.iconOff = IconWindowClosed;\n this.textOn = 'opened';\n this.textOff = 'closed';\n this.showTime = true;\n this.style = {\n width: 60,\n height: 60,\n top: '0.2rem',\n left: '0.2rem'\n };\n } if (this.channelInfo.type === Types.door) {\n this.iconOn = IconDoorOpened;\n this.iconOff = IconDoorClosed;\n this.textOn = 'opened';\n this.textOff = 'closed';\n this.showTime = true;\n this.style = {\n left: '1rem'\n };\n } else if (this.channelInfo.type === Types.motion) {\n this.iconOn = IconMotionOn;\n this.iconOff = IconMotionOff;\n this.iconColorOn = 'green';\n this.iconColorOff = 'grey';\n this.textOn = 'motion';\n this.showTime = true;\n this.textOff = '-';\n } else if (this.channelInfo.type === Types.fireAlarm) {\n this.iconOn = IconFireOn;\n this.iconOff = IconFireOff;\n this.iconColorOn = 'red';\n this.iconColorOff = 'grey';\n this.textOn = 'fire';\n this.showTime = true;\n this.textOff = '-';\n this.hideOnFalse = true;\n } else if (this.channelInfo.type === Types.floodAlarm) {\n this.iconOn = IconFloodOn;\n this.iconOff = IconFloodOff;\n this.iconColorOn = 'blue';\n this.iconColorOff = 'grey';\n this.textOn = 'flood';\n this.textOff = '-';\n this.showTime = true;\n this.hideOnFalse = true;\n }\n\n this.props.tile.setState({\n isPointer: false\n });\n\n this.doubleState = true; // used in generic\n\n this.key = 'smart-state-' + this.id + '-';\n\n //this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n if (id === this.id) {\n let val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON';\n const newState = {};\n if (this.state.settings.inverted) {\n val = !val;\n }\n newState[id] = val;\n\n if (this.showTime && state.lc) {\n this.lastChange = state.lc;\n } else {\n this.lastChange = 0;\n }\n\n this.setState(newState);\n this.props.tile.setState({\n state: val\n });\n\n if (this.hideOnFalse) {\n let someIndicator = false;\n if (this.indicators) {\n const ids = Object.keys(this.indicators).filter(_id => this.indicators[_id]);\n someIndicator = !!ids.find(_id => this.state[this.indicators[_id]]);\n }\n\n this.props.tile.setVisibility(val || someIndicator);\n }\n } else if (this.secondary && this.secondary.id === id) {\n const newState = {};\n newState[id] = state.val;\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n getDialogSettings () {\n const settings = super.getDialogSettings();\n\n settings.unshift({\n name: 'inverted',\n value: this.state.settings.inverted || false,\n type: 'boolean'\n });\n return settings;\n }\n\n getIcon() {\n const isOn = this.state[this.id] === '1' || this.state[this.id] === 1 || this.state[this.id] === true || this.state[this.id] === 'true' || this.state[this.id] === 'on' || this.state[this.id] === 'ON';\n const color = isOn ? this.iconColorOn : this.iconColorOff;\n let style = color ? {color} : {};\n if (this.style) {\n style = Object.assign(style, this.style);\n }\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = (
);\n } else {\n const Icon = isOn ? this.iconOn : this.iconOff;\n customIcon = ();\n }\n }\n\n getSecondaryDiv() {\n if (!this.secondary || !this.secondary.id || this.state[this.secondary.id] === undefined || this.state[this.secondary.id] === null) {\n return null;\n }\n let val = this.state[this.secondary.id];\n const Icon = (typeof this.secondary.icon === 'function') ? this.secondary.icon.call(this, val) : this.secondary.icon;\n if (typeof val === 'number') {\n val = Math.round(val * 100) / 100;\n }\n return (\n \n \n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\n\nimport {TiLightbulb as IconLight} from 'react-icons/ti';\nimport {MdCheck as IconCheck} from 'react-icons/md';\nimport {MdCancel as IconCancel} from 'react-icons/md';\nimport IconSwitch from '../icons/Socket';\n\nimport Types from './SmartTypes';\nimport Theme from '../theme';\nimport I18n from '../i18n';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nclass SmartSwitch extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n }\n if (this.channelInfo) {\n switch (this.channelInfo.type) {\n case Types.light:\n this.iconOn = IconLight;\n this.iconOff = IconLight;\n this.colorOn = Theme.palette.lampOn;\n this.colorOff = 'inherit';\n this.style = {};\n break;\n\n case Types.socket:\n default:\n if (this.props.objects[this.id] && this.props.objects[this.id].common && this.props.objects[this.id].common.role ==='switch.active') {\n this.iconOn = IconCheck;\n this.iconOff = IconCancel;\n } else {\n this.iconOn = IconSwitch;\n this.iconOff = IconSwitch;\n }\n this.colorOn = Theme.palette.lampOn;\n this.colorOff = 'inherit';\n this.backOn = Theme.palette.lampOn;\n this.backOff = 'gray';\n this.style = {left: '1rem'};\n break;\n }\n }\n\n this.props.tile.setState({\n isPointer: true\n });\n this.key = 'smart-switch-' + this.id + '-';\n this.doubleState = true; // used in generic\n\n this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n const newState = {};\n const val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON';\n if (id === this.actualId || (this.id === id && this.id === this.actualId && state.ack)) {\n newState[id] = val;\n this.setState(newState);\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n\n this.props.tile.setState({\n state: val\n });\n } else if (id === this.id) {\n newState[id] = val;\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n toggle() {\n if (this.actualId !== this.id) {\n this.setState({executing: true});\n }\n this.props.onControl(this.id, !this.state[this.actualId]);\n }\n\n onTileClick() {\n this.toggle();\n }\n\n getIcon() {\n const state = !!this.state[this.actualId];\n let style = state ? {color: this.colorOn} : {color: this.colorOff};\n if (this.style) {\n style = Object.assign(style, this.style);\n }\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = (
);\n } else {\n const Icon = this.state[this.actualId] ? this.iconOn : this.iconOff;\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\nimport IconThermometer from '../icons/Thermometer';\nimport IconHydro from '../icons/Humidity';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nclass SmartThermometer extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'SECOND');\n if (state) {\n this.secondary = {\n id: state.id\n };\n }\n }\n\n this.props.tile.state.state = true;\n\n if (this.secondary && this.props.objects[this.secondary.id] && this.props.objects[this.secondary.id].common) {\n // detect type of secondary info\n const secondary = this.props.objects[this.secondary.id].common;\n if (secondary.role.match(/humidity/i)) {\n this.secondary.icon = IconHydro;\n this.secondary.iconStyle = {color: '#0056c3'};\n } else {\n this.secondary.iconStyle = {};\n }\n this.secondary.title = secondary.name || this.secondary.id.split('.').pop();\n if (typeof this.secondary.title === 'object') {\n this.secondary.title = this.secondary.title[I18n.getLanguage()] || this.secondary.title.en;\n }\n this.secondary.unit = secondary.unit ? ' ' + secondary.unit : '';\n }\n\n if (this.id && this.props.objects[this.id] && this.props.objects[this.id] && this.props.objects[this.id].common.unit) {\n this.unit = ' ' + this.props.objects[this.id].common.unit;\n } else {\n this.unit = '';\n }\n\n this.props.tile.setState({\n isPointer: false\n });\n\n this.key = 'smart-thermometer-' + this.id + '-';\n\n //this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n if (id === this.id) {\n const newState = {};\n newState[id] = state.val;\n\n this.setState(newState);\n } else if (this.secondary && this.secondary.id === id) {\n const newState = {};\n newState[id] = state.val;\n this.setState(newState);\n } else{\n super.updateState(id, state);\n }\n }\n\n getIcon() {\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport I18n from '../i18n';\nimport ThermostatControl from '../basic-controls/react-nest-thermostat/src/react-nest-thermostat';\nimport Button from '@material-ui/core/Button';\nimport SmartDialogGeneric from './SmartDialogGeneric';\n\nclass SmartDialogThermostat extends SmartDialogGeneric {\n // expected:\n\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n\n objects: PropTypes.object,\n states: PropTypes.object,\n onValueChange: PropTypes.func,\n startValue: PropTypes.number.isRequired,\n actualValue: PropTypes.number,\n };\n\n static buttonBoostStyle = {\n position: 'absolute',\n left: 'calc(50% - 2em)',\n height: '1.3em',\n width: '4em',\n borderRadius: '1em',\n background: 'white',\n border: '1px solid #b5b5b5',\n paddingTop: '0.1em',\n fontSize: '2em',\n textAlign: 'center',\n cursor: 'pointer',\n boxShadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)'\n };\n // expected:\n // startValue\n // actualValue\n // onValueChange\n // onClose\n // objects\n // states\n constructor(props) {\n super(props);\n this.stateRx.value = props.startValue || 0;\n this.stateRx.boostValue = props.boostValue;\n\n this.min = props.min;\n if (this.min > props.actualValue) {\n this.min = props.actualValue\n }\n if (this.min > props.startValue) {\n this.min = props.startValue\n }\n this.max = props.max;\n if (this.max < props.actualValue) {\n this.max = props.actualValue\n }\n if (this.max < props.startValue) {\n this.max = props.startValue\n }\n\n this.onMouseMoveBind = this.onMouseMove.bind(this);\n this.onMouseUpBind = this.onMouseUp.bind(this);\n this.onMouseDownBind = this.onMouseDown.bind(this);\n\n this.refPanel = React.createRef();\n this.svgControl = null;\n this.componentReady();\n }\n\n componentDidMount() {\n super.componentDidMount();\n this.svgControl = this.refPanel.current.getElementsByTagName('svg')[0];\n this.svgWidth = this.svgControl.clientWidth;\n this.svgHeight = this.svgControl.clientHeight;\n this.svgCenterX = this.svgWidth / 2;\n this.svgCenterY = this.svgHeight / 2;\n this.svgRadius = this.svgCenterX > this.svgCenterY ? this.svgCenterY : this.svgCenterX;\n this.rect = this.svgControl.getBoundingClientRect();\n\n this.svgControl.addEventListener('mousedown', this.onMouseDownBind, {passive: false, capture: true});\n this.svgControl.addEventListener('touchstart', this.onMouseDownBind, {passive: false, capture: true});\n }\n\n static roundValue(value, round) {\n round = round || 0.5;\n return Math.round(value / round) * round;\n }\n posToTemp(x, y) {\n let h;\n if (x < 0) {\n h = Math.atan2(y, -x) * 180 / Math.PI;\n if (y > 0) {\n h = 180 - h;\n } else{\n h = 180 - h;\n }\n } else {\n h = Math.atan2(y, x) * 180 / Math.PI;\n }\n h = h * -1;\n if (h < 0) h += 360;\n h = 360 - h;\n // owr sector\n // 60 => 100%\n // 120 => 0%\n // 270 => 50%\n if (h > 60 && h < 90) {\n h = 60;\n }\n if (h > 90 && h < 120) {\n h = 120;\n }\n if (h < 90) {\n h += 360;\n }\n h -= 120;\n h /= 360 - 60;\n return SmartDialogThermostat.roundValue((this.max - this.min) * h + this.min);\n }\n\n eventToValue(e, checkRadius) {\n let pageY = e.touches ? e.touches[e.touches.length - 1].clientY : e.pageY;\n let pageX = e.touches ? e.touches[e.touches.length - 1].clientX : e.pageX;\n const x = pageX - this.rect.left - this.svgCenterX;\n const y = pageY - this.rect.top - this.svgCenterY;\n if (checkRadius) {\n const radius = Math.sqrt(x * x + y * y);\n if (radius > this.svgRadius * 1.1) {\n return false;\n }\n }\n\n this.setState({value: this.posToTemp(x, y)});\n\n return true;\n }\n\n onMouseMove(e) {\n e.preventDefault();\n e.stopPropagation();\n this.eventToValue(e);\n }\n\n onMouseDown(e) {\n e.preventDefault();\n e.stopPropagation();\n\n if (this.eventToValue(e, true)) {\n document.addEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.addEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n } else {\n this.onClose();\n }\n }\n\n onMouseUp(e) {\n e.preventDefault();\n e.stopPropagation();\n this.click = Date.now();\n document.removeEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.removeEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n\n this.props.onValueChange && this.props.onValueChange(this.state.value);\n }\n\n onBoostMode() {\n this.props.onBoostToggle && this.props.onBoostToggle(!this.state.boostValue);\n this.setState({boostValue: !this.state.boostValue});\n }\n\n generateContent() {\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\nimport Icon from '../icons/Thermometer'\nimport IconThermometer from '../icons/ThermometerSimple';\nimport IconHydro from '../icons/Humidity';\nimport Theme from '../theme';\nimport Dialog from '../Dialogs/SmartDialogThermostat';\nimport I18n from '../i18n';\n\nclass SmartThermostat extends SmartGeneric {\n // props = {\n // objects: OBJECT\n // tile: parentDiv\n // states: STATES\n // onControl: function\n // };\n\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state && this.props.objects[state.id]&& this.props.objects[state.id].common) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'BOOST');\n this.boostId = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HUMIDITY');\n this.humidityId = state && state.id;\n }\n\n if (this.humidityId) {\n const common = this.props.objects[this.humidityId] && this.props.objects[this.humidityId].common;\n this.humUnit = common.unit || '%';\n }\n\n if (this.id) {\n const common = this.props.objects[this.id] && this.props.objects[this.id].common;\n this.max = common.max;\n if (this.max === undefined) {\n this.max = 30;\n }\n this.max = parseFloat(this.max);\n\n this.min = common.min;\n if (this.min === undefined) {\n this.min = 12;\n }\n this.min = parseFloat(this.min);\n\n this.unit = common.unit || '°C';\n\n if (this.unit === 'C') {\n this.unit = '°C';\n } else\n if (this.unit === 'C°') {\n this.unit = '°C';\n }\n if (this.unit === 'F') {\n this.unit = '°F';\n } else\n if (this.unit === 'F°') {\n this.unit = '°F';\n }\n\n this.props.tile.setState({\n isPointer: true\n });\n }\n\n this.unit = this.unit || '°C';\n\n this.stateRx.showDialog = false;\n this.props.tile.setState({state: true});\n this.key = 'smart-thermostat-' + this.id + '-';\n\n this.componentReady();\n }\n\n updateState(id, state) {\n let newState = {};\n if (this.actualId === id || id === this.id || id === this.humidityId) {\n newState[id] = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n if (isNaN(newState[id])) {\n newState[id] = null;\n }\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n setValue(degrees) {\n console.log('Control ' + this.id + ' = ' + degrees);\n const newValue = {};\n newValue[this.id] = degrees;\n this.setState(newValue);\n this.props.onControl(this.id, degrees);\n }\n\n getIcon() {\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\nimport IconWindowOpened from '../icons/WindowOpened';\nimport IconWindowClosed from '../icons/WindowClosed';\nimport IconWindowTilted from '../icons/WindowTilted';\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nconst VALUES = {\n closed: [/close/i],\n tilted: [/tilt/i],\n opened: [/open/i]\n};\n\nclass SmartWindowTilt extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n }\n this.values = {\n closed: 0,\n tilted: 1,\n opened: 2\n };\n\n if (this.id && this.props.objects[this.id] && this.props.objects[this.id].common && this.props.objects[this.id].common.states) {\n const states = this.props.objects[this.id].common.states;\n for (const val in states) {\n if (states.hasOwnProperty(val)) {\n for (const v in VALUES) {\n if (VALUES.hasOwnProperty(v) && VALUES[v].find(r => r.test(states[val])) !== undefined) {\n this.values[v] = parseInt(val, 10);\n break;\n }\n }\n }\n }\n }\n\n\n this.props.tile.setState({\n isPointer: false\n });\n this.key = 'smart-window-' + this.id + '-';\n\n //this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n let val;\n if (typeof state.val !== 'number') {\n const i = parseInt(state.val, 10);\n if (i.toString() === i) {\n val = i;\n } else if (state.val !== null && state.val !== undefined) {\n val = state.val.toString();\n\n for (const value in VALUES) {\n if (VALUES.hasOwnProperty(value)) {\n // eslint-disable-next-line no-loop-func\n if (VALUES[value].find(r => r.test(val))) {\n val = value;\n break;\n }\n }\n }\n } else {\n state.val = 0;\n }\n } else {\n val = state.val;\n }\n if (typeof val === 'number') {\n for (const value in this.values) {\n if (this.values.hasOwnProperty(value) && this.values[value] === val) {\n val = value;\n break;\n }\n }\n }\n if (typeof val === 'number') {\n val = 'closed';\n }\n\n if (id === this.id) {\n const newState = {};\n newState[id] = val;\n this.setState(newState);\n\n if ((!this.props.tile.state.state && val !== 'closed') || (this.props.tile.state.state && val === 'closed')) {\n this.props.tile.setState({\n state: val !== 'closed'\n });\n }\n } else {\n super.updateState(id, state);\n }\n if (this.hideOnFalse) {\n let someIndicator = false;\n if (this.indicators) {\n const ids = Object.keys(this.indicators).filter(_id => this.indicators[_id]);\n someIndicator = ids.find(_id => this.state[this.indicators[_id]]);\n }\n\n this.props.tile.setState({\n visible: this.state[this.id] || someIndicator\n });\n }\n }\n\n getIcon() {\n let Icon;\n switch (this.state[this.id]) {\n case 'opened':\n Icon = IconWindowOpened;\n break;\n\n case 'tilted':\n Icon = IconWindowTilted;\n break;\n\n case 'closed':\n default:\n Icon = IconWindowClosed;\n break;\n }\n\n const iconStyle = {\n width: 60,\n height: 60,\n top: '0.2rem',\n left: '0.2rem'\n };\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport Moment from 'react-moment';\nimport SmartGeneric from './SmartGeneric';\nimport {MdLock as IconLockClosed} from 'react-icons/md';\nimport {MdLockOpen as IconLockOpened} from 'react-icons/md';\nimport {MdClose as IconClose} from 'react-icons/md'\nimport IconDoorOpened from '../icons/DoorOpened';\n\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from '@material-ui/core/Button';\n\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nconst style = {\n icon: {\n fontSize: 32\n }\n};\n\nclass SmartLock extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'OPEN');\n this.openId = state && state.id;\n }\n\n this.props.tile.setState({\n isPointer: true\n });\n\n this.stateRx.dialog = false;\n\n this.key = 'smart-lock-' + this.id + '-';\n this.iconColorOn = Theme.palette.lampOn;\n this.iconColorOff = '';\n this.textOn = 'opened';\n this.textOff = 'closed';\n this.doubleState = true; // used in generic\n\n this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n if (id === this.actualId) {\n const val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON';\n const newState = {};\n newState[id] = val;\n\n if (this.showTime && state.lc) {\n this.lastChange = state.lc;\n } else {\n this.lastChange = 0;\n }\n\n this.setState(newState);\n this.props.tile.setState({\n state: val\n });\n } else {\n super.updateState(id, state);\n }\n }\n\n getIcon() {\n const isOn = this.state[this.id] === '1' || this.state[this.id] === 1 || this.state[this.id] === true || this.state[this.id] === 'true' || this.state[this.id] === 'on' || this.state[this.id] === 'ON';\n const color = isOn ? this.iconColorOn : this.iconColorOff;\n let style = color ? {color} : {};\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n if (this.state.settings.icon) {\n customIcon = ();\n } else {\n const Icon = isOn ? IconLockOpened : IconLockClosed;\n customIcon = ();\n }\n }\n\n onTileClick() {\n this.setState({dialog: true});\n }\n\n onAction(action) {\n switch (action) {\n case 'openLock':\n this.props.onControl(this.id, true);\n break;\n\n case 'closeLock':\n this.props.onControl(this.id, false);\n break;\n\n case 'openDoor':\n this.props.onControl(this.openId, true);\n break;\n\n default:\n break;\n }\n // No idea why direct control does not work\n setTimeout(() => {\n this.setState({dialog: false});\n }, 0);\n }\n\n getDialog() {\n return ( this.setState({dialog: false})}\n >\n \n {I18n.t('Select action')}\n \n \n\n \n \n \n {this.openId ? () : null}\n \n );\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.actualId),\n this.state.dialog ? this.getDialog() : null\n ]);\n }\n}\n\nexport default SmartLock;\n\n","/**\n * Copyright 2018 bluefox \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport Button from '@material-ui/core/Button';\n\nimport SmartGeneric from './SmartGeneric';\nimport Theme from '../theme';\nimport I18n from '../i18n';\n\nimport {MdPlayArrow as IconPlay} from 'react-icons/md';\nimport {MdPause as IconPause} from 'react-icons/md';\n//import IconChecked from 'react-icons/lib/md/check-circle';\n//import IconUnchecked from 'react-icons/lib/md/cancel';\n\nclass SmartInstance extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'ALIVE');\n if (state) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n const parts = this.id.split('.');\n parts.pop();\n\n this.instanceNumber = parts[parts.length - 1];\n this.instanceId = parts.join('.');\n\n if (this.props.objects[this.instanceId].type !== 'instance') {\n this.id = '';\n this.componentReady();\n return;\n }\n\n if (!this.props.objects[this.instanceId].common.onlyWWW) {\n state = this.channelInfo.states.find(state => state.id && state.name === 'UNREACH');\n this.connectedId = state ? state.id : this.id;\n }\n }\n\n this.props.tile.setState({\n isPointer: false\n });\n this.key = 'smart-instance-' + this.id + '-';\n\n // this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n updateState(id, state) {\n const newState = {};\n const val = typeof state.val === 'number' ? !!state.val : state.val === true || state.val === 'true' || state.val === '1' || state.val === 'on' || state.val === 'ON';\n if (id === this.id) {\n newState[id] = val;\n if (this.connectedId) {\n if (val) {\n newState[this.connectedId] = !this.connectedState;\n } else {\n newState[this.connectedId] = false;\n }\n }\n\n this.setState(newState);\n\n this.props.tile.setState({\n state: val\n });\n } else if (id === this.connectedId) {\n this.connectedState = state.val;\n if (this.state[this.id]) {\n state.val = !state.val;\n } else {\n state.val = false;\n }\n super.updateState(id, state);\n } else {\n super.updateState(id, state);\n }\n }\n toggle() {\n this.props.onControl(this.instanceId, !this.props.objects[this.instanceId].common.enabled, 'common.enabled');\n }\n\n onTileClick() {\n this.toggle();\n }\n\n getIcon() {\n const img = '/' + this.props.objects[this.instanceId].common.name + '.admin/' + this.props.objects[this.instanceId].common.icon;\n return (\n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '@material-ui/core/Button';\nimport Slider from '@material-ui/lab/Slider';\n\nimport {MdMusicNote as IconNote} from 'react-icons/md';\nimport {MdPlayArrow as IconPlay} from 'react-icons/md';\nimport {MdPause as IconPause} from 'react-icons/md';\nimport {MdStop as IconStop} from 'react-icons/md';\nimport {MdSkipNext as IconNext} from 'react-icons/md';\nimport {MdSkipPrevious as IconPrev} from 'react-icons/md';\n\nimport {MdShuffle as IconShuffle} from 'react-icons/md';\nimport {MdRepeat as IconRepeatAll} from 'react-icons/md';\nimport {MdRepeatOne as IconRepeatOne} from 'react-icons/md';\nimport {MdVolumeUp as IconVolume100} from 'react-icons/md';\nimport {MdVolumeMute as IconVolume0} from 'react-icons/md';\n\nimport Utils from '../Utils';\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport I18n from '../i18n';\nimport Theme from \"../theme\";\n//import cover from '../assets/cover.png';\n\nconst HEIGHT_HEADER = 48;\nconst HEIGHT_VOLUME = 48;\nconst HEIGHT_COVER = 365;\nconst HEIGHT_INFO = 88;\nconst HEIGHT_CONTROL = 48;\nconst HEIGHT_TIME = 48;\n\nconst REPEAT = {\n NONE: 0,\n ALL: 1,\n ONE: 2\n};\n\nconst styles = {\n info: {\n div: {\n zIndex: 1,\n background: 'rgba(0,0,0,0.55)',\n position: 'absolute',\n bottom: 100,\n width: 'calc(100% + 1em)',\n left: '-0.5em',\n padding: '1.2em',\n },\n artist: {\n fontSize: 14,\n fontWeight: 'normal',\n color: 'white'\n },\n album: {\n fontSize: 16,\n fontWeight: 'bold',\n color: 'white'\n },\n title: {\n fontSize: 14,\n fontWeight: 'normal',\n color: 'white'\n }\n },\n control: {\n div: {\n zIndex: 1,\n background: 'rgba(255,255,255,0.9)',\n position: 'absolute',\n width: 'calc(100% + 1em)',\n bottom: 48,\n left: '-0.5em',\n height: HEIGHT_CONTROL,\n textAlign: 'center',\n lineHeight: '48px',\n verticalAlign: 'middle'\n },\n prev: {\n height: 24,\n width: 24,\n marginLeft: 3,\n minHeight: 24,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n next: {\n height: 24,\n width: 24,\n marginLeft: 3,\n minHeight: 24,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n stop: {\n height: 24,\n width: 24,\n marginLeft: 3,\n minHeight: 24,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n play: {\n\n },\n pause: {\n background: '#40EE40'\n },\n repeat: {\n position: 'absolute',\n top: 5,\n right: 54,\n height: 24,\n width: 24,\n minHeight: 24,\n marginLeft: 3,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)',\n float: 'right'\n },\n shuffle: {\n position: 'absolute',\n top: 5,\n right: 12,\n height: 24,\n width: 24,\n minHeight: 24,\n marginLeft: 3,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)',\n float: 'right'\n },\n name: {\n position: 'absolute',\n left: '1.2em',\n bottom: 2,\n fontSize: 14,\n color: 'rgba(0,0,0,0.6)'\n }\n },\n time: {\n div: {\n zIndex: 1,\n background: 'rgba(255,255,255,0.9)',\n position: 'absolute',\n width: 'calc(100% + 1em)',\n bottom: 0,\n left: '-0.5em',\n height: HEIGHT_TIME,\n lineHeight: '48px',\n textAlign: 'center',\n verticalAlign: 'middle',\n color: 'rgba(0,0,0,0.9)'\n },\n elapsed: {\n display: 'inline-block',\n float: 'left',\n paddingLeft: '1.2em'\n },\n slider: {\n display: 'inline-block',\n width: 'calc(100% - 10em)',\n verticalAlign: 'middle',\n },\n duration: {\n display: 'inline-block',\n float: 'right',\n paddingRight: '1.2em'\n }\n },\n volume: {\n div: {\n zIndex: 1,\n background: 'rgba(255,255,255,0.9)',\n position: 'absolute',\n width: 'calc(100% + 1em)',\n bottom: 0,\n left: '-0.5em',\n height: HEIGHT_TIME,\n lineHeight: '48px',\n textAlign: 'center',\n verticalAlign: 'middle',\n color: 'rgba(0,0,0,0.9)'\n },\n mute: {\n display: 'inline-block',\n position: 'absolute',\n left: '1.5em',\n top: 4,\n boxShadow: 'none'\n },\n slider: {\n display: 'inline-block',\n width: 'calc(100% - 10em)',\n verticalAlign: 'middle',\n }\n },\n cover: {\n div: {\n position: 'absolute',\n top: 48,\n width: 'calc(100% - 2em)',\n height: 'calc(100% - 2em)',\n maxHeight: HEIGHT_COVER,\n zIndex: 0,\n backgroundSize: '100% auto',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center'\n },\n img: {\n width: '100%',\n height: 'auto'\n }\n },\n header: {\n div: {\n position: 'absolute',\n fontSize: 16,\n height: HEIGHT_HEADER -16,\n zIndex: 1,\n paddingTop: 16\n }\n }\n};\n\nclass SmartDialogMedia extends SmartDialogGeneric {\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n objects: PropTypes.object,\n states: PropTypes.object,\n onCollectIds: PropTypes.func,\n enumNames: PropTypes.array,\n onControl: PropTypes.func,\n ids: PropTypes.object.isRequired,\n settings: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n\n this.ids = this.props.ids;\n\n for (const type in this.ids) {\n if (this.ids.hasOwnProperty(type) && type !== 'buttons') {\n for (const id in this.ids[type]) {\n if (this.ids[type].hasOwnProperty(id) && this.ids[type][id]) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(this.ids[type][id]);\n }\n }\n }\n }\n let maxHeight = 0;\n\n this.divs = {\n 'header': {height: HEIGHT_HEADER, position: 'top', visible: true},\n 'volume': {height: HEIGHT_VOLUME, position: 'top', visible: this.ids.volume.set},\n 'cover': {height: HEIGHT_COVER, position: 'top', visible: this.ids.info.cover},\n 'info': {height: HEIGHT_INFO, position: 'bottom', visible: this.ids.info.artist || this.ids.info.album || this.ids.info.title},\n 'control': {height: HEIGHT_CONTROL, position: 'bottom', visible: true},\n 'time': {height: HEIGHT_TIME, position: 'bottom', visible: this.ids.control.elapsed || this.ids.control.duration || this.ids.control.seek},\n };\n // calculate positions\n let top = 0;\n let bottom = 0;\n for (const name in this.divs) {\n if (this.divs.hasOwnProperty(name) && this.divs[name].visible) {\n maxHeight += this.divs[name].height;\n if (this.divs[name].position === 'top') {\n this.divs[name].points = top;\n top += this.divs[name].height;\n }\n }\n }\n const keys = Object.keys(this.divs);\n for (let j = keys.length - 1; j >= 0; j--) {\n if (this.divs[keys[j]].visible && this.divs[keys[j]].position === 'bottom') {\n this.divs[keys[j]].points = bottom;\n bottom += this.divs[keys[j]].height;\n }\n }\n for (const name in this.divs) {\n if (this.divs.hasOwnProperty(name) && this.divs[name].visible) {\n this.divs[name].style = Object.assign({}, styles[name].div, {[this.divs[name].position] : this.divs[name].points});\n }\n }\n\n this.dialogStyle = {\n maxHeight: maxHeight\n };\n\n const enums = [];\n this.props.enumNames.forEach(e => (enums.indexOf(e) === -1) && enums.push(e));\n if (enums.indexOf(this.props.name) === -1) {\n enums.push(this.props.name);\n }\n this.name = enums.join(' / ');\n this.collectState = null;\n this.collectTimer = null;\n\n this.volumeTimer = null;\n this.seekTimer = null;\n\n this.componentReady();\n }\n\n onSeek(value) {\n if (value !== this.state[this.ids.control.seek]){\n this.setState({[this.ids.control.seek]: value});\n\n if (this.seekTimer) {\n clearTimeout(this.seekTimer);\n }\n this.seekTimer = setTimeout((_value) => {\n this.seekTimer = null;\n this.props.onControl(this.ids.control.seek, _value);\n }, 400, value);\n }\n }\n\n onVolume(value) {\n if (value !== this.state[this.ids.volume.actual]){\n this.setState({[this.ids.volume.actual]: value});\n\n if (this.volumeTimer) {\n clearTimeout(this.volumeTimer);\n }\n this.volumeTimer = setTimeout((_value) => {\n this.volumeTimer = null;\n this.props.onControl(this.ids.volume.set, _value);\n }, 400, value);\n }\n }\n\n onToggleMute() {\n this.props.onControl(this.ids.volume.mute, !this.state[this.ids.volume.mute]);\n }\n\n onShuffle() {\n this.props.onControl(this.ids.mode.shuffle, !this.state[this.ids.mode.shuffle]);\n }\n\n onRepeat() {\n this.props.onControl(this.ids.mode.repeat, (this.state[this.ids.mode.repeat] + 1) % 3);\n }\n\n onUpdateTimer() {\n this.collectTimer = null;\n if (this.collectState) {\n this.setState(this.collectState);\n this.collectState = null;\n }\n }\n\n updateState(id, state) {\n if (id === this.ids.info.cover) {\n this.collectState = this.collectState || {};\n let url = state && state.val;\n if (url) {\n //url = cover;\n if (url.match(/\\?.+$/)) {\n url += '&ts=' + Date.now();\n } else {\n url += '?ts=' + Date.now();\n }\n }\n this.setState({[id]: url});\n } else\n if (id === this.ids.control.elapsed ||\n id === this.ids.control.seek ||\n id === this.ids.control.duration ||\n id === this.ids.volume.set ||\n id === this.ids.volume.actual) {\n this.collectState = this.collectState || {};\n this.collectState[id] = Math.round(parseFloat(state.val));\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.info.album || id === this.ids.info.artist || id === this.ids.info.title) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.volume.mute || id === this.ids.mode.shuffle) {\n this.collectState = this.collectState || {};\n\n this.collectState[id] =\n state.val === 'true' ||\n state.val === true ||\n state.val === 'mute' ||\n state.val === 'shuffle' ||\n state.val === 'muted' ||\n state.val === 1 ||\n state.val === '1';\n\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.mode.repeat) {\n this.collectState = this.collectState || {};\n let val;\n if (state.val === true || state.val === 'true') {\n val = REPEAT.ALL;\n } else if (state.val === 'false' || state.val === false) {\n val = REPEAT.NONE;\n } else if (state.val === 'all' || state.val === 'ALL' || state.val === 1 || state.val === '1') {\n val = REPEAT.ALL;\n } else if (state.val === 'one' || state.val === 'ONE' || state.val === 2 || state.val === '2') {\n val = REPEAT.ONE;\n } else {\n val = REPEAT.NONE;\n }\n this.collectState[id] = val;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (this.ids.control.state === id && state.ack) {\n this.collectState = this.collectState || {};\n const val =\n state.val === 'true' ||\n state.val === true ||\n state.val === 'PLAY' ||\n state.val === 'play' ||\n state.val === 1 ||\n state.val === '1';\n\n // here can be 'stop'\n this.collectState.stop = (state.val === 'STOP' || state.val === 'stop' || state.val === 'stopped' || state.val === 'STOPPED');\n\n this.collectState = this.collectState || {};\n this.collectState[id] = val;\n\n if (state.ack && this.state.executing) {\n this.collectState.executing = false;\n }\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else {\n super.updateState(id, state);\n }\n }\n\n onButton(id) {\n this.props.onControl(id, true);\n }\n\n getVolumeSlider() {\n if (this.ids.volume.set) {\n return ( this.onVolume(value)} />);\n } else if (this.ids.volume.actual) {\n return ( this.onSeek(value)} />);\n } else if (this.ids.control.elapsed && this.ids.control.duration && this.state[this.ids.control.duration]) {\n const value = Math.round(this.state[this.ids.control.elapsed] / this.state[this.ids.control.duration] * 100);\n return (
) : null}\n {this.getIndicators()}\n {content}\n
)\n ];\n } else {\n return null;\n }\n }\n\n static getNameFontSize(name) {\n return name && name.length >= 15 ? 12 : (name && name.length > 10 ? 14 : 16);\n }\n\n render() {\n if (!this.state.editMode && !this.state.settings.enabled) {\n return null;\n } else {\n return this.wrapContent(this.settings.name || this.getObjectNameCh());\n }\n }\n}\n\nexport default SmartGeneric;\n\n","import React from \"react\";\n\nconst Jalousie = props => (\n \n);\n\nexport default Jalousie;\n","/**\n * Copyright 2018 bluefox this.onButtonDown(e, 'top')}\n onMouseDown={e => this.onButtonDown(e, 'top')}\n onTouchEnd={this.onButtonUp.bind(this)}\n onMouseUp={this.onButtonUp.bind(this)}\n onClick={e => e.stopPropagation()}\n style={Object.assign({}, SmartDialogSlider.buttonStyle, {top: '1.3em'})} className=\"dimmer-button\">{this.getTopButtonName()}
),\n ( e.stopPropagation()}\n style={SmartDialogSlider.sliderStyle}>\n
),\n (\n \n
\n \n {this.getValueText()}\n
\n this.onButtonDown(e, 'bottom')}\n onMouseDown={e => this.onButtonDown(e, 'bottom')}\n onTouchEnd={this.onButtonUp.bind(this)}\n onMouseUp={this.onButtonUp.bind(this)}\n onClick={e => e.stopPropagation()}\n style={Object.assign({}, SmartDialogSlider.buttonStyle, {bottom: '1.8em'})} className=\"dimmer-button\">{this.getBottomButtonName()}
),\n this.getStopButton(),\n this.getToggleButton()\n ];\n }\n}\n\nexport default SmartDialogSlider;","/**\n * Copyright 2018 bluefox \n {customIcon}\n {this.state.executing ? : null}\n \n
\n );\n }\n\n getDialogSettings () {\n const settings = super.getDialogSettings();\n\n settings.unshift({\n name: 'inverted',\n value: this.state.settings.inverted || false,\n type: 'boolean'\n });\n\n settings.unshift({\n name: 'toggleOnClick',\n value: this.state.settings.toggleOnClick || false,\n type: 'boolean'\n });\n\n return settings;\n }\n\n saveDialogSettings (settings) {\n this.props.tile.setState({isPointer: settings.toggleOnClick});\n super.saveDialogSettings(settings);\n }\n\n getStateText() {\n if (this.state[this.actualId] === null || this.state[this.actualId] === undefined) {\n return '---';\n } else {\n if (this.workingId && this.state[this.workingId] && this.state.setValue !== null && this.state.setValue !== undefined) {\n return this.realValueToPercent() + '% → ' + this.state.setValue + '%';\n } else {\n return this.realValueToPercent() + '%';\n }\n }\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.id, true),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartBlinds;\n\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n\n getStateText() {\n return this.state.pressed ? I18n.t('pressed') : '';\n }\n\n render() {\n return this.wrapContent(this.getStandardContent(null));\n }\n}\n\nexport default SmartButton;\n\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n {this.state.executing ? : null}\n
\n );\n }\n\n getStateText() {\n if (this.onActualId && this.state[this.onActualId] === false) {\n return I18n.t('Off');\n }\n if (this.state[this.actualId] === null || this.state[this.actualId] === undefined) {\n return '---';\n } else {\n if (this.workingId && this.state[this.workingId] && this.state.setValue !== null && this.state.setValue !== undefined) {\n return this.realValueToPercent(this.state[this.actualId]) + '% → ' + this.state.setValue + '%';\n } else {\n return this.realValueToPercent(this.state[this.actualId]) + '%';\n }\n }\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.id, true),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartDimmer;\n\n","import React from \"react\";\n\nconst ThermometerSimple = props => (\n \n);\n\nexport default ThermometerSimple;\n","import React from \"react\";\n\nconst Humidity = props => (\n \n);\n\nexport default Humidity;\n","/**\n * Copyright 2018 bluefox \n this.onChange(event.target.value)}\n margin=\"normal\"\n />\n onChange(this.type === 'number' ? parseFloat(this.state.val) : this.state.val)}\n variant=\"contained\">\n {Icon}\n {label}\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(InputControl);","/**\n * Copyright 2018 bluefox \n {Icon}\n \n {label}\n \n {value && value.val !== undefined && value.val !== null ? value.val.toString() : '?'}\n {unit && ({unit})}\n \n {value && value.lc && ()}\n \n
\n );\n};\n\nInfoControl.propTypes = {\n classes: PropTypes.object.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.object.isRequired,\n language: PropTypes.string.isRequired,\n unit: PropTypes.string,\n icon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n onChange: PropTypes.func // if no onChange => readOnly\n};\n\nexport default withStyles(styles)(InfoControl);","/**\n * Copyright 2018 bluefox \n \n
);\n }\n } else\n if (e.common.type === 'number' && e.common.min !== undefined && e.common.max !== undefined && e.common.max - e.common.min < 5000) {\n // slider\n item = [(\n
\n }*/\n />)];\n } else {\n // input field\n item = (\n {this.state[e.id].val}\n
\n {this.props.name}
),\n (- {result}
\n {customIcon}\n
\n );\n }\n\n getStateText() {\n const state = this.state[this.id];\n return state === undefined || state === null ? '?' : state + this.infos[0].unit;\n }\n\n getSecondaryDiv() {\n if (!this.infos || !this.infos[1] || !this.infos[1].id || this.state[this.infos[1].id] === undefined || this.state[this.infos[1].id] === null) {\n return null;\n }\n let val = this.state[this.infos[1].id];\n const icon = this.infos[1].icon;\n let Icon;\n if (icon) {\n if (typeof icon === 'object') {\n Icon = icon;\n Icon = (\n {Icon}\n {val + this.infos[1].unit}\n
);\n }\n\n getNumberOfValuesIndicator() {\n if (this.infos.length <= 2) return null;\n return ({this.infos.length}
);\n }\n\n getFirstName() {\n this.firstName = this.firstName || I18n.t(Utils.CapitalWords(this.id.split('.').pop()));\n\n return [({this.state.settings.name} ),({this.firstName})];\n }\n\n setValue(id, value) {\n console.log('Control ' + id + ' = ' + value);\n this.props.onControl(id, value);\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.actualId),\n this.getSecondaryDiv(),\n this.getNumberOfValuesIndicator(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartInfo;\n\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n {this.state.executing ? : null}\n
\n );\n } else {\n return null;\n }\n }\n\n getDialogSettings () {\n const settings = super.getDialogSettings();\n settings.push({\n name: 'decimals',\n value: this.state.settings.decimals || 0,\n type: 'number',\n min: 0,\n max: 6\n });\n\n return settings;\n }\n\n getStateText() {\n if (this.state[this.actualId] === null || this.state[this.actualId] === undefined) {\n return '---';\n } else {\n if (this.workingId && this.state[this.workingId] && this.state.setValue !== null && this.state.setValue !== undefined) {\n return this.roundValue(this.state[this.id]) + this.unit + ' → ' + this.state.setValue + this.unit;\n } else {\n return this.roundValue(this.state[this.id]) + this.unit;\n }\n }\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(null, true),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartSlider;\n\n","import React from \"react\";\n\nconst WindowOpened = props => (\n \n);\n\nexport default WindowOpened;\n","import React from \"react\";\n\nconst WindowClosed = props => (\n \n);\n\nexport default WindowClosed;\n","import React from \"react\";\n\nconst MotionOn = props => (\n \n);\n\nexport default MotionOn;\n","import React from \"react\";\n\nconst MotionOff = props => (\n \n);\n\nexport default MotionOff;\n","import React from \"react\";\n\nconst FireOn = props => (\n \n);\n\nexport default FireOn;\n","import React from \"react\";\n\nconst FireOff = props => (\n \n);\n\nexport default FireOff;\n","import React from \"react\";\n\nconst FloodOn = props => (\n \n);\n\nexport default FloodOn;\n","import React from \"react\";\n\nconst FloodOff = props => (\n \n);\n\nexport default FloodOff;\n","import React from \"react\";\n\nconst DoorOpened = props => (\n \n);\n\nexport default DoorOpened;\n","import React from \"react\";\n\nconst DoorClosed = props => (\n \n);\n\nexport default DoorClosed;\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n\n getStateText() {\n const state = this.state[this.id];\n if (state === undefined || state === null || !this.lastChange || !this.showTime) {\n const isOn = this.state[this.id] === '1' || this.state[this.id] === 1 || this.state[this.id] === true || this.state[this.id] === 'true' || this.state[this.id] === 'on' || this.state[this.id] === 'ON';\n return isOn ? I18n.t(this.textOn) : I18n.t(this.textOff);\n } else {\n return (\n {Icon ? (
);\n\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.actualId),\n this.getSecondaryDiv()\n ]);\n }\n}\n\nexport default SmartState;\n\n","import React from \"react\";\n\nconst Socket = props => (\n \n {customIcon}\n {this.state.executing ? : null}\n
\n );\n }\n\n getStateText() {\n return this.state[this.id] ? I18n.t('On') : I18n.t('Off')\n }\n\n render() {\n return this.wrapContent(this.getStandardContent(this.actualId));\n }\n}\n\nexport default SmartSwitch;\n\n","import React from \"react\";\n\nconst Thermometer = props => (\n \n);\n\nexport default Thermometer;\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n\n getStateText() {\n const state = this.state[this.id];\n return state === undefined || state === null ? '?' : state + this.unit;\n }\n\n getSecondaryDiv() {\n if (!this.secondary || !this.secondary.id || this.state[this.secondary.id] === undefined || this.state[this.secondary.id] === null) {\n return null;\n }\n let val = this.state[this.secondary.id];\n const Icon = this.secondary.icon;\n if (typeof val === 'number') {\n val = Math.round(val * 100) / 100;\n }\n return (\n {Icon ? (
);\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.actualId),\n this.getSecondaryDiv()\n ]);\n }\n}\n\nexport default SmartThermometer;\n\n","import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\n\nclass Thermostat extends Component {\n getStyles() {\n // Determine if the thermostat is actively working to reach the target temperature.\n let dialColor = '#222';\n if (this.props.hvacMode === 'heating') {\n dialColor = '#E36304';\n } else if (this.props.hvacMode === 'cooling') {\n dialColor = '#007AF1';\n }\n\n return {\n dial: {\n WebkitUserSelect: 'none',\n MozUserSelect: 'none',\n msUserSelect: 'none',\n userSelect: 'none',\n },\n circle: {\n fill: dialColor,\n WebkitTransition: 'fill 0.5s',\n transition: 'fill 0.5s',\n },\n target: {\n fill: 'white',\n textAnchor: 'middle',\n fontFamily: 'Helvetica, sans-serif',\n alignmentBaseline: 'central',\n fontSize: '120px',\n fontWeight: 'bold',\n visibility: (this.props.away ? 'hidden' : 'visible'),\n },\n ambient: {\n fill: 'white',\n textAnchor: 'middle',\n fontFamily: 'Helvetica, sans-serif',\n alignmentBaseline: 'central',\n fontSize: '22px',\n fontWeight: 'bold',\n },\n away: {\n fill: 'white',\n textAnchor: 'middle',\n fontFamily: 'Helvetica, sans-serif',\n alignmentBaseline: 'central',\n fontSize: '72px',\n fontWeight: 'bold',\n opacity: (this.props.away ? '1' : '0'),\n pointerEvents: 'none',\n },\n leaf: {\n fill: '#13EB13',\n opacity: (this.props.leaf ? '1' : '0'),\n visibility: (this.props.away ? 'hidden' : 'visible'),\n WebkitTransition: 'opacity 0.5s',\n transition: 'opacity 0.5s',\n pointerEvents: 'none',\n },\n };\n }\n\n pointsToPath(points) {\n return [points.map(\n (point, iPoint) => [(iPoint > 0 ? 'L' : 'M'), point[0], ' ', point[1]].join('')\n ).join(' '), 'Z'].join('');\n }\n\n rotatePoint(point, angle, origin) {\n const radians = angle * Math.PI / 180;\n const x = point[0] - origin[0];\n const y = point[1] - origin[1];\n const x1 = x * Math.cos(radians) - y * Math.sin(radians) + origin[0];\n const y1 = x * Math.sin(radians) + y * Math.cos(radians) + origin[1];\n return [x1, y1];\n }\n\n rotatePoints(points, angle, origin) {\n const _self = this;\n return points.map(\n (point) => _self.rotatePoint(point, angle, origin)\n );\n }\n\n restrictToRange(val, min, max) {\n if (val < min) return min;\n if (val > max) return max;\n return val;\n }\n\n mapLeafPoint(point, scale) {\n return isNaN(point) ? point : point * scale;\n }\n\n render() {\n const _self = this;\n\n // Local variables used for rendering.\n const diameter = 400;\n const radius = diameter / 2;\n const ticksOuterRadius = diameter / 30;\n const ticksInnerRadius = diameter / 8;\n const tickDegrees = 300;\n const rangeValue = this.props.maxValue - this.props.minValue;\n\n // Determine the maximum and minimum values to display.\n let actualMinValue;\n let actualMaxValue;\n if (this.props.away) {\n actualMinValue = this.props.ambientTemperature;\n actualMaxValue = actualMinValue;\n } else {\n actualMinValue = Math.min(this.props.ambientTemperature, this.props.targetTemperature);\n actualMaxValue = Math.max(this.props.ambientTemperature, this.props.targetTemperature);\n }\n const min = this.restrictToRange(Math.round((actualMinValue - this.props.minValue)\n / rangeValue * this.props.numTicks), 0, this.props.numTicks - 1);\n const max = this.restrictToRange(Math.round((actualMaxValue - this.props.minValue)\n / rangeValue * this.props.numTicks), 0, this.props.numTicks - 1);\n\n // Renders the degree ticks around the outside of the thermostat.\n const tickPoints = [\n [radius - 1, ticksOuterRadius],\n [radius + 1, ticksOuterRadius],\n [radius + 1, ticksInnerRadius],\n [radius - 1, ticksInnerRadius],\n ];\n const tickPointsLarge = [\n [radius - 1.5, ticksOuterRadius],\n [radius + 1.5, ticksOuterRadius],\n [radius + 1.5, ticksInnerRadius + 20],\n [radius - 1.5, ticksInnerRadius + 20],\n ];\n const theta = tickDegrees / this.props.numTicks;\n const offsetDegrees = 180 - (360 - tickDegrees) / 2;\n const tickArray = [];\n for (let iTick = 0; iTick < this.props.numTicks; iTick++) {\n const isLarge = iTick === min || iTick === max;\n const isActive = iTick >= min && iTick <= max;\n const tickElement = React.createElement('path', {\n key: ['tick-', iTick].join(''),\n d: this.pointsToPath(\n this.rotatePoints(\n isLarge ? tickPointsLarge : tickPoints,\n iTick * theta - offsetDegrees,\n [radius, radius])),\n style: {\n fill: isActive ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.3)',\n },\n });\n tickArray.push(tickElement);\n }\n\n // Determines the positioning of the leaf, should it be displayed.\n const leafScale = radius / 5 / 100;\n const leafDef = ['M', 3, 84, 'c', 24, 17, 51, 18, 73, -6, 'C', 100, 52, 100,\n 22, 100, 4, 'c', -13, 15, -37, 9, -70, 19, 'C', 4, 32, 0, 63, 0, 76, 'c',\n 6, -7, 18, -17, 33, -23, 24, -9, 34, -9, 48, -20, -9, 10, -20, 16, -43, 24,\n 'C', 22, 63, 8, 78, 3, 84, 'z',\n ].map(\n (point) => _self.mapLeafPoint(point, leafScale)\n ).join(' ');\n const translate = [radius - (leafScale * 100 * 0.5), radius * 1.5];\n\n // Determines whether the ambient temperature label will be displayed\n // to the left or right of the tick range.\n const lblAmbientPosition = [\n radius,\n ticksOuterRadius - (ticksOuterRadius - ticksInnerRadius) / 2,\n ];\n const peggedValue = this.restrictToRange(\n this.props.ambientTemperature,\n this.props.minValue,\n this.props.maxValue);\n let degs = tickDegrees * (peggedValue - this.props.minValue) / rangeValue - offsetDegrees;\n if (peggedValue > this.props.targetTemperature) {\n degs += 8;\n } else {\n degs -= 8;\n }\n const ambientPosition = this.rotatePoint(lblAmbientPosition, degs, [radius, radius]);\n\n // The styles change based on state.\n const styles = this.getStyles();\n\n // Piece it all together to form the thermostat display.\n return (\n \n );\n }\n}\n\nThermostat.propTypes = {\n /* Height of the thermostat (ex: 50% or 400px) */\n height: PropTypes.string,\n /* Width of the thermostat (ex: 50% or 400px) */\n width: PropTypes.string,\n /* Total number of ticks that will be rendered on the thermostat wheel */\n numTicks: PropTypes.number,\n /* Lowest temperature able to be displayed on the thermostat */\n minValue: PropTypes.number,\n /* Highest temperature able to be displayed on the thermostat */\n maxValue: PropTypes.number,\n /* Indicates whether or not the thermostat is in \"away mode\" */\n away: PropTypes.bool,\n /* Indicates whether or not the thermostat is in \"energy savings mode\" */\n leaf: PropTypes.bool,\n /* Actual temperature detected by the thermostat */\n ambientTemperature: PropTypes.number,\n /* Desired temperature that the thermostat attempts to reach */\n targetTemperature: PropTypes.number,\n /* Current state of operations within the thermostat */\n hvacMode: PropTypes.oneOf(['off', 'heating', 'cooling'])\n};\n\nThermostat.defaultProps = {\n height: '100%',\n width: '100%',\n numTicks: 100,\n minValue: 50,\n maxValue: 85,\n away: false,\n leaf: false,\n ambientTemperature: 74,\n targetTemperature: 68,\n hvacMode: 'off',\n};\n\nexport default Thermostat;\n","/**\n * Copyright 2018 bluefox \n {this.state.boostValue !== null && this.state.boostValue !== undefined ?\n () : null}\n
);\n }\n}\n\nexport default SmartDialogThermostat;","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n\n getStateText() {\n if (this.state[this.id] === null) {\n return '?';\n } else {\n return this.state[this.id] + this.unit;\n }\n }\n\n getSecondaryDiv() {\n if (this.actualId === this.id && !this.humidityId) {\n return null;\n }\n return (\n \n {this.actualId !== this.id ?\n [\n (
)\n ] : null}\n {this.humidityId ?\n [\n (
);\n }\n\n onBoostToggle(boostOn) {\n if (boostOn === undefined) {\n boostOn = !this.state[this.boostId];\n }\n const newValue = {};\n newValue[this.boostId] = boostOn;\n this.setState(newValue);\n this.props.onControl(this.boostId, boostOn);\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(this.id, true),\n this.getSecondaryDiv(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartThermostat;\n\n","import React from \"react\";\n\nconst WindowTilted = props => (\n \n);\n\nexport default WindowTilted;\n","/**\n * Copyright 2018 bluefox )\n ] : null}\n {this.humidityId ?\n [\n (
\n {customIcon}\n
\n );\n }\n\n getStateText() {\n if (this.state[this.id]){\n return I18n.t(this.state[this.id]);\n } else {\n return I18n.t('unknown');\n }\n }\n\n render() {\n return this.wrapContent(this.getStandardContent(this.actualId));\n }\n}\n\nexport default SmartWindowTilt;\n\n","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n\n getStateText() {\n const state = this.state[this.id];\n if (state === undefined || state === null || !this.lastChange || !this.showTime) {\n const isOn = this.state[this.id] === '1' || this.state[this.id] === 1 || this.state[this.id] === true || this.state[this.id] === 'true' || this.state[this.id] === 'on' || this.state[this.id] === 'ON';\n return isOn ? I18n.t(this.textOn) : I18n.t(this.textOff);\n } else {\n return (\n 
\n
\n );\n }\n\n getStateText() {\n const common = this.props.objects[this.instanceId].common;\n if (common.onlyWWW) {\n return common.enabled ? I18n.t('enabled') : I18n.t('disabled');\n } else {\n return this.state[this.id] ? I18n.t('running') : I18n.t('stopped');\n }\n }\n\n getSecondaryDiv() {\n let Icon;\n let text;\n let color;\n\n if (this.props.objects[this.instanceId].common.enabled) {\n Icon = IconPause;\n text = I18n.t('disable adapter');\n color = '#90ee90';\n } else {\n Icon = IconPlay;\n text = I18n.t('enable adapter');\n color = '#f99';\n }\n\n return (\n \n
);\n }\n\n render() {\n if (this.props.objects[this.instanceId].type !== 'instance') {\n return null;\n }\n const style = Object.assign(\n {},\n this.state[this.id] ? Theme.tile.tileStateOn : Theme.tile.tileStateOff,\n {\n color: this.state[this.id] ? Theme.palette.instanceRunning : Theme.palette.instanceStopped,\n position: 'absolute',\n bottom: 0\n }\n );\n\n return this.wrapContent([\n ({this.getIcon()}
),\n this.getSecondaryDiv(),\n (\n
)\n ]\n );\n }\n}\n\nexport default SmartInstance;\n\n","/**\n * Copyright 2018 bluefox {this.state.settings.name}
\n {this.getStateText()}
\n \n {this.getMute()}\n {this.getVolumeSlider()}\n
\n );\n }\n\n getSlider() {\n if (this.ids.control.seek) {\n return (\n {this.ids.control.elapsed ? (
\n );\n }\n\n getRepeat() {\n if (!this.ids.mode.repeat) return null;\n let style;\n let title;\n if (this.state[this.ids.mode.repeat]) {\n style = Object.assign({}, styles.control.repeat, {background: 'rgb(64, 238, 64)', color: 'white'});\n } else {\n style = styles.control.repeat;\n title = I18n.t('No repeat');\n }\n let Icon;\n if (this.state[this.ids.mode.repeat] === REPEAT.NONE || this.state[this.ids.mode.repeat] === REPEAT.ALL) {\n title = title || I18n.t('Repeat mode: all');\n Icon = IconRepeatAll;\n } else {\n Icon = IconRepeatOne;\n title = title || I18n.t('Repeat mode: one');\n }\n\n return ();\n }\n\n getShuffle() {\n if (!this.ids.mode.shuffle) return null;\n let style;\n if (this.state[this.ids.mode.shuffle]) {\n style = Object.assign({}, styles.control.shuffle, {background: '#b6b6f3'});\n } else {\n style = styles.control.shuffle;\n }\n\n return ();\n\n }\n\n getControlsDiv() {\n const state = this.state[this.ids.control.state];\n return ({Utils.getTimeString(this.state[this.ids.control.elapsed])}
) : null}\n {this.getSlider()}\n {this.ids.control.duration ? ({Utils.getTimeString(this.state[this.ids.control.duration])}
) : null}\n \n {this.ids.buttons.prev ? () : null}\n \n {this.props.settings.showStop && this.ids.buttons.stop ? () : null}\n {this.ids.buttons.next ? () : null}\n {this.getShuffle()}\n {this.getRepeat()}\n
);\n }\n\n getInfoDiv() {\n if (!this.divs.info.visible) return null;\n\n return (\n {this.ids.info.artist && this.state[this.ids.info.artist] ? (
);\n }\n\n getCoverDiv() {\n if (!this.divs.cover.visible) return null;\n\n if (this.state[this.ids.info.cover]) {\n const style = Object.assign({}, this.divs.cover.style, {backgroundImage: 'url(' + this.state[this.ids.info.cover] + ')'});\n return ({this.state[this.ids.info.artist]}
) : null}\n {this.ids.info.album && this.state[this.ids.info.album] ? ({this.state[this.ids.info.album]}
) : null}\n {this.ids.info.title && this.state[this.ids.info.title] ? ({this.state[this.ids.info.title]}
) : null}\n {this.ids.info.title && this.state[this.ids.info.title] ? ({this.state[this.ids.info.title]}
) : null}\n );\n } else {\n return (\n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport SmartGeneric from './SmartGeneric';\nimport Button from '@material-ui/core/Button';\n\nimport {MdMusicNote as IconNote} from 'react-icons/md';\nimport {MdPlayArrow as IconPlay} from 'react-icons/md';\nimport {MdPause as IconPause} from 'react-icons/md';\nimport {MdStop as IconStop} from 'react-icons/md';\nimport {MdSkipNext as IconNext} from 'react-icons/md';\nimport {MdSkipPrevious as IconPrev} from 'react-icons/md';\n\nimport Theme from '../theme';\n// import cover from '../assets/cover.png';\nimport Dialog from '../Dialogs/SmartDialogMedia';\n\nconst style = {\n info: {\n div: {\n background: 'rgba(0,0,0,0.55)',\n position: 'absolute',\n bottom: 50,\n width: 'calc(100% + 1rem)',\n left: '-0.5rem',\n paddingLeft: '1.2rem'\n },\n name: {\n fontSize: 10,\n fontWeight: 'normal',\n color: 'white'\n },\n artist: {\n fontSize: 12,\n fontWeight: 'normal',\n color: 'white'\n },\n album: {\n fontSize: 16,\n fontWeight: 'normal',\n color: 'white'\n },\n title: {\n fontSize: 12,\n fontWeight: 'normal',\n color: 'white'\n }\n },\n control: {\n div: {\n background: 'rgba(255,255,255,0.9)',\n position: 'absolute',\n width: 'calc(100% + 1rem)',\n bottom: 0,\n left: '-0.5rem',\n height: 48,\n textAlign: 'center',\n lineHeight: '48px',\n verticalAlign: 'middle'\n },\n prev: {\n height: 24,\n width: 24,\n marginLeft: 3,\n minHeight: 24,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n next: {\n height: 24,\n width: 24,\n marginLeft: 3,\n minHeight: 24,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n stop: {\n height: 24,\n width: 24,\n minHeight: 24,\n marginLeft: 3,\n verticalAlign: 'middle',\n boxShadow: 'none',\n background: 'rgba(255,255,255,1)'\n },\n play: {\n\n },\n pause: {\n background: '#40EE40'\n },\n name: {\n position: 'absolute',\n left: '1.2rem',\n bottom: 2,\n fontSize: 14,\n color: 'rgba(0,0,0,0.6)'\n }\n },\n time: {\n div: {\n\n },\n elapsed: {\n\n },\n duration: {\n\n },\n slider: {\n\n }\n }\n};\n\nclass SmartMedia extends SmartGeneric {\n constructor(props) {\n super(props);\n this.ids = {\n info: {\n cover: null,\n artist: null,\n album: null,\n title: null\n },\n buttons: {\n play: null,\n pause: null,\n stop: null,\n prev: null,\n next: null\n },\n control: {\n state: null,\n elapsed: null,\n duration: null,\n seek: null\n },\n volume: {\n set: null,\n actual: null,\n mute: null\n },\n mode: {\n repeat: null,\n shuffle: null\n }\n };\n\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'STATE');\n if (state) {\n this.id = state.id;\n this.ids.control.state = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'COVER');\n this.ids.info.cover = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ARTIST');\n this.ids.info.artist = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ALBUM');\n this.ids.info.album = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TITLE');\n this.ids.info.title = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'PLAY');\n this.ids.buttons.play = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'PAUSE');\n this.ids.buttons.pause = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'STOP');\n this.ids.buttons.stop = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'NEXT');\n this.ids.buttons.next = state && state.id;\n \n state = this.channelInfo.states.find(state => state.id && state.name === 'PREV');\n this.ids.buttons.prev = state && state.id;\n\n // no automatic subscription\n state = this.channelInfo.states.find(state => state.id && state.name === 'DURATION');\n this.ids.control.duration = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'SEEK');\n this.ids.control.seek = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ELAPSED');\n this.ids.control.elapsed = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'VOLUME');\n this.ids.volume.set = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'VOLUME_ACTUAL');\n this.ids.volume.actual = state ? state.id : this.ids.volume.set;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'MUTE');\n this.ids.volume.mute = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'SHUFFLE');\n this.ids.mode.shuffle = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'REPEAT');\n this.ids.mode.repeat = state && state.id;\n }\n\n this.width = 2;\n this.props.tile.setState({\n isPointer: true\n });\n this.key = 'smart-switch-' + this.id + '-';\n this.doubleState = true; // used in generic\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n\n // this.props.tile.registerHandler('onClick', this.onTileClick.bind(this));\n this.componentReady();\n }\n\n updateState(id, state) {\n if (id === this.ids.info.cover) {\n let url = state && state.val;\n if (url) {\n // url = cover;\n if (url.match(/\\?.+$/)) {\n url += '&ts=' + Date.now();\n } else {\n url += '?ts=' + Date.now();\n }\n }\n this.props.tile.setBackgroundImage(url || '');\n this.setState({[id]: url});\n } else\n if (id === this.ids.info.album) {\n this.setState({[id]: state.val});\n } else\n if (id === this.ids.info.artist) {\n this.setState({[id]: state.val});\n } else\n if (id === this.ids.info.title) {\n this.setState({[id]: state.val});\n } else\n if (this.id === id && state.ack) {\n const val =\n state.val === 'true' ||\n state.val === true ||\n state.val === 'PLAY' ||\n state.val === 'play' ||\n state.val === 1 ||\n state.val === '1';\n this.setState({[id]: val});\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n\n this.props.tile.setState({\n state: val\n });\n } else {\n super.updateState(id, state);\n }\n }\n\n getIcon() {\n if (this.state[this.ids.info.cover]) {\n return null;\n } else {\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {withStyles} from '@material-ui/core/styles';\n\nconst styles = theme => ({\n knobSurround: {\n boxSizing: 'border-box',\n position: 'relative',\n backgroundColor: 'grey',\n width: '10em',\n height: '10em',\n borderRadius: '50%',\n border: 'solid 0.25em #0e0e0e',\n background: '-webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313))',\n boxShadow: '0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3)'\n },\n knobBefore: {\n position: 'absolute',\n top: '50%',\n right: '3%',\n width: '3%',\n height: '3%',\n backgroundColor: '#a8d8f8',\n borderRadius: '50%',\n boxShadow: '0 0 0.4em 0 #79c3f4',\n },\n knob: {\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n position: 'absolute',\n zIndex: 10\n },\n min: {\n display: 'block',\n fontFamily: 'sans-serif',\n color: 'white',//'rgba(255, 255, 255, 0.4)',\n textTransform: 'uppercase',\n fontSize: '70%',\n position: 'absolute',\n opacity: '0.5'\n },\n max: {\n display: 'block',\n fontFamily: 'sans-serif',\n color: 'white',//'rgba(255, 255, 255, 0.4)',\n textTransform: 'uppercase',\n fontSize: '70%',\n position: 'absolute',\n opacity: '0.5'\n },\n tick: {\n height: '0.08em',\n width: '0.6em',\n backgroundColor: 'rgba(255, 255, 255, 0.6)',\n position: 'absolute',\n right: '-1.5em',\n top: '50%',\n transition: 'all 50ms ease-in',\n },\n value: {\n position: 'absolute',\n top: 'calc(50% - 10px)',\n width: '100%',\n textAlign: 'center',\n fontSize: 20,\n fontWeight: 'bold',\n color: '#a8d8f8',\n textShadow: '0 0 10px #a8d8f8'//'0 0 0.3em 0.08em #79c3f4',\n }\n});\n\nconst activeTick = {\n backgroundColor: '#a8d8f8',\n boxShadow: '0 0 0.3em 0.08em #79c3f4',\n};\nconst activeTitleMin = {\n color: '#ffa7a7',\n textShadow: '0 0 0.3em rgba(23,23,23)'//'0 0 0.3em 0.08em #79c3f4',\n};\nconst activeTitleMax = {\n color: '#a8d8f8',\n textShadow: '0 0 0.3em rgba(23,23,23)'//'0 0 0.3em 0.08em #79c3f4',\n};\nclass KnobControl extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n unit: PropTypes.string,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n min: PropTypes.number,\n max: PropTypes.number,\n ticks: PropTypes.number,\n style: PropTypes.object,\n hideValue: PropTypes.bool,\n angleStart: PropTypes.number,\n angleEnd: PropTypes.number,\n ticksNumber: PropTypes.number,\n parent: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n this.type = this.props.type || (typeof this.props.value === 'number' ? 'number' : 'text');\n this.ticksNumber = this.props.ticksNumber || 28;\n this.angleStart = this.props.angleStart === null || this.props.angleStart === undefined ? 135 : this.props.angleStart;\n this.angleEnd = this.props.angleEnd === null || this.props.angleEnd === undefined ? 45 : this.props.angleEnd;\n\n this.angleSize = this.angleEnd - this.angleStart;\n if (this.angleSize < 0) {\n this.angleSize += 360;\n }\n\n this.min = this.props.min || 0;\n this.max = this.props.max || 100;\n\n this.refKnob = React.createRef();\n\n this.onMouseMoveBind = this.onMouseMove.bind(this);\n this.onMouseUpBind = this.onMouseUp.bind(this);\n\n const value = this.externalValue2localValue(this.props.value);\n\n this.calcSteps(this.props.ticks || 28);\n\n this.unit = this.props.unit ? ' ' + this.props.unit : '';\n\n this.state = {\n value: value,\n activeTick: this.calcActiveTick(value),\n ticksNumber: this.props.ticks || 28\n };\n }\n\n componentDidUpdate() {\n if (!this.rect) {\n this.knobWidth = this.refKnob.current.offsetWidth;\n this.rect = this.refKnob.current.getBoundingClientRect();\n this.minPos = this.valueToPos(this.angleStart);\n const half = this.rect.width / 2;\n if (this.minPos.x < half && this.minPos.y < half) {\n this.minPos.x -= 13;\n this.minPos.y -= 6;\n } else if (this.minPos.x >= half && this.minPos.y < half) {\n this.minPos.x -= 13;\n this.minPos.y -= 6;\n } else if (this.minPos.x < half && this.minPos.y >= half) {\n this.minPos.x -= 13;\n this.minPos.y -= 6;\n } else if (this.minPos.x >= half && this.minPos.y >= half) {\n this.minPos.x -= 20;\n this.minPos.y -= 6;\n }\n\n this.maxPos = this.valueToPos(this.angleEnd);\n if (this.maxPos.x < half && this.maxPos.y < half) {\n this.maxPos.x -= 13;\n this.maxPos.y -= 6;\n } else\n if (this.maxPos.x >= half && this.maxPos.y < half) {\n this.maxPos.x -= 13;\n this.maxPos.y -= 6;\n } else\n if (this.maxPos.x < half && this.maxPos.y >= half) {\n this.maxPos.x -= 13;\n this.maxPos.y -= 6;\n } else\n if (this.maxPos.x >= half && this.maxPos.y >= half) {\n this.maxPos.x -= 20;\n this.maxPos.y -= 6;\n }\n this.forceUpdate();\n }\n }\n\n componentDidMount() {\n this.componentDidUpdate();\n }\n\n posToValue(x, y) {\n let h;\n if (x < 0) {\n h = Math.atan2(y, -x) * 180 / Math.PI;\n if (y > 0) {\n h = 180 - h;\n } else{\n h = 180 - h;\n }\n } else {\n h = Math.atan2(y, x) * 180 / Math.PI;\n }\n //h = h * -1;\n if (h < 0) h += 360;\n\n h = h - this.angleStart;\n if (h < 0) h += 360;\n\n h = h % 360;\n if (h > this.angleSize + (this.angleSize * 0.1)) {\n h = 0;\n } else\n if (h > this.angleSize) {\n h = this.angleSize;\n }\n\n return h / this.angleSize * 100;\n }\n\n calcActiveTick(value) {\n if (value === undefined) {\n value = this.state.value;\n }\n return Math.round(value / this.valueStep);\n\n }\n\n calcSteps(ticks) {\n ticks = ticks || this.state.ticksNumber;\n this.angleStep = (this.angleSize) / (ticks - 1);\n this.valueStep = 100 / (ticks - 1);\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.value !== this.state.value) {\n if (!this.mouseDown) {\n this.setState({value: nextProps.value});\n }\n }\n if (nextProps.ticksNumber !== this.state.ticks) {\n this.setState({ticks: nextProps.ticksNumber});\n this.calcSteps(nextProps.ticksNumber);\n }\n }\n\n localValue2externalValue(value) {\n return value * (this.max - this.min) / 100 + this.min;\n }\n\n externalValue2localValue(value) {\n return ((value - this.min) / (this.max - this.min)) * 100;\n }\n\n drawTicks() {\n const result = [];\n for (let i = 0; i < this.ticksNumber; i++) {\n const style = {transform: 'rotate(' + (this.angleStep * i + this.angleStart) + 'deg)'};\n\n result.push((
\n
\n );\n }\n }\n\n getHeaderDiv() {\n if (!this.divs.header.visible) return null;\n return (\n
\n {this.name}
);\n }\n\n generateContent() {\n return [\n this.getHeaderDiv(),\n this.getVolumeDiv(),\n this.getCoverDiv(),\n this.getInfoDiv(),\n this.getTimeDiv(),\n this.getControlsDiv()\n ];\n }\n}\n\nexport default SmartDialogMedia;","/**\n * Copyright 2018 bluefox \n {customIcon}\n
\n );\n }\n }\n\n onButton(id) {\n this.props.onControl(id, true);\n }\n\n getDialogSettings() {\n const settings = super.getDialogSettings();\n\n // remove doubleSize from list\n settings.forEach((item, i) => {\n if (item.name === 'doubleSize') {\n settings.splice(i, 1);\n return false\n }\n });\n\n if (this.ids.buttons.stop) {\n settings.unshift({\n name: 'showStop',\n value: this.state.settings.showStop || false,\n type: 'boolean'\n });\n }\n return settings;\n }\n\n getControlsDiv() {\n return (\n
);\n }\n\n getInfoDiv() {\n return ({this.state.settings.name}
\n {this.ids.buttons.prev ? () : null}\n \n {this.state.settings.showStop && this.ids.buttons.stop ? () : null}\n {this.ids.buttons.next ? () : null}\n \n {this.ids.info.artist && this.state[this.ids.info.artist] ? (
);\n }\n\n render() {\n return this.wrapContent([\n ({this.state[this.ids.info.artist]}
) : null}\n {this.ids.info.album && this.state[this.ids.info.album] ? ({this.state[this.ids.info.album]}
) : null}\n {this.ids.info.title && this.state[this.ids.info.title] ? ({this.state[this.ids.info.title]}
) : null}\n {this.getIcon()}
),\n this.getInfoDiv(),\n this.getControlsDiv(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartMedia;\n\n","/**\n * Copyright 2018 bluefox \n \n
));\n }\n return result;\n }\n\n onWheel(e) {\n // return;\n let value = this.state.value;\n if (e.deltaY < 0) {\n value -= this.valueStep;\n if (value < 0) value = 0;\n } else {\n value += this.valueStep;\n if (value > 100) value = 100;\n }\n this.onValueChange(value);\n }\n\n onValueChange(value) {\n this.setState({value, activeTick: this.calcActiveTick(value)});\n this.props.onChange && this.props.onChange(this.localValue2externalValue(value));\n }\n\n drawKnob() {\n const angle = this.angleStart + this.angleStep * (this.state.value / this.valueStep);\n // rotate knob\n const style = {\n transform: 'rotate(' + angle + 'deg)'\n };\n\n return (\n \n \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\n\nimport {MdVolumeMute as IconVolume0} from 'react-icons/md';\nimport {MdVolumeUp as IconVolume100} from 'react-icons/md';\n\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport KnobControl from '../basic-controls/react-knob/KnobControl';\nimport I18n from '../i18n';\n\nclass SmartDialogKnob extends SmartDialogGeneric {\n // expected:\n\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string,\n windowWidth: PropTypes.number,\n\n onClose: PropTypes.func,\n\n onMute: PropTypes.func,\n\n onValueChange: PropTypes.func,\n startValue: PropTypes.number,\n startMuteValue: PropTypes.bool,\n type: PropTypes.number\n };\n\n static buttonMuteStyle = {\n position: 'absolute',\n left: 'calc(50% + 8em)',\n top: '16.5em',\n height: '2em',\n width: '2.5em',\n background: '-webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313))',\n boxShadow: '0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3)',\n color: 'rgb(99, 99, 99)',\n textShadow: '0 0 0.3em rgba(23,23,23)'\n };\n\n static buttonMuted = {\n color: '#a8d8f8'\n };\n\n constructor(props) {\n super(props);\n this.stateRx.value = this.externalValue2localValue(this.props.startValue || 0);\n this.stateRx.muteValue = this.props.startMuteValue || false;\n\n this.dialogStyle = { // used in generic\n background: 'rgba(136,136,136,0.8)',\n maxHeight: 412,\n minHeight: 280,\n };\n\n this.closeOnPaperClick = true; // used in generic\n\n this.componentReady();\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.startValue !== this.state.value) {\n this.setState({value: nextProps.startValue});\n }\n if (nextProps.startMuteValue !== undefined && nextProps.startMuteValue !== this.state.muteValue) {\n this.setState({muteValue: nextProps.startMuteValue});\n }\n }\n\n localValue2externalValue(value) {\n if (this.props.min !== undefined && this.props.max !== undefined) {\n return value * (this.props.max - this.props.min) / 100 + this.props.min;\n } else {\n return value;\n }\n }\n\n externalValue2localValue(value) {\n if (this.props.min !== undefined && this.props.max !== undefined) {\n return ((value - this.props.min) / (this.props.max - this.props.min)) * 100;\n } else {\n return value;\n }\n }\n\n onValueChanged(value) {\n this.click = Date.now();\n\n this.setState({value: this.externalValue2localValue(value)});\n if (this.controlTimer) {\n clearTimeout(this.controlTimer);\n }\n\n if (this.props.onValueChange) {\n this.controlTimer = setTimeout(val => {\n this.controlTimer = null;\n this.props.onValueChange(Math.round(val));\n }, 300, value);\n }\n }\n\n onMute(e) {\n e && e.preventDefault();\n e && e.stopPropagation();\n this.props.onMute && this.props.onMute();\n }\n\n getMuteButton() {\n if (!this.props.onMute) return null;\n const style = Object.assign(\n {},\n SmartDialogKnob.buttonMuteStyle,\n this.state.muteValue ? SmartDialogKnob.buttonMuted : {});\n return (\n );\n }\n\n generateContent() {\n return [\n (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Button from '@material-ui/core/Button';\n\nimport {MdVolumeMute as IconVolume0} from 'react-icons/md';\nimport {MdVolumeDown as IconVolume50} from 'react-icons/md';\nimport {MdVolumeUp as IconVolume100} from 'react-icons/md';\n\nimport Theme from '../theme';\nimport SmartGeneric from './SmartGeneric';\nimport Types from './SmartTypes';\n//import Dialog from './SmartDialogSlider';\nimport Dialog from '../Dialogs/SmartDialogKnob';\n\nimport I18n from '../i18n';\nimport Icon from \"../icons/Thermometer\";\n\nconst style = {\n mute: {\n fontSize: 'smaller',\n fontWeight: 'normal',\n paddingLeft: 10\n },\n groupText: {\n fontSize: 10,\n paddingLeft: 5\n }\n};\n\nclass SmartVolume extends SmartGeneric {\n constructor(props) {\n super(props);\n if (this.channelInfo.states) {\n let state = this.channelInfo.states.find(state => state.id && state.name === 'SET');\n if (state && this.props.objects[state.id] && this.props.objects[state.id].common) {\n this.id = state.id;\n } else {\n this.id = '';\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ACTUAL');\n this.actualId = state ? state.id : this.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'MUTE');\n this.muteId = state && state.id;\n\n if (this.channelInfo.type === Types.volumeGroup) {\n this.group = true;\n }\n }\n\n if (this.id) {\n this.max = this.props.objects[this.actualId].common.max;\n this.min = this.props.objects[this.actualId].common.min;\n\n this.props.tile.setState({\n isPointer: true\n });\n\n this.unit = this.props.objects[this.actualId].common.unit;\n this.unit = this.unit ? ' ' + this.unit : '';\n }\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n this.stateRx.setValue = null;\n this.key = 'smart-slider-' + this.id + '-';\n this.doubleState = true; // used in generic\n\n this.componentReady();\n }\n\n updateState(id, state) {\n let newState = {};\n\n if (this.actualId === id || (this.id === id && this.id === this.actualId && state.ack)) {\n const val = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n if (!isNaN(val)) {\n newState[id] = val;\n this.setState(newState);\n\n const tileState = val !== this.min;\n this.props.tile.setState({\n state: tileState\n });\n } else {\n newState[id] = null;\n this.setState(newState);\n this.props.tile.setState({\n state: false\n });\n }\n\n // hide desired value\n if (this.state.setValue === newState[id] && state.ack) {\n this.setState({setValue: null});\n }\n\n if (state.ack && this.state.executing) {\n this.setState({executing: false});\n }\n } else if (id === this.id) {\n newState[id] = typeof state.val === 'number' ? state.val : parseFloat(state.val);\n this.setState(newState);\n } else {\n super.updateState(id, state);\n }\n }\n\n setValue(value) {\n console.log('Control ' + this.id + ' = ' + value);\n if (this.actualId !== this.id) {\n this.setState({executing: true, setValue: value});\n }\n if (this.max - this.min > 9) {\n value = Math.round(value);\n }\n this.props.onControl(this.id, value);\n }\n\n toggle() {\n this.props.onControl(this.muteId, !this.state[this.muteId]);\n }\n\n getSecondaryDiv() {\n let Icon;\n let text;\n let color;\n\n if (this.state[this.muteId]) {\n Icon = IconVolume0;\n text = I18n.t('mute');\n color = '#f99';\n } else {\n Icon = IconVolume100;\n text = I18n.t('unmute');\n color = 'inherit'\n }\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = ();\n } else {\n customIcon = (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport Paper from '@material-ui/core/Paper';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport Utils from '../Utils';\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport I18n from '../i18n';\n\nconst HEIGHT_HEADER = 64;\nconst HEIGHT_CURRENT = 200;\nconst HEIGHT_DAY = 140;\nconst HEIGHT_CHART = 160;\n\nconst styles = {\n 'header-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'current-div': {\n height: HEIGHT_CURRENT,\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16,\n overflow: 'hidden'\n },\n 'currentIcon-div': {\n position: 'absolute',\n width: 128,\n height: 128,\n zIndex: 0,\n left: 3,\n top: 24\n },\n 'currentIcon-icon': {\n width: '100%',\n zIndex: 0\n },\n 'currentIcon-temperature': {\n position: 'absolute',\n width: '100%',\n fontSize: 40,\n zIndex: 1,\n fontWeight: 'normal',\n textAlign: 'right',\n color: '#9c9c9c',\n top: 8,\n right: -50\n },\n 'currentDate-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 2em)',\n top: 16,\n left: 16\n },\n 'currentDate-date': {\n fontWeight: 'normal',\n display: 'inline-block',\n },\n 'currentDate-location': {\n display: 'inline-block',\n position: 'absolute',\n textOverflow: 'ellipsis',\n width: 'calc(100% - 75px)',\n whiteSpace: 'nowrap',\n right: 0,\n textAlign: 'right'\n },\n 'todayTemp-div': {\n position: 'absolute',\n zIndex: 1,\n fontWeight: 'normal',\n top: 35,\n maxWidth: 'calc(100% - 2em - 90px)',\n right: 16,\n textAlign: 'right'\n },\n 'todayTemp-temperature': {\n },\n 'todayTemp-temperatureMin': {\n },\n 'todayTemp-temperatureMax': {\n fontWeight: 'bold'\n },\n 'todayTemp-temperatureTitle': {\n },\n 'todayTemp-temperatureValue': {\n },\n 'todayTemp-precipitation': {\n },\n 'todayTemp-precipitationTitle': {\n },\n 'todayTemp-precipitationValue': {\n paddingLeft: 2\n },\n 'todayTemp-pressure': {\n },\n 'todayTemp-pressureTitle': {\n },\n 'todayTemp-pressureValue': {\n paddingLeft: 2\n },\n 'todayState-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 90px)',\n fontWeight: 'normal',\n bottom: 16,\n left: 118,\n textAlign: 'left',\n fontSize: 14\n },\n 'todayState-wind': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n 'todayState-windTitle': {\n },\n 'todayState-windDir': {\n marginLeft: 2,\n },\n 'todayState-windSpeed': {\n marginLeft: 2\n },\n 'todayState-windIcon': {\n display: 'inline-block',\n marginLeft: 5\n },\n 'todayState-windChill': {\n },\n 'todayState-windChillTitle': {\n paddingRight: 5\n },\n 'todayState-windChillValue': {\n },\n 'todayState-humidity': {\n },\n 'todayState-humidityTitle': {\n paddingRight: 5\n },\n 'todayState-humidityValue': {\n },\n 'todayState-state': {\n },\n 'chart-div': {\n height: HEIGHT_CHART,\n width: 'calc(100% - 1em)',\n overflowX: 'hidden',\n overflowY: 'auto',\n marginBottom: 16,\n padding: '0 16px',\n cursor: 'pointer'\n },\n 'chart-header': {\n width: '100%',\n fontSize: 16,\n paddingTop: 16,\n fontWeight: 'bold'\n },\n 'chart-img': {\n width: 'calc(100% - 16px)',\n height: 'calc(100% - 40px)',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n },\n 'chart-dialog': {\n zIndex: 2101\n },\n 'chart-dialog-paper': {\n width: 'calc(100% - 4em)',\n maxWidth: 'calc(100% - 4em)',\n height: 'calc(100% - 4em)',\n maxHeight: 'calc(100% - 4em)',\n },\n 'chart-dialog-content': {\n width: 'calc(100% - 5em)',\n height: 'calc(100% - 4em)',\n marginLeft: '1em',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n },\n\n 'days-div': {\n height: 'calc(100% - ' + HEIGHT_CURRENT + 'px - ' + HEIGHT_HEADER + 'px)',\n width: 'calc(100% - 1em)',\n overflowX: 'hidden',\n overflowY: 'auto'\n },\n 'day-div': {\n height: HEIGHT_DAY,\n width: '100%',\n marginBottom: 16,\n position: 'relative'\n },\n 'dayIcon-div': {\n position: 'absolute',\n width: 90,\n height: 90,\n zIndex: 0,\n left: 16,\n top: 30,\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n },\n 'dayIcon-icon': {\n width: '100%',\n zIndex: 0\n },\n 'dayIcon-temperature': {\n position: 'absolute',\n width: '100%',\n fontSize: 40,\n zIndex: 1,\n fontWeight: 'normal',\n textAlign: 'right',\n color: '#9c9c9c',\n top: 8,\n right: -50\n },\n 'dayDate-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 2em)',\n top: 16,\n left: 16\n },\n 'dayDate-date': {\n fontWeight: 'bold',\n display: 'inline-block',\n },\n 'dayTemp-div': {\n position: 'absolute',\n zIndex: 1,\n fontWeight: 'normal',\n top: 35,\n maxWidth: 'calc(100% - 2em - 90px)',\n right: 16,\n textAlign: 'right'\n },\n 'dayTemp-temperature': {\n },\n 'dayTemp-temperatureMin': {\n },\n 'dayTemp-temperatureMax': {\n fontWeight: 'bold'\n },\n 'dayTemp-temperatureTitle': {\n },\n 'dayTemp-temperatureValue': {\n },\n 'dayTemp-precipitation': {\n },\n 'dayTemp-precipitationTitle': {\n },\n 'dayTemp-precipitationValue': {\n paddingLeft: 2\n },\n 'dayTemp-humidity': {\n },\n 'dayTemp-humidityTitle': {\n },\n 'dayTemp-humidityValue': {\n paddingLeft: 2\n },\n 'dayTemp-pressure': {\n },\n 'dayTemp-pressureTitle': {\n },\n 'dayTemp-pressureValue': {\n paddingLeft: 2\n },\n 'dayState-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 90px)',\n fontWeight: 'normal',\n bottom: 16,\n left: 118,\n textAlign: 'left'\n },\n 'dayState-wind': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n fontSize: 14\n },\n 'dayState-windTitle': {\n },\n 'dayState-windDir': {\n marginLeft: 2,\n },\n 'dayState-windSpeed': {\n marginLeft: 2\n },\n 'dayState-windIcon': {\n display: 'inline-block',\n marginLeft: 5,\n width: 16,\n maxHeight: 16\n },\n 'dayState-windChill': {\n },\n 'dayState-windChillTitle': {\n paddingRight: 5\n },\n 'dayState-windChillValue': {\n },\n 'dayState-state': {\n fontSize: 14\n },\n\n};\n\nclass SmartDialogWeatherForecast extends SmartDialogGeneric {\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n objects: PropTypes.object,\n states: PropTypes.object,\n onCollectIds: PropTypes.func,\n enumNames: PropTypes.array,\n ids: PropTypes.object.isRequired,\n settings: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n\n this.ids = this.props.ids;\n\n for (const id in this.ids.current) {\n if (this.ids.current.hasOwnProperty(id) && this.ids.current[id]) {\n this.subscribes = this.subscribes || [];\n if (this.ids.current[id] instanceof Array) {\n this.ids.current[id].forEach(i => this.subscribes.push(i));\n } else {\n this.subscribes.push(this.ids.current[id]);\n }\n }\n }\n for (let d = 0; d < this.ids.days.length; d++) {\n if (!this.ids.days[d]) continue;\n for (const id in this.ids.days[d]) {\n if (this.ids.days[d].hasOwnProperty(id) && this.ids.days[d][id]) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(this.ids.days[d][id]);\n }\n }\n }\n if (this.props.settings) {\n if (this.props.settings.tempID && this.subscribes.indexOf(this.props.settings.tempID) === -1) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(this.props.settings.tempID);\n }\n if (this.props.settings.humidityID && this.subscribes.indexOf(this.props.settings.humidityID) === -1) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(this.props.settings.humidityID);\n }\n }\n\n this.stateRx.chartOpened = false;\n\n this.setMaxHeight();\n\n const enums = [];\n this.props.enumNames.forEach(e => (enums.indexOf(e) === -1) && enums.push(e));\n if (enums.indexOf(this.props.name) === -1) {\n enums.push(this.props.name);\n }\n this.name = enums.join(' / ');\n this.collectState = null;\n this.collectTimer = null;\n\n this.componentReady();\n }\n\n setMaxHeight(states) {\n let maxHeight = 0;\n states = states || this.state;\n\n this.divs = {\n 'header': {height: HEIGHT_HEADER, visible: true},\n 'current': {height: HEIGHT_CURRENT, visible: true},\n 'chart': {height: HEIGHT_CHART,\n visible: states && states[this.ids.current.chart] && !states[this.ids.current.chart].match(/\\.html$|\\.htm/)}\n };\n for (let d = 0; d < this.ids.days.length; d++) {\n if (this.ids.days[d]) {\n this.divs['day' + d] = {height: HEIGHT_DAY, visible: true};\n }\n }\n // calculate positions\n for (const name in this.divs) {\n if (this.divs.hasOwnProperty(name) && this.divs[name].visible) {\n maxHeight += this.divs[name].height + 16;\n }\n }\n\n if (this.dialogStyle.maxHeight !== maxHeight) {\n this.dialogStyle = {maxHeight: maxHeight};\n }\n }\n\n onUpdateTimer() {\n this.collectTimer = null;\n if (this.collectState) {\n this.setMaxHeight(this.collectState);\n this.setState(this.collectState);\n this.collectState = null;\n }\n }\n\n updateState(id, state) {\n for (let d = 0; d < this.ids.days.length; d++) {\n if (!this.ids.days[d]) continue;\n if (id === this.ids.days[d].temperature ||\n id === this.ids.days[d].humidity ||\n id === this.ids.days[d].humidityMin ||\n id === this.ids.days[d].humidityMax ||\n id === this.ids.days[d].windChill ||\n id === this.ids.days[d].windSpeed ||\n id === this.ids.days[d].temperatureMin ||\n id === this.ids.days[d].temperatureMax ||\n id === this.ids.days[d].precipitation ||\n id === this.ids.days[d].pressure) {\n const val = Math.round(parseFloat(state.val));\n if (!isNaN(val)) {\n this.collectState = this.collectState || {};\n this.collectState[id] = val;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n }\n return;\n } else\n if (id === this.ids.days[d].icon ||\n id === this.ids.days[d].state) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n return;\n } else\n if (id === this.ids.days[d].icon ||\n id === this.ids.days[d].state ||\n id === this.ids.days[d].windIcon) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n return;\n } else if (id === this.ids.days[d].windDirection) {\n let dir = '';\n if (state && state.val !== null && state.val !== '' && state.val !== undefined && (typeof state.val === 'number' || parseInt(state.val, 10).toString() === state.val.toString())) {\n dir = I18n.t('wind_' + Utils.getWindDirection(state.val)).replace('wind_', '');\n } else {\n dir = state.val;\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = dir;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n return;\n } else if (id === this.ids.days[d].date) {\n let date = '';\n\n if (state && state.val) {\n date = Utils.date2string(state.val) || '';\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = date;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n return;\n }\n }\n\n if (id === this.ids.current.temperature ||\n id === this.ids.current.humidity ||\n id === this.ids.current.windChill ||\n id === this.ids.current.windSpeed ||\n id === this.props.settings.tempID ||\n id === this.props.settings.humidityID ||\n id === this.ids.current.temperatureMin ||\n id === this.ids.current.temperatureMax ||\n id === this.ids.current.precipitation ||\n id === this.ids.current.pressure) {\n const val = Math.round(parseFloat(state.val));\n if (!isNaN(val)) {\n this.collectState = this.collectState || {};\n this.collectState[id] = val;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n }\n } else\n if (id === this.ids.current.icon ||\n id === this.ids.current.history ||\n id === this.ids.current.chart ||\n id === this.ids.current.state ||\n id === this.ids.current.windIcon) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (this.ids.current.location && this.ids.current.location.indexOf(id) !== -1) {\n this.collectState = this.collectState || {};\n if (state.val && state.val.replace(/[,.-]/g, '').trim()) {\n this.collectState.location = state.val || '';\n }\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else if (id === this.ids.current.windDirection) {\n let dir = '';\n if (state && state.val !== null && state.val !== '' && state.val !== undefined && (typeof state.val === 'number' || parseInt(state.val, 10).toString() === state.val.toString())) {\n dir = I18n.t('wind_' + Utils.getWindDirection(state.val)).replace('wind_', '');\n } else {\n dir = state.val;\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = dir;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else if (id === this.ids.current.date) {\n let date = '';\n\n if (state && state.val) {\n date = Utils.date2string(state.val) || '';\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = date;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else {\n console.log(id + ' => ' + state.val);\n super.updateState(id, state);\n }\n }\n\n getHeaderDiv() {\n if (!this.divs.header.visible) return null;\n return ({parts} );\n }\n\n getCurrentIconDiv() {\n const classes = this.props.classes;\n let temp;\n temp = this.props.settings.tempID && this.state[this.props.settings.tempID];\n if (!temp && temp !== 0) {\n temp = this.ids.current.temperature && this.state[this.ids.current.temperature];\n }\n\n return ( this.setState({chartOpened: true})}>\n ),\n this.state.chartOpened ? ( this.setState({chartOpened: false})}\n className={this.props.classes['chart-dialog']}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n {I18n.t('Chart')} \n \n \n \n ) : null];\n } else {\n return null;\n }\n }\n\n getDaysDiv() {\n let days = this.ids.days.map(function (day, d) {\n if (!d && this.props.settings.hideFirstDay) return null;\n return day && this.getDayDiv(d);\n }.bind(this));\n if (this.props.settings.chartLast) {\n days.push(this.getChartDiv());\n } else {\n days.unshift(this.getChartDiv());\n }\n days = days.filter(day => day);\n if (days.length) {\n return ( this.onOpenHistory()}>\n {this.getCurrentIconDiv()}\n {this.getCurrentDateLocationDiv()}\n {this.getTodayWindDiv()}\n {this.getTodayTempDiv()}\n );\n }\n\n generateContent() {\n return [\n this.getHeaderDiv(),\n this.getCurrentDiv(),\n this.getDaysDiv()\n ];\n }\n}\n\nexport default withStyles(styles)(SmartDialogWeatherForecast);","/**\n * Copyright 2018 bluefox \n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nimport SmartGeneric from './SmartGeneric';\nimport Utils from '../Utils';\nimport Dialog from '../Dialogs/SmartDialogWeatherForecast';\nimport I18n from '../i18n';\n\nconst styles = {\n 'currentIcon-div': {\n position: 'absolute',\n width: 90,\n height: 90,\n zIndex: 0,\n left: 3,\n top: 24\n },\n 'currentIcon-icon': {\n width: '100%',\n zIndex: 0\n },\n 'currentIcon-temperature': {\n position: 'absolute',\n width: '100%',\n fontSize: 40,\n zIndex: 1,\n fontWeight: 'normal',\n textAlign: 'right',\n color: '#9c9c9c',\n top: 8,\n right: -50\n },\n 'currentDate-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 2rem)',\n top: 16,\n left: 16\n },\n 'currentDate-date': {\n fontWeight: 'normal',\n display: 'inline-block',\n },\n 'currentDate-location': {\n display: 'inline-block',\n position: 'absolute',\n textOverflow: 'ellipsis',\n width: 'calc(100% - 78px)',\n whiteSpace: 'nowrap',\n right: 0,\n textAlign: 'right'\n },\n 'todayTemp-div': {\n position: 'absolute',\n zIndex: 1,\n fontWeight: 'normal',\n top: 35,\n maxWidth: 'calc(100% - 2rem - 90px)',\n right: 16,\n textAlign: 'right'\n },\n 'todayTemp-temperature': {\n },\n 'todayTemp-temperatureMin': {\n },\n 'todayTemp-temperatureMax': {\n fontWeight: 'bold'\n },\n 'todayTemp-temperatureTitle': {\n },\n 'todayTemp-temperatureValue': {\n },\n 'todayTemp-precipitation': {\n },\n 'todayTemp-precipitationTitle': {\n },\n 'todayTemp-precipitationValue': {\n paddingLeft: 2\n },\n 'todayState-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 90px)',\n fontWeight: 'normal',\n bottom: 16,\n left: 80,\n textAlign: 'left'\n },\n 'todayState-wind': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n fontSize: 14\n },\n 'todayState-windTitle': {\n },\n 'todayState-windDir': {\n marginLeft: 2,\n },\n 'todayState-windSpeed': {\n marginLeft: 2\n },\n 'todayState-windIcon': {\n display: 'inline-block',\n marginLeft: 5,\n width: 16,\n maxHeight: 16\n },\n 'todayState-windChill': {\n },\n 'todayState-windChillTitle': {\n paddingRight: 5\n },\n 'todayState-windChillValue': {\n },\n 'todayState-state': {\n fontSize: 14\n }\n};\n\nclass SmartWeatherForecast extends SmartGeneric {\n static propTypes = {\n classes: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.ids = {\n current: {\n date: null,\n location: null,\n icon: null,\n state: null,\n temperature: null,\n humidity: null,\n windChill: null,\n windSpeed: null,\n windIcon: null,\n windDirection: null,\n pressure: null,\n precipitation: null\n },\n days: [\n {\n date: null,\n icon: null,\n state: null,\n temperature: null,\n temperatureMin: null,\n temperatureMax: null,\n humidity: null,\n humidityMin: null,\n humidityMax: null,\n windSpeed: null,\n windIcon: null,\n windDirection: null,\n precipitation: null,\n pressure: null\n }\n ]\n };\n\n this.collectState = null;\n this.collectTimer = null;\n\n if (this.channelInfo.states) {\n //console.log(JSON.stringify(this.channelInfo.states, null, 2));\n\n // Actual\n let state = this.channelInfo.states.find(state => state.id && state.name === 'ICON');\n if (state) {\n this.id = state.id;\n this.ids.current.icon = state.id;\n } else {\n this.id = '';\n }\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP');\n this.ids.current.temperature = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'STATE');\n this.ids.current.state = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'DATE');\n this.ids.current.date = state && state.id;\n\n if (!this.ids.current.date) {\n state = this.channelInfo.states.find(state => state.id && state.name === 'DOW');\n this.ids.current.date = state && state.id;\n }\n\n state = this.channelInfo.states.filter(state => state.id && state.name === 'LOCATION').map(state => state.id);\n this.ids.current.location = state && state.length && state;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HUMIDITY');\n this.ids.current.humidity = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'PRESSURE');\n this.ids.current.pressure = state && state.id;\n this.pressureUnit = '';\n if (this.ids.current.pressure) {\n const obj = this.props.objects[this.ids.current.pressure];\n if (obj && obj.common && obj.common.unit) {\n this.pressureUnit = ' ' + I18n.t(obj.common.unit);\n }\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_SPEED');\n this.ids.current.windSpeed = state && state.id;\n this.windUnit = '';\n if (this.ids.current.windSpeed) {\n const obj = this.props.objects[this.ids.current.windSpeed];\n if (obj && obj.common && obj.common.unit) {\n this.windUnit = ' ' + I18n.t(obj.common.unit);\n }\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_CHILL');\n this.ids.current.windChill = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'FEELS_LIKE');\n if (!this.ids.current.windChill) {\n this.ids.current.windChill = state && state.id;\n } else if (state) {\n const pos = this.subscribes.indexOf(state.id);\n this.subscribes.splice(pos, 1);\n state.id = null;\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_ICON');\n this.ids.current.windIcon = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_DIRECTION');\n this.ids.current.windDirection = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_DIRECTION_STR');\n if (!this.ids.current.windDirection) {\n this.ids.current.windDirection = state && state.id;\n } else if (state) {\n const pos = this.subscribes.indexOf(state.id);\n this.subscribes.splice(pos, 1);\n state.id = null;\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP_MIN');\n this.ids.current.temperatureMin = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP_MAX');\n this.ids.current.temperatureMax = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'PRECIPITATION_CHANCE');\n this.ids.current.precipitation = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HISTORY_CHART');\n this.ids.current.history = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'FORECAST_CHART');\n this.ids.current.chart = state && state.id;\n\n for (let d = 0; d < 6; d++) {\n this.ids.days[d] = this.ids.days[d] || {};\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'DATE' + d);\n this.ids.days[d].date = state && state.id;\n\n if (!this.ids.days[d].date) {\n state = this.channelInfo.states.find(state => state.id && state.name === 'DOW' + d);\n this.ids.days[d].date = state && state.id;\n }\n state = this.channelInfo.states.find(state => state.id && state.name === 'ICON' + d);\n this.ids.days[d].icon = state && (state.id !== this.id) && state.id ;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'STATE' + d);\n this.ids.days[d].state = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP_MIN' + d);\n this.ids.days[d].temperatureMin = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP_MAX' + d);\n this.ids.days[d].temperatureMax = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'TEMP' + d);\n this.ids.days[d].temperature = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HUMIDITY' + d);\n this.ids.days[d].humidity = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HUMIDITY_MIN' + d);\n this.ids.days[d].humidityMin = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'HUMIDITY_MAX' + d);\n this.ids.days[d].humidityMax = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_SPEED' + d);\n this.ids.days[d].windSpeed = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_ICON' + d);\n this.ids.days[d].windIcon = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_DIRECTION' + d);\n this.ids.days[d].windDirection = state && state.id;\n\n if (!this.ids.days[d].windDirection) {\n state = this.channelInfo.states.find(state => state.id && state.name === 'WIND_DIRECTION_STR' + d);\n this.ids.days[d].windDirection = state && state.id;\n }\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'PRECIPITATION_CHANCE' + d);\n this.ids.days[d].precipitation = state && state.id;\n\n let isEmpty = true;\n for (const id in this.ids.days[d]) {\n if (this.ids.days[d].hasOwnProperty(id) && this.ids.days[d][id]) {\n isEmpty = false;\n break\n }\n }\n if (isEmpty) {\n this.ids.days[d] = null;\n }\n }\n\n let max = this.ids.days.length - 1;\n while (!this.ids.days[max] && max >= 0) {\n max--;\n }\n if (max < this.ids.days.length && !this.ids.days[max + 1]) {\n this.ids.days.splice(max + 1, this.ids.days.length - max - 1);\n }\n }\n\n this.width = 2;\n this.props.tile.setState({isPointer: false});\n this.props.tile.setState({state: true});\n this.key = 'smart-weather-' + this.id + '-';\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n\n this.componentReady();\n }\n\n applySettings(settings) {\n settings = settings || (this.state && this.state.settings);\n if (settings) {\n if (settings.tempID && (!this.subscribes || this.subscribes.indexOf(settings.tempID) === -1)) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(settings.tempID);\n }\n if (settings.humidityID && (!this.subscribes || this.subscribes.indexOf(settings.humidityID) === -1)) {\n this.subscribes = this.subscribes || [];\n this.subscribes.push(settings.humidityID);\n }\n }\n }\n\n onUpdateTimer() {\n this.collectTimer = null;\n if (this.collectState) {\n this.setState(this.collectState);\n this.collectState = null;\n }\n }\n\n updateState(id, state) {\n if (id === this.ids.current.temperature ||\n id === this.ids.current.humidity ||\n id === this.ids.current.windChill ||\n id === this.ids.current.windSpeed ||\n id === this.state.settings.tempID ||\n id === this.state.settings.humidityID ||\n id === this.ids.current.temperatureMin ||\n id === this.ids.current.temperatureMax ||\n id === this.ids.current.precipitation ||\n id === this.ids.current.pressure) {\n const val = Math.round(parseFloat(state.val));\n if (!isNaN(val)) {\n this.collectState = this.collectState || {};\n this.collectState[id] = val;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n }\n } else\n if (id === this.ids.current.icon ||\n id === this.ids.current.state ||\n id === this.ids.current.windIcon) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (this.ids.current.location && this.ids.current.location.indexOf(id) !== -1) {\n this.collectState = this.collectState || {};\n if (state.val && state.val.replace(/[,.-]/g, '').trim()) {\n this.collectState.location = state.val || '';\n }\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else if (id === this.ids.current.windDirection || id === this.ids.current.windDegrees) {\n let dir = '';\n if (state && state.val !== null && state.val !== '' && state.val !== undefined && (typeof state.val === 'number' || parseInt(state.val, 10).toString() === state.val.toString())) {\n dir = I18n.t('wind_' + Utils.getWindDirection(state.val)).replace('wind_', '');\n } else {\n dir = state.val;\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = dir;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else if (id === this.ids.current.date) {\n let date = '';\n\n if (state && state.val) {\n date = Utils.date2string(state.val) || '';\n }\n\n this.collectState = this.collectState || {};\n this.collectState[id] = date;\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else {\n console.log(id + ' => ' + state.val);\n super.updateState(id, state);\n }\n }\n\n getDialogSettings() {\n const settings = super.getDialogSettings();\n settings.push({\n name: 'chartLast',\n value: this.state.settings.chartLast || false,\n type: 'boolean'\n });\n settings.push({\n name: 'tempID',\n value: this.state.settings.tempID || '',\n type: 'string'\n });\n settings.push({\n name: 'humidityID',\n value: this.state.settings.humidityID || '',\n type: 'string'\n });\n settings.push({\n name: 'locationText',\n value: this.state.settings.locationText || '',\n type: 'string'\n });\n settings.push({\n name: 'hideFirstDay',\n value: this.state.settings.hideFirstDay || false,\n type: 'boolean'\n });\n // remove doubleSize from list\n settings.forEach((item, i) => {\n if (item.name === 'doubleSize') {\n settings.splice(i, 1);\n return false\n }\n });\n return settings;\n }\n\n getCurrentIconDiv() {\n const classes = this.props.classes;\n let temp;\n temp = this.state.settings.tempID && this.state[this.state.settings.tempID];\n if (!temp && temp !== 0) {\n temp = this.ids.current.temperature && this.state[this.ids.current.temperature];\n }\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport Paper from '@material-ui/core/Paper';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport SmartDialogGeneric from './SmartDialogGeneric';\nimport I18n from '../i18n';\n\nconst HEIGHT_HEADER = 64;\nconst HEIGHT_ICON = 300;\nconst HEIGHT_TITLE = 48;\nconst HEIGHT_DATE = 48;\nconst HEIGHT_INFO = 48;\nconst HEIGHT_DESC = 120;\n\nconst styles = {\n 'header-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'date-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'date-start': {\n },\n 'date-end': {\n },\n 'title-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n fontWeight: 'bold',\n fontSize: 20,\n marginBottom: 16\n },\n 'title-text': {\n },\n 'info-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'info-text': {\n },\n 'icon-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16,\n cursor: 'pointer',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n height: HEIGHT_ICON\n },\n 'desc-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'desc-text': {\n },\n 'chart-dialog': {\n zIndex: 2101\n },\n 'chart-dialog-paper': {\n width: 'calc(100% - 2em)',\n maxWidth: 'calc(100% - 2em)',\n height: 'calc(100% - 2em)',\n maxHeight: 'calc(100% - 2em)'\n },\n 'chart-dialog-img': {\n width: '100%',\n },\n 'chart-dialog-content': {\n width: 'calc(100% - 4em)',\n height: 'calc(100% - 4em)',\n cursor: 'pointer',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n },\n\n};\n\nclass SmartDialogWarning extends SmartDialogGeneric {\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n objects: PropTypes.object,\n states: PropTypes.object,\n onCollectIds: PropTypes.func,\n enumNames: PropTypes.array,\n ids: PropTypes.object.isRequired,\n settings: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n\n this.ids = this.props.ids;\n\n for (const id in this.ids) {\n if (this.ids.hasOwnProperty(id) && this.ids[id]) {\n this.subscribes = this.subscribes || [];\n if (this.ids[id] instanceof Array) {\n this.ids[id].forEach(i => this.subscribes.push(i));\n } else {\n this.subscribes.push(this.ids[id]);\n }\n }\n }\n\n this.stateRx.chartOpened = false;\n\n this.setMaxHeight();\n this.dialogStyle = {\n overflowY: 'auto'\n };\n\n const enums = [];\n this.props.enumNames.forEach(e => (enums.indexOf(e) === -1) && enums.push(e));\n if (enums.indexOf(this.props.name) === -1) {\n enums.push(this.props.name);\n }\n this.name = enums.join(' / ');\n this.collectState = null;\n this.collectTimer = null;\n\n this.componentReady();\n }\n\n setMaxHeight(states) {\n let maxHeight = 0;\n states = states || this.state;\n\n this.divs = {\n 'header': {height: HEIGHT_HEADER, visible: true},\n 'icon': {height: HEIGHT_ICON, visible: true},\n 'date': {height: HEIGHT_DATE, visible: true},\n 'title': {height: HEIGHT_TITLE, visible: states && states[this.ids.title]},\n 'info': {height: HEIGHT_INFO, visible: states && states[this.ids.info]},\n 'desc': {height: HEIGHT_DESC, visible: states && states[this.ids.description]}\n };\n\n // calculate height\n for (const name in this.divs) {\n if (this.divs.hasOwnProperty(name) && this.divs[name].visible) {\n maxHeight += this.divs[name].height + 16;\n }\n }\n\n if (this.dialogStyle.maxHeight !== maxHeight) {\n this.dialogStyle = {maxHeight: maxHeight};\n }\n }\n\n onUpdateTimer() {\n this.collectTimer = null;\n if (this.collectState) {\n this.setMaxHeight(this.collectState);\n this.setState(this.collectState);\n this.collectState = null;\n }\n }\n\n updateState(id, state) {\n if (id === this.ids.title ||\n id === this.ids.info ||\n id === this.ids.start ||\n id === this.ids.description ||\n id === this.ids.end ||\n id === this.ids.icon) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.warning) {\n const val = parseInt(state.val, 10) || 0;\n this.collectState = this.collectState || {};\n this.collectState[id] = val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else {\n console.log(id + ' => ' + state.val);\n super.updateState(id, state);\n }\n }\n\n getHeaderDiv() {\n if (!this.divs.header.visible) return null;\n return ( this.setState({chartOpened: true})}> ),\n this.state.chartOpened ? ( this.setState({chartOpened: false})}\n className={this.props.classes['chart-dialog']}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n {I18n.t('Chart')} \n this.onOpenNewWindow()}\n style={{\n backgroundImage: 'url(' + chart + ')'\n }}\n >\n \n \n \n \n ) : null];\n }\n\n getDateDiv() {\n const classes = this.props.classes;\n let start = this.ids.start && this.state[this.ids.start];\n let end = this.ids.end && this.state[this.ids.end];\n\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nimport SmartGeneric from './SmartGeneric';\nimport Dialog from '../Dialogs/SmartDialogWarning';\n\nconst styles = {\n 'icon-div': {\n position: 'absolute',\n width: 90,\n height: 90,\n zIndex: 0,\n left: 10,\n top: 24,\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center'\n },\n 'date-div': {\n position: 'absolute',\n zIndex: 1,\n width: 'calc(100% - 2rem - 90px)',\n top: 16,\n right: 16\n },\n 'date-start': {\n fontWeight: 'normal',\n textAlign: 'left',\n width: '100%'\n },\n 'date-end': {\n textAlign: 'right',\n fontWeight: 'normal',\n width: '100%'\n },\n 'title-div': {\n position: 'absolute',\n zIndex: 1,\n fontWeight: 'bold',\n top: 55,\n width: 'calc(100% - 2rem - 90px)',\n right: 16,\n textAlign: 'left'\n },\n 'title-text': {\n },\n 'info-div': {\n position: 'absolute',\n zIndex: 1,\n maxWidth: 'calc(100% - 2rem - 90px)',\n fontWeight: 'normal',\n top: 75,\n right: 16,\n textAlign: 'left'\n },\n 'info-text': {\n overflow: 'hidden',\n fontSize: 14\n }\n};\n\nclass SmartWeatherForecast extends SmartGeneric {\n static propTypes = {\n classes: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.ids = {\n warning: null,\n title: null,\n info: null,\n start: null,\n end: null,\n icon: null,\n description: null\n };\n\n this.collectState = null;\n this.collectTimer = null;\n\n if (this.channelInfo.states) {\n // Actual\n let state = this.channelInfo.states.find(state => state.id && state.name === 'LEVEL');\n if (state) {\n this.id = state.id;\n this.ids.warning = state.id;\n } else {\n this.id = '';\n }\n state = this.channelInfo.states.find(state => state.id && state.name === 'TITLE');\n this.ids.title = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'INFO');\n this.ids.info = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'START');\n this.ids.start = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'END');\n this.ids.end = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'ICON');\n this.ids.icon = state && state.id;\n\n state = this.channelInfo.states.find(state => state.id && state.name === 'DESC');\n this.ids.description = state && state.id;\n }\n\n this.width = 2;\n this.props.tile.setState({isPointer: false});\n this.props.tile.setState({state: true});\n this.key = 'smart-warning-' + this.id + '-';\n\n this.stateRx.showDialog = false; // support dialog in this tile used in generic class)\n\n this.componentReady();\n }\n\n onUpdateTimer() {\n this.collectTimer = null;\n if (this.collectState) {\n if (this.collectState[this.id] !== undefined) {\n this.props.tile.setVisibility(!!this.collectState[this.id]);\n }\n this.setState(this.collectState);\n this.collectState = null;\n }\n }\n\n updateState(id, state) {\n if (id === this.ids.title ||\n id === this.ids.info ||\n id === this.ids.icon) {\n this.collectState = this.collectState || {};\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.start ||\n id === this.ids.end) {\n this.collectState = this.collectState || {};\n if (typeof state.val === 'string') {\n const year = new Date().getFullYear();\n state.val = state.val.replace(year.toString(), '').replace((year + 1).toString(), '')\n }\n\n this.collectState[id] = state.val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else\n if (id === this.ids.warning) {\n const val = parseInt(state.val, 10) || 0;\n this.collectState = this.collectState || {};\n this.collectState[id] = val || '';\n this.collectTimer && clearTimeout(this.collectTimer);\n this.collectTimer = setTimeout(() => this.onUpdateTimer(), 200);\n } else {\n console.log(id + ' => ' + state.val);\n super.updateState(id, state);\n }\n }\n\n getDialogSettings() {\n const settings = super.getDialogSettings();\n // remove doubleSize from list\n settings.forEach((item, i) => {\n if (item.name === 'doubleSize') {\n settings.splice(i, 1);\n return false\n }\n });\n return settings;\n }\n\n getIconDiv() {\n const classes = this.props.classes;\n if (!this.ids.icon || !this.state[this.ids.icon]) return null;\n\n return ();\n }\n\n getDateDiv() {\n const classes = this.props.classes;\n let start = this.ids.start && this.state[this.ids.start];\n let end = this.ids.end && this.state[this.ids.end];\n\n return (\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport Paper from '@material-ui/core/Paper';\n\nimport SmartDialogGeneric from './SmartDialogGeneric';\n\nconst HEIGHT_TITLE = 64;\nconst HEIGHT_IFRAME = 300;\n\nconst styles = {\n 'header-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n marginBottom: 16\n },\n 'title-div': {\n width: 'calc(100% - 1em)',\n position: 'relative',\n fontWeight: 'bold',\n fontSize: 20,\n marginBottom: 16,\n },\n 'title-text': {\n color: 'black'\n },\n\n 'iframe-div': {\n width: 'calc(100% - 1em)',\n minHeight: HEIGHT_IFRAME,\n height: 'calc(100% - ' + HEIGHT_TITLE + 'px)'\n },\n iframe: {\n width: '100%',\n height: '100%',\n border: 0\n },\n 'image-img': {\n width: '100%',\n height: '100%',\n objectFit: 'contain'\n },\n\n};\n\nclass SmartDialogURL extends SmartDialogGeneric {\n // expected:\n static propTypes = {\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object\n ]),\n dialogKey: PropTypes.string.isRequired,\n windowWidth: PropTypes.number,\n onClose: PropTypes.func.isRequired,\n objects: PropTypes.object,\n states: PropTypes.object,\n onCollectIds: PropTypes.func,\n settings: PropTypes.object,\n image: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n\n this.ids = this.props.ids;\n\n this.setMaxHeight();\n this.dialogStyle = {overflowY: 'auto'};\n this.stateRx.url = this.getUrl(this.props.settings.background);\n\n if (this.props.settings.fullWidth) {\n this.dialogStyle = {width: 'calc(100% - 4rem)', maxWidth: 'calc(100% - 4rem)', left: '2rem'};\n }\n\n this.componentReady();\n }\n\n getUrl(url) {\n let _url;\n if (this.props.image && url) {\n if (url.indexOf('?') !== -1) {\n _url = url + '&ts=' + Date.now();\n } else {\n _url = url + '?ts=' + Date.now();\n }\n return _url;\n } else {\n return url;\n }\n }\n\n setMaxHeight(states) {\n let maxHeight = 0;\n states = states || this.state;\n\n this.divs = {\n 'title': {height: HEIGHT_TITLE, visible: !!this.props.settings.title},\n 'iframe': {height: HEIGHT_IFRAME, visible: true}\n };\n\n // calculate height\n for (const name in this.divs) {\n if (this.divs.hasOwnProperty(name) && this.divs[name].visible) {\n maxHeight += this.divs[name].height + 16;\n }\n }\n\n if (this.dialogStyle.maxHeight !== maxHeight) {\n this.dialogStyle = {maxHeight: maxHeight};\n }\n }\n\n updateUrl() {\n if (this.props.image) {\n this.setState({url: this.getUrl(this.props.settings.background)});\n }\n }\n\n componentDidMount () {\n if (this.interval) {\n clearInterval(this.interval);\n this.interval = null;\n }\n if (this.props.settings.updateInDialog || this.props.settings.update) {\n this.interval = setInterval(() => this.updateUrl(), this.props.settings.updateInDialog || this.props.settings.update);\n }\n }\n\n componentWillUnmount() {\n if (this.interval) {\n clearInterval(this.interval);\n this.interval = null;\n }\n }\n\n onOpenNewWindow() {\n if (this.props.settings.background) {\n const win = window.open(this.props.settings.background, '_blank');\n win.focus();\n }\n }\n\n getTitleDiv() {\n const classes = this.props.classes;\n let title = this.props.settings.title;\n\n if (title) {\n return ( this.onOpenNewWindow()} className={this.props.classes['iframe-div']} style={style}>\n
\n
\n );\n }\n\n drawValue() {\n if (this.props.hideValue) return null;\n return ({\n Math.round(this.localValue2externalValue(this.state.value)) + this.unit\n }
);\n }\n\n eventToValue(e) {\n let pageY = e.touches ? e.touches[e.touches.length - 1].clientY : e.clientY;\n let pageX = e.touches ? e.touches[e.touches.length - 1].clientX : e.clientX;\n const halfSize = this.knobWidth / 2;\n const value = this.posToValue(pageX - this.rect.left - halfSize, pageY - this.rect.top - halfSize);\n\n this.lastValue = Date.now();\n\n /*this.setState({\n value: value,\n activeTick: this.calcActiveTick(value)\n });*/\n\n this.onValueChange(value);\n }\n\n onMouseMove(e) {\n e.preventDefault();\n e.stopPropagation();\n this.eventToValue(e);\n }\n\n onMouseDown(e) {\n e.preventDefault();\n e.stopPropagation();\n\n this.mouseDown = true;\n\n this.eventToValue(e);\n\n document.addEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.addEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.addEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n }\n\n onMouseUp(e) {\n e.preventDefault();\n e.stopPropagation();\n\n this.mouseDown = false;\n\n console.log('Stopped');\n\n document.removeEventListener('mousemove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('mouseup', this.onMouseUpBind, {passive: false, capture: true});\n document.removeEventListener('touchmove', this.onMouseMoveBind, {passive: false, capture: true});\n document.removeEventListener('touchend', this.onMouseUpBind, {passive: false, capture: true});\n\n this.props.onChange && this.props.onChange(this.localValue2externalValue(this.state.value));\n }\n\n valueToPos(angle) {\n const halfSize = this.rect.width / 2;\n const x = (halfSize + 40) * Math.cos((Math.PI / 180) * angle) + halfSize;\n const y = (halfSize + 40) * Math.sin((Math.PI / 180) * angle) + halfSize;\n return {x, y};\n }\n\n drawMinMax() {\n if (!this.minPos) return;\n\n let styleMin = Object.assign({}, !this.state.value ? activeTitleMin : {}, {left: this.minPos.x, top: this.minPos.y});\n let styleMax = Object.assign({}, this.state.value === 100 ? activeTitleMax : {}, {left: this.maxPos.x, top: this.maxPos.y});\n\n return [\n (Min),\n (Max)\n ];\n\n }\n render() {\n return (\n \n {this.drawMinMax()}\n {this.drawKnob()}\n\n\n {this.drawValue()}\n
\n );\n }\n}\n\nexport default withStyles(styles)(KnobControl);","/**\n * Copyright 2018 bluefox \n {this.drawTicks()}\n
\n \n \n
);\n }\n\n getIcon() {\n\n let customIcon;\n\n if (this.state.settings.useDefaultIcon) {\n customIcon = (\n {customIcon}\n {this.state.executing ? : null}\n
\n );\n }\n\n getStateText() {\n let result = '';\n if (this.state[this.actualId] === null || this.state[this.actualId] === undefined) {\n result = '---';\n } else {\n if (this.workingId && this.state[this.workingId] && this.state.setValue !== null && this.state.setValue !== undefined) {\n if (this.max - this.min > 9) {\n result = Math.round(this.state[this.id]) + this.unit + ' → ' + Math.round(this.state.setValue) + this.unit;\n } else {\n result = this.roundValue(this.state[this.id], 1) + this.unit + ' → ' + this.roundValue(this.state.setValue, 1) + this.unit;\n }\n } else if (this.max - this.min > 9) {\n result = Math.round(this.state[this.id]) + this.unit;\n } else {\n result = this.roundValue(this.state[this.id], 1) + this.unit;\n }\n }\n if (this.muteId && this.state[this.muteId]) {\n result = [({result}), (({I18n.t('muted')}))];\n }\n return result;\n }\n\n getAdditionalName() {\n return this.group ? ({I18n.t('group')}) : null;\n }\n\n render() {\n return this.wrapContent([\n this.getStandardContent(null, true),\n this.muteId && this.getSecondaryDiv(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default SmartVolume;\n\n","/**\n * Copyright 2018 bluefox {this.name}
);\n }\n\n getDayIconDiv(d) {\n const classes = this.props.classes;\n const temp = this.ids.days[d].temperature && this.state[this.ids.days[d].temperature];\n const icon = this.ids.days[d].icon && this.state[this.ids.days[d].icon];\n\n if (!temp && !icon) return null;\n\n return (\n {icon ? () : null}\n {temp !== null && temp !== undefined ? (
);\n }\n\n getDayDateDiv(d) {\n const classes = this.props.classes;\n let date = this.ids.days[d].date && this.state[this.ids.days[d].date];\n if (!date) {\n const now = new Date();\n now.setDate(now.getDate() + d);\n date = Utils.date2string(now);\n }\n\n return ({temp}°
) : null}\n \n
);\n }\n\n getDayWindDiv(d) {\n const classes = this.props.classes;\n let windChill = this.ids.days[d].windchill && this.state[this.ids.days[d].date];\n let windDir = this.ids.days[d].windDirection && this.state[this.ids.days[d].windDirection];\n if (windDir !== null && windDir !== undefined && (typeof windDir === 'number' || parseInt(windDir, 10) === windDir)) {\n windDir = I18n.t('wind_' + Utils.getWindDirection(windDir)).replace('wind_', '');\n }\n let windSpeed = this.ids.days[d].windSpeed && this.state[this.ids.days[d].windSpeed];\n let windIcon = this.ids.days[d].windIcon && this.state[this.ids.days[d].windIcon];\n\n let state = this.ids.days[d].state && this.state[this.ids.days[d].state];\n\n if (!state && !windChill && windChill !== 0 && !windDir && !windSpeed && windSpeed !== 0) {\n return null;\n }\n\n return ({date}
\n \n\n {windChill !== null && windChill !== undefined ?\n (
);\n }\n\n getDayTempDiv(d) {\n const classes = this.props.classes;\n let tempMin = this.ids.days[d].temperatureMin && this.state[this.ids.days[d].temperatureMin];\n let tempMax = this.ids.days[d].temperatureMax && this.state[this.ids.days[d].temperatureMax];\n let precipitation = this.ids.days[d].precipitation && this.state[this.ids.days[d].precipitation];\n let pressure = this.ids.days[d].pressure && this.state[this.ids.days[d].pressure];\n let humidity = this.ids.days[d].humidity && this.state[this.ids.days[d].humidity];\n\n if (!humidity && humidity !== 0 &&\n this.ids.current.humidity &&\n this.props.objects[this.ids.current.humidity] &&\n this.props.objects[this.ids.current.humidity].common &&\n this.props.objects[this.ids.current.humidity].common.role &&\n this.props.objects[this.ids.current.humidity].common.role.indexOf('forecast.0') !== -1) {\n humidity = this.state[this.ids.current.humidity];\n }\n if (!tempMin && tempMin !== 0 &&\n this.ids.current.temperatureMin) {\n const obj = this.props.objects[this.ids.current.temperatureMin];\n if (obj &&\n obj.common &&\n obj.common.role &&\n obj.common.role.indexOf('forecast.0') !== -1) {\n tempMin = this.state[this.ids.current.temperatureMin];\n }\n }\n if (!tempMax && tempMax !== 0 &&\n this.ids.current.temperatureMax) {\n const obj = this.props.objects[this.ids.current.temperatureMax];\n if (obj &&\n obj.common &&\n obj.common.role &&\n obj.common.role.indexOf('forecast.0') !== -1) {\n tempMax = this.state[this.ids.current.temperatureMax];\n }\n }\n\n let temp;\n if (tempMin !== null && tempMin !== undefined &&\n tempMax !== null && tempMax !== undefined && tempMin !== tempMax) {\n temp = [\n ({tempMax}°),\n ( / ),\n ({tempMin}°)\n ];\n } else if (\n (tempMin !== null && tempMin !== undefined) ||\n (tempMax !== null && tempMax !== undefined)) {\n if (tempMin === null || tempMin === undefined) {\n tempMin = tempMax;\n }\n temp = ({tempMin}°);\n }\n\n if (!temp &&\n !precipitation && precipitation !== 0 &&\n !pressure && pressure !== 0 &&\n !humidity && humidity !== 0) {\n return null;\n }\n\n return (\n {I18n.t('Windchill')}: \n {windChill}\n
)\n : null}\n\n {(windDir !== null && windDir !== undefined) || (windSpeed !== null && windSpeed !== undefined) ?\n (\n {I18n.t('Wind')}:\n {windIcon ? (
) : null}\n {windDir ? ({windDir}) : null}\n {windSpeed !== null && windSpeed !== undefined && !isNaN(windSpeed) ? ({windSpeed}{this.props.windUnit}) : null}\n
)\n : null}\n\n {state ? ({state}
) : null}\n \n {temp !== null && temp !== undefined ?\n (
);\n }\n\n getDayDiv(d) {\n if (!this.ids.days[d]) return null;\n let parts = [\n this.getDayIconDiv(d),\n this.getDayDateDiv(d),\n this.getDayWindDiv(d),\n this.getDayTempDiv(d),\n ];\n if (!parts[0] && !parts[2] && !parts[3]) {\n return null;\n }\n\n return (\n {temp}\n
)\n : null}\n\n {precipitation !== null && precipitation !== undefined ?\n (\n {I18n.t('Precip.')}:\n {precipitation}%\n
)\n : null}\n\n {humidity !== null && humidity !== undefined ?\n (\n {I18n.t('Humidity')}:\n {humidity}%\n
)\n : null}\n {pressure !== null && pressure !== undefined ?\n (\n {I18n.t('Pressure')}:\n {pressure}{this.props.pressureUnit}\n
)\n : null}\n \n ![{this.state[this.ids.current.state]]({this.state[this.ids.current.icon]})
\n {temp !== null && temp !== undefined ? (
);\n }\n\n getCurrentDateLocationDiv() {\n const classes = this.props.classes;\n let date = this.ids.current.date && this.state[this.ids.current.date];\n let location = this.props.settings.locationText;\n location = location || this.state.location;\n location = location || I18n.t('Weather');\n date = date || Utils.date2string(new Date());\n\n return ({temp}°
) : null}\n \n
);\n }\n\n getTodayWindDiv() {\n const classes = this.props.classes;\n let windChill = this.ids.current.windchill && this.state[this.ids.current.date];\n let windDir = this.ids.current.windDirection && this.state[this.ids.current.windDirection];\n if (windDir !== null && windDir !== undefined && (typeof windDir === 'number' || parseInt(windDir, 10) === windDir)) {\n windDir = I18n.t('wind_' + Utils.getWindDirection(windDir)).replace('wind_', '');\n }\n let windSpeed = this.ids.current.windSpeed && this.state[this.ids.current.windSpeed];\n let windIcon = this.ids.current.windIcon && this.state[this.ids.current.windIcon];\n let humidity = this.props.settings.humidityID && this.state[this.props.settings.humidityID];\n if (!humidity && humidity !== 0) {\n humidity = this.ids.current.humidity && this.state[this.ids.current.humidity];\n }\n\n let state = this.ids.current.state && this.state[this.ids.current.state];\n return ({date},
\n {location}
\n \n\n {windChill !== null && windChill !== undefined ?\n (
);\n }\n\n getTodayTempDiv() {\n const classes = this.props.classes;\n let tempMin = this.ids.current.temperatureMin && this.state[this.ids.current.temperatureMin];\n let tempMax = this.ids.current.temperatureMax && this.state[this.ids.current.temperatureMax];\n let precipitation = this.ids.current.precipitation && this.state[this.ids.current.precipitation];\n let pressure = this.ids.current.pressure && this.state[this.ids.current.pressure];\n\n let temp;\n if (tempMin !== null && tempMin !== undefined &&\n tempMax !== null && tempMax !== undefined) {\n temp = [\n ({tempMax}°),\n ( / ),\n ({tempMin}°)\n ];\n }\n\n return (\n {I18n.t('Windchill')}: \n {windChill}\n
)\n : null}\n\n {(windDir !== null && windDir !== undefined) || (windSpeed !== null && windSpeed !== undefined) ?\n (\n {I18n.t('Wind')}:\n {windIcon ? () : null}\n {windDir ? ({windDir}) : null}\n {windSpeed !== null && windSpeed !== undefined && !isNaN(windSpeed) ? ({windSpeed}{this.props.windUnit}) : null}\n
)\n : null}\n\n {humidity || humidity === 0 ?\n (\n {I18n.t('Humidity')}: \n {humidity}%\n
)\n : null}\n\n {state ? ({state}
) : null}\n \n {temp !== null && temp !== undefined ?\n (
);\n }\n\n getChartDiv() {\n const classes = this.props.classes;\n let chart = this.ids.current.chart && this.state[this.ids.current.chart];\n if (chart && chart.toLowerCase().match(/\\.svg$|\\.jpg$|\\.jpeg$|\\.gif$|\\.png$/)) {\n if (chart.indexOf('?') === -1) {\n chart += '?ts=' + Date.now();\n } else {\n chart += '&ts=' + Date.now();\n }\n return [\n (\n {temp}\n
)\n : null}\n\n {precipitation !== null && precipitation !== undefined ?\n (\n {I18n.t('Precip.')}:\n {precipitation}%\n
)\n : null}\n\n {pressure !== null && pressure !== undefined ?\n (\n {I18n.t('Pressure')}:\n {pressure}{this.props.pressureUnit}\n
)\n : null}\n {I18n.t('Chart')}
\n \n {days}
);\n } else {\n return null;\n }\n }\n\n onOpenHistory() {\n if (this.ids.current.chart && this.state[this.ids.current.chart]) {\n const win = window.open(this.state[this.ids.current.chart], '_blank');\n win.focus();\n }\n }\n\n getCurrentDiv() {\n return (\n \n \n {temp !== null && temp !== undefined ? (
);\n }\n\n getCurrentDateLocationDiv() {\n const classes = this.props.classes;\n let date = this.ids.current.date && this.state[this.ids.current.date];\n let location = this.state.settings.locationText;\n location = location || this.state.location;\n\n location = location || I18n.t('Weather');\n date = date || Utils.date2string(new Date());\n\n return ({temp}°
) : null}\n \n
);\n }\n\n getTodayWindDiv() {\n const classes = this.props.classes;\n let windChill = this.ids.current.windchill && this.state[this.ids.current.date];\n let windDir = this.ids.current.windDirection && this.state[this.ids.current.windDirection];\n if (windDir !== null && windDir !== undefined && (typeof windDir === 'number' || parseInt(windDir, 10) === windDir)) {\n windDir = I18n.t('wind_' + Utils.getWindDirection(windDir)).replace('wind_', '');\n }\n let windSpeed = this.ids.current.windSpeed && this.state[this.ids.current.windSpeed];\n let windIcon = this.ids.current.windIcon && this.state[this.ids.current.windIcon];\n\n let state = this.ids.current.state && this.state[this.ids.current.state];\n return ({date},
\n {location}
\n \n\n {windChill !== null && windChill !== undefined ?\n (
);\n }\n\n getTodayTempDiv() {\n const classes = this.props.classes;\n let tempMin = this.ids.current.temperatureMin && this.state[this.ids.current.temperatureMin];\n let tempMax = this.ids.current.temperatureMax && this.state[this.ids.current.temperatureMax];\n let precipitation = this.ids.current.precipitation && this.state[this.ids.current.precipitation];\n\n let temp;\n if (tempMin !== null && tempMin !== undefined &&\n tempMax !== null && tempMax !== undefined && tempMin !== tempMax) {\n temp = [\n ({tempMax}°),\n ( / ),\n ({tempMin}°)\n ];\n } else if (\n (tempMin !== null && tempMin !== undefined) ||\n (tempMax !== null && tempMax !== undefined)) {\n if (tempMin === null || tempMin === undefined) {\n tempMin = tempMax;\n }\n temp = ({tempMin}°);\n }\n\n if (!temp && !precipitation && precipitation !== 0) {\n return null;\n }\n\n return (\n {I18n.t('Windchill')}: \n {windChill}\n
)\n : null}\n\n {(windDir !== null && windDir !== undefined) || (windSpeed !== null && windSpeed !== undefined) ?\n (\n {!windIcon ? ({I18n.t('Wind')}:) : null}\n {windIcon ? () : null}\n {windDir ? ({windDir}) : null}\n {windSpeed !== null && windSpeed !== undefined && !isNaN(windSpeed) ? ({windSpeed}{this.windUnit}) : null}\n
)\n : null}\n\n {state ? ({state}
) : null}\n \n {temp !== null && temp !== undefined ?\n (
);\n }\n\n render() {\n return this.wrapContent([\n this.getCurrentIconDiv(),\n this.getCurrentDateLocationDiv(),\n this.getTodayWindDiv(),\n this.getTodayTempDiv(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default withStyles(styles)(SmartWeatherForecast);\n","/**\n * Copyright 2018 bluefox \n {temp}\n
)\n : null}\n\n {precipitation !== null && precipitation !== undefined ?\n (\n {I18n.t('Precip.')}:\n {precipitation}%\n
)\n : null}\n {this.name}
);\n }\n\n onOpenNewWindow() {\n if (this.ids.icon && this.state[this.ids.icon]) {\n const win = window.open(this.state[this.ids.icon], '_blank');\n win.focus();\n }\n }\n\n getIconDiv() {\n if (!this.ids.icon || !this.state[this.ids.icon]) return null;\n const chart = this.state[this.ids.icon];\n\n return [(\n
);\n }\n\n getTitleDiv() {\n const classes = this.props.classes;\n let title = this.ids.title && this.state[this.ids.title];\n\n return ({start + (end ? ' - ' + end : '')}
\n \n
);\n }\n\n getInfoDiv() {\n const classes = this.props.classes;\n let info = this.ids.info && this.state[this.ids.info];\n\n return ({title}
\n \n
);\n }\n\n getDescDiv() {\n const classes = this.props.classes;\n let info = this.ids.description && this.state[this.ids.description];\n\n return ({info}
\n \n
);\n }\n\n generateContent() {\n return [\n this.getHeaderDiv(),\n this.getTitleDiv(),\n this.getDateDiv(),\n this.getInfoDiv(),\n this.getIconDiv(),\n this.getDescDiv()\n ];\n }\n}\n\nexport default withStyles(styles)(SmartDialogWarning);","/**\n * Copyright 2018 bluefox {info}
\n \n
);\n }\n\n getTitleDiv() {\n const classes = this.props.classes;\n let title = this.ids.title && this.state[this.ids.title];\n\n return ({start}
\n {end ? (-{end}
) : null}\n \n
);\n }\n\n getInfoDiv() {\n const classes = this.props.classes;\n let info = this.ids.info && this.state[this.ids.info];\n\n return ({title}
\n \n
);\n }\n\n render() {\n return this.wrapContent([\n this.getIconDiv(),\n this.getDateDiv(),\n this.getTitleDiv(),\n this.getInfoDiv(),\n this.state.showDialog ?\n : null\n ]);\n }\n}\n\nexport default withStyles(styles)(SmartWeatherForecast);\n","/**\n * Copyright 2018 bluefox {info}
\n \n
);\n } else {\n return null;\n }\n }\n\n getIFrameDiv() {\n const style = {height: 'calc(100% - ' + (this.props.settings.title ? HEIGHT_TITLE : '0') + 'px)'};\n if (!this.props.image && this.state.url) {\n return ({title}
\n