Started working on selection system

This commit is contained in:
xeovalyte 2024-03-20 15:56:10 +01:00
parent e41dfc72de
commit ac92e9f16a
No known key found for this signature in database
3 changed files with 54 additions and 5 deletions

View File

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

View File

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

View File

@ -1,5 +1,7 @@
use leptos::*; use leptos::{ev::keydown, *};
use leptos_use::*;
use strsim::normalized_damerau_levenshtein; use strsim::normalized_damerau_levenshtein;
use web_sys::{ScrollIntoViewOptions, ScrollLogicalPosition};
use crate::util::surrealdb::Participant; use crate::util::surrealdb::Participant;
@ -37,12 +39,43 @@ pub fn Add() -> impl IntoView {
let websocket = expect_context::<crate::util::surrealdb::SurrealContext>(); let websocket = expect_context::<crate::util::surrealdb::SurrealContext>();
let participants = expect_context::<crate::util::surrealdb::ParticipantsContext>(); 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 (name, set_name) = create_signal(String::from(""));
let (error, set_error) = create_signal(String::from("")); let (error, set_error) = create_signal(String::from(""));
let (selected, set_selected) = create_signal::<usize>(0);
let participants_sorted = let participants_sorted =
create_memo(move |_| sort_participants(participants.read.get(), name.get())); 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| { let on_submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default(); ev.prevent_default();
set_error.set(String::from("")); set_error.set(String::from(""));
@ -61,12 +94,13 @@ pub fn Add() -> impl IntoView {
placeholder="Name" placeholder="Name"
on:input=move |ev| { on:input=move |ev| {
set_name.set(event_target_value(&ev)); set_name.set(event_target_value(&ev));
set_selected.set(0);
} }
prop:value=name 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()} }).collect_view()}
</ul> </ul>
<input type="submit" value="Submit" /> <input type="submit" value="Submit" />