You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.1 KiB
70 lines
2.1 KiB
import React, {useEffect, useState} from "react";
|
|
import useLights from "../Hooks/light";
|
|
import {Card, CardBody, CardHeader, Col, CustomInput, FormGroup} from "reactstrap";
|
|
import ColorPicker from "./Misc/ColorPicker";
|
|
import {changeColor} from "../Helpers/lights";
|
|
import BrightnessSlider from "./Misc/BrightnessSlider";
|
|
|
|
function LGroup({id, name}) {
|
|
const lights = useLights({groupId: id});
|
|
|
|
const light = lights !== null && lights.length > 0 ? lights[0] : null;
|
|
const [color, setColor] = useState(null);
|
|
const [brightness, setBrightness] = useState(null);
|
|
const [power, setPower] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (light !== null) {
|
|
setColor(light.color);
|
|
setBrightness(light.brightness);
|
|
setPower(light.on);
|
|
}
|
|
}, [light]);
|
|
|
|
if (light === null || color === null || brightness === null || power === null) {
|
|
return <></>;
|
|
}
|
|
|
|
function recolor(newColor) {
|
|
setColor(newColor);
|
|
lights.forEach(l => changeColor(l.id, newColor, null, null));
|
|
}
|
|
|
|
function rebrightness(newBrightness) {
|
|
setBrightness(newBrightness);
|
|
lights.forEach(l => changeColor(l.id, null, newBrightness, null));
|
|
}
|
|
|
|
function repower(newPower) {
|
|
setPower(newPower);
|
|
lights.forEach(l => changeColor(l.id, null, null, newPower));
|
|
}
|
|
|
|
return (
|
|
<Col lg={4} md={6} sm={12}>
|
|
<Card className="mt-3">
|
|
<CardHeader>
|
|
{name}
|
|
</CardHeader>
|
|
<CardBody>
|
|
<FormGroup>
|
|
{power && <ColorPicker color={color} onChange={recolor}/>}
|
|
</FormGroup>
|
|
<FormGroup>
|
|
{power && <BrightnessSlider brightness={brightness} onChange={rebrightness}/>}
|
|
</FormGroup>
|
|
<FormGroup className="on-switch">
|
|
<CustomInput type="switch"
|
|
id={`switch-power-${id}`}
|
|
name="power"
|
|
label={power ? "På" : "Av"}
|
|
checked={power}
|
|
onChange={e => repower(e.target.checked)}/>
|
|
</FormGroup>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
);
|
|
}
|
|
|
|
export default LGroup;
|