65 lines
1.9 KiB
JavaScript
65 lines
1.9 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.
|
|
*/
|
|
|
|
import React, {Component} from "react";
|
|
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
|
|
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
|
|
import Settings from "./DeviceSettings";
|
|
import {StyledDiv} from "./styleComponents";
|
|
|
|
export default class Sensor extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
turnedOn: false,
|
|
value: 20,
|
|
error: 2.4
|
|
};
|
|
this.units = "ºC"
|
|
}
|
|
|
|
setName = () => {
|
|
if (this.props.device.name.length > 15) {
|
|
return this.props.device.name.slice(0, 12) + "..."
|
|
}
|
|
return this.props.device.name;
|
|
};
|
|
|
|
componentDidMount() {
|
|
}
|
|
|
|
|
|
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)}{this.units}
|
|
</text>
|
|
<text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
|
|
±{this.state.error}
|
|
</text>
|
|
<text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
|
{this.setName()}
|
|
</text>
|
|
</CircularInput>
|
|
</StyledDiv>
|
|
)
|
|
}
|
|
}
|