Added UI for adding a participant

This commit is contained in:
xeovalyte 2024-04-04 17:39:34 +02:00
parent 5dce2e3ca9
commit 0c051192f3
No known key found for this signature in database
7 changed files with 121 additions and 34 deletions

View File

@ -32,6 +32,7 @@ pub fn App() -> impl IntoView {
<main>
<Routes>
<Route path="" view=pages::index::HomePage/>
<Route path="/add-participant" view=pages::add_participant::AddParticipant />
</Routes>
</main>
</Router>

View File

@ -1 +1,3 @@
pub mod add_participant;
pub mod index;

View File

@ -0,0 +1,83 @@
use leptos::*;
use leptos_router::ActionForm;
cfg_if::cfg_if! {
if #[cfg(feature = "ssr")] {
use crate::util::surrealdb::{DB, schemas};
use leptos::logging;
}
}
#[server(AddParticipant)]
async fn add_participant(name: String, group: String) -> Result<(), ServerFnError> {
let created: Vec<schemas::Participant> = DB
.create("participant")
.content(schemas::NewParticipant { name, group })
.await?;
match created.first() {
Some(participant) => {
logging::log!(
"Created participant: {} ({})",
participant.name,
participant.group
);
Ok(())
}
None => Err(ServerFnError::ServerError(String::from(
"Could not create participant",
))),
}
}
/// Renders the home page of your application.
#[component]
pub fn AddParticipant() -> impl IntoView {
let form_submit = create_server_action::<AddParticipant>();
view! {
<h2>"Deelnemer toevoegen"</h2>
<ActionForm action=form_submit>
<label>Naam</label>
<input type="text" name="name" />
<label>Groep</label>
<select name="group">
<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" />
</ActionForm>
}
}

View File

@ -3,17 +3,7 @@ use leptos::*;
/// Renders the home page of your application.
#[component]
pub fn HomePage() -> impl IntoView {
// Creates a reactive value to update the button
let on_click = move |_| {
spawn_local(async {
let _ =
crate::util::surrealdb::add_participant(String::from("Test"), String::from("A1"))
.await;
})
};
view! {
<h1>"Welcome to Leptos!"</h1>
<button on:click=on_click>"Click Me:"</button>
}
}

View File

@ -1,11 +1,10 @@
use leptos::{logging, server, ServerFnError};
cfg_if::cfg_if! {
if #[cfg(feature = "ssr")] {
use once_cell::sync::Lazy;
use surrealdb::engine::remote::ws::{Client, Ws};
use surrealdb::opt::auth::Root;
use surrealdb::Surreal;
use leptos::{ServerFnError};
pub static DB: Lazy<Surreal<Client>> = Lazy::new(Surreal::init);
@ -27,25 +26,3 @@ pub async fn connect() -> Result<(), ServerFnError> {
Ok(())
}
#[server]
pub async fn add_participant(name: String, group: String) -> Result<(), ServerFnError> {
let created: Vec<schemas::Participant> = DB
.create("participant")
.content(schemas::NewParticipant { name, group })
.await?;
match created.first() {
Some(participant) => {
logging::log!(
"Succesfully created participant: {} ({})",
participant.name,
participant.group
);
Ok(())
}
None => Err(ServerFnError::ServerError(String::from(
"Could not create participant",
))),
}
}

View File

@ -0,0 +1,28 @@
form {
display: flex;
flex-direction: column;
text-align: center;
margin: 40px auto 0 auto;
width: 400px;
}
form label {
text-align: left;
margin-left: 5px;
margin-bottom: 3px;
}
input,select {
background-color: $secondary-bg-color-light;
border: none;
border-radius: 3px;
padding: 5px 10px;
font-size: 0.9em;
color: $text-color;
margin-bottom: 20px;
}
input[type=submit]:hover {
background-color: $secondary-bg-color-lighter;
cursor: pointer;
}

View File

@ -9,6 +9,7 @@ $secondary-bg-color-lighter: hsl(204, 11%, 15%, 1);
$accent-bg-color: #181a19;
$text-color: #f3efef;
@import "forms";
@import "header";
html,
@ -26,3 +27,8 @@ body {
color: $text-color;
align-items: center;
}
main {
width: 100%;
max-width: 800px;
}