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

/**
 Users can add dimmers, a particular kind of switch that can also modify the intensity level of a given light.
 There are two types of dimmers:
 • A dimmer with state stores a given intensity level and sets the light to that level. <-- StatefulDimmer
 • A dimmer without state can just increase or decrease the intensity of a light. <-- DefualtDimmer

 The user can change the state of a dimmer through an intuitive UI in SmartHut .
 **/

import React, { Component } from "react";
import {
  CircularInput,
  CircularProgress,
  CircularThumb,
} from "react-circular-input";
import {
  ButtonDimmerContainer,
  MinusPanel,
  PlusPanel,
  ThumbText,
} from "./styleComponents";
import Settings from "./DeviceSettings";
import {
  CircularThumbStyle,
  KnobDimmerStyle,
  KnobProgress,
  textStyle,
  knobIcon,
  knobContainer,
} from "./DimmerStyle";

import { call } from "../../../client_server";

export class ButtonDimmer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  increaseIntensity = () => {
    let data = {
      dimType: "UP",
      id: this.props.device.id,
    };
    call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
      if (res.status === 200) {
      }
    });
  };
  decreaseIntensity = () => {
    let data = {
      dimType: "DOWN",
      id: this.props.device.id,
    };
    call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
      if (res.status === 200) {
      }
    });
  };

  componentDidMount() {}

  render() {
    return (
      <ButtonDimmerContainer>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        <img alt="icon" src="/img/buttonDimmer.svg" />
        <span className="knob">{this.props.device.name}</span>
        <PlusPanel name="UP" onClick={this.increaseIntensity}>
          <span>&#43;</span>
        </PlusPanel>
        <MinusPanel name="DOWN" onClick={this.decreaseIntensity}>
          <span>&minus;</span>
        </MinusPanel>
      </ButtonDimmerContainer>
    );
  }
}

export class KnobDimmer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pointingDevices: [],
      value: 1,
    };
  }

  setIntensity = (newValue) => {
    let val = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
    let data = {
      id: this.props.device.id,
      intensity: val,
    };
    call.deviceUpdate(data, "knobDimmer/dimTo").then((res) => {
      if (res.status === 200) {
        this.setState({
          value: val,
        });
      }
    });
  };

  componentDidMount() {
    this.setState({
      value: 1,
    });
  }

  render() {
    return (
      <div style={knobContainer}>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        <CircularInput
          style={KnobDimmerStyle}
          value={+(Math.round(this.state.value / 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.value + 0.1 }}
          />
          <CircularThumb style={CircularThumbStyle} />
          <ThumbText color={"#1a2849"} />
        </CircularInput>
        <img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
      </div>
    );
  }
}