|
@@ -1,11 +1,13 @@
|
|
|
"use client";
|
|
"use client";
|
|
|
|
|
|
|
|
-import { debounce } from "lodash";
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
-import { Collapse, Loader } from "tiny-ui";
|
|
|
|
|
|
|
+import { Col, Loader, Row } from "tiny-ui";
|
|
|
import { WLEDClient } from "wled-client";
|
|
import { WLEDClient } from "wled-client";
|
|
|
|
|
|
|
|
-import { Layout, Management } from "./components";
|
|
|
|
|
|
|
+import { Automation, Layout } from "components";
|
|
|
|
|
+
|
|
|
|
|
+import automation from "data/automation.json";
|
|
|
|
|
+import presets from "data/presets.json";
|
|
|
|
|
|
|
|
const CLIENTS = process.env.CLIENTS || [];
|
|
const CLIENTS = process.env.CLIENTS || [];
|
|
|
const NAMES = process.env.NAMES || [];
|
|
const NAMES = process.env.NAMES || [];
|
|
@@ -31,103 +33,6 @@ export default function Home() {
|
|
|
setNames(n);
|
|
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]) {
|
|
|
|
|
- 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) => {
|
|
const handlePreset = async (payload) => {
|
|
|
if (payload?.clients && payload?.value) {
|
|
if (payload?.clients && payload?.value) {
|
|
|
for (let client of payload?.clients) {
|
|
for (let client of payload?.clients) {
|
|
@@ -143,26 +48,20 @@ export default function Home() {
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<Layout page="home">
|
|
<Layout page="home">
|
|
|
- {(connections && clients && (
|
|
|
|
|
- <Collapse bordered={false}>
|
|
|
|
|
- {clients?.map((o, i) => (
|
|
|
|
|
- <Management
|
|
|
|
|
- key={i + 1}
|
|
|
|
|
- itemKey={`${i + 1}`}
|
|
|
|
|
|
|
+ <Row style={{ backgroundColor: "#fff" }}>
|
|
|
|
|
+ <Col style={{ margin: "2rem" }}>
|
|
|
|
|
+ {(connections && clients && (
|
|
|
|
|
+ <Automation
|
|
|
clients={clients}
|
|
clients={clients}
|
|
|
- client={o}
|
|
|
|
|
- clientName={names[i]}
|
|
|
|
|
- connection={connections[i]}
|
|
|
|
|
- onCopy={handleCopy}
|
|
|
|
|
- onDelete={handleDelete}
|
|
|
|
|
- onSync={handleSync}
|
|
|
|
|
- onPower={handlePower}
|
|
|
|
|
- onBrightness={debounceHandleBrightness}
|
|
|
|
|
|
|
+ connections={connections}
|
|
|
|
|
+ names={names}
|
|
|
|
|
+ presets={presets}
|
|
|
|
|
+ automation={automation}
|
|
|
onPreset={handlePreset}
|
|
onPreset={handlePreset}
|
|
|
/>
|
|
/>
|
|
|
- ))}
|
|
|
|
|
- </Collapse>
|
|
|
|
|
- )) || <Loader size="lg" />}
|
|
|
|
|
|
|
+ )) || <Loader size="lg" />}
|
|
|
|
|
+ </Col>
|
|
|
|
|
+ </Row>
|
|
|
</Layout>
|
|
</Layout>
|
|
|
);
|
|
);
|
|
|
|
|
|