Added UI for adding a participant

Added database connection & add participant function
Implemented SurrealDB
2024-04-04 17:39:34 +02:00 · 2024-04-04 17:10:58 +02:00 · 2024-04-04 16:06:36 +02:00
15 changed files with 261 additions and 22 deletions
--- a/application/Cargo.toml
+++ b/application/Cargo.toml
@ -20,10 +20,16 @@ wasm-bindgen = "=0.2.92"
 thiserror = "1"
 tracing = { version = "0.1", optional = true }
 http = "1"
+surrealdb = { version = "1.3.1", optional = true }
+serde = "1.0.197"
+serde_json = "1.0.115"
+cfg-if = "1.0.0"
+once_cell = "1.19.0"

 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
+    "dep:surrealdb",
    "dep:axum",
    "dep:tokio",
    "dep:tower",
--- a/application/src/app.rs
+++ b/application/src/app.rs
@ -3,14 +3,15 @@ use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;

+use crate::components;
+use crate::pages;
+
 #[component]
 pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
-
-
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/application.css"/>
@ -27,24 +28,13 @@ pub fn App() -> impl IntoView {
            }
            .into_view()
        }>
+            <components::header::Header />
            <main>
                <Routes>
-                    <Route path="" view=HomePage/>
+                    <Route path="" view=pages::index::HomePage/>
+                    <Route path="/add-participant" view=pages::add_participant::AddParticipant />
                </Routes>
            </main>
        </Router>
    }
 }
-
-/// Renders the home page of your application.
-#[component]
-fn HomePage() -> impl IntoView {
-    // Creates a reactive value to update the button
-    let (count, set_count) = create_signal(0);
-    let on_click = move |_| set_count.update(|count| *count += 1);
-
-    view! {
-        <h1>"Welcome to Leptos!"</h1>
-        <button on:click=on_click>"Click Me: " {count}</button>
-    }
-}
--- a/application/src/components.rs
+++ b/application/src/components.rs
@ -0,0 +1 @@
+pub mod header;
--- a/application/src/components/header.rs
+++ b/application/src/components/header.rs
@ -0,0 +1,15 @@
+use leptos::*;
+
+/// Renders the home page of your application.
+#[component]
+pub fn Header() -> impl IntoView {
+    // Creates a reactive value to update the button
+    view! {
+        <header>
+            <div class="header-container">
+                <h3>"WRB Timings"</h3>
+                <div>Connection: <span>???</span></div>
+            </div>
+        </header>
+    }
+}
--- a/application/src/main.rs
+++ b/application/src/main.rs
@ -1,11 +1,11 @@
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
+    use application::app::*;
+    use application::fileserv::file_and_error_handler;
    use axum::Router;
    use leptos::*;
    use leptos_axum::{generate_route_list, LeptosRoutes};
-    use application::app::*;
-    use application::fileserv::file_and_error_handler;

    // Setting get_configuration(None) means we'll be using cargo-leptos's env values
    // For deployment these variables are:
@ -25,6 +25,11 @@ 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();
--- a/application/src/pages.rs
+++ b/application/src/pages.rs
@ -0,0 +1,3 @@
+pub mod add_participant;
+pub mod index;
+
--- a/application/src/pages/add_participant.rs
+++ b/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>
+    }
+}
--- a/application/src/pages/index.rs
+++ b/application/src/pages/index.rs
@ -0,0 +1,9 @@
+use leptos::*;
+
+/// Renders the home page of your application.
+#[component]
+pub fn HomePage() -> impl IntoView {
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+    }
+}
--- a/application/src/util/surrealdb.rs
+++ b/application/src/util/surrealdb.rs
@ -1 +1,28 @@
-pub mod tables;
+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);
+
+        pub mod schemas;
+    }
+}
+
+#[cfg(feature = "ssr")]
+pub async fn connect() -> Result<(), ServerFnError> {
+    DB.connect::<Ws>("localhost:80").await?;
+
+    DB.signin(Root {
+        username: "root",
+        password: "root",
+    })
+    .await?;
+
+    DB.use_ns("wrb").use_db("timings").await?;
+
+    Ok(())
+}
--- a/application/src/util/surrealdb/schemas.rs
+++ b/application/src/util/surrealdb/schemas.rs
@ -0,0 +1,23 @@
+use serde::{Deserialize, Serialize};
+use surrealdb::sql::Thing;
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct Events {
+    lifesaver: String,
+    hindernis: String,
+    popduiken: String,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct Participant {
+    pub id: Thing,
+    pub name: String,
+    pub group: String,
+    pub events: Option<Events>,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct NewParticipant {
+    pub name: String,
+    pub group: String,
+}
--- a/application/src/util/surrealdb/tables.rs
+++ b/application/src/util/surrealdb/tables.rs
--- a/application/style/forms.scss
+++ b/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;
+}
--- a/application/style/header.scss
+++ b/application/style/header.scss
@ -0,0 +1,19 @@
+header {
+  width: 100%;
+  background-color: $secondary-bg-color;
+  display: flex;
+  justify-content: center;
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 1000px;
+  margin: 10px 20px;
+}
+
+.header-container h3 {
+  margin: 0;
+  margin-right: auto;
+}
--- a/application/style/main.scss
+++ b/application/style/main.scss
@ -1,4 +1,34 @@
+$primary-color: #eb6330;
+$primary-color-light: hsl(16.36, 82.38%, 55.49%, 0.8);
+$secondary-color: #465651;
+$accent-color: #89969f;
+$primary-bg-color: #0d0b0b;
+$secondary-bg-color: #151719;
+$secondary-bg-color-light: hsl(204, 11%, 12%, 1);
+$secondary-bg-color-lighter: hsl(204, 11%, 15%, 1);
+$accent-bg-color: #181a19;
+$text-color: #f3efef;
+
+@import "forms";
+@import "header";
+
+html,
 body {
-  font-family: sans-serif;
-  text-align: center;
+  height: 100vh;
+  max-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+body {
+  background-color: $primary-bg-color;
+  color: $text-color;
+  align-items: center;
+}
+
+main {
+  width: 100%;
+  max-width: 800px;
 }
--- a/flake.nix
+++ b/flake.nix
@ -30,9 +30,9 @@
            cargo-insta
            llvmPackages_latest.llvm
            llvmPackages_latest.bintools
+            llvmPackages_latest.clangNoLibc
            zlib.out
            dart-sass
-            clang
            llvmPackages_latest.lld
            (rust-bin.stable.latest.default.override {
              extensions= [ "rust-src" "rust-analyzer" ];
Author	SHA1	Message	Date
xeovalyte	0c051192f3	Added UI for adding a participant	2024-04-04 17:39:34 +02:00
xeovalyte	5dce2e3ca9	Added database connection & add participant function	2024-04-04 17:10:58 +02:00
xeovalyte	1ceb513228	Implemented SurrealDB	2024-04-04 16:06:36 +02:00