Added UI for adding a participant
This commit is contained in:
parent
5dce2e3ca9
commit
0c051192f3
@ -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>
|
||||
|
@ -1 +1,3 @@
|
||||
pub mod add_participant;
|
||||
pub mod index;
|
||||
|
||||
|
83
application/src/pages/add_participant.rs
Normal file
83
application/src/pages/add_participant.rs
Normal 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>
|
||||
}
|
||||
}
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
@ -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",
|
||||
))),
|
||||
}
|
||||
}
|
||||
|
28
application/style/forms.scss
Normal file
28
application/style/forms.scss
Normal 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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user