lucifer/webui/src/Components/LGroup.jsx

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;