The main server, and probably only repository in this org.
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.
|
|
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;
|