Adds a qr scanner

Makefile

@@ -0,0 +1,10 @@
+check lint:
+	cargo clippy 
+
+fix:
+	cargo clippy --fix --allow-dirty
+
+fmt:
+	cargo +nightly fmt
+
+

leptos/Cargo.toml

@@ -7,6 +7,7 @@ edition = "2024"
 codee = { version = "0.3.0", features = ["json_serde"] }
 console_error_panic_hook = "0.1.7"
 leptos = { version = "0.7.7", features = ["csr", "nightly", "tracing"] }
+leptos-qr-scanner = { git = "https://github.com/dilawar/leptos-qr-scanner" }
 leptos-use = { version = "0.15.7", features = ["storage", "docs" ] }
 leptos_meta = "0.7.7"
 leptos_router = { version = "0.7.7", features = ["tracing"] }

leptos/app.css

@@ -32,3 +32,9 @@ main {
   justify-content: center;
   align-items: center;
 }
+
+.qrscanner-372e0a1 {
+  width: 100%;
+  min-height: 400px;
+  border: 1px dotted gray;
+}

leptos/src/_app.module.scss

@@ -32,3 +32,9 @@ main {
   justify-content: center;
   align-items: center;
 }
+
+.qrscanner {
+  width: 100%;
+  min-height: 400px;
+  border: 1px dotted gray;
+}

leptos/src/app.rs

@@ -4,8 +4,8 @@ use leptos_router::path;
 use reactive_stores::Store;
 use thaw::*;
 
+use crate::components::*;
 use crate::css::styles;
-use crate::components::{home, login};
 use crate::storage::{GlobalState, GlobalStateStoreFields};
 
 #[component]
@@ -25,13 +25,15 @@ pub fn App() -> impl IntoView {
                 <nav class=styles::nav>
                     <a href="/">"Home"</a>
                     <a href="/form">"Form"</a>
+                    <a href="/qr">"QR Scanner"</a>
                     <Show when=move || { logged_in.get() }>
                         <login::Logout />
                     </Show>
                 </nav>
                 <main>
-                    <Routes fallback=|| "not found.">
-                        <Route path=path!("/") view=home::Home />
+                    <Routes fallback=|| "Page not found.">
+                        <Route path=path!("/") view=Home />
+                        <Route path=path!("/qr") view=QrScanner />
                     </Routes>
                 </main>
                 <div class=styles::loading>

leptos/src/components/home.rs

@@ -1,7 +1,7 @@
 use leptos::prelude::*;
 use reactive_stores::Store;
 
-use crate::components::login::{Login};
+use crate::components::login::Login;
 use crate::storage::{GlobalState, GlobalStateStoreFields};
 
 #[component]

leptos/src/components/login.rs

@@ -1,6 +1,5 @@
 // use codee::string::JsonSerdeCodec;
 use leptos::prelude::*;
-// use leptos_use::storage::use_local_storage;
 use reactive_stores::Store;
 use thaw::*;
 

leptos/src/components/mod.rs

@@ -1,2 +1,10 @@
+#![allow(unused_imports)]
+
 pub(crate) mod home;
+pub use home::*;
+
 pub(crate) mod login;
+pub use login::*;
+
+pub(crate) mod qr;
+pub use qr::*;

leptos/src/components/qr.rs

@@ -0,0 +1,41 @@
+//! QrCode related components.
+
+use leptos::prelude::*;
+use leptos_qr_scanner::Scan;
+use reactive_stores::Store;
+use thaw::*;
+
+use crate::css::styles;
+use crate::storage::{GlobalState, GlobalStateStoreFields};
+
+#[component]
+pub fn QrScanner() -> impl IntoView {
+    let scan = RwSignal::new(true);
+    let multiple = RwSignal::new(true);
+
+    let result = RwSignal::new(vec![]);
+
+    view! {
+        <Scan
+            active=scan
+            on_scan=move |a| {
+                tracing::info!("Found: {}", &a);
+                if ! multiple.get_untracked() {
+                    result.set(vec![a]);
+                } else {
+                    let vals = result.read_untracked();
+                    if ! vals.contains(&a) {
+                        result.write().push(a)
+                    }
+                }
+            }
+            class=""
+            video_class=styles::qrscanner
+        />
+
+        <Checkbox checked=scan label="Scan" />
+        <Checkbox checked=multiple label="Multiple" />
+
+        <p>Scan result: {result}</p>
+    }
+}