// 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 = (
this.props.onChangeData(id, newSettings) } /> {this.props.device.name}
); const normalLightView = ( this.props.onChangeData(id, newSettings) } />
{} : this.onClickDevice}>
{this.props.device.name}
); return (
{this.props.device.kind === "dimmableLight" ? intensityLightView : normalLightView}
); } }