frontend/smart-hut/src/components/dashboard/devices/DigitalSensor.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.
 */

import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
import {StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
import {imageStyle, nameStyle} from "./DigitalSensorStyle";

export default class DigitalSensor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false, // This value is a boolean, was this type of sensor returns presence/absence
    };

    this.iconOn = "/img/sensorOn.svg";
    this.iconOff = "/img/sensorOff.svg"
  }

  setName = () => {
    if(this.props.device.name.length > 15){
      return this.props.device.name.slice(0,12) + "..."
    }
    return this.props.device.name;
  };

  getIcon = () => {
    if(this.state.value){
      return this.iconOn;
    }
    return this.iconOff;
  };

  componentDidMount() {
  }


  render() {
    return (
      <StyledDiv>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
        <Image src={this.getIcon()} style={imageStyle}/>
        <h5 style={nameStyle}>{this.props.device.name}</h5>
      </StyledDiv>
    )
  }
}