Front page.

webui/src/Components/Group.jsx

@@ -21,7 +21,7 @@ function Group({id, name, permissions}) {
   const hasLights = ready && lights.length > 0;
 
   if (id === 0 && noLights) {
-    return null;
+    return <></>;
   }
 
   function onDelete() {
@@ -40,6 +40,10 @@ function Group({id, name, permissions}) {
   }
 
   function iCan(name) {
+    if (permissions === null) {
+      return false;
+    }
+
     const perm = permissions.find(p => p.userId === user.id);
 
     return typeof perm !== "undefined"

webui/src/Components/LGroup.jsx

@@ -0,0 +1,70 @@
+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;

webui/src/Components/LGroups.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import useGroups from "../Hooks/group";
+import Loading from "./Groups";
+import LGroup from "./LGroup";
+import {Row} from "reactstrap";
+
+function LGroups() {
+  const groups = useGroups();
+
+  if (groups === null) {
+    return <Loading/>;
+  }
+
+  return (
+    <Row>
+      {groups.map(group => <LGroup key={group.id} {...group} />)}
+    </Row>
+  );
+}
+
+export default LGroups;

webui/src/Components/Misc/BrightnessSlider.jsx

@@ -1,13 +1,12 @@
-import React, {useLayoutEffect} from "react";
+import React, {useLayoutEffect, useState} from "react";
 import {randId} from "../../Helpers/random";
 import iro from "@jaames/iro";
 
 function BrightnessSlider({brightness, onChange}) {
-  const random = randId();
+  const [random] = useState(randId());
 
   useLayoutEffect(() => {
-    console.log(brightness);
-    const colorPicker = new iro.ColorPicker("#color-picker-" + random, {
+    const colorPicker = new iro.ColorPicker("#brightness-picker-" + random, {
       color: `rgb(${brightness}, ${brightness}, ${brightness})`,
       layout: [
         {
@@ -21,11 +20,15 @@ function BrightnessSlider({brightness, onChange}) {
 
     colorPicker.on("input:end", color => {
       onChange(color.rgb.r);
-    })
-  }, []);
+    });
+
+    return () => {
+      document.getElementById(`brightness-picker-${random}`).innerHTML = "";
+    };
+  }, [brightness]);
 
   return (
-    <div id={`color-picker-${random}`}>
+    <div id={`brightness-picker-${random}`}>
 
     </div>
   );

webui/src/Components/Misc/ColorPicker.jsx

@@ -1,9 +1,9 @@
-import React, {useLayoutEffect} from "react";
+import React, {useLayoutEffect, useState} from "react";
 import iro from '@jaames/iro';
 import {randId} from "../../Helpers/random";
 
 function ColorPicker({color, onChange}) {
-  const random = randId();
+  const [random] = useState(randId());
 
   useLayoutEffect(() => {
     const colorPicker = new iro.ColorPicker("#color-picker-" + random, {
@@ -18,8 +18,12 @@ function ColorPicker({color, onChange}) {
 
     colorPicker.on("input:end", color => {
       onChange(color.hexString.substr(1));
-    })
-  }, []);
+    });
+
+    return () => {
+      document.getElementById(`color-picker-${random}`).innerHTML = "";
+    };
+  }, [color]);
 
   return (
     <div id={`color-picker-${random}`}>

webui/src/Components/Pages/IndexPage.jsx

@@ -1,8 +1,9 @@
 import React from "react";
+import LGroups from "../LGroups";
 
 function IndexPage() {
   return (
-    <div/>
+    <LGroups/>
   );
 }
 

webui/src/Helpers/random.js

@@ -1,11 +1,11 @@
 const POSSIBLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-const POSSIBLE_LENGHTH = POSSIBLE.length;
+const POSSIBLE_LENGTH = POSSIBLE.length;
 
 export function randId() {
   let text = "";
 
   for (let i = 0; i < 16; i++) {
-    text += POSSIBLE.charAt(Math.floor(Math.random() * POSSIBLE_LENGHTH));
+    text += POSSIBLE.charAt(Math.floor(Math.random() * POSSIBLE_LENGTH));
   }
 
   return text;