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

/**
 * Users can add lights in their rooms.
 * Lights are devices like bulbs, LED strip lights, lamps.
 * Lights may support an intensity level (from 0% to 100%).
 * Lights have an internal state that can be changed and it must
 * be shown accordingly in the SmartHut views (house view and room views).
 */

import React, {Component} from "react";
import {iconStyle, StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";

export default class Light extends Component {
  constructor(props) {
    super(props);
    this.state = {
      turnedOn: false,
    };
    this.iconOn = "/img/lightOn.svg";
    this.iconOff = "/img/lightOff.svg"
  }

  onClickDevice = () => {
    this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
  };

  setIntensity = (newValue) => {
    this.setState({intensity: newValue});
  };

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

  componentDidMount() {
    if (this.props.device.hasOwnProperty("intensity")) {
      this.setState({
        intensity: this.props.device.intensity
      });
    }
    // Get the state and update it

  }


  render() {
    const intensityLightView = (
      <CircularInput
        value={this.state.intensity}
        onChange={this.setIntensity}
        style={style}
      >
        <CircularTrack/>
        <CircularProgress/>
        <CircularThumb/>

        <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
          {Math.round(this.state.intensity * 100)}%
        </text>
        <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
          {this.props.device.name}
        </text>
      </CircularInput>
    );

    const normalLightView = (
      <div onClick={this.props.edit.mode ? () => {
      } : this.onClickDevice}>
        <Image src={this.getIcon()} style={iconStyle}/>
        <h5 style={nameStyle}>{this.props.device.name}</h5>
      </div>
    );
    
    return (
      <StyledDiv>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
        {this.state.intensity ? (intensityLightView) : (normalLightView)}
      </StyledDiv>
    )
  }
}