{ move || child.value.get().name } |
- { move || child.value.get().group } |
+
+ { move || child.value.get().group } |
+
{ move || match child.value.get().events {
Some(events) => view! {
- { 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)) } |
+
},
None => view! {
"0" |
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! {
-
+
+
}
}
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;
+}