diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index 07cb440..4206d8c 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -22,18 +22,18 @@ import React, { Component } from "react"; import { CircularInput, CircularProgress } from "react-circular-input"; import { - container, - sensorText, - style, - valueStyle, - motionSensorInnerCircle, - motionSensorOuterCircle, - nameMotionStyle, - motionSensorIcon, - temperatureSensorColors, - lightSensorColors, - humiditySensorColors, - iconSensorStyle, + container, + sensorText, + style, + valueStyle, + motionSensorInnerCircle, + motionSensorOuterCircle, + nameMotionStyle, + motionSensorIcon, + temperatureSensorColors, + lightSensorColors, + humiditySensorColors, + iconSensorStyle, } from "./SensorStyle"; import { Image } from "semantic-ui-react"; import { RemoteService } from "../../../remote"; @@ -41,197 +41,180 @@ import { connect } from "react-redux"; import mapStateToProps from "../../../deviceProps"; class Sensor extends Component { - constructor(props) { - super(props); - this.state = { - value: 0, - motion: false, - }; - this.units = ""; - this.stateCallback = (e) => { - this.setState(Object.assign(this.state, e)); - }; - - this.colors = temperatureSensorColors; - this.icon = "temperatureIcon.svg"; - this.name = "Sensor"; - } - - // setName = () => { - // if (this.props.device.name.length > 15) { - // return this.props.device.name.slice(0, 12) + "..."; - // } - // return this.props.device.name; - // }; - - componentDidUpdate(prevProps) { - if ( - this.props.stateOrDevice.kind === "sensor" && - this.props.stateOrDevice.value !== prevProps.stateOrDevice.value - ) { - this.setState({ value: this.props.stateOrDevice.value }); - } else if ( - this.props.stateOrDevice.kind === "motionSensor" && - this.props.stateOrDevice.detected !== - prevProps.stateOrDevice.detected - ) { - this.setState({ - motion: true, - detected: this.props.stateOrDevice.detected, - }); - } - } - - componentDidMount() { - if (this.props.stateOrDevice.kind === "sensor") { - switch (this.props.stateOrDevice.sensor) { - case "TEMPERATURE": - this.units = "ºC"; - this.colors = temperatureSensorColors; - this.icon = "temperatureIcon.svg"; - this.name = "Temperature Sensor"; - break; - case "HUMIDITY": - this.units = "%"; - this.colors = humiditySensorColors; - this.icon = "humidityIcon.svg"; - this.name = "Humidity Sensor"; - break; - case "LIGHT": - this.units = "lm"; - this.colors = lightSensorColors; - this.icon = "lightSensorIcon.svg"; - this.name = "Light Sensor"; - break; - default: - this.units = ""; - } - this.setState({ - value: this.props.stateOrDevice.value, - }); - } else { - this.setState({ - detected: this.props.stateOrDevice.detected, - motion: true, - }); - } - } - - getIcon = () => { - if (this.state.detected) { - return this.iconOn; - } - return this.iconOff; + constructor(props) { + super(props); + this.state = { + value: 0, + motion: false, + }; + this.units = ""; + this.stateCallback = (e) => { + this.setState(Object.assign(this.state, e)); }; - temperatureColor = (value) => { - let hue = 100; - if (value >= 20 && value < 30) { - hue = 50; - } else if (value >= 30) { - hue = 0; - } - return `hsl(${hue}, 100%, 50%)`; + this.colors = temperatureSensorColors; + this.icon = "temperatureIcon.svg"; + this.name = "Sensor"; + } + + // setName = () => { + // if (this.props.device.name.length > 15) { + // return this.props.device.name.slice(0, 12) + "..."; + // } + // return this.props.device.name; + // }; + + componentDidUpdate(prevProps) { + if ( + this.props.stateOrDevice.kind === "sensor" && + this.props.stateOrDevice.value !== prevProps.stateOrDevice.value + ) { + this.setState({ value: this.props.stateOrDevice.value }); + } else if ( + this.props.stateOrDevice.kind === "motionSensor" && + this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected + ) { + this.setState({ + motion: true, + detected: this.props.stateOrDevice.detected, + }); + } + } + + componentDidMount() { + if (this.props.stateOrDevice.kind === "sensor") { + switch (this.props.stateOrDevice.sensor) { + case "TEMPERATURE": + this.units = "ºC"; + this.colors = temperatureSensorColors; + this.icon = "temperatureIcon.svg"; + this.name = "Temperature Sensor"; + break; + case "HUMIDITY": + this.units = "%"; + this.colors = humiditySensorColors; + this.icon = "humidityIcon.svg"; + this.name = "Humidity Sensor"; + break; + case "LIGHT": + this.units = "lm"; + this.colors = lightSensorColors; + this.icon = "lightSensorIcon.svg"; + this.name = "Light Sensor"; + break; + default: + this.units = ""; + } + this.setState({ + value: this.props.stateOrDevice.value, + }); + } else { + this.setState({ + detected: this.props.stateOrDevice.detected, + motion: true, + }); + } + } + + getIcon = () => { + if (this.state.detected) { + return this.iconOn; + } + return this.iconOff; + }; + + temperatureColor = (value) => { + let hue = 100; + const min = 16; + const max = 20; + if (value >= min && value < max) { + hue = 100 - ((value - min) * 100) / (max - min); + } else if (value >= max) { + hue = 0; + } + return `hsl(${hue}, 100%, 50%)`; + }; + + render() { + const MotionSensor = (props) => { + return ( +