From 1261f539879029a0dd37a0cbc40bfb4ccfd8025e Mon Sep 17 00:00:00 2001 From: xeovalyte Date: Thu, 11 Apr 2024 19:45:47 +0200 Subject: [PATCH] Added group view --- application/src/app.rs | 1 + application/src/components/participants.rs | 61 ++++----- application/src/pages.rs | 1 + application/src/pages/groups.rs | 138 +++++++++++++++++++++ application/src/pages/index.rs | 25 +++- application/src/util/websocket/client.rs | 1 + application/style/groups.scss | 37 ++++++ application/style/index.scss | 2 +- application/style/main.scss | 5 + 9 files changed, 239 insertions(+), 32 deletions(-) create mode 100644 application/src/pages/groups.rs create mode 100644 application/style/groups.scss diff --git a/application/src/app.rs b/application/src/app.rs index f461325..c8708d3 100644 --- a/application/src/app.rs +++ b/application/src/app.rs @@ -40,6 +40,7 @@ pub fn App() -> impl IntoView { + diff --git a/application/src/components/participants.rs b/application/src/components/participants.rs index 31c7c44..73a29e6 100644 --- a/application/src/components/participants.rs +++ b/application/src/components/participants.rs @@ -1,48 +1,53 @@ -use crate::util::surrealdb::{client::sort_participants, client::Time, schemas}; +use crate::util::surrealdb::{client::Time, schemas}; use leptos::*; /// Renders the home page of your application. #[component] -pub fn Participants() -> impl IntoView { - let participants_context = use_context::().unwrap(); - - let name = create_rw_signal("".to_string()); - - let participants_sorted = - create_memo(move |_| sort_participants(participants_context.get(), name.get())); - +pub fn Participants( + participants: Signal>, + #[prop(default = true)] show_group: bool, + #[prop(default = true)] show_lifesaver: bool, + #[prop(default = true)] show_hindernis: bool, + #[prop(default = true)] show_popduiken: bool, +) -> impl IntoView { view! { - - - - - + + + + + + + + + + + + - + + + { move || match child.value.get().events { Some(events) => view! { - - - + + + + + + + + + }, None => view! { diff --git a/application/src/pages.rs b/application/src/pages.rs index 7150ec5..fa3ba8d 100644 --- a/application/src/pages.rs +++ b/application/src/pages.rs @@ -1,3 +1,4 @@ pub mod add_participant; pub mod add_time; +pub mod groups; pub mod index; diff --git a/application/src/pages/groups.rs b/application/src/pages/groups.rs new file mode 100644 index 0000000..58d33b3 --- /dev/null +++ b/application/src/pages/groups.rs @@ -0,0 +1,138 @@ +use crate::components; +use crate::util::surrealdb::schemas; +use leptos::*; + +/// Renders the home page of your application. +#[component] +pub fn Groups() -> impl IntoView { + let group_hour = create_rw_signal("A"); + let group_lane = create_rw_signal("1"); + + let participants_context = use_context::().unwrap(); + + let participants_filtered: Memo> = create_memo(move |_| { + participants_context + .get() + .into_iter() + .filter(|participant| { + participant.value.get().group == group_hour.get().to_owned() + group_lane.get() + }) + .collect() + }); + + let (participants_lifesaver, participants_hindernis, participants_popduiken) = + sort_by_events(participants_filtered); + + view! { +

"Groups"

+
+
+
"A"
+
"B"
+
"C"
+
"D"
+
"Z"
+
+
+
"1"
+
"2"
+
"3"
+
"4"
+
"5"
+
"6"
+
+
+

"Algemene score"

+ +
+
+

"Lifesaver"

+ +
+
+

"Hindernis"

+ +
+
+

"Popduiken"

+ +
+
+ } +} + +fn sort_by_events( + participants_filtered: Memo>, +) -> ( + Memo>, + Memo>, + Memo>, +) { + let lifesaver: Memo> = create_memo(move |_| { + let mut participants: Vec<(usize, schemas::ParticipantSignal)> = participants_filtered + .get() + .into_iter() + .enumerate() + .collect(); + participants.sort_by(|(_, a), (_, b)| { + let event_a = match a.value.get().events { + Some(events) => events.lifesaver.unwrap_or(6_000_000), + None => 6_000_000, + }; + let event_b = match b.value.get().events { + Some(events) => events.lifesaver.unwrap_or(5_999_100), + None => 6_000_000, + }; + + event_a.cmp(&event_b) + }); + + participants.into_iter().map(|(_, value)| value).collect() + }); + + let hindernis: Memo> = create_memo(move |_| { + let mut participants: Vec<(usize, schemas::ParticipantSignal)> = participants_filtered + .get() + .into_iter() + .enumerate() + .collect(); + participants.sort_by(|(_, a), (_, b)| { + let event_a = match a.value.get().events { + Some(events) => events.hindernis.unwrap_or(6_000_000), + None => 6_000_000, + }; + let event_b = match b.value.get().events { + Some(events) => events.hindernis.unwrap_or(6_000_000), + None => 6_000_000, + }; + + event_a.cmp(&event_b) + }); + + participants.into_iter().map(|(_, value)| value).collect() + }); + + let popduiken: Memo> = create_memo(move |_| { + let mut participants: Vec<(usize, schemas::ParticipantSignal)> = participants_filtered + .get() + .into_iter() + .enumerate() + .collect(); + participants.sort_by(|(_, a), (_, b)| { + let event_a = match a.value.get().events { + Some(events) => events.popduiken.unwrap_or(6_000_000), + None => 6_000_000, + }; + let event_b = match b.value.get().events { + Some(events) => events.popduiken.unwrap_or(6_000_000), + None => 6_000_000, + }; + + event_a.cmp(&event_b) + }); + + participants.into_iter().map(|(_, value)| value).collect() + }); + + (lifesaver, hindernis, popduiken) +} diff --git a/application/src/pages/index.rs b/application/src/pages/index.rs index d8b153c..4ddfb04 100644 --- a/application/src/pages/index.rs +++ b/application/src/pages/index.rs @@ -1,15 +1,34 @@ use crate::components; +use crate::util::surrealdb::{client::sort_participants, schemas}; use leptos::*; use leptos_router::*; /// Renders the home page of your application. #[component] pub fn HomePage() -> impl IntoView { + let participants_context = use_context::().unwrap(); + + let name = create_rw_signal("".to_string()); + + let participants_sorted = + create_memo(move |_| sort_participants(participants_context.get(), name.get())); + view! {
- Deelnemer toevoegen - Tijd toevoegen + "Deelnemer toevoegen" + "Tijd toevoegen" + "Group view"
- + + } } diff --git a/application/src/util/websocket/client.rs b/application/src/util/websocket/client.rs index cacda51..0f54b29 100644 --- a/application/src/util/websocket/client.rs +++ b/application/src/util/websocket/client.rs @@ -12,6 +12,7 @@ pub fn init_websocket() { } = use_websocket("ws://localhost:3000/ws"); provide_context(ready_state); + let participants_context = use_context::().unwrap(); let owner = Owner::current().unwrap(); diff --git a/application/style/groups.scss b/application/style/groups.scss new file mode 100644 index 0000000..403e3cf --- /dev/null +++ b/application/style/groups.scss @@ -0,0 +1,37 @@ +.groups-select-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +.groups-select-row { + display: flex; + gap: 8px; +} + +.groups-select-row div { + background-color: $secondary-bg-color-light; + border-radius: 10px; + width: 50px; + padding: 2px 0; + text-align: center; +} + +.groups-select-row div:hover { + cursor: pointer; + background-color: $secondary-color; +} + +.groups-select-row .selected { + background-color: $primary-color; +} + +.events-container { + display: flex; + justify-content: space-between; + gap: 10px; +} + +.events-container div { + width: 100%; +} diff --git a/application/style/index.scss b/application/style/index.scss index c9c58f2..7025207 100644 --- a/application/style/index.scss +++ b/application/style/index.scss @@ -8,7 +8,7 @@ a { display: flex; width: 100%; margin-top: 20px; - gap: 20px; + gap: 10px; } .actions-container a { diff --git a/application/style/main.scss b/application/style/main.scss index 6772039..388ebc6 100644 --- a/application/style/main.scss +++ b/application/style/main.scss @@ -12,6 +12,7 @@ $text-color: #f3efef; @import "forms"; @import "header"; @import "index"; +@import "groups"; html, body { @@ -33,3 +34,7 @@ main { width: 100%; max-width: 800px; } + +h3 { + margin-top: 30px; +}
"Naam""Groep""Lifesaver""Hindernis""Popduiken""Groep""Lifesaver""Hindernis""Popduiken"
{ move || child.value.get().name }{ move || child.value.get().group }{ move || child.value.get().group }{ Time::from_milliseconds_to_string(events.lifesaver.unwrap_or(0)) }{ Time::from_milliseconds_to_string(events.hindernis.unwrap_or(0)) }{ Time::from_milliseconds_to_string(events.popduiken.unwrap_or(0)) }{ Time::from_milliseconds_to_string(events.lifesaver.unwrap_or(0)) }{ Time::from_milliseconds_to_string(events.hindernis.unwrap_or(0)) }{ Time::from_milliseconds_to_string(events.popduiken.unwrap_or(0)) }"0"