From dbcbec8c085922a774984b71884a016996bb8cfb Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 10:51:50 -0400 Subject: [PATCH 1/9] add basic button, using this mainly for testing ux --- src/components/Dialog/QRDialog.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index 9a94e073..265a98de 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -1,3 +1,4 @@ +import { Field } from "@bufbuild/protobuf"; import { Checkbox } from "@components/UI/Checkbox.js"; import { Dialog, @@ -11,9 +12,12 @@ 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 } from "lucide-react"; +import { ClipboardIcon, ReplaceIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { QRCode } from "react-qrcode-logo"; +import { DynamicForm } from "../Form/DynamicForm"; +import { ToggleFieldProps, ToggleInput } from "../Form/FormToggle"; +import { Button } from "../UI/Button"; export interface QRDialogProps { open: boolean; @@ -33,6 +37,10 @@ export const QRDialog = ({ const allChannels = Array.from(channels.values()); + const onSubmit = () => { + console.log("ran"); + }; + useEffect(() => { const channelsToEncode = allChannels .filter((ch) => selectedChannels.includes(ch.index)) @@ -94,6 +102,12 @@ export const QRDialog = ({ +
+ +
From b445209fc2627251aa078d2692d1d53a8718db59 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 11:31:40 -0400 Subject: [PATCH 2/9] mocked ui --- src/components/Dialog/QRDialog.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index 265a98de..38d72895 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -18,6 +18,8 @@ import { QRCode } from "react-qrcode-logo"; import { DynamicForm } from "../Form/DynamicForm"; import { ToggleFieldProps, ToggleInput } from "../Form/FormToggle"; import { Button } from "../UI/Button"; +import { Switch } from "@components/UI/Switch.js"; +import { Controller, useForm, useWatch } from "react-hook-form"; export interface QRDialogProps { open: boolean; @@ -37,9 +39,13 @@ export const QRDialog = ({ const allChannels = Array.from(channels.values()); - const onSubmit = () => { - console.log("ran"); - }; + const { register, handleSubmit, control } = useForm<{ + replace: boolean; + }>({ + defaultValues: { + replace: true, + }, + }); useEffect(() => { const channelsToEncode = allChannels @@ -104,7 +110,11 @@ export const QRDialog = ({
+
From 9c3ef55727968cc1e37380d976b95c63b4593963 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 16:25:09 -0400 Subject: [PATCH 3/9] added toggle to edit query string --- src/components/Dialog/QRDialog.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index 38d72895..1fbc1b72 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -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([0]); const [qrCodeUrl, setQrCodeUrl] = useState(""); + const [qrCodeAdd, setQrCodeAdd] = useState(); 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 ( @@ -110,11 +104,17 @@ export const QRDialog = ({
From d4fe84eda93a3071a6f176dd20656199a3661184 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 16:27:23 -0400 Subject: [PATCH 4/9] cleanup --- src/components/Dialog/QRDialog.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index 1fbc1b72..ff5b197a 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -1,4 +1,3 @@ -import { Field } from "@bufbuild/protobuf"; import { Checkbox } from "@components/UI/Checkbox.js"; import { Dialog, @@ -12,14 +11,9 @@ 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, PlusIcon, ReplaceIcon } from "lucide-react"; +import { ClipboardIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { QRCode } from "react-qrcode-logo"; -import { DynamicForm } from "../Form/DynamicForm"; -import { ToggleFieldProps, ToggleInput } from "../Form/FormToggle"; -import { Button } from "../UI/Button"; -import { Switch } from "@components/UI/Switch.js"; -import { Controller, useForm, useWatch } from "react-hook-form"; export interface QRDialogProps { open: boolean; @@ -56,7 +50,6 @@ export const QRDialog = ({ .replace(/\+/g, "-") .replace(/\//g, "_"); - console.log("here ran"); setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`); }, [channels, selectedChannels, qrCodeAdd, loraConfig]); From 1bce73577c7f2932c0a0f23b83035ae9b7852d90 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 17:27:40 -0400 Subject: [PATCH 5/9] class cleanup --- src/components/Form/FormInput.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx index 74cea240..0dd7f711 100644 --- a/src/components/Form/FormInput.tsx +++ b/src/components/Form/FormInput.tsx @@ -12,6 +12,8 @@ export interface InputFieldProps extends BaseFormBuilderProps { prefix?: string; suffix?: string; step?: number; + min?: number; + max?: number; action?: { icon: LucideIcon; onClick: () => void; From 6905d92fad7a25eb32da86c8bc2336a21194fba3 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 8 Jun 2024 17:29:14 -0400 Subject: [PATCH 6/9] undo bad previous commit and add correct stuff :( --- src/components/Dialog/QRDialog.tsx | 4 ++-- src/components/Form/FormInput.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index ff5b197a..c7050b66 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -98,14 +98,14 @@ export const QRDialog = ({