wrb-timings/application/src/pages/add_participant.rs

129 lines
4.2 KiB
Rust

use leptos::*;
use leptos_router::ActionForm;
cfg_if::cfg_if! {
if #[cfg(feature = "ssr")] {
use crate::util::surrealdb::{DB, schemas};
use crate::util::websocket::{server, ParticipantsAction};
use leptos::logging;
}
}
#[server(AddParticipant)]
async fn add_participant(name: String, group: String) -> Result<(), ServerFnError> {
let websocket_state = &server::WEBSOCKET_STATE;
let created: Vec<schemas::ParticipantRecord> = DB
.create("participant")
.content(schemas::NewParticipant { name, group })
.await?;
match created.first() {
Some(participant) => {
logging::log!(
"Created participant: {} ({})",
participant.name,
participant.group
);
let action = ParticipantsAction::Add {
participant: schemas::Participant {
name: participant.name.clone(),
group: participant.group.clone(),
id: participant.id.id.to_string(),
events: participant.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 create participant",
))),
}
}
/// Renders the home page of your application.
#[component]
pub fn AddParticipant() -> impl IntoView {
let name = create_rw_signal("".to_string());
let group = create_rw_signal("A1".to_string());
let name_input_ref: NodeRef<html::Input> = create_node_ref();
let form_submit_action = create_action(|input: &(String, String)| {
let input = input.to_owned();
async move { add_participant(input.0, input.1).await }
});
let form_submit = move |ev: ev::SubmitEvent| {
ev.prevent_default();
form_submit_action.dispatch((name.get(), group.get()));
name.set("".to_string());
let _ = name_input_ref.get().unwrap().focus();
};
view! {
<h2>"Deelnemer toevoegen"</h2>
<form on:submit=form_submit>
<label>Naam</label>
<input
type="text"
autocomplete="off"
node_ref=name_input_ref
on:input=move |ev| {
name.set(event_target_value(&ev));
}
prop:value=name
/>
<label>Groep</label>
<select on:change=move |ev| {
let new_value = event_target_value(&ev);
group.set(new_value);
} 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>
<input type="submit" value="Deelnemer toevoegen" />
</form>
}
}