From fa455d5df0c5720076f159b6669ad0b12a53f0d7 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Fri, 5 Apr 2024 08:54:01 +0200
Subject: [PATCH] Added timer UI

---
 application/Cargo.toml                    |  3 +-
 application/src/app.rs                    |  1 +
 application/src/components/header.rs      |  3 +-
 application/src/main.rs                   |  8 ++--
 application/src/pages.rs                  |  2 +-
 application/src/pages/add_participant.rs  |  8 ++--
 application/src/pages/add_time.rs         | 46 +++++++++++++++++++++++
 application/src/pages/index.rs            |  6 ++-
 application/src/util/surrealdb.rs         |  4 +-
 application/src/util/surrealdb/schemas.rs | 18 ++++++++-
 application/style/header.scss             | 10 ++++-
 application/style/index.scss              | 26 +++++++++++++
 application/style/main.scss               |  1 +
 13 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 application/src/pages/add_time.rs
 create mode 100644 application/style/index.scss

diff --git a/application/Cargo.toml b/application/Cargo.toml
index a4432b4..27a60c9 100644
--- a/application/Cargo.toml
+++ b/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"]
diff --git a/application/src/app.rs b/application/src/app.rs
index abcd03b..fae913d 100644
--- a/application/src/app.rs
+++ b/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>
diff --git a/application/src/components/header.rs b/application/src/components/header.rs
index b91eaae..e8291e1 100644
--- a/application/src/components/header.rs
+++ b/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>
diff --git a/application/src/main.rs b/application/src/main.rs
index 9ec58fe..2bf13b2 100644
--- a/application/src/main.rs
+++ b/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();
diff --git a/application/src/pages.rs b/application/src/pages.rs
index 04177cc..7150ec5 100644
--- a/application/src/pages.rs
+++ b/application/src/pages.rs
@@ -1,3 +1,3 @@
 pub mod add_participant;
+pub mod add_time;
 pub mod index;
-
diff --git a/application/src/pages/add_participant.rs b/application/src/pages/add_participant.rs
index 75c8923..1b139cd 100644
--- a/application/src/pages/add_participant.rs
+++ b/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>
     }
 }
diff --git a/application/src/pages/add_time.rs b/application/src/pages/add_time.rs
new file mode 100644
index 0000000..b7418ab
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/application/src/pages/index.rs b/application/src/pages/index.rs
index 2dcb85d..e68c818 100644
--- a/application/src/pages/index.rs
+++ b/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>
     }
 }
diff --git a/application/src/util/surrealdb.rs b/application/src/util/surrealdb.rs
index 833395d..b9aeac3 100644
--- a/application/src/util/surrealdb.rs
+++ b/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;
     }
 }
 
diff --git a/application/src/util/surrealdb/schemas.rs b/application/src/util/surrealdb/schemas.rs
index ca01bc5..2fab564 100644
--- a/application/src/util/surrealdb/schemas.rs
+++ b/application/src/util/surrealdb/schemas.rs
@@ -1,5 +1,10 @@
+cfg_if::cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use surrealdb::sql::Thing;
+    }
+}
+
 use serde::{Deserialize, Serialize};
-use surrealdb::sql::Thing;
 
 #[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>,
diff --git a/application/style/header.scss b/application/style/header.scss
index 6520302..e69435d 100644
--- a/application/style/header.scss
+++ b/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;
 }
diff --git a/application/style/index.scss b/application/style/index.scss
new file mode 100644
index 0000000..425d60a
--- /dev/null
+++ b/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;
+}
+
diff --git a/application/style/main.scss b/application/style/main.scss
index 4229c8f..6772039 100644
--- a/application/style/main.scss
+++ b/application/style/main.scss
@@ -11,6 +11,7 @@ $text-color: #f3efef;
 
 @import "forms";
 @import "header";
+@import "index";
 
 html,
 body {