frontend/smart-hut/src/components/dashboard/devices/Sensor.js
2020-03-24 20:35:23 +01:00

144 lines
3.6 KiB
JavaScript

/**
* 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
<text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
&#177;{this.state.error}
</text>
errorStyle,
*/
import React, { Component } from "react";
import {
CircularInput,
CircularProgress,
CircularTrack,
} from "react-circular-input";
import { sensorText, style, valueStyle } from "./SensorStyle";
import Settings from "./DeviceSettings";
import { StyledDiv } from "./styleComponents";
import { call } from "../../../client_server";
import { nameStyle } from "./LightStyle";
import { iconStyle } from "./styleComponents";
import { Image } from "semantic-ui-react";
export default 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.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg";
call.socketSubscribe(this.props.device.id, this.stateCallback);
}
componentWillUnmount() {
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
}
setName = () => {
if (this.props.device.name.length > 15) {
return this.props.device.name.slice(0, 12) + "...";
}
return this.props.device.name;
};
componentDidMount() {
if (this.props.device.kind === "sensor") {
switch (this.props.device.sensor) {
case "TEMPERATURE":
this.units = "ºC";
break;
case "HUMIDITY":
this.units = "%";
break;
case "LIGHT":
this.units = "lm";
break;
default:
this.units = "";
}
this.setState({
value: this.props.device.value,
});
} else {
this.setState({
detected: this.props.device.detected,
motion: true,
});
}
}
getIcon = () => {
if (this.state.detected) {
return this.iconOn;
}
return this.iconOff;
};
render() {
return (
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
{this.state.motion ? (
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} />
<h5 style={nameStyle}>Motion Sensor</h5>
</div>
) : (
<CircularInput value={this.state.value / 100} style={style}>
<CircularTrack />
<CircularProgress />
<text
style={valueStyle}
x={100}
y={80}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{+(Math.round(this.state.value + "e+2") + "e-2")}
{this.units}
</text>
<text
style={sensorText}
x={100}
y={150}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.setName()}
</text>
</CircularInput>
)}
</StyledDiv>
);
}
}