Mobile Seite schön gemacht und generelle Verbesserungen

package.json

@@ -51,6 +51,7 @@
     "katex": "^0.16.7",
     "knex": "^2.4.2",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.5.45",
     "pg": "^8.11.0",
     "radix-svelte-icons": "^1.0.0",
     "sass": "^1.62.1",

src/components/AnsichtsausweisButton.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
-	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
 
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnenClient;
-	export let gebaeude: GebaeudeClient;
 
-	let base64: string = "";
+	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64")
-	$: {
-		if (ausweis && gebaeude) {
-			base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
-		}
-	}
 </script>
 
 <a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/ansichtsausweis?base64={base64}">

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -5,8 +5,6 @@
 	import ImageGrid from "../ImageGrid.svelte";
 	import {
 	Enums,
-		type BedarfsausweisWohnen,
-		type VerbrauchsausweisGewerbe,
 	} from "@ibcornelsen/database/client";
 
 	import {
@@ -16,9 +14,7 @@
 	} from "./types";
 
 	export let ausweis:
-		| VerbrauchsausweisWohnenClient
+		| VerbrauchsausweisWohnenClient;
-		| VerbrauchsausweisGewerbe
-		| BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeClient;
 
 	export let images: UploadedGebaeudeBild[] = [];
@@ -53,8 +49,8 @@
 		<hr class="trenner_form_100" />
 
 		<div class="flex flex-row gap-4">
-			<AnsichtsausweisButton {ausweis} {gebaeude} />
+			<AnsichtsausweisButton {ausweis} />
-			<DatenblattButton {ausweis} {gebaeude} />
+			<DatenblattButton {ausweis} />
 		</div>
 	</div>
 </div>

src/components/Ausweis/Verbrauch.svelte

@@ -36,14 +36,17 @@
 		fuelMap[fuel[0]].push(fuel[1]);
 	}
 
