xeovalyte/wrb-timings
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Started working on participants page

Browse Source
This commit is contained in:
xeovalyte 2024-04-19 12:15:52 +02:00
parent 1261f53987
commit d55dc525b7
No known key found for this signature in database
6 changed files with 264 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
application/src/app.rs
View File

@ -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 />

1
application/src/components.rs
View File

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

222
application/src/components/participant.rs Normal file
View File

@ -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()
}}
}
}

9
application/src/components/participants.rs
View File

@ -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>

1
application/style/main.scss
View File

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

29
application/style/modal.scss Normal file
View File

@ -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%;
}