hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve QR dialog

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-09-22 23:32:19 +10:00
parent 781d782a70
commit 95f9a826b4
1 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dialog/QRDialog.tsx
+56 -50
View File
@@ -1,5 +1,5 @@
import type React from "react";
import { useEffect, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import { fromByteArray } from "base64-js";
import { QRCode } from "react-qrcode-logo";
@@ -8,6 +8,7 @@ import { Dialog } from "@headlessui/react";
import { ClipboardIcon } from "@heroicons/react/24/outline";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { Card } from "../Card.js";
import { Checkbox } from "../form/Checkbox.js";
import { Input } from "../form/Input.js";
@@ -50,60 +51,65 @@ export const QRDialog = ({
<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 className="mx-auto max-w-sm rounded bg-white p-3">
<Dialog.Title>Generate QR Code</Dialog.Title>
<Dialog.Description>
This will permanently deactivate your account
</Dialog.Description>
<div className="flex">
<div className="flex flex-col">
<span className="text-lg font-medium">Channels to include</span>
<span className="text-sm text-slate-600">
The current LoRa configuration will also be shared.
<Dialog.Panel as={Fragment}>
<Card className="max-w-md flex-col">
<div className="flex h-8 bg-slate-100">
<span className="m-auto text-lg font-medium">
Generate QR Code
</span>
{channels.map((channel) => (
<Checkbox
key={channel.index}
disabled={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>
<div className="flex gap-2 p-2">
<div className="flex flex-col">
<span className="text-lg font-medium">Channels to include</span>
<span className="text-sm text-slate-600">
The current LoRa configuration will also be shared.
</span>
{channels.map((channel) => (
<Checkbox
key={channel.index}
disabled={channel.role === Protobuf.Channel_Role.DISABLED}
label={
channel.settings?.name.length
? channel.settings.name
: channel.role === Protobuf.Channel_Role.PRIMARY
? "Primary"
: `Channel: ${channel.index}`
}
}}
/>
))}
</div>
<div className="m-2 flex flex-grow flex-col">
<div className="m-auto flex">
<QRCode value={QRCodeURL} size={250} qrStyle="dots" />
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 className="flex gap-2">
<Input
label="Sharable URL"
value={QRCodeURL}
action={{
icon: <ClipboardIcon className="h-4" />,
action: () => {
console.log("");
},
}}
/>
<div className="flex flex-grow flex-col">
<div className="m-auto flex">
<QRCode value={QRCodeURL} size={200} qrStyle="dots" />
</div>
<div className="flex gap-2">
<Input
label="Sharable URL"
value={QRCodeURL}
action={{
icon: <ClipboardIcon className="h-4" />,
action: () => {
console.log("");
},
}}
/>
</div>
</div>
</div>
</div>
</Card>
</Dialog.Panel>
</div>
</Dialog>