{" "}
diff --git a/webui/src/Components/Groups.jsx b/webui/src/Components/Groups.jsx
index 54681f0..7e8c180 100644
--- a/webui/src/Components/Groups.jsx
+++ b/webui/src/Components/Groups.jsx
@@ -1,22 +1,18 @@
import React from "react";
-import {Spinner} from "reactstrap";
import useGroups from "../Hooks/group";
import Group from "./Group";
+import Loading from "./Loading";
function Groups() {
const groups = useGroups();
if (groups === null) {
- return (
-
-
-
- );
+ return ;
}
return (
- {groups.map(group => )}
+ {groups.map(group => )}
);
}
diff --git a/webui/src/Components/Light.jsx b/webui/src/Components/Light.jsx
new file mode 100644
index 0000000..4a62603
--- /dev/null
+++ b/webui/src/Components/Light.jsx
@@ -0,0 +1,40 @@
+import React, {useState} from "react";
+import {Badge, Col, ListGroupItem, Row} from "reactstrap";
+import {percentage} from "../Helpers/percentage";
+import ColorModal from "./Modals/ColorModal";
+import {changeColor} from "../Helpers/lights";
+
+function Light({id, name, color, brightness}) {
+ const pc = percentage(brightness, 255);
+
+ const [modal, setModal] = useState(false);
+
+ return (
+
+
+
+ {name}
+
+
+ setModal(true)}>
+ {color.toUpperCase()}
+
+
+
+ {pc}
+
+
+ {modal && (
+ {
+ changeColor(id, newColor);
+ setModal(false);
+ }}
+ onCancel={() => setModal(false)}
+ />
+ )}
+
+ );
+}
+
+export default Light;
diff --git a/webui/src/Components/Loading.jsx b/webui/src/Components/Loading.jsx
new file mode 100644
index 0000000..199713b
--- /dev/null
+++ b/webui/src/Components/Loading.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import {Spinner} from "reactstrap";
+
+function Loading() {
+ return (
+
+
+
+ );
+}
+
+export default Loading;
diff --git a/webui/src/Components/Misc/ColorPicker.jsx b/webui/src/Components/Misc/ColorPicker.jsx
new file mode 100644
index 0000000..46a2021
--- /dev/null
+++ b/webui/src/Components/Misc/ColorPicker.jsx
@@ -0,0 +1,31 @@
+import React, {useLayoutEffect} from "react";
+import iro from '@jaames/iro';
+import {randId} from "../../Helpers/random";
+
+function ColorPicker({color, onChange}) {
+ const random = randId();
+
+ useLayoutEffect(() => {
+ const colorPicker = new iro.ColorPicker("#color-picker-" + random, {
+ color: `#${color}`,
+ layout: [
+ {
+ component: iro.ui.Wheel,
+ options: {}
+ }
+ ],
+ });
+
+ colorPicker.on("input:end", color => {
+ onChange(color.hexString.substr(1));
+ })
+ }, []);
+
+ return (
+
+
+
+ );
+}
+
+export default ColorPicker;
diff --git a/webui/src/Components/Modals/ColorModal.jsx b/webui/src/Components/Modals/ColorModal.jsx
new file mode 100644
index 0000000..b016144
--- /dev/null
+++ b/webui/src/Components/Modals/ColorModal.jsx
@@ -0,0 +1,23 @@
+import React, {useState} from "react";
+import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
+import ColorPicker from "../Misc/ColorPicker";
+
+function ColorModal({value, onConfirm, onCancel}) {
+ const [color, setColor] = useState(value);
+
+ return (
+
+ Fargevalg
+
+
+
+
+
+ {" "}
+
+
+
+ );
+}
+
+export default ColorModal;
diff --git a/webui/src/Components/Pages/GroupPage.jsx b/webui/src/Components/Pages/GroupPage.jsx
new file mode 100644
index 0000000..58b63d4
--- /dev/null
+++ b/webui/src/Components/Pages/GroupPage.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Groups from "./IndexPage";
+
+function GroupPage() {
+ return (
+
+ );
+}
+
+export default GroupPage;
diff --git a/webui/src/Components/IndexPage.jsx b/webui/src/Components/Pages/IndexPage.jsx
similarity index 77%
rename from webui/src/Components/IndexPage.jsx
rename to webui/src/Components/Pages/IndexPage.jsx
index 801db8a..ada5b33 100644
--- a/webui/src/Components/IndexPage.jsx
+++ b/webui/src/Components/Pages/IndexPage.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import Groups from "./Groups";
+import Groups from "../Groups";
function IndexPage() {
return (
diff --git a/webui/src/Components/Header.jsx b/webui/src/Components/Structure/Header.jsx
similarity index 93%
rename from webui/src/Components/Header.jsx
rename to webui/src/Components/Structure/Header.jsx
index 322157b..1675a20 100644
--- a/webui/src/Components/Header.jsx
+++ b/webui/src/Components/Structure/Header.jsx
@@ -1,8 +1,8 @@
import React, {useState} from "react"
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap";
-import useAuth from "../Hooks/auth";
+import useAuth from "../../Hooks/auth";
import {Link} from "react-router-dom";
-import {onEnter} from "../Helpers/keys";
+import {onEnter} from "../../Helpers/keys";
export default function Header() {
const [showMenu, setShowMenu] = useState(false);
diff --git a/webui/src/Helpers/lights.js b/webui/src/Helpers/lights.js
index 567b953..62da455 100644
--- a/webui/src/Helpers/lights.js
+++ b/webui/src/Helpers/lights.js
@@ -29,6 +29,30 @@ export function subscribeToLight(lightId, callback) {
}
}
+export function unsubscribeFromLight(callbackId) {
+ const callback = callbacks.find(c => c !== null && c.callbackId === callbackId);
+ const index = callbacks.indexOf(callback);
+ callbacks[index] = null;
+}
+
+export function changeColor(lightId, newColor) {
+ console.dir(localData);
+
+ const light = localData[lightId];
+ if (nullish(light)) {
+ return;
+ }
+
+ localData[lightId].color = newColor;
+ dispatch(Object.values(localData));
+
+ // TODO: Send request
+}
+
+export function changeBrightness(lightId, newBrightness) {
+
+}
+
function fetchAll() {
fetchGet(`/light/`).then(({data, error}) => {
if (error === null) {
@@ -49,7 +73,7 @@ function handleLights(lights) {
lights.forEach(l => handleLight(l));
for (let key in localData) {
- if (localData.hasOwnProperty(key) && nullish(lights.find(l => l.id === key))) {
+ if (localData.hasOwnProperty(key) && nullish(lights.find(l => l.id === parseInt(key, 10)))) {
delete localData[key];
}
}
diff --git a/webui/src/Helpers/percentage.js b/webui/src/Helpers/percentage.js
new file mode 100644
index 0000000..b9a3d56
--- /dev/null
+++ b/webui/src/Helpers/percentage.js
@@ -0,0 +1,3 @@
+export function percentage(value, max) {
+ return (100 * value / max).toFixed(1) + " %";
+}
\ No newline at end of file
diff --git a/webui/src/Hooks/light.js b/webui/src/Hooks/light.js
index 5da6cae..5ff5106 100644
--- a/webui/src/Hooks/light.js
+++ b/webui/src/Hooks/light.js
@@ -1,10 +1,10 @@
import {useEffect, useState} from "react";
-import {subscribeToLight} from "../Helpers/lights";
+import {subscribeToLight, unsubscribeFromLight} from "../Helpers/lights";
export default function useLights({groupId = -1, id = -1}) {
const [light, setLight] = useState(null);
- function onChange() {
+ function onChange(light) {
setLight(light);
}
@@ -12,7 +12,7 @@ export default function useLights({groupId = -1, id = -1}) {
const cbId = subscribeToLight(id, onChange);
return () => {
- subscribeToLight(cbId);
+ unsubscribeFromLight(cbId);
};
}, []);