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

// vim: set ts=2 sw=2 et tw=80:

/**
 * 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, BottomPanel, ThumbText } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
import {
  CircularInput,
  CircularProgress,
  CircularThumb,
} from "react-circular-input";
import {
  LightDimmerContainer,
  LightDimmerStyle,
  textStyle,
  nameStyle,
  KnobProgress,
  CircularThumbStyle,
  knobIcon
} from "./LightStyle";
import { call } from '../../../client_server';



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

  onClickDevice = () => {
    this.props.device.on = !this.state.turnedOn;
    call.deviceUpdate(this.props.device, 'regularLight')
      .then(res => {
        if (res.status === 200) {
          this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
        }
      })
  };


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



  setIntensity = (newValue) => {
    this.props.device.intensity =
      Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
    call.deviceUpdate(this.props.device, "dimmableLight").then((res) => {
      if (res.status === 200) {
        this.setState({
          intensity:
            Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100),
        });
      }
    });
  };



  render() {
    const intensityLightView = (
      <div style={LightDimmerContainer}>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
        <CircularInput style={LightDimmerStyle}
          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
          onChange={this.setIntensity}>
          <text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
            {this.props.device.name}
          </text>
          <CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity / 100 + 0.3 }} />
          <CircularThumb style={CircularThumbStyle} />
          <ThumbText color={"#ffd31d"} />
        </CircularInput>
        <Image style={knobIcon} src="/img/intensityLightIcon.svg" />
      </div>
    );

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

    return (
      <div>
        {
          this.props.device.intensity ? (intensityLightView) : (normalLightView)
        }
      </div>

    )
  }
}