feat(fe): Added QR codes

frontend/apps/Cargo.toml

@@ -101,6 +101,7 @@ const_format = "0.2.5"
 num-traits = "0.2"
 num-derive = "0.3"
 csv = "1.3"
+qrcode-generator = "4.1.9"
 web-sys = { version = "0.3.55", features = [
     'Url',
     'Request',

frontend/apps/crates/components/Cargo.toml

@@ -45,6 +45,7 @@ rgb = { workspace = true }
 regex = { workspace = true }
 num-traits = { workspace = true }
 num-derive = { workspace = true }
+qrcode-generator = { workspace = true }
 
 [features]
 quiet = ["utils/quiet"]
@@ -88,6 +89,7 @@ hebrew_buttons = []
 page_header = []
 page_footer = []
 pdf = []
+qr_dialog = []
 share_jig = []
 player_popup = []
 box_outline = []
@@ -135,6 +137,7 @@ all = [
     "page_header",
     "page_footer",
     "pdf",
+    "qr_dialog",
     "share_jig",
     "player_popup",
     "box_outline",

frontend/apps/crates/components/src/lib.rs

@@ -59,6 +59,8 @@ pub mod page_header;
 pub mod pdf;
 #[cfg(feature = "player_popup")]
 pub mod player_popup;
+#[cfg(feature = "qr_dialog")]
+pub mod qr_dialog;
 #[cfg(feature = "share_jig")]
 pub mod share_asset;
 #[cfg(feature = "stickers")]

frontend/apps/crates/components/src/qr_dialog/actions.rs

@@ -0,0 +1,11 @@
+use std::rc::Rc;
+
+use utils::js_wrappers::download_url;
+
+use super::QrDialog;
+
+impl QrDialog {
+    pub fn download(self: &Rc<Self>) {
+        download_url(&self.file_label, &self.url)
+    }
+}

frontend/apps/crates/components/src/qr_dialog/callbacks.rs

@@ -0,0 +1,11 @@
+pub struct QrDialogCallbacks {
+    pub on_close: Box<dyn Fn()>,
+}
+
+impl QrDialogCallbacks {
+    pub fn new(on_close: impl Fn() + 'static) -> Self {
+        Self {
+            on_close: Box::new(on_close),
+        }
+    }
+}

frontend/apps/crates/components/src/qr_dialog/dom.rs

@@ -0,0 +1,50 @@
+use std::rc::Rc;
+
+use dominator::{clone, DomBuilder, EventOptions};
+use utils::{component::Component, dialog, events};
+use web_sys::ShadowRoot;
+
+use super::QrDialog;
+
+impl Component<QrDialog> for Rc<QrDialog> {
+    fn styles() -> &'static str {
+        include_str!("./styles.css")
+    }
+
+    fn dom(&self, dom: DomBuilder<ShadowRoot>) -> DomBuilder<ShadowRoot> {
+        let state = self;
+        dom.child(dialog! {
+            .class("qr-dialog")
+            .event_with_options(&EventOptions::bubbles(), clone!(state => move |e: events::Click| {
+                e.stop_propagation();
+                (state.callbacks.on_close)();
+            }))
+            .child(html!("div", {
+                .class("body")
+                .event_with_options(&EventOptions::bubbles(), |e: events::Click| {
+                    e.stop_propagation();
+                })
+                .child(html!("fa-button", {
+                    .class("close")
+                    .prop("icon", "fa-regular fa-xmark")
+                    .event(clone!(state => move |_: events::Click| {
+                        (state.callbacks.on_close)();
+                    }))
+                }))
+                .child(html!("img", {
+                    .style("max-height", "5cm")
+                    .style("max-width", "5cm")
+                    .prop("src", &state.url)
+                }))
+                .child(html!("fa-button", {
+                    .class("download")
+                    .prop("icon", "fa-solid fa-square-down")
+                    .prop("title", "Download")
+                    .event(clone!(state => move |_: events::Click| {
+                        state.download();
+                    }))
+                }))
+            }))
+        })
+    }
+}

frontend/apps/crates/components/src/qr_dialog/mod.rs

@@ -0,0 +1,8 @@
+mod actions;
+mod callbacks;
+mod dom;
+mod state;
+
+pub use callbacks::*;
+pub use dom::*;
+pub use state::*;

frontend/apps/crates/components/src/qr_dialog/state.rs

@@ -0,0 +1,45 @@
+use std::rc::Rc;
+
+use qrcode_generator::QrCodeEcc;
+use utils::{routes::Route, unwrap::UnwrapJiExt};
+use wasm_bindgen::JsValue;
+
+use super::QrDialogCallbacks;
+
+pub struct QrDialog {
+    pub url: String,
+    pub file_label: String,
+    pub callbacks: QrDialogCallbacks,
+}
+
+impl QrDialog {
+    pub fn new(route: Route, file_label: String, callbacks: QrDialogCallbacks) -> Rc<Self> {
+        let url = qr_core_file_from_route(route);
+        Rc::new(Self {
+            url,
+            file_label,
+            callbacks,
+        })
+    }
+}
+
+fn file_to_object_url(filetype: &str, data: &str) -> String {
+    let data = JsValue::from_str(data);
+    let blob = web_sys::Blob::new_with_str_sequence_and_options(
+        &js_sys::Array::from_iter(vec![data]),
+        web_sys::BlobPropertyBag::new().type_(filetype),
+    )
+    .unwrap_ji();
+    let url = web_sys::Url::create_object_url_with_blob(&blob).unwrap_ji();
+    url
+}
+
+pub fn qr_core_file_from_route(route: Route) -> String {
+    let result: String =
+        qrcode_generator::to_svg_to_string(route.to_string(), QrCodeEcc::High, 200, None::<&str>)
+            .unwrap();
+
+    let url = file_to_object_url("image/svg+xml", &result);
+
+    url
+}