223 lines
11 KiB
Rust
223 lines
11 KiB
Rust
|
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()
|
||
|
|
||
|
}}
|
||
|
}
|
||
|
}
|