-	let month: string = "01";
-	let year: string = "2018";
-
-	$: {
-		if (month && year) {
-			ausweis.startdatum = moment(`${month}.01.${year}`).toDate();
 	console.log(ausweis.startdatum);
 	
+
+	let month = ausweis.startdatum?.getMonth() || 1;
+	let year = ausweis.startdatum?.getFullYear() || 2018;
+
+	$: {
+		if (typeof month === "number" && typeof year === "number") {
+			// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
+			// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
+			ausweis.startdatum = moment().set("month", month).set("year", year).startOf("month").add(2, "days").toDate();
 		}
 	}
 
@@ -171,7 +174,7 @@
 				>
 					<option>auswählen</option>
 					{#each availableMonths as m, i}
-						<option value={i + 1}>{m}</option>
+						<option value={i}>{m}</option>
 					{/each}
 				</select>
 

src/components/Dashboard/DashboardAusweis.svelte

@@ -60,7 +60,7 @@
 <div class="card lg:card-side bg-base-200 card-bordered border-base-300">
 	{#if ausweis.gebaeude_aufnahme_allgemein.storniert}
 		<div class="absolute top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.7)] z-[5] rounded-lg select-none">
-			<h1 class="absolute -rotate-[25deg] text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
+			<h1 class="absolute -rotate-[25deg] text-5xl md:text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
 		</div>
 	{/if}
 	<figure class="lg:w-1/2">

src/components/Dashboard/DashboardSidebar.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { ripple } from "svelte-ripple-action";
 	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
-	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed } from "radix-svelte-icons"
+	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu } from "radix-svelte-icons"
 	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
 	import DashboardNotification from "./DashboardNotification.svelte";
 	import { notifications } from "#components/NotificationProvider/shared";
 	import ThemeController from "#components/ThemeController.svelte";
 	import { BenutzerClient } from "#components/Ausweis/types";
+	import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
+	import { slide } from "svelte/transition";
 
 	export let lightTheme: boolean;
 	export let benutzer: BenutzerClient;
@@ -15,10 +17,29 @@
 		center: false,
 		color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
 	};
+
+	let headerOpen = false;
 </script>
 
-<aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
+<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-20">
-	<a href="/" class="px-8"
+	<button on:click={() => headerOpen = !headerOpen}>
+		{#if headerOpen}
+		<Cross1 size={28}></Cross1>
+	{:else}
+		<HamburgerMenu size={28}></HamburgerMenu>
+	{/if}
+	</button>
+	<a href="/" class="block md:hidden"
+		><img
+			src="/images/header/logo-big.svg"
+			class="w-24"
+			alt="IBCornelsen - Logo"
+		/></a
+	>
+</header>
+
+<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
+	<a href="/" class="px-8 hidden md:block"
 		><img
 			src="/images/header/logo-big.svg"
 			class="w-36"
@@ -26,7 +47,7 @@
 		/></a
 	>
 
-	<div class="menu flex flex-col gap-2 mt-12 px-0">
+	<div class="menu flex flex-col gap-2 mt-0 md:mt-12 px-0">
 		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
 			<Home width={22} height={22} />
 			Home

src/components/DatenblattButton.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
-	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
 
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnenClient;
-	export let gebaeude: GebaeudeClient;
 
-	let base64: string = "";
+	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64");
-	$: {
-		if (ausweis && gebaeude) {
-			base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
-		}
-	}
 </script>
 
 <a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">

src/layouts/UserLayout.astro

@@ -103,7 +103,7 @@ let lightTheme = Astro.cookies.get("theme").value === "light";
 
 	<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
 		<DashboardSidebar lightTheme={lightTheme} benutzer={benutzer} client:load></DashboardSidebar>
-		<main class="p-8 overflow-auto h-screen bg-base-100">
+		<main class="p-4 md:p-8 overflow-auto h-screen bg-base-100 pt-20 md:!pt-24">
 			<slot />
 		</main>
 	</body>

src/lib/AusweisData.ts

@@ -1,17 +1,20 @@
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 
 export function convertAusweisData(
-	inputs: VerbrauchsausweisWohnenClient
+	inputs: Partial<VerbrauchsausweisWohnenClient>
 ): Record<string, string> {
+	let gebaeude_aufnahme_allgemein = inputs.gebaeude_aufnahme_allgemein || {};
+	let gebaeude_stammdaten = inputs.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+
 	return {
-		"gebaeude_stammdaten.adresse": inputs.gebaeude_aufnahme_allgemein.adresse || "",
+		"gebaeude_stammdaten.adresse": gebaeude_stammdaten.adresse || "",
 		"gebaeude_stammdaten.gebaeudetyp":
-			inputs.gebaeude_aufnahme_allgemein.gebaeudetyp || "",
+		gebaeude_stammdaten.gebaeudetyp || "",
 		"gebaeude_stammdaten.baujahr_gebaeude":
-			inputs.gebaeude_aufnahme_allgemein.baujahr_gebaeude.join(", ") || "",
+		gebaeude_stammdaten.gebaeude_aufnahme_allgemein?.join(", ") || "",
 		"gebaeude_stammdaten.baujahr_heizung":
-			inputs.gebaeude_aufnahme_allgemein.baujahr_heizung.join(", ") || "",
+		gebaeude_stammdaten.gebaeude_aufnahme_allgemein?.join(", ") || "",
-		"gebaeude_stammdaten.plz": inputs.gebaeude_aufnahme_allgemein.plz || "",
+		"gebaeude_stammdaten.plz": gebaeude_stammdaten.plz || "",
-		"gebaeude_stammdaten.ort": inputs.gebaeude_aufnahme_allgemein.ort || "",
+		"gebaeude_stammdaten.ort": gebaeude_stammdaten.ort || "",
 	};
 }

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -103,8 +103,9 @@
 			// Jetzt müssen wir ihn nun nur noch abspeichern.
 			try {
 				const gebaeudeBilderEntfernt = exclude(gebaeude, ["gebaeude_bilder"])
-				const gebaeudeAufnahmeGeneratedFieldsEntfernt = exclude(gebaeude_aufnahme_allgemein, ["erstellungsdatum"])
+				const gebaeudeAufnahmeGeneratedFieldsEntfernt = exclude(gebaeude_aufnahme_allgemein, ["erstellungsdatum", "events"])
-				const ausweisGeneratedFieldsEntfernt = exclude(ausweis, ["ausweisart", "rechnungen"])
+				const ausweisGeneratedFieldsEntfernt = exclude(ausweis, ["ausweisart", "rechnungen", "erstellungsdatum"])
+				
 				await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
 					...ausweisGeneratedFieldsEntfernt,
 					gebaeude_aufnahme_allgemein: {
@@ -115,6 +116,9 @@
 					}
 				})
 
+				console.log(ausweisGeneratedFieldsEntfernt);
+				
+
 				await bilderHochladen();
 
 				return true;
@@ -187,7 +191,7 @@
 		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
 		ausweis.einheit_1 = "kWh";
 		ausweis.anteil_warmwasser_1 = 18;
-		ausweis.startdatum = moment("12.01.2019").toDate();
+		ausweis.startdatum = moment("01.01.2019").toDate();
 		gebaeude.plz = "21039";
 		gebaeude.ort = "Hamburg";
 		gebaeude.adresse = "Curslacker Deich 170";

src/modules/Dashboard/DashboardEinstellungenModule.svelte

@@ -61,9 +61,9 @@
 	}
 </script>
 
