hawkband-wled-client/components/Management.js

import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import {
  Button,
  Col,
  Collapse,
  Icon,
  Menu,
  Modal,
  PopConfirm,
  Row,
  ScrollIndicator,
  Slider,
  SplitButton,
  Transfer
} from "tiny-ui";
import WLED from "./WLED.js";

const { Panel } = Collapse;

const to255 = (v) => Math.ceil((v / 100) * 255);
const from255 = (v) => Math.ceil((v / 255) * 100);
const download = (filename, data, type = "application/json") => {
  const blob = new Blob([data], { type: type });
  const href = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = href;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const StyledRow = styled((props) => <Row {...props} />)`
  margin: 0.25rem 0.5rem;
  & .action {
    text-align: right;
    & .ty-icon {
      margin-right: 1rem;
    }
  }
`;

const StyledMenu = styled((props) => <Menu {...props} />)`
  & .ty-icon {
    margin-right: 1rem;
  }
`;

const ScrollingDiv = (props) => {
  const targetRef = useRef(null);
  return (
    <>
      <ScrollIndicator fixed={false} target={() => targetRef?.current} />
      <div
        ref={targetRef}
        style={{ overflowY: "scroll", height: 200 }}
        {...props}
      />
    </>
  );
};

const UploadModal = ({ data, client, onConfirm, ...rest }) => {
  const [payload, setPayload] = useState({});

  useEffect(() => {
    if (data) setPayload({ ...data });
  }, [data]);

  const handleConfirm = (_) => {
    onConfirm(payload);
  };

  const handleChange = (e) => {
    const fileReader = new FileReader();
    fileReader.readAsText(e?.target?.files?.[0], "UTF-8");
    fileReader.onload = (e) => {
      if (e?.target?.result) {
        console.log("payload", {
          ...payload,
          value: JSON.parse(e?.target?.result)
        });
        setPayload({ ...payload, value: JSON.parse(e?.target?.result) });
      }
    };
  };

  if (!data) return null;
  return (
    <Modal
      header="Upload preset"
      visible={true}
      onConfirm={handleConfirm}
      {...rest}
    >
      <h5>Are you sure you want to upload and override presets?</h5>
      {payload?.value ? (
        <ScrollingDiv>
          <pre>{JSON.stringify(payload?.value, null, 2)}</pre>
        </ScrollingDiv>
      ) : null}
      <input type="file" onChange={handleChange} />
    </Modal>
  );
};

const PurgeModal = ({ data, client, onConfirm, ...rest }) => {
  const [payload, setPayload] = useState({});

  useEffect(() => {
    if (data) setPayload({ ...data });
  }, [data]);

  const handleConfirm = (_) => {
    onConfirm(payload);
  };

  if (!data) return null;
  return (
    <Modal
      header="Delete preset"
      visible={true}
      onConfirm={handleConfirm}
      {...rest}
    >
      <h5>Are you sure you want to delete these presets?</h5>
      <ScrollingDiv>
        <pre>{JSON.stringify(data?.value, null, 2)}</pre>
      </ScrollingDiv>
    </Modal>
  );
};

const CopyModal = ({ data, client, clients, onConfirm, ...rest }) => {
  const [transfer, setTransfer] = useState({});
  const [payload, setPayload] = useState({});

  useEffect(() => {
    setPayload({ ...payload, value: data });
  }, [data]);

  useEffect(() => {
    if (clients)
      setTransfer(
        clients
          ?.filter((o) => o !== client)
          ?.map((o, i) => ({ key: o, label: o }))
      );
  }, [clients]);

  const handleConfirm = (_) => {
    onConfirm(payload);
  };

  if (!data) return null;
  return (
    <Modal
      header="Copy preset"
      visible={true}
      onConfirm={handleConfirm}
      {...rest}
    >
      <ScrollingDiv>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </ScrollingDiv>
      <Row>
        <Col>
          <Transfer
            dataSource={transfer}
            defaultValue={[]}
            onChange={(value) => {
              setPayload({ ...payload, clients: value });
            }}
          />
        </Col>
      </Row>
    </Modal>
  );
};

const InstanceManagement = ({
  client,
  presets,
  onCopy,
  onPreset,
  onDelete
}) => {
  if (!presets) return null;
  return Object.keys(presets)?.map((o, i) => (
    <StyledRow key={i}>
      <Col span={16}>{presets[o]?.name || ""}</Col>
      <Col span={8} className="action">
        <SplitButton
          btnType="primary"
          title="Apply"
          overlay={
            <StyledMenu>
              <Menu.Item
                onClick={(e) => {
                  download(
                    `preset_${o}.json`,
                    JSON.stringify(presets[o], null, 2)
                  );
                }}
              >
                <Icon name="download" />
                Save
              </Menu.Item>
              <Menu.Item
                onClick={(e) => {
                  onCopy({ [o]: presets[o] });
                }}
              >
                <Icon name="inspection" />
                Copy
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item
                onClick={(e) => onDelete({ clients: [client], value: [o] })}
              >
                <Icon name="trash" />
                Delete
              </Menu.Item>
            </StyledMenu>
          }
          onClick={(e) => {
            onPreset({ clients: [client], value: o });
          }}
        >
          <Icon name="checkmark" />
        </SplitButton>
      </Col>
    </StyledRow>
  ));
};

const StateMangement = ({
  client,
  setPurge,
  setUpload,
  setCopy,
  onPower,
  onSync,
  onBrightness,
  onPreset,
  onDefaults,
  current,
  ...props
}) => {
  if (!current) return null;
  return (
    <Row>
      <Col span={12}>
        <Button
          btnType={current?.on ? "primary" : "outline"}
          icon={<Icon name="switch" />}
          title={`Lights ${current?.on ? "on" : "off"}`}
          round
          onClick={() =>
            onPower({ clients: [client], value: current?.on ? "off" : "on" })
          }
        />
        {current?.udpSync?.send ? (
          <Button
            onClick={() => onSync({ clients: [client], value: "disable" })}
            title="Disable sync"
            icon={<Icon name="broadcast" />}
            btnType="primary"
            round
          />
        ) : (
          <Button
            onClick={() => onSync({ clients: [client], value: "enable" })}
            btnType="outline"
            title="Enable sync"
            icon={<Icon name="broadcast" />}
            round
          />
        )}

        <PopConfirm
          title="Are you sure you want to reboot?"
          onConfirm={() => onPower({ clients: [client], value: "reboot" })}
        >
          <Button
            title="Reboot"
            icon={<Icon name="loader" />}
            btnType="danger"
            round
          />
        </PopConfirm>
      </Col>
      <Col span={12} style={{ textAlign: "right" }}>
        <Button.Group round>
          <Button
            btnType="secondary"
            icon={<Icon name="arrow-left" />}
            title="Previous preset"
            round
            onClick={() => {
              onPreset({ clients: [client], value: 249 });
            }}
          />
          <Button
            btnType="secondary"
            icon={<Icon name="arrow-right" />}
            title="Next preset"
            round
            onClick={() => {
              onPreset({ clients: [client], value: 250 });
            }}
          />
        </Button.Group>
        <SplitButton
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            window.open(`http://${client}`);
          }}
          overlay={
            <StyledMenu>
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  window.open(`http://${client}`);
                }}
              >
                <Icon name="eye" />
                Open
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  download(
                    `presets.json`,
                    JSON.stringify(props?.presets, null, 2)
                  );
                }}
              >
                <Icon name="download" />
                Download
              </Menu.Item>
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setUpload({ clients: [client] });
                }}
              >
                <Icon name="upload" />
                Upload
              </Menu.Item>
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  onDefaults({ clients: [client] });
                }}
              >
                <Icon name="branch" />
                Defaults
              </Menu.Item>
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setCopy(props?.presets);
                }}
              >
                <Icon name="inspection" />
                Copy
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setPurge({
                    clients: [client],
                    value: Object.keys(props?.presets)
                  });
                }}
              >
                <Icon name="trash" />
                Delete
              </Menu.Item>
            </StyledMenu>
          }
          round
        >
          <Icon name="setting" />
        </SplitButton>
      </Col>
      <Col>
        <Slider
          defaultValue={from255(current?.brightness)}
          onChange={(v) => {
            onBrightness({ clients: [client], value: to255(v) });
          }}
        />
      </Col>
    </Row>
  );
};

