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 } from "react-circular-input";
import {
  container,
  sensorText,
  style,
  valueStyle,
  motionSensorInnerCircle,
  motionSensorOuterCircle,
  nameMotionStyle,
  motionSensorIcon,
  temperatureSensorColors,
  lightSensorColors,
  humiditySensorColors,
  iconSensorStyle,
} from "./SensorStyle";
import Settings from "./DeviceSettings";
import { call } from "../../../client_server";
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.colors = temperatureSensorColors;
    this.icon = "temperatureIcon.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";
          this.colors = temperatureSensorColors;
          this.icon = "temperatureIcon.svg";
          break;
        case "HUMIDITY":
          this.units = "%";
          this.colors = humiditySensorColors;
          this.icon = "humidityIcon.svg";
          break;
        case "LIGHT":
          this.units = "lm";
          this.colors = lightSensorColors;
          this.icon = "lightSensorIcon.svg";
          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() {
    const MotionSensor = (props) => {
      return (
        <div
          style={{
            ...motionSensorOuterCircle,
            backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
          }}
        >
          <div
            style={{
              ...motionSensorInnerCircle,
              backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
            }}
          >
            <Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
            <span style={nameMotionStyle}>{this.props.device.name}</span>
          </div>
        </div>
      );
    };

    return (
      <div style={container}>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        {this.state.motion ? (
          <MotionSensor />
        ) : (
          <React.Fragment>
            <CircularInput
              value={
                this.props.device.sensor === "LIGHT"
                  ? this.state.value / 2000
                  : this.state.value / 100
              }
              style={style}
            >
              <CircularProgress
                strokeWidth="2rem"
                stroke={this.colors.progress}
                fill={this.colors.circle}
              />
              <text
                style={{ ...valueStyle, fill: this.colors.text }}
                x={100}
                y={110}
                textAnchor="middle"
                dy="0.3em"
                fontWeight="bold"
                fill={this.colors.text}
              >
                {+(Math.round(this.state.value + "e+2") + "e-2")}
                {this.units}
              </text>
              <text
                style={{ ...sensorText, fill: this.colors.text }}
                x={100}
                y={150}
                textAnchor="middle"
                dy="0.4em"
                fontWeight="bold"
              >
                {this.setName()} ({this.props.device.id})
              </text>
            </CircularInput>
            <Image style={iconSensorStyle} src={`/img/${this.icon}`} />
          </React.Fragment>
        )}
      </div>
    );
  }
}