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

/**
 * 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} from "./styleComponents";
import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react";
import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";

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

    onClickDevice = () => {
        this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
    };

    setIntensity = (newValue) => {
        this.setState({intensityLevel : newValue});
    };

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

    componentDidMount() {
        if(this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
            this.setState({
                hasIntensity: this.props.device.hasIntensity,
                intensityLevel: this.props.device.intensityLevel
            });
        }
        // Get the state and update it

    }


    render() {
        const intensityLightView = (
            <CircularInput
                value={this.state.intensityLevel}
                onChange={this.setIntensity}
                style={style}
            >
                <CircularTrack/>
                <CircularProgress/>
                <CircularThumb/>

                <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
                    {Math.round(this.state.intensityLevel*100)}%
                </text>
                <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
                    {this.props.device.name}
                </text>
            </CircularInput>
        );

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

        return (
            <React.Fragment>
                {this.state.hasIntensity ? (intensityLightView) : (normalLightView)}
            </React.Fragment>
        )
    }
}