Added UI for adding a participant

application/src/app.rs

@@ -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>

application/src/pages.rs

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

application/src/pages/add_participant.rs

@@ -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>
+    }
+}

application/src/pages/index.rs

@@ -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>
     }
 }

application/src/util/surrealdb.rs

@@ -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",
-        ))),
-    }
-}

application/style/forms.scss

@@ -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;
+}

application/style/main.scss

@@ -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;
+}