Build header of main page

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

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) }
+        }
+    }
+}

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;
+}

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" {}
+                            " €"
+                        }
+                    }
+                }
+            }
+        },
+    )
+}

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?;