init

rewrite of cdb_ui in dioxus rust. goal is to integrate into a single rust codebase

src/page/consume.rs

@@ -0,0 +1,121 @@
+use dioxus::prelude::*;
+
+use crate::api;
+
+#[component]
+pub fn ConsumePage(id: String, item: String, variant: String) -> Element {
+    println!("{item} {variant}");
+    let (item, variant) = (use_signal(|| item.clone()), use_signal(|| variant.clone()));
+    let destinations = use_resource(move || async move {
+        api::API::get_unique_field(item(), variant(), "destination".to_string()).await
+    });
+
+    let dest = use_signal(|| String::new());
+    let mut price = use_signal(|| 0.00);
+
+    rsx! {
+
+        p { "Item: {item}"},
+        p { "Variant: {variant}"}
+
+        // TODO : destination
+        PredefinedSelector {
+            name: "Destination",
+            value: dest,
+            predefined: destinations
+         }
+
+    label {
+            "Price: ",
+            input {
+                r#type: "number",
+                value: "{price}",
+                oninput: move |e| price.set(e.value().parse().unwrap())
+            }
+        },
+
+        button {
+            onclick: move |_| {
+                let id2 = id.clone();
+                spawn(async move {
+                    api::API::consume_item(id2, dest(), price()).await;
+                    navigator().go_back();
+                });
+                },
+            "Consume"
+        }
+    }
+}
+
+#[component]
+pub fn PredefinedSelector(
+    name: String,
+    value: Signal<String>,
+    predefined: Resource<Vec<String>>,
+) -> Element {
+    let mut screen_visible = use_signal(|| false);
+    let mut input_value = use_signal(|| value.read().clone());
+
+    rsx! {
+        div {
+            class: "p-2",
+            button {
+                class: "cursor-pointer underline text-blue-600",
+                onclick: move |_| screen_visible.set(true),
+                "{name}: {value}"
+            }
+        }
+
+            if *screen_visible.read() {
+                div {
+                    class: "fixed inset-0 z-40 flex flex-col p-4 space-y-4 text-white",
+                    style: "background-color: #0f1116;",
+
+                    h2 { class: "text-xl font-bold", "Select a value for {name}" }
+
+                    input {
+                        class: "border p-2 text-lg",
+                        r#type: "text",
+                        value: "{input_value}",
+                        oninput: move |evt| input_value.set(evt.value().clone()),
+                    }
+
+                    div {
+                        class: "flex flex-wrap gap-2",
+                        match &*predefined.read() {
+                            Some(list) => rsx ! { {list.iter().map(|item| rsx! {
+                                button {
+                                    class: "bg-gray-200 px-3 py-1 rounded hover:bg-gray-300",
+                                    onclick: {
+                                        let item = item.clone();
+                                        move |_| {
+                                            value.set(item.clone());
+                                            input_value.set(item.clone());
+                                            screen_visible.set(false);
+                                        }
+                                    },
+                                    "{item}"
+                                }
+                            })}},
+                            None => rsx!(p { "Loading..." }),
+                        }
+                    }
+
+                    button {
+                        class: "mt-auto bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600",
+                        onclick: move |_| {
+                            value.set(input_value.read().clone());
+                            screen_visible.set(false);
+                        },
+                        "Confirm"
+                    }
+
+                    button {
+                        class: "text-gray-500 underline",
+                        onclick: move |_| screen_visible.set(false),
+                        "Cancel"
+                    }
+                }
+            }
+    }
+}