hawkband-wled-client/app/page.js

"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]) {
              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;
}