/**
* Users can add sensors in their rooms.
* Sensors typically measure physical quantities in a room.
* You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
* Sensors have an internal state that cannot be changed by the user.
* For this story, make the sensors return a constant value with some small random error.
*/
/*
OPTIONAL STATE
error: 2.4
±{this.state.error}
errorStyle,
*/
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,
} from "./SensorStyle";
import { Image } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
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.device.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;
};
render() {
const MotionSensor = (props) => {
return (
);
};
return (
{this.state.motion ? (
) : (
{+(Math.round(this.state.value + "e+2") + "e-2")}
{this.units}
{this.name}
)}
);
}
}
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
return state.sceneStates[ownProps.id];
}
},
});
const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
export default SensorContainer;