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

    this.stateCallback = (e) => {
      this.setState(
        Object.assign(this.state, {
          intensity: e.intensity,
          turnedOn: e.on,
        })
      );
    };

    call.socketSubscribe(this.props.device.id, this.stateCallback);
  }

  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.kind === "dimmableLight"
          ? intensityLightView
          : normalLightView}
      </div>
    );
  }
}