Started working on participants page

application/src/app.rs

@@ -12,6 +12,9 @@ pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
     provide_meta_context();
     let participants: util::surrealdb::schemas::ParticipantsContext = create_rw_signal(vec![]);
+    let participant: RwSignal<Option<String>> = create_rw_signal(None);
+
+    provide_context(participant);
 
     provide_context(participants);
     util::surrealdb::init_participants();
@@ -35,6 +38,7 @@ pub fn App() -> impl IntoView {
             .into_view()
         }>
             <components::header::Header />
+            <components::participant::Modal />
             <main>
                 <Routes>
                     <Route path="/" view=pages::index::HomePage />

application/src/components.rs

@@ -1,2 +1,3 @@
 pub mod header;
+pub mod participant;
 pub mod participants;

application/src/components/participant.rs

@@ -0,0 +1,222 @@
+use crate::util::surrealdb::{client::Time, schemas};
+use leptos::*;
+
+/// Renders the home page of your application.
+#[component]
+pub fn Modal() -> impl IntoView {
+    let participant_id = use_context::<RwSignal<Option<String>>>().unwrap();
+    let participants = use_context::<schemas::ParticipantsContext>().unwrap();
+
+    let participant = move || {
+        let x = participants
+            .get()
+            .into_iter()
+            .filter(|item| item.id == participant_id.get().unwrap_or("".to_string()))
+            .collect::<Vec<schemas::ParticipantSignal>>();
+
+        match x.get(0) {
+            Some(participant) => Some(participant.value),
+            None => None,
+        }
+    };
+
+    let time_lifesaver = create_rw_signal(Time {
+        minutes: 0,
+        seconds: 0,
+        milliseconds: 0,
+    });
+
+    let time_hindernis = create_rw_signal(Time {
+        minutes: 0,
+        seconds: 0,
+        milliseconds: 0,
+    });
+
+    let time_popduiken = create_rw_signal(Time {
+        minutes: 0,
+        seconds: 0,
+        milliseconds: 0,
+    });
+
+    view! {
+        { move || match participant() {
+            Some(p) => view! {
+                <div class="modal-background">
+                    <div class="modal">
+                        <form>
+                            <h2>"Deelnemer bewerken"</h2>
+                            <label>Naam</label>
+                            <input type="text" name="name" autocomplete="off" />
+                            <label>Groep</label>
+                            <select name="group" autocomplete="off">
+                                <option value="A1">A1</option>
+                                <option value="A2">A2</option>
+                                <option value="A3">A3</option>
+                                <option value="A4">A4</option>
+                                <option value="A5">A5</option>
+                                <option value="A6">A6</option>
+
+                                <option value="B1">B1</option>
+                                <option value="B2">B2</option>
+                                <option value="B3">B3</option>
+                                <option value="B4">B4</option>
+                                <option value="B5">B5</option>
+                                <option value="B6">B6</option>
+
+                                <option value="C1">C1</option>
+                                <option value="C2">C2</option>
+                                <option value="C3">C3</option>
+                                <option value="C4">C4</option>
+                                <option value="C5">C5</option>
+                                <option value="C6">C6</option>
+
+                                <option value="D1">D1</option>
+                                <option value="D2">D2</option>
+                                <option value="D3">D3</option>
+                                <option value="D4">D4</option>
+                                <option value="D5">D5</option>
+                                <option value="D6">D6</option>
+
+                                <option value="Z1">Z1</option>
+                                <option value="Z2">Z2</option>
+                                <option value="Z3">Z3</option>
+                                <option value="Z4">Z4</option>
+                                <option value="Z5">Z5</option>
+                                <option value="Z6">Z6</option>
+                            </select>
+                            <label>Tijd Lifesaver</label>
+                            <div class="time">
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="mm"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_lifesaver.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_lifesaver.get().minutes
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ss"
+                                    min=0
+                                    max=59
+                                    on:input=move |ev| {
+                                        time_lifesaver.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_lifesaver.get().seconds
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ms"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_lifesaver.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_lifesaver.get().milliseconds
+                                />
+                            </div>
+                            <label>Tijd Hindernis</label>
+                            <div class="time">
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="mm"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_hindernis.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_hindernis.get().minutes
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ss"
+                                    min=0
+                                    max=59
+                                    on:input=move |ev| {
+                                        time_hindernis.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_hindernis.get().seconds
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ms"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_hindernis.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_hindernis.get().milliseconds
+                                />
+                            </div>
+                            <label>Tijd Popduiken</label>
+                            <div class="time">
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="mm"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_popduiken.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_popduiken.get().minutes
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ss"
+                                    min=0
+                                    max=59
+                                    on:input=move |ev| {
+                                        time_popduiken.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_popduiken.get().seconds
+                                />
+                                <input type="number"
+                                    autocomplete="off"
+                                    placeholder="ms"
+                                    min=0
+                                    max=99
+                                    on:input=move |ev| {
+                                        time_popduiken.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
+                                            Ok(x) => x,
+                                            Err(_) => 0,
+                                        });
+                                    }
+                                    prop:value=move || time_popduiken.get().milliseconds
+                                />
+                            </div>
+                            <input type="submit" value="Deelnemer bewerken" />
+                        </form>
+                    </div>
+                </div>
+            }.into_view(),
+            None => view! {}.into_view()
+
+        }}
+    }
+}

application/src/components/participants.rs

@@ -1,4 +1,7 @@
-use crate::util::surrealdb::{client::Time, schemas};
+use crate::util::surrealdb::{
+    client::Time,
+    schemas::{self, ParticipantSignal},
+};
 use leptos::*;
 
 /// Renders the home page of your application.
@@ -10,6 +13,8 @@ pub fn Participants(
     #[prop(default = true)] show_hindernis: bool,
     #[prop(default = true)] show_popduiken: bool,
 ) -> impl IntoView {
+    let participant_modal = use_context::<RwSignal<Option<String>>>().unwrap();
+
     view! {
         <table class="participants-table">
             <tr>
@@ -32,7 +37,7 @@ pub fn Participants(
                 key=|state| state.id.clone()
                 let:child
             >
-                <tr>
+                <tr on:click=move |_| participant_modal.set(Some(child.id.clone()))>
                     <td>{ move || child.value.get().name }</td>
                     <Show when=move || show_group>
                         <td>{ move || child.value.get().group }</td>

application/style/main.scss

@@ -13,6 +13,7 @@ $text-color: #f3efef;
 @import "header";
 @import "index";
 @import "groups";
+@import "modal";
 
 html,
 body {

application/style/modal.scss

@@ -0,0 +1,29 @@
+.modal-background {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 200;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.modal {
+  width: 100%;
+  max-width: 500px;
+  height: 100%;
+  max-height: 800px;
+  overflow-y: auto;
+  background-color: $secondary-bg-color;
+  border-radius: 5px;
+  padding: 0px 20px;
+}
+
+.modal form {
+  width: 100%;
+}