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, useState } from 'react';
import {
    CircularInput,
    CircularProgress,
    CircularThumb,
    useCircularInputContext
} from "react-circular-input";
import { ButtonDimmerContainer, MinusPanel, PlusPanel, ThumbText } from "./styleComponents";
import Settings from "./DeviceSettings";
import {
    CircularThumbStyle,
    KnobDimmerStyle,
    KnobProgress,
    ValueStyle,
    textStyle,
    knobIcon,
    knobContainer
} from "./DimmerStyle";

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

    increaseIntensity = () => {
        console.log("Increase!")
    };
    decreaseIntensity = () => {
        console.log("Decrease!")
    };

    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 onClick={this.increaseIntensity}>
                    <span>&#43;</span>
                </PlusPanel>
                <MinusPanel onClick={this.decreaseIntensity}>
                    <span>&minus;</span>
                </MinusPanel>

            </ButtonDimmerContainer>
        )
    }
}

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


    componentDidMount() {
    }


    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={this.state.value}
                    onChange={(value) => this.setState({ value: value })}>

                    <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 style={knobIcon} src="/img/knobDimmer.svg" />
            </div>
        )
    }
}