Added timer UI

application/Cargo.toml

@@ -21,10 +21,11 @@ thiserror = "1"
 tracing = { version = "0.1", optional = true }
 http = "1"
 surrealdb = { version = "1.3.1", optional = true }
-serde = "1.0.197"
+serde = { version = "1.0.197", features = ["derive"] }
 serde_json = "1.0.115"
 cfg-if = "1.0.0"
 once_cell = "1.19.0"
+futures = "0.3.30"
 
 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]

application/src/app.rs

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

application/src/components/header.rs

@@ -1,4 +1,5 @@
 use leptos::*;
+use leptos_router::*;
 
 /// Renders the home page of your application.
 #[component]
@@ -7,7 +8,7 @@ pub fn Header() -> impl IntoView {
     view! {
         <header>
             <div class="header-container">
-                <h3>"WRB Timings"</h3>
+                <A href="/">"WRB Timings"</A>
                 <div>Connection: <span>???</span></div>
             </div>
         </header>

application/src/main.rs

@@ -7,6 +7,10 @@ async fn main() {
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
 
+    application::util::surrealdb::connect()
+        .await
+        .expect("Database connection failed");
+
     // Setting get_configuration(None) means we'll be using cargo-leptos's env values
     // For deployment these variables are:
     // <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
@@ -26,10 +30,6 @@ async fn main() {
     let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
     logging::log!("listening on http://{}", &addr);
 
-    application::util::surrealdb::connect()
-        .await
-        .expect("Database connection failed");
-
     axum::serve(listener, app.into_make_service())
         .await
         .unwrap();

application/src/pages.rs

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

application/src/pages/add_participant.rs

@@ -10,7 +10,7 @@ cfg_if::cfg_if! {
 
 #[server(AddParticipant)]
 async fn add_participant(name: String, group: String) -> Result<(), ServerFnError> {
-    let created: Vec<schemas::Participant> = DB
+    let created: Vec<schemas::ParticipantRecord> = DB
         .create("participant")
         .content(schemas::NewParticipant { name, group })
         .await?;
@@ -39,9 +39,9 @@ pub fn AddParticipant() -> impl IntoView {
         <h2>"Deelnemer toevoegen"</h2>
         <ActionForm action=form_submit>
             <label>Naam</label>
-            <input type="text" name="name" />
+            <input type="text" name="name" autocomplete="off" />
             <label>Groep</label>
-            <select name="group">
+            <select name="group" autocomplete="off">
                 <option value="A1">A1</option>
                 <option value="A2">A2</option>
                 <option value="A3">A3</option>
@@ -77,7 +77,7 @@ pub fn AddParticipant() -> impl IntoView {
                 <option value="Z5">Z5</option>
                 <option value="Z6">Z6</option>
             </select>
-            <input type="submit" />
+            <input type="submit" value="Deelnemer toevoegen" />
         </ActionForm>
     }
 }

application/src/pages/add_time.rs

@@ -0,0 +1,46 @@
+use leptos::*;
+use leptos_router::ActionForm;
+
+cfg_if::cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::util::surrealdb::{DB, schemas};
+        use leptos::logging;
+    }
+}
+
+#[server(AddTime)]
+async fn add_time(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 AddTime() -> impl IntoView {
+    let form_submit = create_server_action::<AddTime>();
+
+    view! {
+        <h2>"Tijd toevoegen"</h2>
+        <ActionForm action=form_submit>
+            <label>Naam</label>
+            <input type="text" name="name" autocomplete="off" />
+            <input type="submit" value="Tijd toevoegen" />
+        </ActionForm>
+    }
+}

application/src/pages/index.rs

@@ -1,9 +1,13 @@
 use leptos::*;
+use leptos_router::*;
 
 /// Renders the home page of your application.
 #[component]
 pub fn HomePage() -> impl IntoView {
     view! {
-        <h1>"Welcome to Leptos!"</h1>
+        <div class="actions-container">
+            <A href="/add-participant">Deelnemer toevoegen</A>
+            <A href="/add-time">Tijd toevoegen</A>
+        </div>
     }
 }

application/src/util/surrealdb.rs

@@ -1,3 +1,5 @@
+pub mod schemas;
+
 cfg_if::cfg_if! {
     if #[cfg(feature = "ssr")] {
         use once_cell::sync::Lazy;
@@ -7,8 +9,6 @@ cfg_if::cfg_if! {
         use leptos::{ServerFnError};
 
         pub static DB: Lazy<Surreal<Client>> = Lazy::new(Surreal::init);
-
-        pub mod schemas;
     }
 }
 

application/src/util/surrealdb/schemas.rs

@@ -1,5 +1,10 @@
-use serde::{Deserialize, Serialize};
+cfg_if::cfg_if! {
+    if #[cfg(feature = "ssr")] {
         use surrealdb::sql::Thing;
+    }
+}
+
+use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Events {
@@ -8,9 +13,18 @@ pub struct Events {
     popduiken: String,
 }
 
+#[cfg(feature = "ssr")]
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct ParticipantRecord {
+    pub id: Thing,
+    pub name: String,
+    pub group: String,
+    pub events: Option<Events>,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Participant {
-    pub id: Thing,
+    pub id: String,
     pub name: String,
     pub group: String,
     pub events: Option<Events>,

application/style/header.scss

@@ -13,7 +13,15 @@ header {
   margin: 10px 20px;
 }
 
-.header-container h3 {
+.header-container a {
+  margin-right: auto;
+  font-weight: bold;
+  text-decoration: none;
+  color: $text-color;
+  font-size: 1.1em;
+}
+
+.header-container a:hover {
   margin: 0;
   margin-right: auto;
 }

application/style/index.scss

@@ -0,0 +1,26 @@
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: $text-color;
+}
+
+.actions-container {
+  display: flex;
+  width: 100%;
+  margin-top: 20px;
+  gap: 20px;
+}
+
+.actions-container a {
+  width: 100%;
+  padding: 12px 0;
+  background-color: $secondary-bg-color;
+  text-align: center;
+  border-radius: 15px;
+  border: dashed $secondary-bg-color-lighter;
+}
+
+.actions-container a:hover {
+  background-color: $secondary-bg-color-light;
+}
+

application/style/main.scss

@@ -11,6 +11,7 @@ $text-color: #f3efef;
 
 @import "forms";
 @import "header";
+@import "index";
 
 html,
 body {