-<h1 class="text-4xl font-medium my-8">Einstellungen</h1>
+<h1 class="text-4xl font-medium mb-8">Einstellungen</h1>
-<Tabs class="h-full">
+<Tabs class="h-[calc(100%-6rem)]">
-	<div class="grid grid-cols-[1fr_3fr] h-full gap-8">
+	<div class="grid grid-cols-1 md:grid-cols-[1fr_3fr] h-full gap-8">
 		<TabList>
 			<Tab>
 				<Person size={22} />
@@ -106,7 +106,7 @@
 			<TabPanel>
 				<h2 class="text-2xl font-medium">Profil</h2>
 				<form class="flex flex-col gap-4 my-4 max-w-2xl" on:submit={profilSpeichern}>
-					<div class="flex flex-row gap-4">
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 						<div class="flex flex-col">
 							<span class="whitespace-nowrap">Vorname</span>
 							<input type="text" class="input text-base-content font-medium" placeholder="Max" bind:value={benutzer.vorname}>
@@ -124,7 +124,7 @@
 						<span class="whitespace-nowrap">Telefonnummer</span>
 						<input type="phone" class="input text-base-content font-medium" placeholder="040 12345678" bind:value={benutzer.telefon}>
 					</div>
-					<div class="flex flex-row gap-4">
+					<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 						<div class="flex flex-col">
 							<span class="whitespace-nowrap">Adresse</span>
 							<input type="text" class="input text-base-content font-medium" placeholder="Musterstraße 123" bind:value={benutzer.adresse}>
@@ -138,7 +138,7 @@
 							<input type="text" class="input text-base-content font-medium" placeholder="Musterhausen" bind:value={benutzer.ort}>
 						</div>
 					</div>
-					<div class="flex flex-row gap-4">
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 						<div class="flex flex-col">
 							<span class="whitespace-nowrap">Passwort</span>
 							<input type="password" class="input text-base-content font-medium" placeholder="*********" bind:value={passwort}>
@@ -152,7 +152,8 @@
 				</form>
 			</TabPanel>
 			<TabPanel>
-				<h1>Panel Two</h1>
+				<h2 class="text-2xl font-medium">Ausweise</h2>
+				<p>In Zukunft werden sie hier spezifische Einstellungen für die Ausweisgenerierung ansehen können. Bitte haben sie Geduld.</p>
 			</TabPanel>
 		</div>
 	</div>

src/pages/pdf/ansichtsausweis.astro

@@ -8,7 +8,7 @@ import { createCaller } from "#lib/caller";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 
 const base64 = Astro.url.searchParams.get("base64");
-let ausweis: VerbrauchsausweisWohnenClient | null = null;
+let ausweis: Partial<VerbrauchsausweisWohnenClient> | null = null;
 if (base64) {
 	const buffer = Buffer.from(base64, "base64");
 	const json = buffer.toString("utf-8");
@@ -27,10 +27,6 @@ if (base64) {
 	})
 }
 
-if (!ausweis) {
-	return Astro.redirect("/404");
-}
-
 const pdf = await generate({
 	template: VerbrauchsausweisWohnen2016Template,
 	plugins: { text, image, variable },