More stuff.

webui/src/Components/Group.jsx

@@ -1,12 +1,23 @@
-import React from "react";
+import React, {useState} from "react";
 import {Button, Card, CardBody, CardFooter, CardHeader, ListGroup} from "reactstrap";
 import useLights from "../Hooks/light";
 import Light from "./Light";
 import Loading from "./Loading";
 import {deleteGroup} from "../Helpers/groups";
+import ColorModal from "./Modals/ColorModal";
+import {changeColor} from "../Helpers/lights";
 
 function Group({id, name}) {
   const lights = useLights({groupId: id});
+  const [colorModal, setColorModal] = useState("");
+
+  const ready = lights !== null;
+  const noLights = ready && lights.length === 0;
+  const hasLights = ready && lights.length > 0;
+
+  if (id === 0 && noLights) {
+    return null;
+  }
 
   function onDelete() {
     if (window.confirm(`Vil du virkelig fjerne "${name}"?`)) {
@@ -14,21 +25,45 @@ function Group({id, name}) {
     }
   }
 
+  let cValue = null;
+  let bValue = null;
+  let pValue = null;
+  if (hasLights) {
+    cValue = lights[0].color;
+    bValue = lights[0].brightness;
+    pValue = lights[0].on;
+  }
+
   return (
     <Card className="mt-3">
       <CardHeader>{name}</CardHeader>
       <CardBody>
-        {lights !== null
+        {ready
           ? <ListGroup>{lights.map(light => <Light key={light.id} {...light} />)}</ListGroup>
           : <Loading/>}
       </CardBody>
       <CardFooter>
         <Button color="primary">Detaljer</Button>
         {" "}
-        <Button color="secondary">Skift farger</Button>
+        {hasLights && (
+          <Button color="secondary" onClick={() => setColorModal(true)}>Skift farger</Button>
+        )}
         {" "}
         {id > 0 && <Button color="danger" onClick={onDelete}>Fjern</Button>}
       </CardFooter>
+      {colorModal && (
+        <ColorModal cValue={cValue}
+                    bValue={bValue}
+                    pValue={pValue}
+                    onConfirm={(color, brightness, power) => {
+                      lights.forEach(light => {
+                        changeColor(light.id, color, brightness, power);
+                        setColorModal(false);
+                      });
+                    }}
+                    onCancel={() => setColorModal(false)}
+        />
+      )}
     </Card>
   );
 }

webui/src/Components/Light.jsx

@@ -2,10 +2,12 @@ import React, {useState} from "react";
 import {Badge, ButtonDropdown, Col, DropdownItem, DropdownMenu, DropdownToggle, ListGroupItem, Row} from "reactstrap";
 import ColorModal from "./Modals/ColorModal";
 import {changeColor} from "../Helpers/lights";
+import LightPropertiesModal from "./Modals/LightPropertiesModal";
 
-function Light({id, name, on, color, brightness}) {
+function Light({id, groupId, name, on, color, brightness}) {
   const [modal, setModal] = useState(false);
   const [dropDown, setDropDown] = useState(false);
+  const [propModal, setPropModal] = useState(false);
 
   return (
     <ListGroupItem>
@@ -16,8 +18,7 @@ function Light({id, name, on, color, brightness}) {
               {name}
             </DropdownToggle>
             <DropdownMenu>
-              <DropdownItem>Flytt</DropdownItem>
-              <DropdownItem>Gi nytt navn</DropdownItem>
+              <DropdownItem onClick={() => setPropModal(true)}>Egenskaper</DropdownItem>
               <DropdownItem>Glem</DropdownItem>
             </DropdownMenu>
           </ButtonDropdown>
@@ -46,6 +47,12 @@ function Light({id, name, on, color, brightness}) {
                     onCancel={() => setModal(false)}
         />
       )}
+      {propModal && (
+        <LightPropertiesModal id={id}
+                              gValue={groupId}
+                              nValue={name}
+                              onClose={() => setPropModal(false)}/>
+      )}
     </ListGroupItem>
   );
 }

webui/src/Components/Modals/LightPropertiesModal.jsx

@@ -0,0 +1,61 @@
+import React, {useState} from "react";
+import {Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
+import {addGroup} from "../../Helpers/groups";
+import useGroups from "../../Hooks/group";
+import Loading from "../Loading";
+import {changeLight} from "../../Helpers/lights";
+
+function LightPropertiesModal({id, gValue, nValue, onClose}) {
+  const [groupId, setGroupId] = useState(gValue);
+  const [name, setName] = useState(nValue);
+  const groups = useGroups();
+  if (groups === null) {
+    return <Modal isOpen={true}><Loading/></Modal>;
+  }
+
+  return (
+    <Modal isOpen={true}>
+      <ModalHeader>Lysegenskaper</ModalHeader>
+      <ModalBody style={{margin: "0 auto"}}>
+        <Form>
+          <FormGroup>
+            <Label for="text-name">
+              Navn
+            </Label>
+            <Input type="text"
+                   id="text-name"
+                   value={name}
+                   onChange={e => setName(e.target.value)}
+            />
+          </FormGroup>
+        </Form>
+        <Form>
+          <FormGroup>
+            <Label for="sel-group">
+              Navn
+            </Label>
+            <Input type="select"
+                   value={groupId}
+                   onChange={e => setGroupId(parseInt(e.target.value, 10))}>
+              {groups.map(g => <option value={g.id}>{g.name}</option>)}
+            </Input>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="primary"
+                onClick={() => {
+                  changeLight(id, name, groupId);
+                  onClose();
+                }}
+        >
+          Lagre
+        </Button>
+        {" "}
+        <Button color="secondary" onClick={onClose}>Avbryt</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export default LightPropertiesModal;

webui/src/Helpers/groups.js

@@ -11,20 +11,8 @@ export function subscribeToGroup(groupId, callback) {
   callbacks.push({callbackId, groupId, callback});
 
   if (groupId >= 0) {
-    if (notNullish(localData[groupId])) {
-      dispatch(localData[groupId]);
-    }
-
     fetchOne(groupId);
   } else {
-    const list = [];
-    for (let key in localData) {
-      if (localData.hasOwnProperty(key) && notNullish(localData[key])) {
-        list.push(localData[key]);
-      }
-    }
-    dispatch(list);
-
     fetchAll();
   }
 

webui/src/Helpers/lights.js

@@ -59,25 +59,26 @@ export function changeColor(lightId, newColor, newBrightness, newPower) {
   });
 }
 
-export function changeBrightness(lightId, newPower, newBrightness) {
+export function changeLight(lightId, name, groupId) {
   const light = localData[lightId];
   if (nullish(light)) {
     return;
   }
 
-  const oldBrightness = light.brightness;
-  const oldPower = light.on;
-  light.brightness = newBrightness;
-  light.on = newPower;
+  const oldName = light.name;
+  const oldGroupId = light.groupId;
+  light.name = name;
+  light.groupId = groupId;
   dispatch();
+  console.log({name,groupId});
 
   fetchPatch(`/light/${lightId}`, {
-    brightness: newBrightness,
-    on: newPower,
+    name: name,
+    groupId: groupId,
   }).then(({data, error}) => {
     if (error !== null) {
-      light.brightness = oldBrightness;
-      light.on = oldPower;
+      light.name = oldName;
+      light.groupId = oldGroupId;
       dispatch();
       return;
     }