hawkband-wled-client/app/admin/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, Notification } from "components";

import config from "data/config.json";
import defaults from "data/presets.json";

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 Object.keys(config)) {
      c.push(client);
      n.push(config[client]);
      t.push(new WLEDClient(client));
    }
    setClients(c);
    setConnections(t);
    setNames(n);
  }, []);

  const handleDefaults = async (payload) => {
    if (payload?.clients) {
      Notification({
        type: "loading",
        title: "Default presets installing",
        description: `Sending data to ${payload?.clients?.join(", ")}`
      });
      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(defaults)) {
            if (n && defaults?.[n]) {
              await wled.savePreset(n, defaults?.[n]);
            }
          }
          await wled.reinit();
        }
        Notification({
          type: "success",
          title: "Default presets installed",
          description: `Default presets installed on ${payload?.clients?.join(
            ", "
          )}`
        });
      }
    }
  };

  const handleCopy = async (payload) => {
    if (payload?.clients && payload?.value) {
      Notification({
        type: "loading",
        title: "Copying presets",
        description: `Sending data to ${payload?.clients?.join(", ")}`
      });
      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();
        }
      }
      Notification({
        type: "success",
        title: "Presets copied",
        description: `Presets ${Object.keys(payload?.value)?.join(
          ", "
        )} copied to ${payload?.clients?.join(", ")}`
      });
    }
  };

  const handleDelete = async (payload) => {
    if (payload?.clients && payload?.value) {
      Notification({
        type: "loading",
        title: "Deleting presets",
        description: `Sending delete requests to ${payload?.clients?.join(
          ", "
        )}`
      });
      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();
        }
      }
      Notification({
        type: "success",
        title: "Deleted presets",
        description: `Presets ${Object.keys(payload?.value)?.join(
          ", "
        )} deleted from ${payload?.clients?.join(", ")}`
      });
    }
  };

  const handleSync = async (payload) => {
    if (payload?.clients) {
      Notification({
        type: "loading",
        title: "Sync update",
        description: `Sending sync updates to ${payload?.clients?.join(", ")}`
      });
      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();
        }
      }
      Notification({
        type: "success",
        title: `Sync ${payload?.value}`,
        description: `Sync ${payload?.value} on ${payload?.clients?.join(", ")}`
      });
    }
  };

  const handlePower = async (payload) => {
    if (payload?.clients && payload?.value) {
      Notification({
        type: "loading",
        title: "Power updates",
        description: `Sending power updates to ${payload?.clients?.join(", ")}`
      });
      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;
          }
        }
      }
      Notification({
        type: "success",
        title: `Power ${payload?.value}`,
        description: `Power ${payload?.value} run on ${payload?.clients?.join(
          ", "
        )}`
      });
    }
  };

  const handleBrightness = async (payload) => {
    if (payload?.clients && payload?.value) {
      Notification({
        type: "loading",
        title: "Adjusting brightness",
        description: `Adjusting brightness on ${payload?.clients?.join(", ")}`
      });
      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();
        }
      }
      Notification({
        type: "success",
        title: `Brightness set`,
        description: `Brightness set to ${
          payload?.value
        } on ${payload?.clients?.join(", ")}`
      });
    }
  };
  const debounceHandleBrightness = debounce(handleBrightness, 500);

  const handlePreset = async (payload) => {
    if (payload?.clients && payload?.value) {
      Notification({
        type: "loading",
        title: "Setting preset",
        description: `Setting preset on ${payload?.clients?.join(", ")}`
      });
      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();
        }
      }
      Notification({
        type: "success",
        title: `Preset set`,
        description: `Preset set to ${
          payload?.value
        } on ${payload?.clients?.join(", ")}`
      });
    }
  };

  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}
              onDefaults={handleDefaults}
            />
          ))}
        </Collapse>
      )) || <Loader size="lg" />}
    </Layout>
  );

  return;
}