116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { fromByteArray } from "base64-js";
|
|
import { QRCode } from "react-qrcode-logo";
|
|
import { Checkbox } from "@components/UI/Checkbox.js";
|
|
import { Input } from "@components/UI/Input.js";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle
|
|
} from "@components/UI/Dialog.js";
|
|
import { ClipboardIcon } from "lucide-react";
|
|
import { Protobuf, Types } from "@meshtastic/meshtasticjs";
|
|
import { Label } from "@components/UI/Label.js";
|
|
|
|
export interface QRDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
loraConfig?: Protobuf.Config_LoRaConfig;
|
|
channels: Map<Types.ChannelNumber, Protobuf.Channel>;
|
|
}
|
|
|
|
export const QRDialog = ({
|
|
open,
|
|
onOpenChange,
|
|
loraConfig,
|
|
channels
|
|
}: QRDialogProps): JSX.Element => {
|
|
const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
|
|
const [QRCodeURL, setQRCodeURL] = useState<string>("");
|
|
|
|
const filteredChannels = Array.from(channels.values()).filter((channel) =>
|
|
selectedChannels.includes(channel.index)
|
|
);
|
|
|
|
useEffect(() => {
|
|
const channelsToEncode = filteredChannels
|
|
.map((channel) => channel.settings)
|
|
.filter((ch): ch is Protobuf.ChannelSettings => !!ch);
|
|
const encoded = new Protobuf.ChannelSet(
|
|
new Protobuf.ChannelSet({
|
|
loraConfig,
|
|
settings: channelsToEncode
|
|
})
|
|
);
|
|
const base64 = fromByteArray(encoded.toBinary())
|
|
.replace(/=/g, "")
|
|
.replace(/\+/g, "-")
|
|
.replace(/\//g, "_");
|
|
|
|
setQRCodeURL(`https://meshtastic.org/e/#${base64}`);
|
|
}, [channels, selectedChannels, loraConfig]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Generate QR Code</DialogTitle>
|
|
<DialogDescription>
|
|
The current LoRa configuration will also be shared.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="flex gap-3 px-4 py-5 sm:p-6">
|
|
<div className="flex w-40 flex-col gap-1">
|
|
{filteredChannels.map((channel) => (
|
|
<div key={channel.index}>
|
|
<Label>
|
|
{channel.settings?.name.length
|
|
? channel.settings.name
|
|
: channel.role === Protobuf.Channel_Role.PRIMARY
|
|
? "Primary"
|
|
: `Channel: ${channel.index}`}
|
|
</Label>
|
|
<Checkbox
|
|
key={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>
|
|
))}
|
|
</div>
|
|
<QRCode value={QRCodeURL} size={200} qrStyle="dots" />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Label>Sharable URL</Label>
|
|
<Input
|
|
value={QRCodeURL}
|
|
disabled
|
|
action={{
|
|
icon: ClipboardIcon,
|
|
onClick() {
|
|
void navigator.clipboard.writeText(QRCodeURL);
|
|
}
|
|
}}
|
|
/>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|