const Management = ({
  key,
  itemKey,
  clientName,
  onCopy,
  onDelete,
  onSync,
  ...props
}) => {
  const [copy, setCopy] = useState(null);
  const [purge, setPurge] = useState(null);
  const [upload, setUpload] = useState(null);
  return (
    <Panel
      key={key}
      itemKey={itemKey}
      header={
        <>
          {clientName} ({props?.client})
        </>
      }
    >
      <StateMangement
        setPurge={setPurge}
        setCopy={setCopy}
        setUpload={setUpload}
        onSync={onSync}
        {...props}
      />
      <InstanceManagement
        {...props}
        onDelete={(e) => {
          setPurge(e);
        }}
        onCopy={(e) => {
          setCopy(e);
        }}
      />
      <CopyModal
        data={copy}
        onConfirm={(e) => {
          onCopy(e);
          setCopy(null);
        }}
        onCancel={(e) => setCopy(null)}
        {...props}
      />
      <PurgeModal
        data={purge}
        onConfirm={(e) => {
          onDelete(e);
          setPurge(null);
        }}
        onCancel={(e) => setPurge(null)}
        {...props}
      />
      <UploadModal
        data={upload}
        onConfirm={(e) => {
          onCopy(e);
          setUpload(null);
        }}
        onCancel={(e) => setUpload(null)}
        {...props}
      />
    </Panel>
  );
};

export default WLED(Management);