Started working on selection system
This commit is contained in:
parent
e41dfc72de
commit
ac92e9f16a
@ -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]
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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" />
|
||||||
|
Loading…
Reference in New Issue
Block a user