Finished edit participant feature
This commit is contained in:
parent
8fac34aafa
commit
be342101dd
@ -1,25 +1,61 @@
|
||||
use crate::util::surrealdb::{client::Time, schemas};
|
||||
use leptos::*;
|
||||
|
||||
cfg_if::cfg_if! {
|
||||
if #[cfg(feature = "ssr")] {
|
||||
use crate::util::surrealdb::{DB, schemas::Participant};
|
||||
use crate::util::websocket::{server, ParticipantsAction};
|
||||
use leptos::logging;
|
||||
}
|
||||
}
|
||||
|
||||
#[server(ModifyParticipant)]
|
||||
async fn modify_participant(
|
||||
mut participant: schemas::ParticipantUpdate,
|
||||
id: String,
|
||||
) -> Result<(), ServerFnError> {
|
||||
let websocket_state = &server::WEBSOCKET_STATE;
|
||||
|
||||
println!("Participant: {:?}", participant);
|
||||
|
||||
let updated: Option<schemas::ParticipantRecord> = DB
|
||||
.update(("participant", &id))
|
||||
.content(&participant)
|
||||
.await?;
|
||||
|
||||
match updated {
|
||||
Some(participant_updated) => {
|
||||
logging::log!(
|
||||
"Updated participant: {} ({})",
|
||||
participant_updated.name,
|
||||
participant_updated.group
|
||||
);
|
||||
let action = ParticipantsAction::Replace {
|
||||
participant: Participant {
|
||||
name: participant_updated.name.clone(),
|
||||
group: participant_updated.group.clone(),
|
||||
id,
|
||||
events: participant_updated.events.clone(),
|
||||
},
|
||||
};
|
||||
|
||||
match websocket_state.apply(action) {
|
||||
Ok(_) => Ok(()),
|
||||
Err(_) => Err(ServerFnError::new("Error sending websocket action")),
|
||||
}
|
||||
}
|
||||
None => Err(ServerFnError::ServerError(String::from(
|
||||
"Could not update participant",
|
||||
))),
|
||||
}
|
||||
}
|
||||
|
||||
/// 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,
|
||||
@ -38,51 +74,120 @@ pub fn Modal() -> impl IntoView {
|
||||
milliseconds: 0,
|
||||
});
|
||||
|
||||
let name = create_rw_signal(String::from(""));
|
||||
let group = create_rw_signal(String::from(""));
|
||||
|
||||
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) => {
|
||||
let participant_clone = participant.value.get_untracked();
|
||||
|
||||
name.set(participant_clone.name);
|
||||
group.set(participant_clone.group);
|
||||
|
||||
time_lifesaver.set(Time::from_milliseconds(match participant_clone.events {
|
||||
Some(ref events) => events.lifesaver.unwrap_or(0),
|
||||
None => 0,
|
||||
}));
|
||||
|
||||
time_hindernis.set(Time::from_milliseconds(match participant_clone.events {
|
||||
Some(ref events) => events.hindernis.unwrap_or(0),
|
||||
None => 0,
|
||||
}));
|
||||
|
||||
time_popduiken.set(Time::from_milliseconds(match participant_clone.events {
|
||||
Some(ref events) => events.popduiken.unwrap_or(0),
|
||||
None => 0,
|
||||
}));
|
||||
|
||||
Some(participant.value)
|
||||
}
|
||||
None => None,
|
||||
}
|
||||
};
|
||||
|
||||
let modify_participant_action =
|
||||
create_action(|input: &(schemas::ParticipantUpdate, String)| {
|
||||
let input = input.to_owned();
|
||||
async move { modify_participant(input.0, input.1).await }
|
||||
});
|
||||
|
||||
let form_submit = move |ev: ev::SubmitEvent| {
|
||||
ev.prevent_default();
|
||||
|
||||
let p = schemas::ParticipantUpdate {
|
||||
name: name.get(),
|
||||
group: group.get(),
|
||||
events: Some(schemas::Events {
|
||||
lifesaver: Some(time_lifesaver.get().as_milliseconds()),
|
||||
hindernis: Some(time_hindernis.get().as_milliseconds()),
|
||||
popduiken: Some(time_popduiken.get().as_milliseconds()),
|
||||
}),
|
||||
};
|
||||
|
||||
modify_participant_action.dispatch((p, participant().unwrap().get().id));
|
||||
|
||||
participant_id.set(None);
|
||||
};
|
||||
|
||||
view! {
|
||||
{ move || match participant() {
|
||||
Some(p) => view! {
|
||||
Some(_p) => view! {
|
||||
<div class="modal-background">
|
||||
<div class="modal">
|
||||
<form>
|
||||
<form on:submit=form_submit>
|
||||
<h2>"Deelnemer bewerken"</h2>
|
||||
<label>Naam</label>
|
||||
<input type="text" name="name" autocomplete="off" />
|
||||
<input
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
on:input=move |ev| {
|
||||
name.set(event_target_value(&ev))
|
||||
}
|
||||
prop:value=name
|
||||
/>
|
||||
<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>
|
||||
<SelectOption value=group is="A1" />
|
||||
<SelectOption value=group is="A2" />
|
||||
<SelectOption value=group is="A3" />
|
||||
<SelectOption value=group is="A4" />
|
||||
<SelectOption value=group is="A5" />
|
||||
<SelectOption value=group is="A6" />
|
||||
|
||||
<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>
|
||||
<SelectOption value=group is="B1" />
|
||||
<SelectOption value=group is="B2" />
|
||||
<SelectOption value=group is="B3" />
|
||||
<SelectOption value=group is="B4" />
|
||||
<SelectOption value=group is="B5" />
|
||||
<SelectOption value=group is="B6" />
|
||||
|
||||
<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>
|
||||
<SelectOption value=group is="C1" />
|
||||
<SelectOption value=group is="C2" />
|
||||
<SelectOption value=group is="C3" />
|
||||
<SelectOption value=group is="C4" />
|
||||
<SelectOption value=group is="C5" />
|
||||
<SelectOption value=group is="C6" />
|
||||
|
||||
<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>
|
||||
<SelectOption value=group is="D1" />
|
||||
<SelectOption value=group is="D2" />
|
||||
<SelectOption value=group is="D3" />
|
||||
<SelectOption value=group is="D4" />
|
||||
<SelectOption value=group is="D5" />
|
||||
<SelectOption value=group is="D6" />
|
||||
|
||||
<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>
|
||||
<SelectOption value=group is="Z1" />
|
||||
<SelectOption value=group is="Z2" />
|
||||
<SelectOption value=group is="Z3" />
|
||||
<SelectOption value=group is="Z4" />
|
||||
<SelectOption value=group is="Z5" />
|
||||
<SelectOption value=group is="Z6" />
|
||||
</select>
|
||||
<label>Tijd Lifesaver</label>
|
||||
<div class="time">
|
||||
@ -220,3 +325,15 @@ pub fn Modal() -> impl IntoView {
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn SelectOption(is: &'static str, value: RwSignal<String>) -> impl IntoView {
|
||||
view! {
|
||||
<option
|
||||
value=is
|
||||
selected=move || value.get() == is
|
||||
>
|
||||
{is}
|
||||
</option>
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,20 @@ impl Time {
|
||||
|
||||
format!("{minutes}:{seconds}:{milliseconds}")
|
||||
}
|
||||
|
||||
pub fn from_milliseconds(mut time: u32) -> Self {
|
||||
let milliseconds = (time % 1000) / 10;
|
||||
time /= 1000;
|
||||
let seconds = time % 60;
|
||||
time /= 60;
|
||||
let minutes = time;
|
||||
|
||||
Self {
|
||||
milliseconds,
|
||||
seconds,
|
||||
minutes,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn sort_participants(
|
||||
|
||||
@ -31,6 +31,23 @@ pub struct Participant {
|
||||
pub events: Option<Events>,
|
||||
}
|
||||
|
||||
impl Participant {
|
||||
pub fn as_update(&self) -> ParticipantUpdate {
|
||||
ParticipantUpdate {
|
||||
name: self.name.clone(),
|
||||
group: self.group.clone(),
|
||||
events: self.events.clone(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
|
||||
pub struct ParticipantUpdate {
|
||||
pub name: String,
|
||||
pub group: String,
|
||||
pub events: Option<Events>,
|
||||
}
|
||||
|
||||
#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
|
||||
pub struct ParticipantSignal {
|
||||
pub id: String,
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: 100%;
|
||||
max-height: 800px;
|
||||
overflow-y: auto;
|
||||
background-color: $secondary-bg-color;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user