diff --git a/webui/src/Components/Group.jsx b/webui/src/Components/Group.jsx
index c6182a6..68c7c53 100644
--- a/webui/src/Components/Group.jsx
+++ b/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"
diff --git a/webui/src/Components/LGroup.jsx b/webui/src/Components/LGroup.jsx
new file mode 100644
index 0000000..8e38e92
--- /dev/null
+++ b/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 (
+
+
+
+ {name}
+
+
+
+ {power && }
+
+
+ {power && }
+
+
+ repower(e.target.checked)}/>
+
+
+
+
+ );
+}
+
+export default LGroup;
diff --git a/webui/src/Components/LGroups.jsx b/webui/src/Components/LGroups.jsx
new file mode 100644
index 0000000..f0bdb15
--- /dev/null
+++ b/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 ;
+ }
+
+ return (
+
+ {groups.map(group => )}
+
+ );
+}
+
+export default LGroups;
diff --git a/webui/src/Components/Misc/BrightnessSlider.jsx b/webui/src/Components/Misc/BrightnessSlider.jsx
index ec88900..e95d594 100644
--- a/webui/src/Components/Misc/BrightnessSlider.jsx
+++ b/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 (
-
+
);
diff --git a/webui/src/Components/Misc/ColorPicker.jsx b/webui/src/Components/Misc/ColorPicker.jsx
index 46a2021..d067a5c 100644
--- a/webui/src/Components/Misc/ColorPicker.jsx
+++ b/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 (
diff --git a/webui/src/Components/Pages/IndexPage.jsx b/webui/src/Components/Pages/IndexPage.jsx
index cfc415a..b794c8f 100644
--- a/webui/src/Components/Pages/IndexPage.jsx
+++ b/webui/src/Components/Pages/IndexPage.jsx
@@ -1,8 +1,9 @@
import React from "react";
+import LGroups from "../LGroups";
function IndexPage() {
return (
-
+
);
}
diff --git a/webui/src/Helpers/random.js b/webui/src/Helpers/random.js
index b4c48ff..d586b85 100644
--- a/webui/src/Helpers/random.js
+++ b/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;