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 { Image } from "semantic-ui-react";
import {
  CircularInput,
  CircularProgress,
  CircularThumb,
} from "react-circular-input";
import {
  LightDimmerContainer,
  LightDimmerStyle,
  textStyle,
  nameStyle,
  KnobProgress,
  CircularThumbStyle,
  knobIcon,
} from "./LightStyle";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";

class Light extends Component {
  constructor(props) {
    super(props);
    this.state = { intensity: this.props.device.intensity, timeout: null };

    this.iconOn = "/img/lightOn.svg";
    this.iconOff = "/img/lightOff.svg";

    this.setIntensity = this.setIntensity.bind(this);
  }

  get turnedOn() {
    return this.props.device.on;
  }

  get intensity() {
    return this.props.device.intensity || 0;
  }

  onClickDevice = () => {
    const on = !this.turnedOn;
    this.props
      .saveDevice({ ...this.props.device, on })
      .catch((err) => console.error("regular light update error", err));
  };

  getIcon = () => {
    return this.turnedOn ? this.iconOn : this.iconOff;
  };

  setIntensity(intensity) {
    intensity *= 100;
    
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }

    this.setState({ 
      intensity,
      timeout: setTimeout(() => {
        this.saveIntensity();
        this.setState({
          intensity: this.state.intensity,
          timeout: null
        });
      }, 100)
    });
  }

  saveIntensity = () => {
    const intensity = Math.round(this.state.intensity);
    this.props
      .saveDevice({ ...this.props.device, intensity })
      .catch((err) => console.error("intensity light update error", err));
  };

  render() {
    const intensityLightView = (
      <div style={LightDimmerContainer}>
        <CircularInput
          style={LightDimmerStyle}
          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
          onChange={this.setIntensity}
          onMouseUp={this.saveIntensity}
        >
          <text
            style={textStyle}
            x={100}
            y={120}
            textAnchor="middle"
            dy="0.3em"
            fontWeight="bold"
          >
            Intensity light
          </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>
        <div onClick={this.onClickDevice}>
          <Image src={this.getIcon()} style={iconStyle} />
          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
            <h5 style={nameStyle}>Light</h5>
          </BottomPanel>
        </div>
      </StyledDiv>
    );

    return (
      <div>
        {this.props.device.kind === "dimmableLight"
          ? intensityLightView
          : normalLightView}
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  device: state.devices[ownProps.id],
});
const LightContainer = connect(mapStateToProps, RemoteService)(Light);
export default LightContainer;