hawkband-wled-client/app/page.js

"use client";

import { useEffect, useState } from "react";
import { Col, Loader, Row } from "tiny-ui";
import { WLEDClient } from "wled-client";

import { Automation, Layout, Notification } from "components";

import automation from "data/automation.json";
import config from "data/config.json";
import presets 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 handleSync = 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 "enable":
              await wled.enableUDPSync({ send: true, receive: false });
              break;
            case "disable":
              await wled.disableUDPSync();
              break;
          }
        }
      }
      Notification({
        title: `Sync ${payload?.value}`,
        description: `Sync ${
          payload?.value
        } complete for ${payload?.clients?.join(", ")}`
      });
    }
  };

  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();
              break;
            case "off":
              await wled.turnOff();
              break;
          }
        }
      }
      Notification({
        title: `Power ${payload?.value}`,
        description: `Power ${
          payload?.value
        } complete for ${payload?.clients?.join(", ")}`
      });
    }
  };

  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);
        }
      }
      Notification({
        title: `Preset set`,
        description: `Preset ${payload?.value} set on ${payload?.clients?.join(
          ", "
        )}`
      });
    }
  };

  return (
    <Layout page="home">
      <Row style={{ backgroundColor: "#fff" }}>
        <Col style={{ margin: "2rem" }}>
          {(connections && clients && (
            <Automation
              clients={clients}
              connections={connections}
              names={names}
              presets={presets}
              automation={automation}
              onPreset={handlePreset}
              onSync={handleSync}
              onPower={handlePower}
            />
          )) || <Loader size="lg" />}
        </Col>
      </Row>
    </Layout>
  );

  return;
}