diff --git a/webui/src/Components/Group.jsx b/webui/src/Components/Group.jsx
index 17816ea..a080833 100644
--- a/webui/src/Components/Group.jsx
+++ b/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 (
{name}
- {lights !== null
+ {ready
? {lights.map(light => )}
: }
{" "}
-
+ {hasLights && (
+
+ )}
{" "}
{id > 0 && }
+ {colorModal && (
+ {
+ lights.forEach(light => {
+ changeColor(light.id, color, brightness, power);
+ setColorModal(false);
+ });
+ }}
+ onCancel={() => setColorModal(false)}
+ />
+ )}
);
}
diff --git a/webui/src/Components/Light.jsx b/webui/src/Components/Light.jsx
index a70d84f..52f6713 100644
--- a/webui/src/Components/Light.jsx
+++ b/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 (
@@ -16,8 +18,7 @@ function Light({id, name, on, color, brightness}) {
{name}
- Flytt
- Gi nytt navn
+ setPropModal(true)}>Egenskaper
Glem
@@ -46,6 +47,12 @@ function Light({id, name, on, color, brightness}) {
onCancel={() => setModal(false)}
/>
)}
+ {propModal && (
+ setPropModal(false)}/>
+ )}
);
}
diff --git a/webui/src/Components/Modals/LightPropertiesModal.jsx b/webui/src/Components/Modals/LightPropertiesModal.jsx
new file mode 100644
index 0000000..0b0700a
--- /dev/null
+++ b/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 ;
+ }
+
+ return (
+
+ Lysegenskaper
+
+
+
+
+
+
+ {" "}
+
+
+
+ );
+}
+
+export default LightPropertiesModal;
diff --git a/webui/src/Helpers/groups.js b/webui/src/Helpers/groups.js
index faf418c..f84ed12 100644
--- a/webui/src/Helpers/groups.js
+++ b/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();
}
diff --git a/webui/src/Helpers/lights.js b/webui/src/Helpers/lights.js
index 90bddb5..0638820 100644
--- a/webui/src/Helpers/lights.js
+++ b/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;
}