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

152 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-03-24 16:08:19 +00:00
// 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).
*/
2020-03-23 20:24:17 +00:00
import React, { Component } from "react";
2020-03-25 16:20:53 +00:00
import {
iconStyle,
StyledDiv,
BottomPanel,
ThumbText,
} from "./styleComponents";
import Settings from "./DeviceSettings";
2020-03-23 20:24:17 +00:00
import { Image } from "semantic-ui-react";
import {
CircularInput,
CircularProgress,
CircularThumb,
} from "react-circular-input";
import {
LightDimmerContainer,
LightDimmerStyle,
textStyle,
2020-03-23 20:24:17 +00:00
nameStyle,
KnobProgress,
CircularThumbStyle,
2020-03-25 16:20:53 +00:00
knobIcon,
2020-03-23 20:24:17 +00:00
} from "./LightStyle";
2020-03-25 16:20:53 +00:00
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";
2020-03-25 16:20:53 +00:00
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 = () => {
2020-03-23 01:17:13 +00:00
this.props.device.on = !this.state.turnedOn;
2020-03-25 16:20:53 +00:00
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) => {
2020-03-23 20:24:17 +00:00
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) {
2020-03-25 13:34:55 +00:00
this.setState({
intensity:
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100),
});
2020-03-23 20:24:17 +00:00
}
});
};
render() {
const intensityLightView = (
<div style={LightDimmerContainer}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
2020-03-25 16:20:53 +00:00
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<CircularInput
style={LightDimmerStyle}
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
2020-03-25 16:20:53 +00:00
onChange={this.setIntensity}
>
<text
style={textStyle}
x={100}
y={120}
textAnchor="middle"
dy="0.3em"
fontWeight="bold"
>
{this.props.device.name}
</text>
2020-03-25 16:20:53 +00:00
<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>
2020-03-25 15:04:02 +00:00
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
2020-03-25 16:20:53 +00:00
onChangeData={(id, newSettings) =>
this.props.onChangeData(id, newSettings)
}
/>
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} />
2020-03-25 15:04:02 +00:00
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</BottomPanel>
</div>
</StyledDiv>
);
2020-03-23 20:24:17 +00:00
return (
<div>
2020-03-25 16:20:53 +00:00
{this.props.device.kind === "dimmableLight"
? intensityLightView
: normalLightView}
</div>
2020-03-25 16:20:53 +00:00
);
}
}