diff --git a/webui/src/App.css b/webui/src/App.css
index b650816..473beaa 100755
--- a/webui/src/App.css
+++ b/webui/src/App.css
@@ -17,4 +17,9 @@ a, button {
.on-switch {
text-align: center;
+}
+
+.free-buttons {
+ margin-top: 2em;
+ text-align: center;
}
\ No newline at end of file
diff --git a/webui/src/Components/Group.jsx b/webui/src/Components/Group.jsx
index 9ae2b2c..17816ea 100644
--- a/webui/src/Components/Group.jsx
+++ b/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 (
{name}
@@ -20,7 +27,7 @@ function Group({id, name}) {
{" "}
{" "}
- {id > 0 && }
+ {id > 0 && }
);
diff --git a/webui/src/Components/Groups.jsx b/webui/src/Components/Groups.jsx
index 7e8c180..e81de4f 100644
--- a/webui/src/Components/Groups.jsx
+++ b/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 ;
@@ -13,6 +16,10 @@ function Groups() {
return (
{groups.map(group => )}
+
+
+
+ {addModal && setAddModal(false)}/>}
);
}
diff --git a/webui/src/Components/Modals/GroupAddModal.jsx b/webui/src/Components/Modals/GroupAddModal.jsx
new file mode 100644
index 0000000..dffcd93
--- /dev/null
+++ b/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 (
+
+ Ny gruppe
+
+
+
+
+
+ {" "}
+
+
+
+ );
+}
+
+export default GroupAddModal;
diff --git a/webui/src/Helpers/fetcher.js b/webui/src/Helpers/fetcher.js
index 5317603..b2284a2 100644
--- a/webui/src/Helpers/fetcher.js
+++ b/webui/src/Helpers/fetcher.js
@@ -45,6 +45,19 @@ export function fetchGet(url, params = {}) {
}).then(authCheck);
}
+/**
+ * @param {string} url
+ * @param {object} params
+ * @returns {Promise