Started working on selection system

application/Cargo.toml

@@ -24,11 +24,20 @@ strsim = "0.11.0"
 # strum = { version = "0.25", features = ["derive", "strum_macros"] }
 # strum_macros = "0.25"
 
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "Document",
+  "Window",
+  "Element",
+  "ScrollIntoViewOptions",
+  "ScrollLogicalPosition",
+  "ScrollBehavior",
+]
 
 [dev-dependencies]
 wasm-bindgen = "0.2"
 wasm-bindgen-test = "0.3"
-web-sys = { version = "0.3", features = ["Document", "Window"] }
 
 
 [profile.release]

application/public/styles.scss

@@ -13,6 +13,8 @@ html,
 body {
   height: 100vh;
   max-width: 100vw;
+  display: flex;
+  flex-direction: column;
   margin: 0;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 }
@@ -170,3 +172,7 @@ form {
   cursor: pointer;
   background-color: $secondary-bg-color-lighter;
 }
+
+.participants-container .selected {
+  border: 1px solid $primary-color;
+}

application/src/pages/times/add.rs

@@ -1,5 +1,7 @@
-use leptos::*;
+use leptos::{ev::keydown, *};
+use leptos_use::*;
 use strsim::normalized_damerau_levenshtein;
+use web_sys::{ScrollIntoViewOptions, ScrollLogicalPosition};
 
 use crate::util::surrealdb::Participant;
 
@@ -37,12 +39,43 @@ pub fn Add() -> impl IntoView {
     let websocket = expect_context::<crate::util::surrealdb::SurrealContext>();
     let participants = expect_context::<crate::util::surrealdb::ParticipantsContext>();
 
+    let container_ref: NodeRef<html::Ul> = create_node_ref();
+
     let (name, set_name) = create_signal(String::from(""));
     let (error, set_error) = create_signal(String::from(""));
+    let (selected, set_selected) = create_signal::<usize>(0);
 
     let participants_sorted =
         create_memo(move |_| sort_participants(participants.read.get(), name.get()));
 
+    let _ = use_event_listener(use_document(), keydown, move |evt| {
+        if evt.key() == "ArrowDown".to_string() {
+            set_selected.update(|x| {
+                let len = participants.read.get_untracked().len();
+                if *x != len {
+                    *x += 1;
+                }
+            });
+        } else if evt.key() == "ArrowUp".to_string() {
+            set_selected.update(|x| {
+                if *x != 0 {
+                    *x -= 1
+                }
+            });
+        }
+
+        let el: web_sys::Element = container_ref
+            .get_untracked()
+            .unwrap()
+            .children()
+            .item(selected.get_untracked().try_into().unwrap())
+            .expect("No element found");
+
+        el.scroll_into_view_with_scroll_into_view_options(
+            &ScrollIntoViewOptions::new().block(ScrollLogicalPosition::Center),
+        );
+    });
+
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
         set_error.set(String::from(""));
@@ -61,12 +94,13 @@ pub fn Add() -> impl IntoView {
                 placeholder="Name"
                 on:input=move |ev| {
                     set_name.set(event_target_value(&ev));
+                    set_selected.set(0);
                 }
                 prop:value=name
             />
-            <ul class="participants-container">
+            <ul class="participants-container" node_ref=container_ref>
-                {move || participants_sorted.get().into_iter().map(|participant| view! {
+                {move || participants_sorted.get().into_iter().enumerate().map(|(i, participant)| view! {
-                    <li>{participant.name + " " + "(" + &participant.group[6..].to_string() + ")" }</li>
+                    <li on:click=move |_| set_selected.set(i) class:selected=move || selected.get() == i>{participant.name + " " + "(" + &participant.group[6..].to_string() + ")" }</li>
                 }).collect_view()}
             </ul>
             <input type="submit" value="Submit" />