diff --git a/application/src/app.rs b/application/src/app.rs
index f865a21..abcd03b 100644
--- a/application/src/app.rs
+++ b/application/src/app.rs
@@ -32,6 +32,7 @@ pub fn App() -> impl IntoView {
+
diff --git a/application/src/pages.rs b/application/src/pages.rs
index 33edc95..04177cc 100644
--- a/application/src/pages.rs
+++ b/application/src/pages.rs
@@ -1 +1,3 @@
+pub mod add_participant;
pub mod index;
+
diff --git a/application/src/pages/add_participant.rs b/application/src/pages/add_participant.rs
new file mode 100644
index 0000000..75c8923
--- /dev/null
+++ 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 = 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::();
+
+ view! {
+ "Deelnemer toevoegen"
+
+
+
+
+
+
+
+ }
+}
diff --git a/application/src/pages/index.rs b/application/src/pages/index.rs
index e774d2b..2dcb85d 100644
--- a/application/src/pages/index.rs
+++ b/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! {
"Welcome to Leptos!"
-
}
}
diff --git a/application/src/util/surrealdb.rs b/application/src/util/surrealdb.rs
index 3a031be..833395d 100644
--- a/application/src/util/surrealdb.rs
+++ b/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> = 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 = 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",
- ))),
- }
-}
diff --git a/application/style/forms.scss b/application/style/forms.scss
new file mode 100644
index 0000000..addfc40
--- /dev/null
+++ 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;
+}
diff --git a/application/style/main.scss b/application/style/main.scss
index 9a94bd3..4229c8f 100644
--- a/application/style/main.scss
+++ b/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;
+}