frontend/smart-hut/src/components/dashboard/devices/Sensor.js

/**
 * 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";

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)}
            {this.units}
          </text>
          <text
            style={sensorText}
            x={100}
            y={150}
            textAnchor="middle"
            dy="0.3em"
            fontWeight="bold"
          >
            {this.setName()}
          </text>
        </CircularInput>
      </StyledDiv>
    );
  }
}