|
|
@@ -0,0 +1,171 @@
|
|
|
+"use client";
|
|
|
+
|
|
|
+import { debounce } from "lodash";
|
|
|
+import { useEffect, useState } from "react";
|
|
|
+import { Collapse, Loader } from "tiny-ui";
|
|
|
+import { WLEDClient } from "wled-client";
|
|
|
+
|
|
|
+import { Layout, Management } from "components";
|
|
|
+
|
|
|
+const CLIENTS = process.env.CLIENTS || [];
|
|
|
+const NAMES = process.env.NAMES || [];
|
|
|
+
|
|
|
+export default function Home() {
|
|
|
+ const [names, setNames] = useState(null);
|
|
|
+ const [clients, setClients] = useState(null);
|
|
|
+ const [connections, setConnections] = useState(null);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ let t = [];
|
|
|
+ let c = [];
|
|
|
+ let n = [];
|
|
|
+ for (let client of CLIENTS) {
|
|
|
+ c.push(client);
|
|
|
+ t.push(new WLEDClient(client));
|
|
|
+ }
|
|
|
+ for (let name of NAMES) {
|
|
|
+ n.push(name);
|
|
|
+ }
|
|
|
+ setClients(c);
|
|
|
+ setConnections(t);
|
|
|
+ setNames(n);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const handleCopy = async (payload) => {
|
|
|
+ if (payload?.clients && payload?.value) {
|
|
|
+ for (let client of payload.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ for (let n of Object.keys(payload?.value)) {
|
|
|
+ if (n && payload?.value?.[n]) {
|
|
|
+ console.log("handleCopy", n, payload?.value[n]);
|
|
|
+ await wled.savePreset(n, payload?.value[n]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ await wled.reinit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDelete = async (payload) => {
|
|
|
+ if (payload?.clients && payload?.value) {
|
|
|
+ for (let client of payload?.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ for (let n of payload?.value) {
|
|
|
+ await wled.deletePreset(n);
|
|
|
+ }
|
|
|
+ await wled.reinit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSync = async (payload) => {
|
|
|
+ if (payload?.clients) {
|
|
|
+ for (let client of payload?.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ switch (payload?.value) {
|
|
|
+ case "enable":
|
|
|
+ await wled.enableUDPSync({ send: true, receive: false });
|
|
|
+ break;
|
|
|
+ case "disable":
|
|
|
+ await wled.disableUDPSync();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ await wled.reinit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handlePower = async (payload) => {
|
|
|
+ if (payload?.clients && payload?.value) {
|
|
|
+ for (let client of payload?.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ switch (payload?.value) {
|
|
|
+ case "on":
|
|
|
+ await wled.turnOn();
|
|
|
+ await wled.reinit();
|
|
|
+ break;
|
|
|
+ case "off":
|
|
|
+ await wled.turnOff();
|
|
|
+ await wled.reinit();
|
|
|
+ break;
|
|
|
+ case "toggle":
|
|
|
+ await wled.toggle();
|
|
|
+ await wled.reinit();
|
|
|
+ break;
|
|
|
+ case "reboot":
|
|
|
+ await wled.reboot();
|
|
|
+ setTimeout(async () => {
|
|
|
+ await wled.reinit(true);
|
|
|
+ }, 3000);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleBrightness = async (payload) => {
|
|
|
+ if (payload?.clients && payload?.value) {
|
|
|
+ for (let client of payload?.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ await wled.setBrightness(payload?.value);
|
|
|
+ await wled.reinit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const debounceHandleBrightness = debounce(handleBrightness, 500);
|
|
|
+
|
|
|
+ const handlePreset = async (payload) => {
|
|
|
+ if (payload?.clients && payload?.value) {
|
|
|
+ for (let client of payload?.clients) {
|
|
|
+ let indx = clients.findIndex((o) => o === client);
|
|
|
+ if (connections[indx]) {
|
|
|
+ let wled = connections[indx];
|
|
|
+ await wled.setPreset(payload?.value);
|
|
|
+ await wled.reinit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Layout page="home">
|
|
|
+ {(connections && clients && (
|
|
|
+ <Collapse bordered={false}>
|
|
|
+ {clients?.map((o, i) => (
|
|
|
+ <Management
|
|
|
+ key={i + 1}
|
|
|
+ itemKey={`${i + 1}`}
|
|
|
+ clients={clients}
|
|
|
+ client={o}
|
|
|
+ clientName={names[i]}
|
|
|
+ connection={connections[i]}
|
|
|
+ onCopy={handleCopy}
|
|
|
+ onDelete={handleDelete}
|
|
|
+ onSync={handleSync}
|
|
|
+ onPower={handlePower}
|
|
|
+ onBrightness={debounceHandleBrightness}
|
|
|
+ onPreset={handlePreset}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </Collapse>
|
|
|
+ )) || <Loader size="lg" />}
|
|
|
+ </Layout>
|
|
|
+ );
|
|
|
+
|
|
|
+ return;
|
|
|
+}
|