Updats

src/modules/Dashboard/DashboardAufnahmeModule.svelte

@@ -2,7 +2,7 @@
 	import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
 	import Carousel from "#components/Carousel.svelte";
 	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
-	import { Objekt } from "#lib/client/prisma";
+	import { Objekt } from "#lib/client/prisma.js";
 	import { ChevronLeft, ChevronRight } from "radix-svelte-icons";
 
 	export let user: BenutzerClient;

src/modules/Dashboard/DashboardEinstellungenModule.svelte

@@ -5,34 +5,32 @@
 		Cube,
 		Person,
 	} from "radix-svelte-icons";
-	import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs";
-	import { dialogs } from "../../../svelte-dialogs.config";
-	import { BenutzerClient } from "#components/Ausweis/types";
-	// import { client } from "src/trpc";
-	import { exclude } from "#lib/exclude";
+	import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs/index.js";
+	import { dialogs } from "../../../svelte-dialogs.config.js";
+	import { BenutzerClient } from "#components/Ausweis/types.js";
+	import { exclude } from "#lib/exclude.js";
+	import { api } from "astro-typesafe-api/client";
+	import Cookies from "js-cookie";
+	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
 
 	export let benutzer: BenutzerClient;
 
-	let passwort: string | undefined = undefined;
-	let passwortVerify: string | undefined = undefined;
+	let passwort: string = "";
+	let passwortVerify: string = "";
 	async function profilSpeichern(e: SubmitEvent) {
 		e.preventDefault()
-		if (!passwort) {
-			passwort = undefined
-		} else {
-			if (passwort.length < 8) {
-				dialogs.alert({
-					title: "Passwort zu kurz",
-					text: "Das Passwort muss mindestens 8 Zeichen lang sein.",
-				})
-				return
-			} else if (passwort !== passwortVerify) {
-				dialogs.alert({
-					title: "Passwörter stimmen nicht überein",
-					text: "Die eingegebenen Passwörter stimmen nicht überein.",
-				})
-				return
-			}
+		if (passwort.length < 8) {
+			dialogs.alert({
+				title: "Passwort zu kurz",
+				text: "Das Passwort muss mindestens 8 Zeichen lang sein.",
+			})
+			return
+		} else if (passwort !== passwortVerify) {
+			dialogs.alert({
+				title: "Passwörter stimmen nicht überein",
+				text: "Die eingegebenen Passwörter stimmen nicht überein.",
+			})
+			return
 		}
 
 		const response = await dialogs.confirm({
@@ -51,7 +49,11 @@
 
 		// Wir wollen die Rolle nicht mit übertragen.
 		// Diese wird zwar sowieso rausgeschmissen aber sonst kommen wir nicht durch die Validation durch...
-		await client.v1.benutzer.update.mutate(benutzerObjekt)
+		await api.user.POST.fetch(benutzerObjekt, {
+			headers: {
+				Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
+			}
+		})
 
 		dialogs.success({
 			title: "Profil gespeichert",
@@ -175,7 +177,7 @@
 	}
 
 	:global(.tab) {
-		@apply  rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content;
+		@apply flex flex-row py-4 rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content;
 	}
 
 	:global(.tab:hover) {

src/modules/Dashboard/DashboardModule.svelte

@@ -1,24 +1,121 @@
 <script lang="ts">
-	import { BenutzerClient, ObjektKomplettClient } from "#components/Ausweis/types.js";
-	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
+	import "../../style/formular.css";
+	import {
+		BenutzerClient,
+		ObjektClient,
+		ObjektKomplettClient,
+	} from "#components/Ausweis/types.js";
 	import DashboardObjekt from "#components/Dashboard/DashboardObjekt.svelte";
+	import Overlay from "#components/Overlay.svelte";
+	import PlzSuche from "#components/PlzSuche.svelte";
+	import TagInput from "#components/TagInput.svelte";
+	import { api } from "astro-typesafe-api/client";
+	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
+	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
+	import { addNotification } from "#components/Notifications/shared.js";
+	import Cookies from "js-cookie";
+	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
 
 	export let user: BenutzerClient;
 	export let objekte: ObjektKomplettClient[];
+
+	let objektOverlayHidden = true;
+
+	let objekt: Omit<ObjektClient, "uid"> = {
+		adresse: "",
+		erstellungsdatum: new Date(),
+		latitude: 0,
+		longitude: 0,
+		ort: "",
+		plz: ""
+	};
+
+	async function objektErstellen() {
+		if (!objekt.adresse || !objekt.ort || !objekt.plz) {
+			addNotification({
+				message: "Daten unvollständig.",
+				subtext: "Ihre eingegebenen Daten sind unvollständig, bitte vervollständigen sie diese und versuchen sie es erneut..",
+				timeout: 3000,
+				dismissable: true,
+				type: "error"
+			})
+
+			return;
+		}
+
+		const result = await api.objekt.PUT.fetch({
+			adresse: objekt.adresse,
+			erstellungsdatum: new Date(),
+			latitude: 0,
+			longitude: 0,
+			ort: objekt.ort,
+			plz: objekt.plz
+		}, {
+			headers: {
+				Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
+			}
+		})
+
+		if (!result) {
+			addNotification({
+				message: "Etwas ist schiefgelaufen.",
+				subtext: "Das Objekt konnte nicht erstellt werden.",
+				timeout: 3000,
+				dismissable: true,
+				type: "error"
+			})
+
+			return;
+		}
+
+		objektOverlayHidden = true;
+
+		objekte.push({
+			...objekt,
+			aufnahmen: [],
+			uid: result.uid
+		})
+
+		objekt = {
+			adresse: "",
+			erstellungsdatum: new Date(),
+			latitude: 0,
+			longitude: 0,
+			ort: "",
+			plz: ""
+		}
+
+		objekte = objekte
+	}
 </script>
 
 <h1>Gebäudeübersicht</h1>
 
-<hr>
+<hr />
 
 <div class="relative mb-6">
-	<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center">
-		Gebäude anlegen +
-	</button>
-</div>	
+	<button class="button" on:click={() => {
+		objektOverlayHidden = false
+	}}> Gebäude anlegen + </button>
+</div>
 
-	<div class="columns columns-1 md:columns-2  lg:columns-3  gap-4">
-		{#each objekte as objekt}
+<div class="columns columns-1 md:columns-2 lg:columns-3 gap-4">
+	{#each objekte as objekt}
 		<DashboardObjekt {objekt}></DashboardObjekt>
 	{/each}
-</div>
+</div>
+
+<Overlay bind:hidden={objektOverlayHidden}>
+	<div class="bg-white w-full max-w-screen-sm px-4 py-6 flex flex-col gap-4">
+		<h2 class="p-0 m-0">Gebäude erstellen</h2>
+
+		<input type="text" placeholder="Adresse" bind:value={objekt.adresse}>
+		<div class="flex flex-row gap-4 justify-between">
+			<PlzSuche bind:city={objekt.ort} bind:zip={objekt.plz} name="" placeholder="PLZ"></PlzSuche>
+			<input type="text" bind:value={objekt.ort} placeholder="Ort">
+		</div>
+		<button class="button mt-4" on:click={objektErstellen}>Gebäude Erstellen</button>
+		</div>
+</Overlay>
+
+<NotificationWrapper></NotificationWrapper>