\n 
\n
\n \n { props.title }\n
\n \n );\n}\n\nexport default Menu\n","import React from 'react';\nimport getCookieValue from '../../../functions'\nimport { root } from '../../../constants'\n\nclass OnOff extends React.Component {\n constructor(props) {\n super(props);\n this.toggle = this.toggle.bind(this);\n }\n\n toggle(){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n this.props.reload();\n } else {\n console.error(http.statusText);\n }\n }\n }.bind(this)\n http.open(\"POST\", root + \"api/status/update/\");\n http.setRequestHeader(\"Content-Type\", \"application/json;charset=UTF-8\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send(JSON.stringify({\n \"id\": this.props.id,\n \"param\": \"on\",\n \"value\": !this.props.on\n }));\n }\n\n render() {\n\n const container = {\n float: 'left',\n marginLeft: '5px'\n }\n\n const image = {\n width: '30px'\n }\n\n return (\n \n \n
\n );\n }\n}\n\nexport default OnOff\n","import React from 'react';\n\nclass Information extends React.Component {\n constructor(props) {\n super(props);\n this.go = this.go.bind(this);\n }\n\n go(){\n window.location.href = \"/devices/info/\" + this.props.id + \"/\"\n }\n\n render() {\n\n const container = {\n float: 'left',\n marginLeft: '5px'\n }\n\n const image = {\n width: '30px'\n }\n\n return (\n \n ![{](\"/devices/information.png\")
\n
\n );\n }\n}\n\nexport default Information\n","import React from 'react';\n\nclass Connecting extends React.Component {\n constructor(props) {\n super(props);\n this.go = this.go.bind(this);\n }\n\n go(){\n window.location.href = \"/devices/connecting/\" + this.props.id + \"/\"\n }\n\n render() {\n\n const container = {\n float: 'left',\n marginLeft: '5px'\n }\n\n const image = {\n width: '30px'\n }\n\n return (\n \n \n ![{](\"/devices/connecting.png\")
\n
\n );\n }\n}\n\nexport default Connecting\n","import React from 'react';\n\nclass Edit extends React.Component {\n constructor(props) {\n super(props);\n this.go = this.go.bind(this);\n }\n\n go(){\n window.location.href = \"/devices/editor/\" + this.props.id + \"/\"\n }\n\n render() {\n\n const container = {\n float: 'left',\n marginLeft: '5px'\n }\n\n const image = {\n width: '30px'\n }\n\n return (\n \n \n ![{](\"/devices/edit.png\")
\n
\n );\n }\n}\n\nexport default Edit\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Light extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\" && Object.keys(this.props.status).includes(\"color\"))){\n if (Object.keys(this.props.status.color).includes(\"spectrumRgb\"))\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n else\n color = \"#\" + this.props.status.color.spectrumRGB.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n );\n }\n}\n\nexport default Light\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Outlet extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'blue',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Outlet\n","import React from 'react';\nimport getCookieValue from '../../../functions'\nimport { root } from '../../../constants'\n\nclass TemperatureSetting extends React.Component {\n constructor(props) {\n super(props);\n this.up = this.up.bind(this);\n this.down = this.down.bind(this);\n this.update = this.update.bind(this);\n }\n\n up(){\n var temperature = this.props.status.thermostatTemperatureSetpoint + 1;\n this.update(temperature)\n }\n\n down(){\n var temperature = this.props.status.thermostatTemperatureSetpoint - 1;\n this.update(temperature)\n }\n\n update(temperature){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n this.props.reload();\n } else {\n console.error(http.statusText);\n }\n }\n }.bind(this)\n http.open(\"POST\", root + \"api/status/update/\");\n http.setRequestHeader(\"Content-Type\", \"application/json;charset=UTF-8\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send(JSON.stringify({\n \"id\": this.props.id,\n \"param\": \"thermostatTemperatureSetpoint\",\n \"value\": temperature\n }));\n }\n\n render() {\n\n const container = {\n float: 'left',\n marginLeft: '5px'\n }\n\n const image = {\n width: '30px'\n }\n\n const temperature = {\n fontSize: '30px',\n marginLeft: '5px',\n marginRight: '5px',\n color: '#777'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n 
\n {this.props.status.thermostatTemperatureSetpoint}\n 
\n
\n );\n }\n}\n\nexport default TemperatureSetting\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport TemperatureSetting from './traits/TemperatureSetting'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass AcUnit extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.status.thermostatMode === 'off')\n color = \"#666\";\n else if (this.props.status.thermostatMode === 'heat')\n color = \"red\";\n else if (this.props.status.thermostatMode === 'cool')\n color = \"lightblue\";\n else if (this.props.status.thermostatMode === 'on')\n color = \"yellow\";\n else if (this.props.status.thermostatMode === 'heatcool')\n color = \"#DC97FF\";\n else if (this.props.status.thermostatMode === 'auto')\n color = \"#EE357E\";\n else if (this.props.status.thermostatMode === 'fan-only')\n color = \"blue\";\n else if (this.props.status.thermostatMode === 'purifier')\n color = \"#F3882E\";\n else if (this.props.status.thermostatMode === 'eco')\n color = \"green\";\n else if (this.props.status.thermostatMode === 'dry')\n color = \"#753500\";\n\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n {this.props.status.thermostatTemperatureSetpoint}\n \n \n
\n );\n }\n}\n\nexport default AcUnit\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass AirFreshener extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default AirFreshener\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass AirPurifier extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default AirPurifier\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Bed extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Bed\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Fan extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Fan\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Fireplace extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Fireplace\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Radiator extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Radiator\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Switch extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'yellow',\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Switch\n","import React from 'react';\nimport TemperatureSetting from './traits/TemperatureSetting'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Thermostat extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.status.thermostatMode === 'off')\n color = \"#666\";\n else if (this.props.status.thermostatMode === 'heat')\n color = \"red\";\n else if (this.props.status.thermostatMode === 'cool')\n color = \"lightblue\";\n else if (this.props.status.thermostatMode === 'on')\n color = \"yellow\";\n else if (this.props.status.thermostatMode === 'heatcool')\n color = \"#DC97FF\";\n else if (this.props.status.thermostatMode === 'auto')\n color = \"#EE357E\";\n else if (this.props.status.thermostatMode === 'fan-only')\n color = \"blue\";\n else if (this.props.status.thermostatMode === 'purifier')\n color = \"#F3882E\";\n else if (this.props.status.thermostatMode === 'eco')\n color = \"green\";\n else if (this.props.status.thermostatMode === 'dry')\n color = \"#753500\";\n\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Thermostat\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass AirCooler extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\")){\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default AirCooler\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Bathtub extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\")){\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Bathtub\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Awing extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Awing\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Blinds extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Blinds\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Closet extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Closet\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Curtain extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Curtain\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Door extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Door\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Drawer extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Drawer\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Garage extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Garage\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Pergola extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Pergola\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Shutter extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Shutter\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Valve extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Valve\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Window extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Window\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Lock extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Lock\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Gate extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Gate\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Heater extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\")){\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Heater\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Hood extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\")){\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Hood\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass SecuritySystem extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: 'white',\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default SecuritySystem\n","import React from 'react';\nimport OnOff from './traits/OnOff'\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Blender extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'yellow';\n if (this.props.device.traits.includes(\"action.devices.traits.ColorSetting\")){\n color = \"#\" + this.props.status.color.spectrumRgb.toString(16);\n }\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color,\n opacity: this.props.status.on ? '1' : '0.4'\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Blender\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Global extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'white';\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Global\n","import React from 'react';\nimport Information from './aux/Information'\nimport Connecting from './aux/Connecting'\nimport Edit from './aux/Edit'\n\nclass Scene extends React.Component {\n\n render() {\n\n const traits_container = {\n paddingLeft: '50px'\n }\n\n var color = 'white';\n\n const color_strip = {\n width: '100%',\n height: '20px',\n borderRadius: '20px 20px 0px 0px',\n backgroundColor: color\n }\n\n return (\n \n \n
\n
\n { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Scene\n","import React from 'react';\nimport Light from '../devices/Light'\nimport Outlet from '../devices/Outlet'\nimport AcUnit from '../devices/AcUnit'\nimport AirFreshener from '../devices/AirFreshener'\nimport AirPurifier from '../devices/AirPurifier'\nimport Bed from '../devices/Bed'\nimport Fan from '../devices/Fan'\nimport Fireplace from '../devices/Fireplace'\nimport Radiator from '../devices/Radiator'\nimport Switch from '../devices/Switch'\nimport Thermostat from '../devices/Thermostat'\nimport AirCooler from '../devices/AirCooler'\nimport Bathtub from '../devices/Bathtub'\nimport Awing from '../devices/Awing'\nimport Blinds from '../devices/Blinds'\nimport Closet from '../devices/Closet'\nimport Curtain from '../devices/Curtain'\nimport Door from '../devices/Door'\nimport Drawer from '../devices/Drawer'\nimport Garage from '../devices/Garage'\nimport Pergola from '../devices/Pergola'\nimport Shutter from '../devices/Shutter'\nimport Valve from '../devices/Valve'\nimport Window from '../devices/Window'\nimport Lock from '../devices/Lock'\nimport Gate from '../devices/Gate'\nimport Heater from '../devices/Heater'\nimport Hood from '../devices/Hood'\nimport SecuritySystem from '../devices/SecuritySystem'\nimport Blender from '../devices/Blender'\nimport Global from '../devices/Global'\nimport Scene from '../devices/Scene'\nimport getCookieValue from '../../functions'\nimport { root } from '../../constants'\n\nimport './Devices.css';\n\nclass Devices extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n data: {},\n devices: []\n }\n this.loadData = this.loadData.bind(this);\n this.newDevice = this.newDevice.bind(this);\n }\n\n componentDidMount() {\n this.loadData();\n setInterval(this.loadData,3000);\n }\n\n loadData(){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n var data = JSON.parse(http.responseText);\n this.setState({\n data: data,\n devices: data.devices\n });\n } else {\n console.error(http.statusText);\n }\n }\n }.bind(this);\n http.open(\"GET\", root + \"api/global/get/\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send();\n }\n\n newDevice(){\n window.location.href = '/devices/editor/'\n }\n\n render() {\n\n const devices = this.state.devices.map((device) => {\n if(device.type === 'action.devices.types.LIGHT')\n return \n \n
\n
\n Scene: { this.props.device.name.name }
\n\n
\n
\n \n
\n );\n }\n}\n\nexport default Devices\n","import React from 'react';\n\nimport '../pages/Editor.css';\n\nclass Text extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n }\n\n\n update(event){\n this.props.update(this.props.data,event.target.value);\n }\n\n render() {\n return (\n \n
\n\n Devices and scences
\n\n { devices }\n
\n\n \n \n
\n \n
\n );\n }\n}\n\nexport default Text\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Scene extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n\n\n return (\n \n {this.props.name}\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default Scene\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass OnOff extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n return (\n \n
\n \n sceneReversible\n
\n \n {this.updateCheckbox(checked,\"sceneReversible\")}} checked={this.props.attributes.sceneReversible} />\n
\n \n Enable it if the scene can be desabled.\n
\n \n
\n );\n }\n}\n\nexport default OnOff\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Brightness extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n\n\n return (\n \n
\n \n commandOnlyOnOff\n
\n \n {this.updateCheckbox(checked,\"commandOnlyOnOff\")}} checked={this.props.attributes.commandOnlyOnOff} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the state.\n
\n \n
\n \n queryOnlyOnOff\n
\n \n {this.updateCheckbox(checked,\"queryOnlyOnOff\")}} checked={this.props.attributes.queryOnlyOnOff} />\n
\n \n Enable it if Google shouldn't change the device state.\n
\n \n
\n );\n }\n}\n\nexport default Brightness\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass FanSpeed extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n this.updateFanSpeeds = this.updateFanSpeeds.bind(this);\n this.addFanSpeed = this.addFanSpeed.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n updateFanSpeeds(event){\n const id = event.target.id.split('_')\n const speed_id = id[1]\n //Process the attribute and value depending of the attribute\n const speed_attribute = id[0] === 'lang' ? id[0] : 'speed_synonym';\n const value = id[0] === 'lang' ? event.target.value : event.target.value.split(',')\n //Update the temporal data and update it\n var temp_availableFanSpeeds = this.props.attributes.availableFanSpeeds\n temp_availableFanSpeeds.speeds[speed_id].speed_values[0][speed_attribute] = value\n if (id[0] === 'names') temp_availableFanSpeeds.speeds[speed_id].speed_name = value[0]\n this.props.update('attributes/availableFanSpeeds', temp_availableFanSpeeds);\n }\n\n addFanSpeed(){\n var temp_availableFanSpeeds = this.props.attributes.availableFanSpeeds\n temp_availableFanSpeeds.speeds.push({\n \"speed_name\": \"\",\n \"speed_values\": [\n {\n \"speed_synonym\": [\"\"],\n \"lang\": \"en\"\n }\n ]\n });\n this.props.update('attributes/availableFanSpeeds', temp_availableFanSpeeds);\n }\n\n render() {\n\n const names_box = {\n width: '150px'\n }\n\n const speeds = this.props.attributes.availableFanSpeeds.speeds.map((speed, i) => {\n return (\n \n
\n \n commandOnlyBrightness\n
\n \n {this.updateCheckbox(checked,\"commandOnlyBrightness\")}} checked={this.props.commandOnlyBrightness} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the brightness.\n
\n \n
\n )\n });\n\n return (\n \n
\n \n
\n \n \n \n
\n \n\n
\n );\n }\n}\n\nexport default FanSpeed\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass ColorSetting extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n return (\n \n
\n\n \n reversible\n
\n \n {this.updateCheckbox(checked,\"reversible\")}} checked={this.props.attributes.reversible} />\n
\n \n Enable it if the fan supports blowing in both directions.\n
\n \n
\n\n \n supportsFanSpeedPercent\n
\n \n {this.updateCheckbox(checked,\"supportsFanSpeedPercent\")}} checked={this.props.attributes.supportsFanSpeedPercent} />\n
\n \n Enable it if the speed can be controlled with a number from 0 to 100.\n
\n \n
\n\n \n commandOnlyFanSpeed\n
\n \n {this.updateCheckbox(checked,\"commandOnlyFanSpeed\")}} checked={this.props.attributes.commandOnlyFanSpeed} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the fan speed.\n
\n \n
\n\n {speeds}\n\n \n Add a speed\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default ColorSetting\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass TemperatureSetting extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n this.updateMode = this.updateMode.bind(this);\n this.addMode = this.addMode.bind(this);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n updateMode(event){\n const id = event.target.id.split('_')\n const mode_id = id[1]\n var temp_availableThermostatModes = this.props.attributes.availableThermostatModes.split(',')\n\n if (event.target.value === 'delete'){\n temp_availableThermostatModes.splice(mode_id, 1)\n } else if (event.target.value !== 'select') {\n temp_availableThermostatModes[mode_id] = event.target.value;\n }\n\n this.props.update('attributes/availableThermostatModes', temp_availableThermostatModes.join(','));\n }\n\n addMode(){\n var temp_availableThermostatModes = this.props.attributes.availableThermostatModes\n temp_availableThermostatModes += \",\"\n this.props.update('attributes/availableThermostatModes', temp_availableThermostatModes);\n }\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n\n render() {\n\n const modes = this.props.attributes.availableThermostatModes.split(',').map((mode, i) => {\n\n return (\n \n
\n \n Color type\n
\n \n \n
\n \n \n
\n \n
\n \n Minimum temperature\n
\n \n \n
\n \n Minimum color temperature (in Kelvin) supported by the device.\n
\n \n
\n \n Maximum temperature\n
\n \n \n
\n \n Maximum color temperature (in Kelvin) supported by the device.\n
\n \n
\n\n \n commandOnlyColorSetting\n
\n \n {this.updateCheckbox(checked,\"commandOnlyColorSetting\")}} checked={this.props.attributes.commandOnlyColorSetting} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the color.\n
\n \n
\n\n )\n });\n\n return (\n \n
\n \n
\n \n \n
\n \n\n
\n );\n }\n}\n\nexport default TemperatureSetting\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Toggles extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n this.updatetoggle = this.updatetoggle.bind(this);\n this.addToggle = this.addToggle.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n updatetoggle(event){\n const id = event.target.id.split('_')\n const toggle_id = id[1]\n //Process the attribute and value depending of the attribute\n const toggle_attribute = id[0] === 'lang' ? id[0] : 'name_synonym';\n const value = id[0] === 'lang' ? event.target.value : event.target.value.split(',')\n //Update the temporal data and update it\n var temp_availableToggles = this.props.attributes.availableToggles\n temp_availableToggles[toggle_id].name_values[0][toggle_attribute] = value\n if (id[0] === 'names') temp_availableToggles[toggle_id].name = value[0]\n this.props.update('attributes/availableToggles', temp_availableToggles);\n }\n\n addToggle(){\n var temp_availableToggles = this.props.attributes.availableToggles\n temp_availableToggles.push({\n \"name\": \"\",\n \"name_values\": [\n {\n \"name_synonym\": [\"\"],\n \"lang\": \"en\"\n }\n ]\n });\n this.props.update('attributes/availableToggles', temp_availableToggles);\n }\n\n render() {\n\n const names_box = {\n marginLeft: '20px',\n width: '150px'\n }\n\n const toggles = this.props.attributes.availableToggles.map((toggle, i) => {\n return (\n \n
\n\n {modes}\n\n \n Add a thermostat mode\n
\n \n \n
\n \n
\n\n \n commandOnlyTemperatureSetting\n
\n \n {this.updateCheckbox(checked,\"commandOnlyTemperatureSetting\")}} checked={this.props.attributes.commandOnlyTemperatureSetting} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the temperature.\n
\n \n
\n\n \n queryOnlyTemperatureSetting\n
\n \n {this.updateCheckbox(checked,\"queryOnlyTemperatureSetting\")}} checked={this.props.attributes.queryOnlyTemperatureSetting} />\n
\n \n Enable it if Google shouldn't change the device temperature settings.\n
\n \n
\n\n \n Minimum temperature\n
\n \n \n
\n \n Minimum temperature (in Celsius) supported by the device.\n
\n \n
\n\n \n Maximum temperature\n
\n \n \n
\n \n Maximum temperature (in Celsius) supported by the device.\n
\n \n
\n\n \n Range\n
\n \n \n
\n \n Specifies the minimum offset between heat-cool setpoints in Celsius.\n
\n \n
\n\n\n\n \n Units\n
\n \n \n
\n \n
\n )\n });\n\n return (\n \n
\n \n
\n \n \n \n\n\n
\n \n\n
\n );\n }\n}\n\nexport default Toggles\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Modes extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n this.updateMode = this.updateMode.bind(this);\n this.addMode = this.addMode.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n updateMode(event){\n const id = event.target.id.split('_')\n const mode_id = id[1]\n var temp_availableModes = this.props.attributes.availableModes\n\n if(id[0] === 'lang'){\n temp_availableModes[mode_id].name_values[0].lang = event.target.value;\n } else if (id[0] === 'names'){\n temp_availableModes[mode_id].name_values[0].name_synonym = event.target.value.split(',');\n temp_availableModes[mode_id].name = event.target.value.split(',')[0]\n } else if (id[0] === 'settings'){\n var values = event.target.value.split(',')\n var settings = []\n for ( var i = 0; i < values.length; i ++){\n settings.push({\n setting_name: values[i],\n setting_values: [{\n setting_synonym: [values[i]],\n lang: this.props.attributes.availableModes[mode_id].name_values[0].lang\n }]\n })\n }\n temp_availableModes[mode_id].settings = settings\n }\n this.props.update('attributes/availableModes', temp_availableModes);\n }\n\n addMode(){\n var temp_availableModes = this.props.attributes.availableModes\n temp_availableModes.push({\n \"name\": \"\",\n \"name_values\": [\n {\n \"name_synonym\": [\"\"],\n \"lang\": \"en\"\n }\n ],\n \"settings\": [\n {\n \"setting_name\": \"\",\n \"setting_values\": [{\n \"setting_synonym\": [\"\"],\n \"lang\": \"en\"\n }]\n }\n ]\n });\n this.props.update('attributes/availableModes', temp_availableModes);\n }\n\n render() {\n\n const names_box = {\n width: '150px'\n }\n\n const settings_box = {\n width: '230px'\n }\n\n\n const modes = this.props.attributes.availableModes.map((mode, i) => {\n const settings = mode.settings.map((setting,i) => {return setting.setting_name});\n\n return (\n \n
\n\n \n commandOnlyToggles\n
\n \n {this.updateCheckbox(checked,\"commandOnlyToggles\")}} checked={this.props.attributes.commandOnlyToggles} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the states.\n
\n \n
\n\n {toggles}\n\n \n Add a toggle\n
\n \n \n
\n \n
\n\n )\n });\n\n return (\n \n
\n\n\n \n
\n \n \n \n \n
\n \n\n
\n );\n }\n}\n\nexport default Modes\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass HumiditySetting extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n return (\n \n
\n\n \n commandOnlyModes\n
\n \n {this.updateCheckbox(checked,\"commandOnlyModes\")}} checked={this.props.attributes.commandOnlyModes} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the modes.\n
\n \n
\n\n {modes}\n\n \n Add a mode\n
\n \n \n
\n \n\n
\n );\n }\n}\n\nexport default HumiditySetting\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass OpenClose extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n return (\n \n
\n\n \n Minimum humidity\n
\n \n \n
\n \n Minimum humidity level as percentage.\n
\n \n
\n\n \n Maximum humidity\n
\n \n \n
\n \n Maximum humidity level as percentage.\n
\n \n
\n\n \n commandOnlyHumiditySetting\n
\n \n {this.updateCheckbox(checked,\"commandOnlyHumiditySetting\")}} checked={this.props.attributes.commandOnlyHumiditySetting} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the humidity.\n
\n \n
\n\n \n queryOnlyHumiditySetting\n
\n \n {this.updateCheckbox(checked,\"queryOnlyHumiditySetting\")}} checked={this.props.attributes.queryOnlyHumiditySetting} />\n
\n \n Enable it if Google shouldn't change the device humidity.\n
\n \n
\n );\n }\n}\n\nexport default OpenClose\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Rotation extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n return (\n \n
\n\n \n discreteOnlyOpenClose\n
\n \n {this.updateCheckbox(checked,\"discreteOnlyOpenClose\")}} checked={this.props.attributes.discreteOnlyOpenClose} />\n
\n \n Enable it if the device must either be fully open or fully closed.\n
\n \n
\n\n \n commandOnlyOpenClose\n
\n \n {this.updateCheckbox(checked,\"commandOnlyOpenClose\")}} checked={this.props.attributes.commandOnlyOpenClose} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the state.\n
\n \n
\n\n \n queryOnlyOpenClose\n
\n \n {this.updateCheckbox(checked,\"queryOnlyOpenClose\")}} checked={this.props.attributes.queryOnlyOpenClose} />\n
\n \n Enable it if Google shouldn't change the device state.\n
\n \n\n
\n );\n }\n}\n\nexport default Rotation\n","import React from 'react';\n\nclass Fill extends React.Component {\n constructor(props) {\n super(props);\n this.updateLevels = this.updateLevels.bind(this);\n this.addLevel = this.addLevel.bind(this);\n }\n\n updateLevels(event){\n const id = event.target.id.split('_')\n const level_id = id[1]\n //Process the attribute and value depending of the attribute\n const level_attribute = id[0] === 'lang' ? id[0] : 'level_synonym';\n const value = id[0] === 'lang' ? event.target.value : event.target.value.split(',')\n //Update the temporal data and update it\n var temp_availableFillLevels = this.props.attributes.availableFillLevels\n temp_availableFillLevels.levels[level_id].level_values[0][level_attribute] = value\n if (id[0] === 'names') temp_availableFillLevels.levels[level_id].level_name = value[0]\n this.props.update('attributes/availableFillLevels', temp_availableFillLevels);\n }\n\n addLevel(){\n var temp_availableFillLevels = this.props.attributes.availableFillLevels\n temp_availableFillLevels.levels.push({\n \"level_name\": \"\",\n \"level_values\": [\n {\n \"level_synonym\": [\"\"],\n \"lang\": \"en\"\n }\n ]\n });\n this.props.update('attributes/availableFillLevels', temp_availableFillLevels);\n }\n\n render() {\n\n const names_box = {\n width: '150px'\n }\n\n const levels = this.props.attributes.availableFillLevels.levels.map((level, i) => {\n return (\n \n
\n\n \n Minimum rotation\n
\n \n \n
\n \n Minimum rotation degrees that a device can rotate.\n
\n \n
\n\n \n Maximum rotation\n
\n \n \n
\n \n Maximum rotation degrees that a device can rotate.\n
\n \n
\n\n \n commandOnlyRotation\n
\n \n {this.updateCheckbox(checked,\"commandOnlyRotation\")}} checked={this.props.attributes.commandOnlyRotation} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the device.\n
\n \n
\n\n \n supportsContinuousRotation\n
\n \n {this.updateCheckbox(checked,\"supportsContinuousRotation\")}} checked={this.props.attributes.supportsContinuousRotation} />\n
\n \n Enable it if the device supports continuous rotation.\n
\n \n
\n\n \n supportsDegrees\n
\n \n {this.updateCheckbox(checked,\"supportsDegrees\")}} checked={this.props.attributes.supportsDegrees} />\n
\n \n Enable it if the device allows rotation by degree.\n
\n \n
\n\n \n supportsPercent\n
\n \n {this.updateCheckbox(checked,\"supportsPercent\")}} checked={this.props.attributes.supportsPercent} />\n
\n \n Enable it if device allows rotation by percent.\n
\n \n
\n )\n });\n\n return (\n \n
\n \n
\n \n \n \n
\n \n\n
\n );\n }\n}\n\nexport default Fill\n","import React from 'react';\n\nclass ArmDisarm extends React.Component {\n constructor(props) {\n super(props);\n this.updateSecurityLevel = this.updateSecurityLevel.bind(this);\n this.addSecurityLevel = this.addSecurityLevel.bind(this);\n }\n\n updateSecurityLevel(event){\n const id = event.target.id.split('_')\n const level_id = id[1]\n //Process the attribute and value depending of the attribute\n const level_attribute = id[0] === 'lang' ? id[0] : 'level_synonym';\n const value = id[0] === 'lang' ? event.target.value : event.target.value.split(',')\n //Update the temporal data and update it\n var temp_availableArmLevels = this.props.attributes.availableArmLevels\n temp_availableArmLevels.levels[level_id].level_values[0][level_attribute] = value\n if (id[0] === 'names') temp_availableArmLevels.levels[level_id].level_name = value[0]\n this.props.update('attributes/availableArmLevels', temp_availableArmLevels);\n }\n\n addSecurityLevel(){\n var temp_availableArmLevels = this.props.attributes.availableArmLevels\n temp_availableArmLevels.levels.push({\n \"level_name\": \"\",\n \"level_values\": [\n {\n \"level_synonym\": [\"\"],\n \"lang\": \"en\"\n }\n ]\n });\n this.props.update('attributes/availableArmLevels', temp_availableArmLevels);\n }\n\n render() {\n\n const names_box = {\n marginLeft: '20px',\n width: '150px'\n }\n\n const levels = this.props.attributes.availableArmLevels.levels.map((level, i) => {\n return (\n \n
\n\n {levels}\n\n \n Add a level\n
\n \n \n
\n \n
\n )\n });\n\n return (\n \n
\n \n
\n \n \n \n
\n \n\n
\n );\n }\n}\n\nexport default ArmDisarm\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass StartStop extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n this.updateArray = this.updateArray.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n updateArray(event){\n this.props.update('attributes/' + event.target.id,event.target.value.split(','));\n }\n\n render() {\n return (\n \n
\n\n {levels}\n\n \n Add a security level\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default StartStop\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass Timer extends React.Component {\n constructor(props) {\n super(props);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n this.update = this.update.bind(this);\n }\n\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n render() {\n return (\n \n
\n\n \n pausable\n
\n \n {this.updateCheckbox(checked,\"pausable\")}} checked={this.props.attributes.pausable} />\n
\n \n Enable it if the device can be paused.\n
\n \n
\n\n \n Zones\n
\n \n \n
\n \n
\n\n\n \n\n
\n \n Supported zones names separeted by commas.\n
\n \n
\n );\n }\n}\n\nexport default Timer\n","import React from 'react';\nimport Switch from \"react-switch\";\n\nclass TemperatureControl extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n this.updateCheckbox = this.updateCheckbox.bind(this);\n }\n\n update(event){\n this.props.update('attributes/' + event.target.id,event.target.value);\n }\n\n updateCheckbox(checked, attribute){\n this.props.update('attributes/' + attribute,checked);\n }\n\n render() {\n\n\n return (\n \n
\n\n \n commandOnlyTimer\n
\n \n {this.updateCheckbox(checked,\"commandOnlyTimer\")}} checked={this.props.attributes.commandOnlyTimer} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the state.\n
\n \n
\n\n \n Max time\n
\n \n \n
\n \n
\n \n\n
\n \n Indicates the longest timer setting in seconds available on the device.\n
\n \n\n
\n );\n }\n}\n\nexport default TemperatureControl\n","import React from 'react';\n\nclass Cook extends React.Component {\n constructor(props) {\n super(props);\n this.updateMode = this.updateMode.bind(this);\n this.addMode = this.addMode.bind(this);\n this.updatePreset = this.updatePreset.bind(this);\n this.addPreset = this.addPreset.bind(this);\n }\n\n updateMode(event){\n const id = event.target.id.split('_')\n const mode_id = id[1]\n var temp_supportedCookingModes = this.props.attributes.supportedCookingModes\n\n if (event.target.value === 'delete'){\n temp_supportedCookingModes.splice(mode_id, 1)\n } else if (event.target.value !== 'select') {\n temp_supportedCookingModes[mode_id] = event.target.value;\n }\n\n this.props.update('attributes/supportedCookingModes', temp_supportedCookingModes);\n }\n\n addMode(){\n var temp_supportedCookingModes = this.props.attributes.supportedCookingModes\n temp_supportedCookingModes.push(\"\");\n this.props.update('attributes/supportedCookingModes', temp_supportedCookingModes);\n }\n\n updatePreset(event){\n const id = event.target.id.split('_')\n const preset_id = id[1]\n var temp_foodPresets = this.props.attributes.foodPresets\n\n if(id[0] === 'lang'){\n temp_foodPresets[preset_id].food_synonyms[0].lang = event.target.value;\n } else if (id[0] === 'names'){\n temp_foodPresets[preset_id].food_synonyms[0].synonym = event.target.value.split(',');\n temp_foodPresets[preset_id].food_preset_name = event.target.value.split(',')[0]\n } else if (id[0] === 'units'){\n temp_foodPresets[preset_id].supported_units[0] = event.target.value;\n }\n this.props.update('attributes/foodPresets', temp_foodPresets);\n }\n\n addPreset(){\n var temp_foodPresets = this.props.attributes.foodPresets\n temp_foodPresets.push({\n \"food_preset_name\": \"\",\n \"supported_units\": [\"\"],\n \"food_synonyms\": [{\n \"synonym\": [\"\"],\n \"language\": \"en\"\n }]\n });\n this.props.update('attributes/foodPresets', temp_foodPresets);\n }\n\n render() {\n\n const names_box = {\n width: '150px'\n }\n\n const modes = this.props.attributes.supportedCookingModes.map((mode, i) => {\n\n return (\n \n
\n\n \n commandOnlyTemperatureControl\n
\n \n {this.updateCheckbox(checked,\"commandOnlyTemperatureControl\")}} checked={this.props.attributes.commandOnlyTemperatureControl} />\n
\n \n Enable it if Homeware-LAN shouldn't inform Google Home about the temperature.\n
\n \n
\n\n \n queryOnlyTemperatureControl\n
\n \n {this.updateCheckbox(checked,\"queryOnlyTemperatureControl\")}} checked={this.props.attributes.queryOnlyTemperatureControl} />\n
\n \n Enable it if Google shouldn't change the device temperature settings.\n
\n \n
\n\n \n Minimum temperature\n
\n \n \n
\n \n Minimum temperature (in Celsius) supported by the device.\n
\n \n
\n\n \n Maximum temperature\n
\n \n \n
\n \n Maximum temperature (in Celsius) supported by the device.\n
\n \n
\n\n \n Step\n
\n \n \n
\n \n Specifies the relative temperature step.\n
\n \n
\n\n\n\n \n Units\n
\n \n \n
\n \n
\n\n )\n });\n\n const presets = this.props.attributes.foodPresets.map((preset, i) => {\n\n return (\n \n
\n \n
\n \n \n
\n \n
\n )\n });\n\n return (\n \n
\n \n
\n \n \n \n \n
\n \n\n
\n );\n }\n}\n\nexport default Cook\n","import React from 'react';\n\nclass SensorState extends React.Component {\n constructor(props) {\n super(props);\n this.update = this.update.bind(this);\n }\n\n update(event){\n const value = event.target.value;\n var sensor = {\n name: value\n }\n\n switch (value) {\n default:\n sensor['descriptiveCapabilities'] = {\n availableStates: ['fair','good','healthy','moderate','poor','severe','unhealthy','unhealthy for sensitive groups','very poor','very unhealthy','unknown'],\n }\n sensor['numericCapabilities']= { rawValueUnit: \"AQI\" }\n break;\n case 'AirQuality':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['fair','good','healthy','moderate','poor','severe','unhealthy','unhealthy for sensitive groups','very poor','very unhealthy','unknown'],\n }\n sensor['numericCapabilities']= { rawValueUnit: \"AQI\" }\n break;\n case 'CarbonDioxideLevel':\n sensor['descriptiveCapabilities'] = {\n numericCapabilities: { rawValueUnit: \"PARTS_PER_MILLION\" }\n }\n break;\n case 'CarbonMonoxideLevel':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['carbon monoxide detected','high','no carbon monoxide detected','unknown']\n }\n sensor['numericCapabilities']= { rawValueUnit: \"PARTS_PER_MILLION\" }\n break;\n case 'FilterCleanliness':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['clean','dirty','needs replacement','unknown']\n }\n break;\n case 'FilterLifeTime':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['good','new','replace soon','replace now','unknown']\n }\n sensor['numericCapabilities']= { rawValueUnit: \"PERCENTAGE\" }\n break;\n case 'HEPAFilterLifeTime':\n sensor['numericCapabilities']= { rawValueUnit: \"PERCENTAGE\" }\n break;\n case 'Max2FilterLifeTime':\n sensor['numericCapabilities']= { rawValueUnit: \"PERCENTAGE\" }\n break;\n case 'PM2.5':\n sensor['numericCapabilities']= { rawValueUnit: \"MICROGRAMS_PER_CUBIC_METER\" }\n break;\n case 'PM10':\n sensor['numericCapabilities']= { rawValueUnit: \"MICROGRAMS_PER_CUBIC_METER\" }\n break;\n case 'PreFilterLifeTime':\n sensor['numericCapabilities']= { rawValueUnit: \"PERCENTAGE\" }\n break;\n case 'SmokeLevel':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['smoke detected','high','no smoke detected','unknown']\n }\n sensor['numericCapabilities']= { rawValueUnit: \"PARTS_PER_MILLION\" }\n break;\n case 'WaterLeak':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['leak','no leak','unknown']\n }\n break;\n case 'RainDetection':\n sensor['descriptiveCapabilities'] = {\n availableStates: ['rain detected','no rain detected','unknown']\n }\n break;\n case 'VolatileOrganicCompounds':\n sensor['numericCapabilities']= { rawValueUnit: \"PARTS_PER_MILLION\" }\n break;\n }\n\n var sensorStatesSupported = []\n sensorStatesSupported.push(sensor);\n this.props.update('attributes/' + event.target.id,sensorStatesSupported);\n }\n\n render() {\n return (\n \n
\n\n {modes}\n\n \n Add a cooking mode\n
\n \n \n
\n \n
\n\n {presets}\n\n \n Add a preset\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default SensorState\n","import React from 'react';\nimport Switch from \"react-switch\";\nimport Text from '../editor/Text'\nimport Scene from '../editor/traits/Scene'\nimport OnOff from '../editor/traits/OnOff'\nimport Brightness from '../editor/traits/Brightness'\nimport FanSpeed from '../editor/traits/FanSpeed'\nimport ColorSetting from '../editor/traits/ColorSetting'\nimport TemperatureSetting from '../editor/traits/TemperatureSetting'\nimport Toggles from '../editor/traits/Toggles'\nimport Modes from '../editor/traits/Modes'\nimport HumiditySetting from '../editor/traits/HumiditySetting'\nimport OpenClose from '../editor/traits/OpenClose'\nimport Rotation from '../editor/traits/Rotation'\nimport Fill from '../editor/traits/Fill'\nimport ArmDisarm from '../editor/traits/ArmDisarm'\nimport StartStop from '../editor/traits/StartStop'\nimport Timer from '../editor/traits/Timer'\nimport TemperatureControl from '../editor/traits/TemperatureControl'\nimport Cook from '../editor/traits/Cook'\nimport SensorState from '../editor/traits/SensorState'\nimport getCookieValue from '../../functions'\nimport { root, deviceReference } from '../../constants'\n\nimport './Editor.css';\n\nclass Editor extends React.Component {\n constructor(props) {\n super(props);\n const id = window.location.pathname.split('/')[3];\n var create = false;\n if (id === \"\") create = true;\n this.state = {\n id: id,\n create: create,\n device: {\n attributes: {},\n deviceInfo: {},\n id: \"\",\n name: {\n defaultNames: [],\n nicknames: [],\n name: \"\"\n },\n traits: [],\n type: \"\"\n },\n status: {\n online: true\n },\n posible_traits: [],\n save_status: \"\"\n }\n this.updateNames = this.updateNames.bind(this);\n this.update = this.update.bind(this);\n this.updateId = this.updateId.bind(this);\n this.updateType = this.updateType.bind(this);\n this.updateTraits = this.updateTraits.bind(this);\n this.save = this.save.bind(this);\n this.delete = this.delete.bind(this);\n this.renderAttrinutes = this.renderAttrinutes.bind(this);\n }\n\n componentDidMount() {\n if (!this.state.create){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n var data = JSON.parse(http.responseText);\n this.setState({\n device: data,\n posible_traits: deviceReference.devices[data.type].traits\n });\n } else {\n console.error(http.statusText);\n }\n }\n }.bind(this);\n http.open(\"GET\", root + \"api/devices/get/\" + this.state.id + \"/\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send();\n }\n }\n\n updateNames(dumy_key, value){\n var names = value.split(',');\n var temp_device = this.state.device\n temp_device.name = {\n defaultNames: names,\n nicknames: names,\n name: names[0]\n }\n this.setState({\n device: temp_device\n })\n }\n\n update(key, value){\n var temp_device = this.state.device\n var keys = key.split('/');\n if (keys.length === 1)\n temp_device[key] = value\n else if (keys.length === 2)\n temp_device[keys[0]][keys[1]] = value\n else if (keys.length === 3)\n temp_device[keys[0]][keys[1]][keys[2]] = value\n this.setState({\n device: temp_device\n })\n }\n\n updateId(event){\n this.update('id',event.target.value)\n }\n\n updateType(event){\n this.update('type',event.target.value)\n this.setState({\n posible_traits: deviceReference.devices[event.target.value].traits\n });\n }\n\n updateTraits(checked, trait){\n var temp_device = this.state.device\n var temp_status = this.state.status\n if (checked) {\n if (this.state.device.traits.includes(trait) === false){\n //Push the trait to the device\n temp_device.traits.push(trait)\n //Set the default values\n var attributes = deviceReference.traits[trait].attributes;\n Object.keys(attributes).forEach((attribute, i) => {\n temp_device.attributes[attribute] = attributes[attribute].default\n });\n //Set the default status params\n var params = deviceReference.traits[trait].params;\n params.forEach((param, i) => {\n temp_status[param] = deviceReference.params[param].default\n });\n }\n } else {\n if (this.state.device.traits.includes(trait) === true){\n temp_device.traits = temp_device.traits.filter(function(value, index, arr){ return value !== trait;});\n }\n }\n this.setState({\n device: temp_device,\n status: temp_status\n })\n }\n\n save(){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n JSON.parse(http.responseText);\n this.setState({\n save_status: \"Saved correctly.\"\n });\n if (this.state.create) {\n window.location.href = '/devices'\n }\n } else {\n console.error(http.statusText);\n this.setState({\n save_status: \"Error, the changes haven't been saved.\"\n });\n }\n setTimeout(function(){\n this.setState({\n save_status: \"\"\n });\n }.bind(this), 5000)\n }\n }.bind(this);\n var payload = {\n \"device\": this.state.device\n }\n if (this.state.create){\n http.open(\"POST\", root + \"api/devices/create/\");\n payload.status = this.state.status\n } else {\n http.open(\"POST\", root + \"api/devices/update/\");\n }\n http.setRequestHeader(\"Content-Type\", \"application/json;charset=UTF-8\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send(JSON.stringify(payload));\n }\n\n delete(){\n if(window.confirm('Do you want to delete the device?')){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n window.location.href = \"/devices/\"\n } else {\n console.error(http.statusText);\n this.setState({\n save_status: \"Error, the device hasn't been deleted.\"\n });\n }\n setTimeout(function(){\n this.setState({\n save_status: \"\"\n });\n }.bind(this), 5000)\n }\n }.bind(this);\n http.open(\"GET\", root + \"api/devices/delete/\" + this.state.device.id + \"/\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send();\n } else {\n this.setState({\n save_status: \"Ok. The device is save.\"\n });\n }\n }\n\n renderAttrinutes(trait){\n if (this.state.device.traits.includes(trait)){\n if (trait === 'action.devices.traits.Scene')\n return \n
\n\n \n Sensor type\n
\n \n \n
\n \n \n
\n \n
\n
\n );\n\n return (\n \n
\n
\n {this.renderAttrinutes(trait)}\n \n {deviceReference.traits[trait].name}\n
\n \n {this.updateTraits(checked,trait)}} checked={this.state.device.traits.includes(trait)} />\n
\n \n Read Google's documentation\n
\n \n\n
\n );\n }\n}\n\nexport default Editor\n","import React from 'react';\nimport ReactJson from 'react-json-view'\nimport getCookieValue from '../../functions'\nimport { root } from '../../constants'\n\nclass Editor extends React.Component {\n constructor(props) {\n super(props);\n const id = window.location.pathname.split('/')[3];\n this.state = {\n id: id,\n device: {\n attributes: {},\n deviceInfo: {},\n id: \"\",\n name: {\n defaultnames: [],\n nicknames: [],\n name: \"\"\n },\n traits: [],\n type: \"\"\n },\n status: {\n online: true\n }\n }\n }\n\n componentDidMount() {\n var dev = new XMLHttpRequest();\n dev.onload = function (e) {\n if (dev.readyState === 4) {\n if (dev.status === 200) {\n var data = JSON.parse(dev.responseText);\n this.setState({\n device: data\n });\n } else {\n console.error(dev.statusText);\n }\n }\n }.bind(this);\n dev.open(\"GET\", root + \"api/devices/get/\" + this.state.id + \"/\");\n dev.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n dev.send();\n\n var sta = new XMLHttpRequest();\n sta.onload = function (e) {\n if (sta.readyState === 4) {\n if (sta.status === 200) {\n var data = JSON.parse(sta.responseText);\n this.setState({\n status: data\n });\n } else {\n console.error(sta.statusText);\n }\n }\n }.bind(this);\n sta.open(\"GET\", root + \"api/status/get/\" + this.state.id + \"/\");\n sta.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n sta.send();\n }\n\n\n\n render() {\n\n const json_viewer = {\n textAlign: 'left',\n }\n\n return (\n \n
\n\n Global settings
\n\n General settings of the device.\n
\n
\n \n
\n \n \n \n \n \n
\n
\n
\n \n
\n \n Device ID*\n
\n \n \n
\n \n
\n \n Device Type*\n
\n \n \n
\n \n Nick names must be separeted by , commas.
\n * data is required.\n
\n \n * data is required.\n
\n
Traits
\n\n The traits define what the device can do.\n
\n {traits}\n \n
\n \n \n {this.state.save_status}\n
\n \n\n
\n );\n }\n}\n\nexport default Editor\n","import React from 'react';\nimport ReactJson from 'react-json-view'\nimport getCookieValue from '../../functions'\nimport { root, deviceReference } from '../../constants'\n\nimport './Connecting.css';\n\nclass Connecting extends React.Component {\n constructor(props) {\n super(props);\n const id = window.location.pathname.split('/')[3]\n this.state = {\n id: id,\n traits: [],\n params: [],\n commands: []\n }\n }\n\n componentDidMount() {\n var dev = new XMLHttpRequest();\n dev.onload = function (e) {\n if (dev.readyState === 4) {\n if (dev.status === 200) {\n const data = JSON.parse(dev.responseText);\n const traits = data.traits;\n var commands = [];\n var params = []\n traits.forEach((trait) => {\n params = params.concat(deviceReference.traits[trait].params);\n commands = commands.concat(deviceReference.traits[trait].commands);\n });\n this.setState({\n traits: traits,\n params: params,\n commands: commands\n });\n } else {\n console.error(dev.statusText)\n }\n }\n }.bind(this);\n dev.open(\"GET\", root + \"api/devices/get/\" + this.state.id + \"/\");\n dev.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n dev.send();\n }\n\n render() {\n\n const params = this.state.params.map((param, i) => {\n var type = deviceReference.params[param].type\n if (type === 'list')\n type = 'string'\n\n var topic = 'None - Controlled only by the device'\n if (deviceReference.params[param].commanded)\n topic = 'device/' + this.state.id + '/' + param\n\n return (\n \n
\n\n Device definition
\n\n General settings of the device.\n
\n
\n \n
\n
\n \n
\n\n Device status
\n\n Status of the device.\n
\n
\n \n
\n
\n \n
\n )\n })\n\n const commands = this.state.commands.map((command, i) => {\n return (\n {param}
\n {topic}
\n {type}
\n \n
\n )\n })\n\n var example = {\"id\":\"light001\",\"param\":\"brightness\",\"value\":\"80\",\"intent\":\"execute\"}\n var advise = {\n textAlign: 'left'\n }\n\n return (\n {command.command}
\n {'device/' + this.state.id + '/command'}
\n {command.description}
\n \n\n
\n );\n }\n}\n\nexport default Connecting\n","import React from 'react';\nimport getCookieValue from '../../functions'\nimport { root } from '../../constants'\n\nimport './Tasks.css';\n\nclass Tasks extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n devices: [],\n tasks: []\n }\n this.loadData = this.loadData.bind(this);\n this.openManager = this.openManager.bind(this);\n this.newTask = this.newTask.bind(this);\n }\n\n componentDidMount() {\n this.loadData();\n }\n\n loadData(){\n var http = new XMLHttpRequest();\n http.onload = function (e) {\n if (http.readyState === 4) {\n if (http.status === 200) {\n var data = JSON.parse(http.responseText);\n this.setState({\n devices: data.devices,\n tasks: data.tasks\n });\n } else {\n console.error(http.statusText);\n }\n }\n }.bind(this);\n http.open(\"GET\", root + \"api/global/get/\");\n http.setRequestHeader('authorization', 'baerer ' + getCookieValue('token'))\n http.send();\n }\n\n openManager(event){\n window.location.href = '/tasks/manager/' + event.target.id.split('_')[1]\n }\n\n newTask(){\n window.location.href = '/tasks/manager/'\n }\n\n render() {\n\n const tasks = this.state.tasks.map((task, i) => {\n return(\n \n
\n\n Params
\n\n
\n
\n Params are data interchanged between Google and the device and stored in Homeware database.
\nIf the param has got a notification topic, Google Home can control it. A notification will be sent in this MQTT topic when Google change a param.
\nIf the param hasn't got a notification topic, the device should update the param value when necessary.
\n\n
\n
\n {params}\n Param
\n Notifications topic
\n Type
\n \n
\n\n
\n \n
The device can change the value of any param sending an execute request to device/control topic as follow
\n\n
\n\n Commands
\n\n
\n
\n Commands are directs orders from Google to the device. Commands are not stored in Homeware's database.
\n\n
\n
\n {commands}\n Command
\n Notifications topic
\n Description
\n \n
\n
\n )\n });\n\n return (\n { task.title }
\n\n
{ task.description }
\n\n
\n );\n }\n}\n\nexport default Tasks\n","import React from 'react';\nimport Triggers from './Triggers'\n\nimport '../pages/Manager.css';\n\nclass Logic extends React.Component {\n constructor(props) {\n super(props);\n this.delete = this.delete.bind(this);\n this.addOr = this.addOr.bind(this);\n this.addAnd = this.addAnd.bind(this);\n this.openTriggerAssistant = this.openTriggerAssistant.bind(this);\n }\n\n delete() {\n this.props.delete(this.props.id);\n }\n\n addOr() {\n this.props.addTriggerLogic('or',this.props.id)\n }\n\n addAnd() {\n this.props.addTriggerLogic('and',this.props.id)\n }\n\n openTriggerAssistant() {\n this.props.openTriggerAssistant(this.props.id)\n }\n\n render() {\n\n const num_operations = this.props.triggers[this.props.id].operation.length-1;\n const operations = this.props.triggers[this.props.id].operation.map((op, i) => {\n return (\n \n
\n\n Tasks
\n\n {tasks}\n
\n\n \n \n
\n \n \n {i < num_operations ?
\n );\n });\n\n return (\n {this.props.triggers[this.props.id].type}
: '' }\n\n {operations}\n
\n );\n }\n}\n\nexport default Logic\n","import React from 'react';\nimport { deviceReference } from '../../constants'\n\nimport '../pages/Manager.css';\n\nclass Trigger extends React.Component {\n constructor(props) {\n super(props);\n this.delete = this.delete.bind(this);\n this.renderTriggerText = this.renderTriggerText.bind(this);\n }\n\n delete() {\n this.props.delete(this.props.id);\n }\n\n renderTriggerText() {\n const week = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']\n const device_triggers = ['d2b','d2i','d2l','d2s']\n\n const type = this.props.triggers[this.props.id].type;\n const operation = this.props.triggers[this.props.id].operation.split(':');\n if (device_triggers.includes(type)) {\n return this.props.devices[operation[0]] + ' (' + (deviceReference.params[operation[1]] ? deviceReference.params[operation[1]].name : operation[1]) + ') ' + operation[2] + ' ' + operation[3];\n } else if (type === 'd2d') {\n return this.props.devices[operation[0]] + ' (' + (deviceReference.params[operation[1]] ? deviceReference.params[operation[1]].name : operation[1]) + ') ' + operation[2] + ' ' + this.props.devices[operation[3]] + ' (' + (deviceReference.params[operation[4]].name ? deviceReference.params[operation[4]].name : operation[4]) + ') ';\n } else if (type === 'd2c') {\n return this.props.devices[operation[0]] + ' (' + (deviceReference.params[operation[1]] ? deviceReference.params[operation[1]].name : operation[1]) + ') ' + operation[2] + ' ' + operation[3];\n } else if (type === 'time') {\n\n var days = '';\n for( var i = 0; i < operation[2].length; i++){\n days += week[operation[2][i]];\n if (i !== operation[2].length - 1)\n days += ', ';\n }\n return operation[0] + ':' + operation[1] + ' on ' + days\n\n } else {\n return this.props.triggers[this.props.id].operation\n }\n }\n\n render() {\n\n return (\n \n \n \n \n \n
\n \n {this.renderTriggerText()}\n ![\"Delete](\"/global/bin_icon.png\")
\n
\n );\n }\n}\n\nexport default Trigger\n","import React from 'react';\nimport Logic from './Logic'\nimport Trigger from './Trigger'\n\nclass Triggers extends React.Component {\n constructor(props) {\n super(props);\n this.addOr = this.addOr.bind(this);\n this.addAnd = this.addAnd.bind(this);\n this.openTriggerAssistant = this.openTriggerAssistant.bind(this);\n }\n\n addOr() {\n this.props.addTriggerLogic('or','triggers')\n }\n\n addAnd() {\n this.props.addTriggerLogic('and','triggers')\n }\n\n openTriggerAssistant() {\n this.props.openTriggerAssistant('triggers')\n }\n\n render() {\n\n if (this.props.triggers.trigger) {\n var operation = this.props.triggers[this.props.id]\n const device_triggers = ['d2b','d2d','d2i','d2l','time','d2c']\n\n if (operation.type === 'or'){\n return \n \n \n \n \n
\n );\n }\n\n }\n}\n\nexport default Triggers\n","import React from 'react';\n\nimport '../pages/Manager.css';\n\nclass Assistant extends React.Component {\n constructor(props) {\n super(props);\n this.addTriggerOperation = this.addTriggerOperation.bind(this);\n }\n\n addTriggerOperation(){\n const hour = document.getElementById('hour').value;\n const minute = document.getElementById('minute').value;\n var week = '';\n\n if (document.getElementById('monday').checked)\n week += '1'\n if (document.getElementById('tuesday').checked)\n week += '2'\n if (document.getElementById('wednesday').checked)\n week += '3'\n if (document.getElementById('thursday').checked)\n week += '4'\n if (document.getElementById('friday').checked)\n week += '5'\n if (document.getElementById('saturday').checked)\n week += '6'\n if (document.getElementById('sunday').checked)\n week += '0'\n\n const value = hour + ':' + minute + ':' + week;\n this.props.addTriggerOperation('time',value);\n this.props.closeTriggerAssistant();\n }\n\n render() {\n\n return (\n \n
\n );\n }\n}\n\nexport default Assistant\n","import React from 'react';\nimport { deviceReference } from '../../constants'\n\nimport '../pages/Manager.css';\n\nclass Device extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n device: \"\"\n }\n this.updateDevice = this.updateDevice.bind(this);\n this.updateParam = this.updateParam.bind(this);\n this.addTriggerOperation = this.addTriggerOperation.bind(this);\n this.typeConversion = this.typeConversion.bind(this);\n }\n\n updateDevice(event) {\n this.setState({\n device: event.target.value\n });\n }\n\n updateParam(event) {\n this.setState({\n param: event.target.value\n });\n }\n\n addTriggerOperation(){\n const device = document.getElementById('device').value;\n const param = document.getElementById('param').value;\n const comparator = document.getElementById('comparator').value;\n const value = document.getElementById('value').value;\n\n\n const operation = device + ':' + param + ':' + comparator + ':' + value;\n this.props.addTriggerOperation(this.typeConversion(deviceReference.params[this.state.param].type),operation);\n this.props.closeTriggerAssistant();\n }\n\n typeConversion(origen) {\n const type = {\n int: 'd2i',\n list: 'd2l',\n bool: 'd2b',\n string: 'd2s',\n color: 'd2c'\n }\n return type[origen]\n }\n\n render() {\n\n const devices = Object.keys(this.props.devices).map((device) => {\n return \n })\n\n const params = this.state.device === \"\" ? '' : Object.keys(this.props.status[this.state.device]).map((param) => {\n return \n })\n\n var value = '';\n if (deviceReference.params[this.state.param]){\n const type = this.typeConversion(deviceReference.params[this.state.param].type);\n if(type === 'd2i'){\n value = (\n Triggered by time
\n\n
\n \n Hour*\n
\n \n \n
\n \n 24h format\n
\n \n
\n\n \n Minute*\n
\n \n \n
\n \n \n
\n \n
\n\n \n Week*\n
\n \n Sunday\n
\n \n \n
\n \n
\n\n \n
\n \n Monday\n
\n \n \n
\n \n
\n\n \n
\n \n Tuesday\n
\n \n \n
\n \n
\n\n \n
\n \n Wednesday\n
\n \n \n
\n \n
\n\n \n
\n \n Thursday\n
\n \n \n
\n \n
\n\n \n
\n \n Friday\n
\n \n \n
\n \n
\n\n\n\n\n\n \n
\n \n Saturday\n
\n \n \n
\n \n \n \n
\n \n
\n )\n } else if(type === 'd2s'){\n value = (\n \n Value*\n
\n \n \n
\n \n
\n )\n } else if(type === 'd2b' || type === 'd2l'){\n\n const options = deviceReference.params[this.state.param].select.map((option) => {\n return \n })\n\n value = (\n \n Value*\n
\n \n \n
\n \n
\n )\n }\n\n }\n\n return (\n \n Value*\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default Device\n","import React from 'react';\nimport { deviceReference } from '../../constants'\n\nimport '../pages/Manager.css';\n\nclass DeviceToDevice extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n device_a: \"\",\n device_b: \"\"\n }\n this.updateDependencies = this.updateDependencies.bind(this);\n this.addTriggerOperation = this.addTriggerOperation.bind(this);\n }\n\n updateDependencies(event) {\n var state = this.state;\n state[event.target.id] = event.target.value;\n this.setState(state);\n }\n\n\n addTriggerOperation(){\n const device_a = document.getElementById('device_a').value;\n const param_a = document.getElementById('param_a').value;\n const comparator = document.getElementById('comparator').value;\n const device_b = document.getElementById('device_b').value;\n const param_b = document.getElementById('param_b').value;\n\n const operation = device_a + ':' + param_a + ':' + comparator + ':' + device_b + ':' + param_b;\n this.props.addTriggerOperation('d2d',operation);\n this.props.closeTriggerAssistant();\n }\n\n render() {\n\n const devices = Object.keys(this.props.devices).map((device) => {\n return \n })\n\n const params_a = this.state.device_a === \"\" ? '' : Object.keys(this.props.status[this.state.device_a]).map((param) => {\n return \n })\n\n const params_b = this.state.device_b === \"\" ? '' : Object.keys(this.props.status[this.state.device_b]).map((param) => {\n return \n })\n\n return (\n Triggered by a device
\n\n\n
\n \n Device*\n
\n \n \n
\n \n
\n \n Param*\n
\n \n \n
\n \n
\n\n {value}\n\n \n Comparator*\n
\n \n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default DeviceToDevice\n","import React from 'react';\nimport Time from './Time'\nimport Device from './Device'\nimport DeviceToDevice from './DeviceToDevice'\n\nimport '../pages/Manager.css';\n\nclass Assistant extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n type: ''\n }\n this.timeTigger = this.timeTigger.bind(this);\n this.deiceTrigger = this.deiceTrigger.bind(this);\n this.deviceToDeviceTrigger = this.deviceToDeviceTrigger.bind(this);\n }\n\n timeTigger() {\n this.setState({\n type: 'time'\n });\n }\n\n deiceTrigger() {\n this.setState({\n type: 'device'\n });\n }\n\n deviceToDeviceTrigger() {\n this.setState({\n type: 'device2device'\n });\n }\n\n render() {\n\n if (this.state.type === '')\n return (\n Compare two devices
\n\n\n
\n \n Device A*\n
\n \n \n
\n \n
\n\n \n Param A*\n
\n \n \n
\n \n
\n\n \n Comparator*\n
\n \n \n
\n \n
\n \n Device B*\n
\n \n \n
\n \n
\n\n \n Param B*\n
\n \n \n
\n \n \n \n
\n \n
\n );\n else if (this.state.type === 'time')\n return Add a new trigger
\n\n \n \n \n \n
\n