From 738509edab0d15fe3ab2699ebc6a2657371b0984 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Sat, 4 May 2024 22:05:43 +0200
Subject: [PATCH] Build header of main page

---
 .vscode/settings.json  |  5 ++++
 src/endpoints.rs       | 18 ++++++++++++++
 src/endpoints/base.css | 50 +++++++++++++++++++++++++++++++++++++++
 src/endpoints/index.rs | 53 ++++++++++++++++++++++++++++++++++++++++++
 src/main.rs            | 10 ++------
 5 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/endpoints.rs
 create mode 100644 src/endpoints/base.css
 create mode 100644 src/endpoints/index.rs

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d770d54
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/src/endpoints.rs b/src/endpoints.rs
new file mode 100644
index 0000000..a101acd
--- /dev/null
+++ b/src/endpoints.rs
@@ -0,0 +1,18 @@
+use maud::{html, Markup};
+
+pub mod index;
+
+fn page(head: Markup, body: Markup) -> Markup {
+    html! {
+        (maud::DOCTYPE)
+        html lang="en" {
+            head {
+                meta charset="utf-8";
+                meta name="viewport" content="width=device-width, initial-scale=1";
+                title { "KIT time sheets" }
+                (head)
+            }
+            body { (body) }
+        }
+    }
+}
diff --git a/src/endpoints/base.css b/src/endpoints/base.css
new file mode 100644
index 0000000..f44828a
--- /dev/null
+++ b/src/endpoints/base.css
@@ -0,0 +1,50 @@
+:root {
+  font-family: Arial, FreeSans, sans-serif;
+}
+form {
+  max-width: 210mm; /* DIN-A 4 */
+  margin: 0 auto;
+  padding: 0 5mm 5mm;
+  border: 2px solid black;
+  border-radius: 0 8mm 0 8mm;
+}
+h1 {
+  color: #009682;
+  text-align: center;
+}
+label {
+  font-weight: bold;
+}
+#header {
+  display: grid;
+  grid: auto-flow / 2fr 1fr 1fr;
+  gap: 1mm;
+}
+#l-month {
+  grid-column: 2;
+  text-align: center;
+}
+#i-name,
+#i-department,
+#mhhr {
+  grid-column: 2 / 4;
+}
+#gfub {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+#mhhr {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+#i-monthlyhours {
+  width: 6ch;
+}
+#l-hourlyrate {
+  padding-left: 4ch;
+}
+#i-hourlyrate {
+  width: 8ch;
+}
diff --git a/src/endpoints/index.rs b/src/endpoints/index.rs
new file mode 100644
index 0000000..220cd92
--- /dev/null
+++ b/src/endpoints/index.rs
@@ -0,0 +1,53 @@
+use maud::{html, Markup};
+
+use crate::endpoints::page;
+
+pub async fn get() -> Markup {
+    page(
+        html! {
+            style { (include_str!("base.css")) }
+        },
+        html! {
+            form {
+                h1 { "Arbeitszeitdokumentationsgenerator" }
+
+                div #header {
+                    label #l-month for="i-month" { "Monat / Jahr:" }
+                    input #i-month name="month" type="month" placeholder="2024-04" {} // TODO Fill in previous month by default
+
+                    label #l-name for="i-name" { "Name, Vorname des/r Beschäftigten:" }
+                    input #i-name name="name" type="text" placeholder="McStudentface, Student" {}
+
+                    label #l-staffid for="i-staffid" { "Personalnummer:" }
+                    input #i-staffid name="staff_id" type="number" placeholder="1337420" {}
+
+                    div #gfub {
+                        label #l-gf title="Großforschung" { "GF: "
+                            input #i-gf name="working_area" type="radio" value="gf" {}
+                        }
+
+                        label #l-ub for="i-ub" title="Unibereich" { "UB: "
+                            input #i-ub name="working_area" type="radio" value="ub" {}
+                        }
+                    }
+
+                    label #l-department for="i-department" title="Organisationseinheit" { "OE:" }
+                    input #i-department name="department" type="text" placeholder="Institut für Informatik" value="Institut für Informatik" {}
+
+                    label #l-monthlyhours for="i-monthlyhours" { "Vertraglich vereinbarte Arbeitszeit:" }
+                    div #mhhr {
+                        span {
+                            input #i-monthlyhours name="monthly_hours" type="number" value="40" {}
+                            " Std."
+                        }
+                        label #l-hourlyrate for="i-hourlyrate" { "Stundensatz:" }
+                        span {
+                            input #i-hourlyrate name="hourly_rate" type="number" step="0.01" placeholder="14.09" {}
+                            " €"
+                        }
+                    }
+                }
+            }
+        },
+    )
+}
diff --git a/src/main.rs b/src/main.rs
index 6b84bd4..daeb7db 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,8 +1,8 @@
+mod endpoints;
 mod render;
 
 use axum::{routing::get, Router};
 use clap::Parser;
-use maud::{html, Markup};
 use tokio::net::TcpListener;
 
 #[derive(Parser)]
@@ -10,17 +10,11 @@ struct Args {
     addr: String,
 }
 
-async fn root() -> Markup {
-    html! {
-        h1 { "Hello world!" }
-    }
-}
-
 #[tokio::main]
 async fn main() -> anyhow::Result<()> {
     let args = Args::parse();
 
-    let app = Router::<()>::new().route("/", get(root));
+    let app = Router::<()>::new().route("/", get(endpoints::index::get));
     let listener = TcpListener::bind(args.addr).await?;
     axum::serve(listener, app).await?;