WIP updates

src/components/Dialog/ImportDialog.tsx

@@ -0,0 +1,126 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { fromByteArray } from "base64-js";
+import { toast } from "react-hot-toast";
+import { QRCode } from "react-qrcode-logo";
+
+import { Dialog } from "@headlessui/react";
+import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+import { Checkbox } from "../form/Checkbox.js";
+import { Input } from "../form/Input.js";
+import { IconButton } from "../IconButton.js";
+
+export interface ImportDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  loraConfig?: Protobuf.Config_LoRaConfig;
+  channels: Protobuf.Channel[];
+}
+
+export const ImportDialog = ({
+  isOpen,
+  close,
+  loraConfig,
+  channels
+}: ImportDialogProps): JSX.Element => {
+  const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
+  const [QRCodeURL, setQRCodeURL] = useState<string>("");
+
+  useEffect(() => {
+    const channelsToEncode = channels
+      .filter((channel) => selectedChannels.includes(channel.index))
+      .map((channel) => channel.settings)
+      .filter((ch): ch is Protobuf.ChannelSettings => !!ch);
+    const encoded = Protobuf.ChannelSet.toBinary({
+      loraConfig,
+      settings: channelsToEncode
+    });
+    const base64 = fromByteArray(encoded)
+      .replace(/=/g, "")
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_");
+
+    setQRCodeURL(`https://meshtastic.org/e/#${base64}`);
+  }, [channels, selectedChannels, loraConfig]);
+
+  return (
+    <Dialog open={isOpen} onClose={close}>
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel>
+          <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
+            <div className="flex px-4 py-5 sm:px-6">
+              <div>
+                <h1 className="text-lg font-bold">Generate QR Code</h1>
+                <h5 className="text-sm text-slate-600">
+                  The current LoRa configuration will also be shared.
+                </h5>
+              </div>
+              <IconButton
+                onClick={close}
+                className="my-auto ml-auto"
+                size="sm"
+                variant="secondary"
+                icon={<XMarkIcon className="h-4" />}
+              />
+            </div>
+            <div className="flex gap-3 px-4 py-5 sm:p-6">
+              <div className="flex w-40 flex-col gap-1">
+                {channels.map((channel) => (
+                  <Checkbox
+                    key={channel.index}
+                    disabled={
+                      channel.index === 0 ||
+                      channel.role === Protobuf.Channel_Role.DISABLED
+                    }
+                    label={
+                      channel.settings?.name.length
+                        ? channel.settings.name
+                        : channel.role === Protobuf.Channel_Role.PRIMARY
+                        ? "Primary"
+                        : `Channel: ${channel.index}`
+                    }
+                    checked={selectedChannels.includes(channel.index)}
+                    onChange={() => {
+                      if (selectedChannels.includes(channel.index)) {
+                        setSelectedChannels(
+                          selectedChannels.filter((c) => c !== channel.index)
+                        );
+                      } else {
+                        setSelectedChannels([
+                          ...selectedChannels,
+                          channel.index
+                        ]);
+                      }
+                    }}
+                  />
+                ))}
+              </div>
+              <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
+            </div>
+
+            <div className="px-4 py-4 sm:px-6">
+              <Input
+                label="Sharable URL"
+                value={QRCodeURL}
+                disabled
+                action={{
+                  icon: <ClipboardIcon className="h-4" />,
+                  action() {
+                    void navigator.clipboard.writeText(QRCodeURL);
+                    toast.success("Copied URL to Clipboard");
+                  }
+                }}
+              />
+            </div>
+
+            {/* </Card> */}
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+};

src/components/Dialog/QRDialog.tsx

@@ -24,7 +24,7 @@ export const QRDialog = ({
   isOpen,
   close,
   loraConfig,
-  channels,
+  channels
 }: QRDialogProps): JSX.Element => {
   const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
@@ -37,7 +37,7 @@ export const QRDialog = ({
     const encoded = Protobuf.ChannelSet.toBinary(
       Protobuf.ChannelSet.create({
         loraConfig,
-        settings: channelsToEncode,
+        settings: channelsToEncode
       })
     );
     const base64 = fromByteArray(encoded)
@@ -94,7 +94,7 @@ export const QRDialog = ({
                       } else {
                         setSelectedChannels([
                           ...selectedChannels,
-                          channel.index,
+                          channel.index
                         ]);
                       }
                     }}
@@ -114,7 +114,7 @@ export const QRDialog = ({
                   action() {
                     void navigator.clipboard.writeText(QRCodeURL);
                     toast.success("Copied URL to Clipboard");
-                  },
+                  }
                 }}
               />
             </div>