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

added toggle to edit query string

Browse Source
This commit is contained in:
Hunter Thornsberry
2024-06-08 16:25:09 -04:00
parent b445209fc2
commit 9c3ef55727
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dialog/QRDialog.tsx
+13 -13
View File
@@ -12,7 +12,7 @@ import { Input } from "@components/UI/Input.js";
import { Label } from "@components/UI/Label.js";
import { Protobuf, Types } from "@meshtastic/js";
import { fromByteArray } from "base64-js";
import { ClipboardIcon, ReplaceIcon } from "lucide-react";
import { ClipboardIcon, PlusIcon, ReplaceIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { QRCode } from "react-qrcode-logo";
import { DynamicForm } from "../Form/DynamicForm";
@@ -36,17 +36,10 @@ export const QRDialog = ({
}: QRDialogProps): JSX.Element => {
const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
const allChannels = Array.from(channels.values());
const { register, handleSubmit, control } = useForm<{
replace: boolean;
}>({
defaultValues: {
replace: true,
},
});
useEffect(() => {
const channelsToEncode = allChannels
.filter((ch) => selectedChannels.includes(ch.index))
@@ -63,8 +56,9 @@ export const QRDialog = ({
.replace(/\+/g, "-")
.replace(/\//g, "_");
setQrCodeUrl(`https://meshtastic.org/e/#${base64}`);
}, [channels, selectedChannels, loraConfig]);
console.log("here ran");
setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
}, [channels, selectedChannels, qrCodeAdd, loraConfig]);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -110,11 +104,17 @@ export const QRDialog = ({
</div>
<div className="flex justify-center">
<button
type="button" className="border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4">
type="button"
className={ qrCodeAdd ? "border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4" : "border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-green-600 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4" }
onClick={() => setQrCodeAdd(true)}
>
Add Channels
</button>
<button
type="button" className="border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-slate-400 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4">
type="button"
className={ !qrCodeAdd ? "border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4" : "border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-green-600 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4" }
onClick={() => setQrCodeAdd(false)}
>
Replace Channels
</button>
</div>