diff options
| -rw-r--r-- | Cargo.lock | 104 | ||||
| -rw-r--r-- | frontend/Cargo.toml | 5 | ||||
| -rw-r--r-- | frontend/src/main.rs | 57 |
3 files changed, 158 insertions, 8 deletions
diff --git a/Cargo.lock b/Cargo.lock index e579f8b..fe6eef3 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -223,6 +223,12 @@ dependencies = [ ] [[package]] +name = "anymap2" +version = "0.13.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c" + +[[package]] name = "async-channel" version = "1.7.1" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -246,6 +252,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "904dfeac50f3cdaba28fc6f57fdcddb75f49ed61346676a78c4ffe55877802fd" [[package]] +name = "bincode" +version = "1.3.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad" +dependencies = [ + "serde", +] + +[[package]] name = "bitflags" version = "1.3.2" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -586,6 +601,9 @@ dependencies = [ name = "frontend" version = "0.1.0" dependencies = [ + "gloo 0.8.0", + "wasm-bindgen", + "web-sys", "yew", ] @@ -730,6 +748,25 @@ dependencies = [ ] [[package]] +name = "gloo" +version = "0.8.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3a4bef6b277b3ab073253d4bca60761240cf8d6998f4bd142211957b69a61b20" +dependencies = [ + "gloo-console", + "gloo-dialogs", + "gloo-events", + "gloo-file", + "gloo-history", + "gloo-net", + "gloo-render", + "gloo-storage", + "gloo-timers", + "gloo-utils", + "gloo-worker", +] + +[[package]] name = "gloo-console" version = "0.2.3" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -775,6 +812,42 @@ dependencies = [ ] [[package]] +name = "gloo-history" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f81af52c0d31e86242eecefe1ed4d066deb79cfb80f9f7da0847fac417396bfe" +dependencies = [ + "gloo-events", + "gloo-utils", + "serde", + "serde-wasm-bindgen", + "serde_urlencoded", + "thiserror", + "wasm-bindgen", + "web-sys", +] + +[[package]] +name = "gloo-net" +version = "0.2.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ec897194fb9ac576c708f63d35604bc58f2a262b8cec0fabfed26f3991255f21" +dependencies = [ + "futures-channel", + "futures-core", + "futures-sink", + "gloo-utils", + "js-sys", + "pin-project", + "serde", + "serde_json", + "thiserror", + "wasm-bindgen", + "wasm-bindgen-futures", + "web-sys", +] + +[[package]] name = "gloo-render" version = "0.1.1" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -823,6 +896,23 @@ dependencies = [ ] [[package]] +name = "gloo-worker" +version = "0.2.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a" +dependencies = [ + "anymap2", + "bincode", + "gloo-console", + "gloo-utils", + "js-sys", + "serde", + "wasm-bindgen", + "wasm-bindgen-futures", + "web-sys", +] + +[[package]] name = "h2" version = "0.2.7" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -1904,6 +1994,18 @@ dependencies = [ ] [[package]] +name = "serde-wasm-bindgen" +version = "0.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "618365e8e586c22123d692b72a7d791d5ee697817b65a218cdf12a98870af0f7" +dependencies = [ + "fnv", + "js-sys", + "serde", + "wasm-bindgen", +] + +[[package]] name = "serde_derive" version = "1.0.145" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -2612,7 +2714,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "2a1ccb53e57d3f7d847338cf5758befa811cabe207df07f543c06f502f9998cd" dependencies = [ "console_error_panic_hook", - "gloo", + "gloo 0.4.2", "gloo-utils", "indexmap", "js-sys", diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml index 4963867..b6de6ad 100644 --- a/frontend/Cargo.toml +++ b/frontend/Cargo.toml @@ -6,4 +6,7 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -yew = "0.19" \ No newline at end of file +yew = "0.19" +gloo = "0.8.0" +web-sys = "0.3.60" +wasm-bindgen = "0.2.83" \ No newline at end of file diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 860e028..30ec0ef 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -1,9 +1,45 @@ +use gloo::console::log; +use std::ops::Deref; +use wasm_bindgen::*; +use web_sys::{EventTarget, HtmlInputElement}; use yew::prelude::*; -#[function_component(App)] -fn app() -> Html { +#[derive(Debug, Clone)] +struct State { + pub search_query: String, +} + +#[function_component(OSSE)] +fn osse() -> Html { + let state = use_state(|| State { + search_query: "".to_string(), + }); + + let cloned_state = state.clone(); + let search_query_changed = Callback::from(move |event: InputEvent| { + let target: EventTarget = event + .target() + .expect("Event should have a target when dispatched"); + let input = target.unchecked_into::<HtmlInputElement>().value(); + log!("Input changed: {}", &input); + let mut state = cloned_state.deref().clone(); + state.search_query = input; + cloned_state.set(state); + }); + + let cloned_state = state.clone(); + let on_submit = Callback::from(move |event: FocusEvent| { + event.prevent_default(); + let mut state = cloned_state.deref().clone(); + log!("Submit:{}", state.search_query); + state.search_query = "".to_string(); + cloned_state.set(state); + }); + + let curr_state = state.deref().to_owned(); + html! { - <> + <> <nav class="navbar bg-light sticky-top"> <div class="container-fluid"> <div> @@ -18,10 +54,10 @@ fn app() -> Html { <div class="col"> <b class="display-4 text-truncate">{"OSSE"}</b> <p>{"Your favorite independent search engine."}</p> - <form> + <form onsubmit={on_submit}> <div class="input-group input-group-lg my-2"> - <input type="text" class="form-control" placeholder="Search with OSSE" /> - <button class="btn btn-primary" type="button" >{"Search"}</button> + <input oninput={search_query_changed} value={curr_state.search_query}type="text" class="form-control" placeholder="Search with OSSE" /> + <button class="btn btn-primary" type="submit" >{"Search!"}</button> </div> </form> </div> @@ -40,6 +76,15 @@ fn app() -> Html { } } +#[function_component(App)] +fn app() -> Html { + html! { + <> + <OSSE/> + </> + } +} + //Your favorite search engine in navbar //Search in middle |