Support API in frontend

2026-04-01 11:35:47 +08:00
parent c8065caf1f
commit 743fe69f99
9 changed files with 464 additions and 23 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 target
+dist
--- a/frontend/Cargo.lock
+++ b/frontend/Cargo.lock
@@ -64,7 +64,15 @@ dependencies = [
 name = "frontend"
 version = "0.1.0"
 dependencies = [
+ "gloo-console 0.4.0",
+ "gloo-net 0.7.0",
+ "serde",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
 "yew",
+ "yew-router",
+ "yew_icons",
 ]

 [[package]]
@@ -162,16 +170,16 @@ version = "0.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
 dependencies = [
- "gloo-console",
+ "gloo-console 0.3.0",
 "gloo-dialogs",
 "gloo-events",
 "gloo-file",
 "gloo-history",
- "gloo-net",
+ "gloo-net 0.5.0",
 "gloo-render",
 "gloo-storage",
 "gloo-timers",
- "gloo-utils",
+ "gloo-utils 0.2.0",
 "gloo-worker",
 ]

@@ -181,7 +189,20 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
 dependencies = [
- "gloo-utils",
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f1d5cec0b97edb53f21221f799c659cef3764ad5a00eca52950eb9b902028ba"
+dependencies = [
+ "gloo-utils 0.3.0",
 "js-sys",
 "serde",
 "wasm-bindgen",
@@ -214,6 +235,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
 dependencies = [
+ "futures-channel",
 "gloo-events",
 "js-sys",
 "wasm-bindgen",
@@ -228,7 +250,7 @@ checksum = "903f432be5ba34427eac5e16048ef65604a82061fe93789f2212afc73d8617d6"
 dependencies = [
 "getrandom",
 "gloo-events",
- "gloo-utils",
+ "gloo-utils 0.2.0",
 "serde",
 "serde-wasm-bindgen",
 "serde_urlencoded",
@@ -246,8 +268,8 @@ dependencies = [
 "futures-channel",
 "futures-core",
 "futures-sink",
- "gloo-utils",
- "http",
+ "gloo-utils 0.2.0",
+ "http 0.2.12",
 "js-sys",
 "pin-project",
 "serde",
@@ -258,6 +280,27 @@ dependencies = [
 "web-sys",
 ]

+[[package]]
+name = "gloo-net"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a6420f887c48417e9e86c6cf61274eb231830cccc100e49613f7952e269a1fe1"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.3.0",
+ "http 1.4.0",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.18",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-render"
 version = "0.2.0"
@@ -274,7 +317,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
 dependencies = [
- "gloo-utils",
+ "gloo-utils 0.2.0",
 "js-sys",
 "serde",
 "serde_json",
@@ -289,6 +332,8 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
 dependencies = [
+ "futures-channel",
+ "futures-core",
 "js-sys",
 "wasm-bindgen",
 ]
@@ -306,6 +351,19 @@ dependencies = [
 "web-sys",
 ]

+[[package]]
+name = "gloo-utils"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4202275d95a142fa209a1e35e91c250a710c5600731372cd3464a39ed01573d6"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-worker"
 version = "0.5.0"
@@ -314,7 +372,7 @@ checksum = "085f262d7604911c8150162529cefab3782e91adb20202e8658f7275d2aefe5d"
 dependencies = [
 "bincode",
 "futures",
- "gloo-utils",
+ "gloo-utils 0.2.0",
 "gloo-worker-macros",
 "js-sys",
 "pinned",
@@ -360,6 +418,16 @@ dependencies = [
 "itoa",
 ]

+[[package]]
+name = "http"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
+dependencies = [
+ "bytes",
+ "itoa",
+]
+
 [[package]]
 name = "implicit-clone"
 version = "0.6.0"
@@ -541,6 +609,12 @@ dependencies = [
 "proc-macro2",
 ]

+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -789,6 +863,12 @@ version = "1.0.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"

+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
 [[package]]
 name = "version_check"
 version = "0.9.5"
@@ -914,6 +994,45 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "yew-router"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "870bd2a1aa6d608c0c789c122654e25f4927bb6bfe344cc0da3b630ac3c73260"
+dependencies = [
+ "gloo",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde_urlencoded",
+ "tracing",
+ "urlencoding",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8399f1d134ab8e69abc7cded19f114621d520bd9c79c5a0f34091bf664d7325b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "yew_icons"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d54ad895de028958553f84b46574832ee5ffdf53e2f80e2924a4cc501708fa7f"
+dependencies = [
+ "yew",
+]
+
 [[package]]
 name = "zmij"
 version = "1.0.21"
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -4,4 +4,12 @@ version = "0.1.0"
 edition = "2024"

 [dependencies]
+serde = {version = "1.0.228", features = ["derive"]}
+gloo-net = "0.7.0"
+wasm-bindgen = "0.2.116"
+wasm-bindgen-futures = "0.4.66"
 yew = { version = "0.23", features = ["csr"] }
+yew-router = "0.20.0"
+yew_icons = { version = "0.10.0", features = ["lucide"] }
+web-sys = {version = "0.3.93", features = ["HtmlSelectElement"] }
+gloo-console = "0.4.0"
--- a/frontend/Trunk.toml
+++ b/frontend/Trunk.toml
@@ -1,8 +1,8 @@
 [serve]
-address = "172.16.0.155"
+address = "127.0.0.1"
 port = 8080

 [[hooks]]
 stage = "pre_build"
-command = "./tailwindcss"
+command = "./tailwindcss.exe"
 command_arguments = ["-i", "input.css", "-o", "./dist/.stage/app.css"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,7 @@
 <html>
  <head>
    <meta charset="utf-8" />
-    <title>Yew App</title>
+    <title>Did Router</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body></body>
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -1,20 +1,56 @@
+mod pages;
+
 use yew::prelude::*;
+use yew_router::prelude::*;
+
+use pages::cdr::{Cdr};
+use pages::did::{DidListComponent};
+
+#[derive(Clone, Routable, PartialEq)]
+enum Route {
+    #[at("/")]
+    Home,
+    #[at("/did")]
+    Did,
+    #[at("/cdr")]
+    Cdr,
+}
+
+fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Home => html! {
+            <DidListComponent />
+         },
+        Route::Did => html! {
+            <DidListComponent />
+        },
+        Route::Cdr => html! {
+            <Cdr />
+        },
+    }
+}

 #[component]
 fn App() -> Html {
 html! {
+    <BrowserRouter>
        <div class="navbar bg-base-100 shadow-sm">
            <div class="navbar-start">
            </div>
            <div class="navbar-center lg:flex">
                <ul class="menu menu-horizontal px-1">
-                <li><a>{"DID"}</a></li>
-                <li><a>{"CDR"}</a></li>
+                    <li>
+                        <Link<Route> to={Route::Home}>{"DID"}</Link<Route>>
+                    </li>
+                    <li><Link<Route> to={Route::Cdr}>{"CDR"}</Link<Route>></li>
                </ul>
            </div>
            <div class="navbar-end">
            </div>
        </div>
+        <Switch<Route> render={switch} />
+    </BrowserRouter>        
+
    }
 }

--- a/frontend/src/pages/cdr.rs
+++ b/frontend/src/pages/cdr.rs
@@ -0,0 +1,8 @@
+use yew::prelude::*;
+
+#[component]
+pub fn Cdr() -> Html {    
+    html!{
+        <div>{"Cdr page"}</div>
+    }
+}
--- a/frontend/src/pages/did.rs
+++ b/frontend/src/pages/did.rs
@@ -0,0 +1,267 @@
+use yew::prelude::*;
+use web_sys::{Event, HtmlInputElement, HtmlSelectElement};
+use web_sys::wasm_bindgen::JsCast;
+use gloo_net::http::Request;
+use serde::{Serialize, Deserialize};
+use yew_icons::{Icon, IconData};
+
+const API_BASE: &str ="http://172.16.0.155:3000/api/fs";
+#[derive(Serialize, Deserialize)]
+pub struct Did {
+    id: i32,
+    did_number: String,
+    target_type: String,
+    target: Option<String>,
+    active: bool
+}
+
+#[derive(Properties, PartialEq)]
+pub struct DidProps {
+    pub did_id: i32,
+    pub did_number: String,
+    pub target_type: String,
+    pub target: String,
+    pub active: bool
+}
+
+#[component]
+pub fn DidComponent(props: &DidProps) -> Html {
+    let id = props.did_id;
+    let changed = use_state(||false);
+    let did_number = use_state(||props.did_number.clone());
+    let target_type = use_state(||props.target_type.clone());
+    let target = use_state(||props.target.clone());
+    let active= use_state(||props.active);
+
+    let handle_did_input = {
+        let did_number = did_number.clone();
+        let changed = changed.clone();
+        Callback::from(move |event: InputEvent| {            
+            let did_number = did_number.clone();
+            let t = event.target().and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
+            if let Some(input) = t {
+                did_number.set(input.value());
+            }
+            changed.set(true);
+        }
+    )};
+
+    let handle_target_input = {
+        let  target = target.clone();
+        let changed = changed.clone();
+        Callback::from(move |event: InputEvent| {            
+            let target = target.clone();
+            let t = event.target().and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
+            if let Some(input) = t {
+                target.set(input.value());
+            }
+            changed.set(true);
+        }
+    )};
+
+    let handle_active_change = {
+        let  active = active.clone();
+        let changed = changed.clone();
+        Callback::from(move |event: Event| {            
+            let active = active.clone();
+            let t = event
+                .target()
+                .and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
+            if let Some(input) = t {
+                active.set(input.checked());
+            }
+            changed.set(true);
+        }
+    )};
+
+    let handle_target_type_change = {
+        let target_type = target_type.clone();
+        let changed = changed.clone();
+        Callback::from(move |event: Event| {
+            let t = event
+                .target()
+                .and_then(|t| t.dyn_into::<HtmlSelectElement>().ok())
+                .unwrap();
+            target_type.set(t.value());
+            changed.set(true);
+            gloo_console::log!(t.value());
+        }
+    )};
+
+    let handle_save = {
+        let changed = changed.clone();
+        let did_number = did_number.clone();
+        let target_type = target_type.clone();
+        let target = target.clone();
+        let active = active.clone();
+        Callback::from(move |_| {
+            let did = Did {
+                id,
+                did_number: (*did_number).clone(),
+                target_type: (*target_type).clone(),
+                target: Some((*target).clone()),
+                active: (*active).clone()
+            };
+            let url = if id == 0 {
+                API_BASE.to_string()
+            } else {
+                format!("{}/{}", API_BASE, id)
+            };
+
+            wasm_bindgen_futures::spawn_local(async move {
+                let req = if id == 0 {
+                    Request::post(&url)
+                    .json(&did)
+                    .unwrap()
+                } else {
+                    Request::patch(&url)
+                    .json(&did)
+                    .unwrap()
+                };
+    
+                req.send()
+                    .await
+                    .unwrap();
+
+            });
+
+            changed.set(false);
+        })
+    };
+    
+    let handle_delete = Callback::from(move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                    Request::delete(&format!("{}/{}",API_BASE, id))
+                    .body("")                    
+                    .unwrap()
+                    .send()
+                    .await
+                    .unwrap();
+            })
+    });
+    
+    html!{
+        <tr>
+            <input type="text" class="hidden" value={props.did_id.to_string()} 
+            />
+            <td>
+                <input type="text" 
+                    class="input" 
+                    value={(*did_number).to_string()}
+                    id="did_number" 
+                    oninput={handle_did_input.clone()}
+                />
+            </td>
+            <td>
+                <select class="select select-ghost" onchange={handle_target_type_change}>
+                    <option selected={props.target_type == "Url"}>{"Url"}</option>
+                    <option selected={props.target_type == "Moh"}>{"Moh"}</option>
+                    <option selected={props.target_type == "NoService"}>{"NoService"}</option>
+                    <option selected={props.target_type == "NightMode"}>{"NightMode"}</option>
+                    <option selected={props.target_type == "ExternalNumber"}>{"ExternalNumber"}</option>
+                    <option selected={props.target_type == "CustomMessage"}>{"CustomMessage"}</option>
+                </select>
+            </td>
+            <td>
+                <input type="text" 
+                    class="input"
+                    id="target" 
+                    value={(*target).clone()}
+                    oninput={handle_target_input.clone()}
+                />
+            </td>
+            <td>
+                <input type="checkbox" 
+                    checked={*active} 
+                    class="toggle"
+                    id="active"
+                    onchange={handle_active_change.clone()}
+                />
+            </td>
+            <td class="flex justify-end">
+                if *changed && id != 0 {
+                    <button class="btn btn-primary btn-outline btn-circle" onclick={handle_save.clone()}>
+                        <Icon 
+                            data={IconData::LUCIDE_SAVE}
+                        />
+                    </button>
+                }
+                if id != 0 {
+                    <button class="btn btn-warning btn-outline btn-circle ml-2" onclick={handle_delete}>
+                        <Icon
+                            data={IconData::LUCIDE_TRASH_2}
+                        />
+                    </button>
+                }
+                if id == 0 {
+                    <button class="btn btn-primary btn-outline btn-circle ml-2" onclick={handle_save}>
+                        <Icon
+                            data={IconData::LUCIDE_PLUS}
+                        />
+                    </button>                    
+                }                         
+            </td>
+        </tr>
+
+    }
+}
+
+#[component]
+pub fn DidListComponent() -> Html {
+    let dids: UseStateHandle<Vec<Did>> = use_state(||vec![]);
+    {
+        let dids = dids.clone();
+        use_effect_with((), move |_| {
+            let dids = dids.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let res = Request::get(API_BASE)
+                    .send()
+                    .await
+                    .unwrap();
+
+                let dids_fetched: Vec<Did> = res.json().await.unwrap();
+                dids.set(dids_fetched);
+            });
+        });
+    }
+    html!{
+        <div>
+            <table class="table">
+                <DidComponent 
+                    did_id={0}
+                    did_number={""}
+                    target_type={""}
+                    target={""}
+                    active=true
+                />
+            </table>
+            <div class="divider"></div>
+            <table class="table table-zebra">
+                <thead>
+                    <tr>
+                        <th>{"DID number"}</th>
+                        <th>{"Target type"}</th>
+                        <th>{"Target"}</th>
+                        <th>{"Active"}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                {
+                    dids.iter().map(|d|{
+                        html!{
+                            <DidComponent 
+                                did_id={d.id}
+                                did_number={d.did_number.clone()}
+                                target_type={d.target_type.clone()}
+                                target={d.target.clone().unwrap_or_default()}
+                                active ={d.active}
+                            />    
+                        }
+                    }).collect::<Html>()
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+}
--- a/frontend/src/pages/mod.rs
+++ b/frontend/src/pages/mod.rs
@@ -0,0 +1,2 @@
+pub mod cdr;
+pub mod did;