118 lines
2.8 KiB
JavaScript
118 lines
2.8 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">
|
|
±{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";
|
|
|
|
export default class Sensor extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
turnedOn: false,
|
|
value: 0,
|
|
};
|
|
this.units = "";
|
|
this.stateCallback = (e) => {
|
|
this.setState(Object.assign(this.state, e));
|
|
};
|
|
|
|
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() {
|
|
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,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<StyledDiv>
|
|
<Settings
|
|
deviceId={this.props.device.id}
|
|
edit={this.props.edit}
|
|
onChangeData={(id, newSettings) =>
|
|
this.props.onChangeData(id, newSettings)
|
|
}
|
|
/>
|
|
|
|
<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>
|
|
);
|
|
}
|
|
}
|