Add/remove group.

webui/src/App.css

@@ -17,4 +17,9 @@ a, button {
 
 .on-switch {
   text-align: center;
+}
+
+.free-buttons {
+  margin-top: 2em;
+  text-align: center;
 }

webui/src/Components/Group.jsx

@@ -3,10 +3,17 @@ import {Button, Card, CardBody, CardFooter, CardHeader, ListGroup} from "reactst
 import useLights from "../Hooks/light";
 import Light from "./Light";
 import Loading from "./Loading";
+import {deleteGroup} from "../Helpers/groups";
 
 function Group({id, name}) {
   const lights = useLights({groupId: id});
 
+  function onDelete() {
+    if (window.confirm(`Vil du virkelig fjerne "${name}"?`)) {
+      deleteGroup(id);
+    }
+  }
+
   return (
     <Card className="mt-3">
       <CardHeader>{name}</CardHeader>
@@ -20,7 +27,7 @@ function Group({id, name}) {
         {" "}
         <Button color="secondary">Skift farger</Button>
         {" "}
-        {id > 0 && <Button color="danger">Fjern</Button>}
+        {id > 0 && <Button color="danger" onClick={onDelete}>Fjern</Button>}
       </CardFooter>
     </Card>
   );

webui/src/Components/Groups.jsx

@@ -1,10 +1,13 @@
-import React from "react";
+import React, {useState} from "react";
 import useGroups from "../Hooks/group";
 import Group from "./Group";
 import Loading from "./Loading";
+import GroupAddModal from "./Modals/GroupAddModal";
+import {Button, FormGroup} from "reactstrap";
 
 function Groups() {
   const groups = useGroups();
+  const [addModal, setAddModal] = useState(false);
 
   if (groups === null) {
     return <Loading/>;
@@ -13,6 +16,10 @@ function Groups() {
   return (
     <div>
       {groups.map(group => <Group key={group.id} {...group} />)}
+      <FormGroup className="free-buttons">
+        <Button color="success" onClick={() => setAddModal(true)} >Ny gruppe</Button>
+      </FormGroup>
+      {addModal && <GroupAddModal onClose={() => setAddModal(false)}/>}
     </div>
   );
 }

webui/src/Components/Modals/GroupAddModal.jsx

@@ -0,0 +1,41 @@
+import React, {useState} from "react";
+import {Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
+import {addGroup} from "../../Helpers/groups";
+
+function GroupAddModal({onClose}) {
+  const [name, setName] = useState("");
+
+  return (
+    <Modal isOpen={true}>
+      <ModalHeader>Ny gruppe</ModalHeader>
+      <ModalBody style={{margin: "0 auto"}}>
+        <Form>
+          <FormGroup>
+            <Label for="text-name">
+              Navn
+            </Label>
+            <Input type="text"
+                   id="text-name"
+                   name="power"
+                   value={name}
+                   onChange={e => setName(e.target.value)}/>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="primary"
+                onClick={() => {
+                  addGroup(name);
+                  onClose();
+                }}
+        >
+          Lagre
+        </Button>
+        {" "}
+        <Button color="secondary" onClick={onClose}>Avbryt</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export default GroupAddModal;

webui/src/Helpers/fetcher.js

@@ -45,6 +45,19 @@ export function fetchGet(url, params = {}) {
   }).then(authCheck);
 }
 
+/**
+ * @param {string} url
+ * @param {object} params
+ * @returns {Promise<object|null>}
+ */
+export function fetchDelete(url, params = {}) {
+  return fetch(formatUrl(url, params), {
+    method: "DELETE",
+    credentials: "include",
+  }).then(authCheck);
+}
+
+
 /**
  * @param {string} url
  * @param {object} data

webui/src/Helpers/groups.js

@@ -1,5 +1,5 @@
 import {randId} from "./random";
-import {fetchGet} from "./fetcher";
+import {fetchDelete, fetchGet, fetchPost} from "./fetcher";
 import {notNullish, nullish} from "./null";
 
 const localData = {};
@@ -37,6 +37,23 @@ export function unsubscribeFromGroup(callbackId) {
   callbacks[index] = null;
 }
 
+export function addGroup(name) {
+  fetchPost("/group/", {name}).then(({data, error}) => {
+    if (error === null) {
+      handleGroup(data);
+      fetchAll();
+    }
+  })
+}
+
+export function deleteGroup(groupId) {
+  fetchDelete(`/group/${groupId}`).then(({data, error}) => {
+    if (error === null) {
+      fetchAll();
+    }
+  });
+}
+
 function fetchAll() {
   fetchGet("/group/").then(({data, error}) => {
     if (error === null) {