Ausweis Prüfen

public/images/dashboard/SymbolBilder.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   version="1.1"
+   id="svg1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="swatch3">
+      <stop
+         style="stop-color:#31448e;stop-opacity:1;"
+         offset="0"
+         id="stop3" />
+    </linearGradient>
+    <linearGradient
+       id="swatch2">
+      <stop
+         style="stop-color:#005287;stop-opacity:1;"
+         offset="0"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#swatch3"
+       id="linearGradient3"
+       x1="79.5"
+       y1="-480"
+       x2="880.5"
+       y2="-480"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <path
+     d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
+     id="path1"
+     style="stroke:url(#linearGradient3);stroke-opacity:1;fill:none" />
+  <path
+     style="fill:#008080;stroke:#005287;stroke-width:0.0394413;stroke-opacity:1"
+     d="M 7.7398074,17.94575 C 7.0139905,17.852784 6.3900463,17.333409 6.1262777,16.602638 l -0.091767,-0.25424 -0.011293,-6.113394 C 6.0158183,6.2288101 6.0258742,4.0065702 6.0523925,3.7878562 6.164151,2.866112 6.8754449,2.155744 7.7921581,2.0503553 c 0.4464765,-0.051329 11.9724939,-0.051329 12.4189699,0 0.685196,0.078773 1.268878,0.4991604 1.570701,1.1312731 l 0.147505,0.3089221 v 6.5078061 6.5078064 l -0.147505,0.308922 c -0.292418,0.612416 -0.877961,1.044866 -1.529169,1.129362 -0.346242,0.04492 -12.1626685,0.04616 -12.5128526,0.0013 z M 20.016434,9.9983566 V 3.9835661 H 14.001643 7.9868529 v 6.0147905 6.0147904 h 6.0147901 6.014791 z"
+     id="path3"
+     transform="matrix(40,0,0,40,0,-960)" />
+  <path
+     style="fill:#31448e;stroke:#005287;stroke-width:0.0394413;stroke-opacity:1;fill-opacity:1"
+     d="M 8.0242065,17.910852 C 7.5097507,17.887517 7.4785564,17.881117 7.1941484,17.740535 6.7018397,17.497188 6.3625614,17.114172 6.1526054,16.564724 L 6.0512696,16.299532 6.0629152,9.9936442 6.0745608,3.6877568 6.1615845,3.4313887 C 6.3746853,2.8036023 6.8304275,2.3546257 7.4543961,2.1577691 l 0.2760887,-0.087103 h 6.2711582 c 5.973097,0 6.282406,0.00344 6.507806,0.072441 0.538582,0.1648677 0.95123,0.5142451 1.23385,1.0446654 l 0.166315,0.3121392 v 6.4973582 6.4973571 l -0.146611,0.279001 c -0.269592,0.513034 -0.705273,0.89861 -1.204325,1.065821 -0.245346,0.08221 -0.272401,0.0826 -6.123181,0.08911 -3.23221,0.0036 -6.117291,-0.0044 -6.4112905,-0.01771 z M 20.055875,9.9983566 V 3.9441249 H 14.001643 7.9474117 v 6.0542317 6.0542314 h 6.0542313 6.054232 z"
+     id="path4"
+     transform="matrix(40,0,0,40,0,-960)" />
+  <path
+     style="fill:#31448e;fill-opacity:1;stroke:#005287;stroke-width:0.0394413;stroke-opacity:1"
+     d="m 9.118829,13.910172 c 0.05779,-0.09533 2.53721,-3.296531 2.567991,-3.315555 0.01666,-0.01029 0.366082,0.416092 0.776502,0.947524 0.41042,0.531433 0.758343,0.973735 0.773162,0.982894 0.01482,0.0092 0.537089,-0.648777 1.160599,-1.46208 0.62351,-0.813302 1.14458,-1.4780007 1.157933,-1.4771075 0.01948,0.0013 3.12192,4.0342555 3.309903,4.3026375 0.05034,0.07188 -0.07104,0.07372 -4.862999,0.07372 -4.0588047,0 -4.9091393,-0.0091 -4.883091,-0.05203 z"
+     id="path5"
+     transform="matrix(40,0,0,40,0,-960)" />
+  <path
+     style="fill:#31448e;fill-opacity:1;stroke:#005287;stroke-width:0.0394413;stroke-opacity:1"
+     d="M 3.4905505,21.897218 C 3.3495481,21.860362 3.1454396,21.778552 3.0369762,21.715417 2.7804282,21.566085 2.3950099,21.171519 2.2590568,20.919034 2.020809,20.476573 2.0324447,20.875693 2.0318073,13.124076 l -5.83e-4,-7.0895649 h 0.9663106 0.9663106 v 7.0008219 7.000821 h 7.0008215 7.000822 v 0.966311 0.966311 l -7.109285,-0.0023 c -6.5580827,-0.0021 -7.1291623,-0.0075 -7.3656535,-0.06928 z"
+     id="path6"
+     transform="matrix(40,0,0,40,0,-960)" />
+</svg>

public/images/dashboard/bestellt.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+     id="path1" />
+  <path
+     style="fill:#ffa500;stroke:#005287;stroke-width:0.0394413;fill-opacity:1"
+     d="M 11.391042,19.955437 C 9.427719,19.823422 7.7614394,19.061357 6.3500411,17.649959 4.6592333,15.959151 3.8925511,13.881821 4.0471553,11.410274 4.1667429,9.4985133 4.898236,7.8435614 6.2290728,6.4738394 6.953475,5.7282712 7.6410445,5.2187213 8.471066,4.8123237 c 2.328146,-1.1399136 5.368249,-1.0363532 7.542337,0.2569279 1.476386,0.8782446 2.704838,2.2579978 3.336301,3.7472133 0.996968,2.3512081 0.796475,5.2450201 -0.509004,7.3466661 -0.317471,0.511086 -0.621604,0.896164 -1.092138,1.382808 -1.172931,1.213092 -2.504628,1.953779 -4.082169,2.270494 -0.418818,0.08408 -1.496773,0.190869 -1.755136,0.173869 -0.04339,-0.0029 -0.277482,-0.01854 -0.520215,-0.03486 z"
+     id="path2"
+     transform="matrix(40,0,0,40,0,-960)" />
+</svg>

public/images/dashboard/erledigt.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="erledigt.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="25.354167"
+     inkscape:cx="7.3952342"
+     inkscape:cy="12.6212"
+     inkscape:window-width="2560"
+     inkscape:window-height="1494"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+     id="path1" />
+  <path
+     style="fill:#008000;stroke:#005287;stroke-width:0.0394413;fill-opacity:1"
+     d="M 11.391042,19.955437 C 9.427719,19.823422 7.7614394,19.061357 6.3500411,17.649959 4.6592333,15.959151 3.8925511,13.881821 4.0471553,11.410274 4.1667429,9.4985133 4.898236,7.8435614 6.2290728,6.4738394 6.953475,5.7282712 7.6410445,5.2187213 8.471066,4.8123237 c 2.328146,-1.1399136 5.368249,-1.0363532 7.542337,0.2569279 1.476386,0.8782446 2.704838,2.2579978 3.336301,3.7472133 0.996968,2.3512081 0.796475,5.2450201 -0.509004,7.3466661 -0.317471,0.511086 -0.621604,0.896164 -1.092138,1.382808 -1.172931,1.213092 -2.504628,1.953779 -4.082169,2.270494 -0.418818,0.08408 -1.496773,0.190869 -1.755136,0.173869 -0.04339,-0.0029 -0.277482,-0.01854 -0.520215,-0.03486 z"
+     id="path2"
+     transform="matrix(40,0,0,40,0,-960)" />
+</svg>

public/images/dashboard/gespeichert.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+     id="path1" />
+  <path
+     style="fill:#ff0000;stroke:#005287;stroke-width:0.0394413;fill-opacity:1"
+     d="M 11.391042,19.955437 C 9.427719,19.823422 7.7614394,19.061357 6.3500411,17.649959 4.6592333,15.959151 3.8925511,13.881821 4.0471553,11.410274 4.1667429,9.4985133 4.898236,7.8435614 6.2290728,6.4738394 6.953475,5.7282712 7.6410445,5.2187213 8.471066,4.8123237 c 2.328146,-1.1399136 5.368249,-1.0363532 7.542337,0.2569279 1.476386,0.8782446 2.704838,2.2579978 3.336301,3.7472133 0.996968,2.3512081 0.796475,5.2450201 -0.509004,7.3466661 -0.317471,0.511086 -0.621604,0.896164 -1.092138,1.382808 -1.172931,1.213092 -2.504628,1.953779 -4.082169,2.270494 -0.418818,0.08408 -1.496773,0.190869 -1.755136,0.173869 -0.04339,-0.0029 -0.277482,-0.01854 -0.520215,-0.03486 z"
+     id="path2"
+     transform="matrix(40,0,0,40,0,-960)" />
+</svg>

public/images/dashboard/zurueckGestellt.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="zurueckGestellt.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="25.354167"
+     inkscape:cx="9.9983566"
+     inkscape:cy="12.345111"
+     inkscape:window-width="2560"
+     inkscape:window-height="1494"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+     id="path1"
+     style="fill:#aa0000" />
+</svg>

src/client/lib/validateAccessToken.ts

@@ -11,7 +11,9 @@ export async function validateAccessTokenClient() {
 	if (accessToken) {
 		const { valid } = await client.v1.benutzer.validateAccessToken.query({accessToken})
 
-		if (!valid) {
+		if (valid) {
+			return valid;
+		} else {
 			Cookies.remove(API_ACCESS_TOKEN_COOKIE_NAME);
 		}
 	}

src/components/Ausweis/Verbrauch.svelte

@@ -42,6 +42,8 @@
 	$: {
 		if (month && year) {
 			ausweis.startdatum = moment(`${month}.01.${year}`).toDate();
+			console.log(ausweis.startdatum);
+			
 		}
 	}
 

src/components/AusweisPruefenBox.svelte

@@ -1,30 +1,23 @@
 <script lang="ts">
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
+	import moment from "moment";
 	import {
-	BenutzerClient,
+	VerbrauchsausweisWohnenClient,
-		GebaeudeAufnahmeClient,
-		GebaeudeClient,
-		VerbrauchsausweisWohnenClient,
 	} from "./Ausweis/types.js";
+	import AusweisPruefenTooltip from "./AusweisPruefenTooltip.svelte";
+	import { addNotification } from "./NotificationProvider/shared";
 
-	export let ausweis: VerbrauchsausweisWohnenClient & {
+	export let ausweis: VerbrauchsausweisWohnenClient;
-		gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient & {
-			gebaeude_stammdaten: GebaeudeClient;
-		};
-		benutzer: BenutzerClient;
-	};
 	export let calculations: Awaited<
 		ReturnType<typeof endEnergieVerbrauchVerbrauchsausweis_2016>
 	>;
 
-	console.log(calculations);
+	const gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein
 	
 
 	const ausweisArt = "VA"; // TODO: Das ist ein Platzhalter, hier muss die Ausweisart aus dem Ausweisobjekt kommen
 
-	let klimafaktoren = [];
 
-	let images = {};
 
 	try {
 		// TODO: In Zukunft sollen die Bilder von unserer API kommen, das ist allerdings noch nicht ganz fertig.
@@ -104,41 +97,36 @@
 
 	let Abgeschlossen: any;
 
-	if (ausweis.gebaeude_aufnahme_allgemein.erledigt) {
+	if (gebaeude_aufnahme_allgemein.erledigt) {
-		Ausweisbild = "img/ausweishaken.jpg";
+		Ausweisbild = "/images/dashboard/ausweishaken.jpg";
-		DatenBlattBild = "img/datenblatthaken.jpg";
+		DatenBlattBild = "/images/dashboard/datenblatthaken.jpg";
-		StatusIcon = "img/erledigt.svg";
+		StatusIcon = "/images/dashboard/erledigt.svg";
 		Abgeschlossen = 0;
-	} else if (ausweis.gebaeude_aufnahme_allgemein.bestellt) {
+	} else if (gebaeude_aufnahme_allgemein.bestellt) {
-		Ausweisbild = "img/ausweis.jpg";
+		Ausweisbild = "/images/dashboard/ausweis.jpg";
-		DatenBlattBild = "img/datenblatt.jpg";
+		DatenBlattBild = "/images/dashboard/datenblatt.jpg";
-		StatusIcon = "img/bestellt.svg";
+		StatusIcon = "/images/dashboard/bestellt.svg";
 		Abgeschlossen = 1;
 	} else {
-		Ausweisbild = "img/ausweiskreuz.jpg";
+		Ausweisbild = "/images/dashboard/ausweiskreuz.jpg";
-		DatenBlattBild = "img/datenblattkreuz.jpg";
+		DatenBlattBild = "/images/dashboard/datenblattkreuz.jpg";
-		StatusIcon = "img/gespeichert.svg";
+		StatusIcon = "/images/dashboard/gespeichert.svg";
 		Abgeschlossen = 2;
 	}
 
-	if (ausweis.gebaeude_aufnahme_allgemein.boxpruefung) {
+	if (gebaeude_aufnahme_allgemein.boxpruefung) {
-		symbolPruefung = "img/kreishaken.png";
+		symbolPruefung = "/images/dashboard/kreishaken.png";
 	} else {
-		symbolPruefung = "img/kreiskreuz.png";
+		symbolPruefung = "/images/dashboard/kreiskreuz.png";
 	}
 
-	if (ausweis.gebaeude_aufnahme_allgemein.zurueckgestellt) {
+	if (gebaeude_aufnahme_allgemein.zurueckgestellt) {
 		zurueckGestellt =
-			"<img src='img/zurueckGestellt.svg' alt='Status' width=\"25\" height=\"25\"></img>";
+			"<img src='/images/dashboard/zurueckGestellt.svg' alt='Status' width=\"25\" height=\"25\"></img>";
 	} else {
 		zurueckGestellt = "";
 	}
 
-	var AmpelBackground = [
-		"background: green;",
-		"background: orange;",
-		"background: red;",
-	][Abgeschlossen];
 
 		if (ausweis.warmwasser_enthalten) {
 			warmWasser = "Warmwasser enthalten";
@@ -155,7 +143,7 @@
 			ausweis.warmwasser_enthalten &&
 			ausweis.warmwasser_anteil_bekannt
 		) {
-			if (ausweis.gebaeude_aufnahme_allgemein.solarsystem_warmwasser) {
+			if (gebaeude_aufnahme_allgemein.solarsystem_warmwasser) {
 				// Wenn Warmwasser enthalten und Anteil bekannt und Solarsystem
 				verbrauchWWGesamt_1 = `${calculations?.energieVerbrauchGesamt_1} kWh x ${ausweis.anteil_warmwasser_1 / 100} x 0.6`;
 				verbrauchWWGesamt_2 = `${calculations?.energieVerbrauchGesamt_2} kWh x ${ausweis.anteil_warmwasser_2 / 100} x 0.6`;
@@ -167,7 +155,7 @@
 				solarsystemWarmwasser = "kein Solarsystem Warmwasser";
 			}
 		} else {
-			if (ausweis.gebaeude_aufnahme_allgemein.solarsystem_warmwasser) {
+			if (gebaeude_aufnahme_allgemein.solarsystem_warmwasser) {
 				// Wenn Warmwasser Anteil unbekannt und Solarsystem
 				verbrauchWWGesamt_1 =
 					calculations?.energetische_nutzfläche +
@@ -182,31 +170,17 @@
 			}
 		}
 
-	let tooltip1Z1 =
-		ausweis.gebaeude_aufnahme_allgemein.adresse +
-		", " +
-		ausweis.gebaeude_aufnahme_allgemein.plz +
-		" " +
-		ausweis.gebaeude_aufnahme_allgemein.ort;
-	let tooltip1Z2 =
-		ausweis.gebaeude_aufnahme_allgemein.gebaeudetyp + ", Einheiten: " + ausweis.gebaeude_aufnahme_allgemein.einheiten;
-	let table1Z1 = ausweisArt + " " + ausweis.gebaeude_aufnahme_allgemein.uid;
-	let table1Z2 = ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum;
 
-	let tooltip2Z1 = "Baujahr Gebäude";
-	let tooltip2Z2 = "Baujahr Heizung";
-	let table2Z1 = ausweis.gebaeude_aufnahme_allgemein.baujahr_gebaeude;
-	let table2Z2 = ausweis.gebaeude_aufnahme_allgemein.baujahr_heizung;
 
 		tooltip3Z1 = "Wohnfläche in m²";
 		tooltip3Z2 =
-		ausweis.gebaeude_aufnahme_allgemein.faktorKeller +
+		gebaeude_aufnahme_allgemein.faktorKeller +
 			" x " +
-			ausweis.gebaeude_aufnahme_allgemein.flaeche +
+			gebaeude_aufnahme_allgemein.flaeche +
 			" m² Energetische Nutzfläche (Keller " +
 			ausweis.keller_beheizt +
 			" ) in m²";
-			table3Z1 = ausweis.gebaeude_aufnahme_allgemein.flaeche;
+			table3Z1 = gebaeude_aufnahme_allgemein.flaeche;
 			table3Z2 = calculations?.energetische_nutzfläche;
 
 	
@@ -228,7 +202,7 @@
 			" kWh/" +
 			ausweis.einheit_1 +
 			" >> Verbrauch 1 " +
-			ausweis.gebaeude_aufnahme_allgemein.brennstoff_1 +
+			gebaeude_aufnahme_allgemein.brennstoff_1 +
 			" in kWh";
 		tooltip4Z2 =
 			"(" +
@@ -248,7 +222,7 @@
 			" kWh/" +
 			ausweis.einheit_2 +
 			" >> Verbrauch 2 " +
-			ausweis.gebaeude_aufnahme_allgemein.brennstoff_2 +
+			gebaeude_aufnahme_allgemein.brennstoff_2 +
 			" in kWh";
 		table4Z1 = calculations?.energieVerbrauchGesamt_1;
 		table4Z2 = calculations?.energieVerbrauchGesamt_2;
@@ -445,7 +419,7 @@
 			" Primärenergieverbrauch in kWh/m²a";
 		tooltip16Z2 = "Effizienzklasse";
 		table16Z1 = calculations?.primaerEnergieVerbrauchGesamt;
-		table16Z2 = ausweis.gebaeude_aufnahme_allgemein.energieeffizienzklasse;
+		table16Z2 = gebaeude_aufnahme_allgemein.energieeffizienzklasse;
 
 	let imagePreview = "";
 
@@ -461,306 +435,341 @@
 	// 		"," +
 	// 		imageJson.heizung.toString();
 	// }
+
+	async function stornieren(ausweis: VerbrauchsausweisWohnenClient) {
+		addNotification({
+			title: "Ausweis wurde storniert",
+			type: "success",
+			dismissable: true,
+			timeout: 3000,
+		})
+
+		ausweis.gebaeude_aufnahme_allgemein.storniert = true;
+
+		ausweis = ausweis;
+	}
 </script>
 
-<div class="list-ausweis" style="border: 1px solid #ccc;">
+<table class="table table-row border">
-	<div class="flex-row justify-between">
+	<tbody>
-		<div class="flex-column">
+		<tr>
-			<table class="table-borderless" style="border:none;">
+			<td width="30px"
-				<tr>
+				><img
-					<td title="Status" width="30px"
+					src="{StatusIcon}"
-						><img
+					alt="Status"
-							src="{StatusIcon}"
+					class="w-8 h-8 max-w-8 max-h-8"
-							alt="Status"
+				/>{zurueckGestellt}</td
-							width="25"
+			>
-							height="25"
+			<td width="150px"
-						/><br />{zurueckGestellt}</td
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{gebaeude_aufnahme_allgemein.adresse} {gebaeude_aufnahme_allgemein.plz} {gebaeude_aufnahme_allgemein.ort}</span>
+						<br>
+						<span>{gebaeude_aufnahme_allgemein.gebaeudetyp}, Einheiten: {gebaeude_aufnahme_allgemein.einheiten}</span>
+					</div>
+					<span>{ausweisArt} - {ausweis.uid.split("-")[0]}</span>
+					<span>{moment(gebaeude_aufnahme_allgemein.erstellungsdatum).format("DD.MM.YYYY")}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="35px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>Baujahr Gebäude / Baujahr Heizung</span>
+					</div>
+					<span>{gebaeude_aufnahme_allgemein.baujahr_gebaeude.join(", ")}</span>
+						<span>{gebaeude_aufnahme_allgemein.baujahr_heizung.join(", ")}</span>
+				</AusweisPruefenTooltip>
+				<div class="tooltip" data-tip="">
+					
+				</div></td
+			>
+			<td width="45px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>Wohnfläche in m²</span>
+						<br>
+						<span>{gebaeude_aufnahme_allgemein.faktorKeller} x {gebaeude_aufnahme_allgemein.flaeche}m² Energetische Nutzfläche (Keller {gebaeude_aufnahme_allgemein.keller}) in m²</span>
+					</div>
+					<span>{gebaeude_aufnahme_allgemein.flaeche}</span>
+					<span><strong>{calculations?.energetische_nutzfläche}</strong></span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="90px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip4Z1}</span>
+						<br>
+						<span>{tooltip4Z2}</span>
+					</div>
+					<span>{table4Z1}</span>
+					<span>{table4Z2}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="70px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip5Z1}</span>
+						<br>
+						<span>{tooltip5Z2}</span>
+						<br>
+						<span>{tooltip5Z3}</span>
+					</div>
+					<span>{table5Z1}</span>
+					<span>{table5Z2}</span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="50px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip6Z1}</span>
+						<br>
+						<span>{tooltip6Z2}</span>
+					</div>
+					<span><strong>{table6Z1}</strong></span>
+					<span><strong>{table6Z2}</strong></span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="90px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip7Z1}</span>
+						<br>
+						<span>{tooltip7Z2}</span>
+					</div>
+					<span>{table7Z1}</span>
+					<span>{table7Z2}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="60px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip8Z1}</span>
+						<br>
+						<span>{tooltip8Z2}</span>
+					</div>
+					<span>{table8Z1}</span>
+					<span>{table8Z2}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="50px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip9Z1}</span>
+						<br>
+						<span>{tooltip9Z2}</span>
+					</div>
+					<span>{table9Z1}</span>
+					<span><strong>{table9Z2}</strong></span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="100px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip10Z1}</span>
+						<br>
+						<span>{tooltip10Z2}</span>
+					</div>
+					<span>{table10Z1}</span>
+					<span>{table10Z2}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="110px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip11Z1}</span>
+						<br>
+						<span>{tooltip11Z2}</span>
+					</div>
+					<span>{table11Z1}</span>
+					<span>{table11Z2}</span>
+				</AusweisPruefenTooltip></td
+			>
+			<td width="50px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip12Z1}</span>
+						<br>
+						<span>{tooltip12Z2}</span>
+					</div>
+					<span>{table12Z1}</span>
+					<span>{table12Z2}</span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="60px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip13Z1}</span>
+						<br>
+						<span>{tooltip13Z2}</span>
+					</div>
+					<span>{table13Z1}</span>
+					<span>{table13Z2}</span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="45px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip14Z1}</span>
+						<br>
+						<span>{tooltip14Z2}</span>
+					</div>
+					<span>{table14Z1}</span>
+					<span>{table14Z2}</span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="45px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip15Z1}</span>
+						<br>
+						<span>{tooltip15Z2}</span>
+					</div>
+					<span><strong>{table15Z1}</strong></span>
+					<span><strong>{table15Z2}</strong></span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td width="50px"
+				>
+				<AusweisPruefenTooltip>
+					<div slot="tooltip">
+						<span>{tooltip16Z1}</span>
+						<br>
+						<span>{tooltip16Z2}</span>
+					</div>
+					<span><strong>{table16Z1}</strong></span>
+					<span><strong>{table16Z2}</strong></span>
+				</AusweisPruefenTooltip>
+				</td
+			>
+			<td title="Gebäudebilder anzeigen" width="35px"
+				><div
+					class="imagePreview"
+					data-imagePreview="{imagePreview}"
+				>
+					<img
+						src="/images/dashboard/SymbolBilder.svg"
+						alt="Gebäudebilder"
+						width="35"
+						height="35"
+					/>
+				</div></td
+			>
+			<td width="30px"
+				><div class="checkTextPreviewButton">
+					<img src="{symbolPruefung}" alt="Boxpruefung" />
+					<div
+						class="checkTextPreview"
+						style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 450px; z-index:9999;"
 					>
-					<td title="" width="150px"
+						{gebaeude_aufnahme_allgemein.prueftext}
-						>
+					</div>
-							<!-- DaisyUI Tooltips -->
+				</div></td
-							<!-- https://daisyui.com/components/tooltip/ -->
+			>
-							<div class="tooltip" data-tip="{tooltip1Z1}<br />{tooltip1Z2}">
+			<td title="Ausweis anzeigen" width="50px"
-								{table1Z1}<br />{table1Z2}
+				><a
-							</div></td
+					class="energieausweis-img"
-					>
+					href="/pdf/ansichtsausweis?uid={ausweis.uid}"
-					<td title="" width="35px"
+					target="_blank"
-						><div class="checkTextPreviewButton">
+					><img
-							{table2Z1}<br />{table2Z2}
+						src="/images/dashboard/ausweis.jpg"
-							<div
+						alt="Energieausweis"
-								class="checkTextPreview"
+					/></a
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
+				></td
-							>
+			>
-								{tooltip2Z1}<br />{tooltip2Z2}
+			<td title="Datenblatt anzeigen" width="50px"
-							</div>
+				><a
-						</div></td
+					class="energieausweis-img"
-					>
+					href="/pdf/datenblatt?uid={ausweis.uid}"
-					<td title="" width="45px"
+					target="_blank"
-						><div class="checkTextPreviewButton">
+					><img
-							{table3Z1}<br /><b>{table3Z2}</b>
+						src="/images/dashboard/datenblatt.jpg"
-							<div
+						alt="Datenblatt"
-								class="checkTextPreview"
+					/></a
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
+				></td
-							>
+			>
-								{tooltip3Z1}<br />{tooltip3Z2}
+			<td
-							</div>
+				title="Ausweis stornieren und Zahlung wenn erforderlich automatisch zurückbuchen"
-						</div></td
+				class="w-4 p-1"
-					>
+				><button
-					<td title="" width="90px"
+					class="btn btn-xs btn-ghost"
-						><div class="checkTextPreviewButton">
+					on:click={() => stornieren(ausweis)}>S</button
-							{table4Z1}<br />{table4Z2}
+				></td
-							<div
+			>
-								class="checkTextPreview"
+			<td title="Ausweis ausstellen" class="w-4 p-1"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
+				><button
-							>
+					class="btn btn-xs btn-ghost"
-								{tooltip4Z1}<br />{tooltip4Z2}
+					on:click={() => ausweisAusstellen('{gebaeude_aufnahme_allgemein.uid}')}>A</button
-							</div>
+				></td
-						</div></td
+			>
-					>
+			<td
-					<td title="" width="70px"
+				title="Ausweis ausstellen und per Post verschicken"
-						><div class="checkTextPreviewButton">
+				class="w-4 p-1"
-							{table5Z1}<br />{table5Z2}
+				><button
-							<div
+					class="btn btn-xs btn-ghost"
-								class="checkTextPreview"
+					on:click={() => ausweisAusstellenPost('{gebaeude_aufnahme_allgemein.uid}')}>P</button
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
+				></td
-							>
+			>
-								{tooltip5Z1}<br />{tooltip5Z2}<br
+			<td
-								/>{tooltip5Z3}
+				title="E-Mail an Kunden schicken mit Erläuterungen warum der Ausweis noch nicht ausgestellt werden kann."
-							</div>
+				class="w-4 p-1"
-						</div></td
+				><button
-					>
+					class="btn btn-xs btn-ghost"
-					<td title="" width="50px"
+					on:click={() => ausweisnichtAusstellen('{gebaeude_aufnahme_allgemein.uid}')}>N</button
-						><div class="checkTextPreviewButton">
+				></td
-							<b>{table6Z1}</b><br /><b>{table6Z2}</b>
+			>
-							<div
+			<td
-								class="checkTextPreview"
+				title="Bestellbestätigung nochmal schicken (Zahlung nicht erfolgreich)"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
+				class="w-4 p-1"
-							>
+				><button
-								{tooltip6Z1}<br />{tooltip6Z2}
+					class="btn btn-xs btn-ghost"
-							</div>
+					on:click={() => bestellBestaetigung('{gebaeude_aufnahme_allgemein.uid}')}>B</button
-						</div></td
+				></td
-					>
+			>
-					<td title="" width="90px"
+			<td
-						><div class="checkTextPreviewButton">
+				title="E-Mail an Kunden schicken mit Erinnerung die Bestellung abzuschließen."
-							{table7Z1}<br />{table7Z2}
+				class="w-4 p-1"
-							<div
+				><button
-								class="checkTextPreview"
+					class="btn btn-xs btn-ghost"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 750px; z-index:9999;"
+					on:click={() => erinnern('{gebaeude_aufnahme_allgemein.uid}')}
-							>
+					>E</button
-								{tooltip7Z1}<br />{tooltip7Z2}
+				></td
-							</div>
+			>
-						</div></td
+			<td
-					>
+				title="Zum Formular mit allen Eingabedaten."
-					<td title="" width="60px"
+				class="w-4 p-1"
-						><div class="checkTextPreviewButton">
+				><a
-							{table8Z1}<br />{table8Z2}
+					class="btn btn-xs btn-ghost"
-							<div
+					target="_blank"
-								class="checkTextPreview"
+					href="/energieausweis-erstellen/gespeichert?id={gebaeude_aufnahme_allgemein.uid}">F</a
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 750px; z-index:9999;"
+				></td
-							>
+			>
-								{tooltip8Z1}<br />{tooltip8Z2}
+			{@html gebaeude_aufnahme_allgemein.kontrolldatei
-							</div>
+				? `<td title="XML-Datei an das DiBT verschicken." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click="xmlAbschicken('{gebaeude_aufnahme_allgemein.uid}')">X</button></td>`
-						</div></td
+				: ""}
-					>
+			{@html !gebaeude_aufnahme_allgemein.registriernummer
-					<td title="" width="50px"
+				? `<td title="Registriernummer vom DiBT anfordern." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click="registriernummerAnfordern('{gebaeude_aufnahme_allgemein.uid}')">R</button></td>`
-						><div class="checkTextPreviewButton">
+				: ""}
-							{table9Z1}<br /><b>{table9Z2}</b>
+		</tr>
-							<div
+	</tbody>
-								class="checkTextPreview"
+</table>
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 750px; z-index:9999;"
-							>
-								{tooltip9Z1}<br />{tooltip9Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="100px"
-						><div class="checkTextPreviewButton">
-							{table10Z1}<br />{table10Z2}
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip10Z1}<br />{tooltip10Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="110px"
-						><div class="checkTextPreviewButton">
-							{table11Z1}<br />{table11Z2}
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip11Z1}<br />{tooltip11Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="50px"
-						><div class="checkTextPreviewButton">
-							{table12Z1}<br />{table12Z2}
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip12Z1}<br />{tooltip12Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="60px"
-						><div class="checkTextPreviewButton">
-							{table13Z1}<br />{table13Z2}
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip13Z1}<br />{tooltip13Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="45px"
-						><div class="checkTextPreviewButton">
-							{table14Z1}<br />{table14Z2}
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip14Z1}<br />{tooltip14Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="45px"
-						><div class="checkTextPreviewButton">
-							<b>{table15Z1}</b><br /><b>{table15Z2}</b>
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip15Z1}<br />{tooltip15Z2}
-							</div>
-						</div></td
-					>
-					<td title="" width="50px"
-						><div class="checkTextPreviewButton">
-							<b>{table16Z1}</b><br /><b>{table16Z2}</b>
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 700px; z-index:9999;"
-							>
-								{tooltip16Z1}<br />{tooltip16Z2}
-							</div>
-						</div></td
-					>
-					<td title="Gebäudebilder anzeigen" width="35px"
-						><div
-							class="imagePreview"
-							data-imagePreview="{imagePreview}"
-						>
-							<img
-								src="img/SymbolBilder.svg"
-								alt="Gebäudebilder"
-								width="35"
-								height="35"
-							/>
-						</div></td
-					>
-					<td title="" width="30px"
-						><div class="checkTextPreviewButton">
-							<img src="{symbolPruefung}" alt="Boxpruefung" />
-							<div
-								class="checkTextPreview"
-								style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 450px; z-index:9999;"
-							>
-								{ausweis.gebaeude_aufnahme_allgemein.prueftext}
-							</div>
-						</div></td
-					>
-					<td title="Ausweis anzeigen" width="50px"
-						><a
-							class="energieausweis-img"
-							href="/energieausweis-erstellen/ansichtsausweis?id={ausweis.gebaeude_aufnahme_allgemein.uid}"
-							target="_blank"
-							><img
-								src="img/ausweis.jpg"
-								alt="Energieausweis"
-							/></a
-						></td
-					>
-					<td title="Datenblatt anzeigen" width="50px"
-						><a
-							class="energieausweis-img"
-							href="/energieausweis-erstellen/datenblatt?id={ausweis.gebaeude_aufnahme_allgemein.uid}"
-							target="_blank"
-							><img
-								src="img/datenblatt.jpg"
-								alt="Datenblatt"
-							/></a
-						></td
-					>
-					<td
-						title="Ausweis stornieren und Zahlung wenn erforderlich automatisch zurückbuchen"
-						width="30px"
-						><button
-							class="weiterbutton"
-							on:click={() => ausweisStornieren('{ausweis.gebaeude_aufnahme_allgemein.uid}')}>S</button
-						></td
-					>
-					<td title="Ausweis ausstellen" width="20px"
-						><button
-							class="weiterbutton"
-							on:click={() => ausweisAusstellen('{ausweis.gebaeude_aufnahme_allgemein.uid}')}>A</button
-						></td
-					>
-					<td
-						title="Ausweis ausstellen und per Post verschicken"
-						width="30px"
-						><button
-							class="weiterbutton"
-							on:click={() => ausweisAusstellenPost('{ausweis.gebaeude_aufnahme_allgemein.uid}')}>P</button
-						></td
-					>
-					<td
-						title="E-Mail an Kunden schicken mit Erläuterungen warum der Ausweis noch nicht ausgestellt werden kann."
-						width="30px"
-						><button
-							class="weiterbutton"
-							on:click={() => ausweisnichtAusstellen('{ausweis.gebaeude_aufnahme_allgemein.uid}')}>N</button
-						></td
-					>
-					<td
-						title="Bestellbestätigung nochmal schicken (Zahlung nicht erfolgreich)"
-						width="30px"
-						><button
-							class="weiterbutton"
-							on:click={() => bestellBestaetigung('{ausweis.gebaeude_aufnahme_allgemein.uid}')}>B</button
-						></td
-					>
-					<td
-						title="E-Mail an Kunden schicken mit Erinnerung die Bestellung abzuschließen."
-						width="30px"
-						><button
-							class="weiterbutton"
-							on:click={() => erinnern('{ausweis.gebaeude_aufnahme_allgemein.uid}')}
-							>E</button
-						></td
-					>
-					<td
-						title="Zum Formular mit allen Eingabedaten."
-						width="30px"
-						><a
-							class="weiterbutton"
-							style="display: block;"
-							target="_blank"
-							href="/energieausweis-erstellen/gespeichert?id={ausweis.gebaeude_aufnahme_allgemein.uid}">F</a
-						></td
-					>
-					{@html ausweis.gebaeude_aufnahme_allgemein.kontrolldatei
-						? `<td title="XML-Datei an das DiBT verschicken." width="30px"><button class="weiterbutton" on:click="xmlAbschicken('{ausweis.gebaeude_aufnahme_allgemein.uid}')">X</button></td>`
-						: ""}
-					{@html !ausweis.gebaeude_aufnahme_allgemein.registriernummer
-						? `<td title="Registriernummer vom DiBT anfordern." width="30px"><button class="weiterbutton" on:click="registriernummerAnfordern('{ausweis.gebaeude_aufnahme_allgemein.uid}')">R</button></td>`
-						: ""}
-				</tr>
-			</table>
-		</div>
-	</div>
-</div>

src/components/AusweisPruefenNotification.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Notification, deleteNotification } from "./NotificationProvider/shared";
+	import { fly } from "svelte/transition";
+
+	export let notification: Notification;
+</script>
+
+<div
+	class="border rounded-lg bg-white shadow-md flex flex-row border-l-8" in:fly={{x: 200, duration: 200}} out:fly={{x: 200, duration: 200}}
+	class:border-l-red-400={notification.type == "error"}
+	class:border-l-blue-400={notification.type == "info"}
+	class:border-l-green-400={notification.type == "success"}
+	class:border-l-yellow-400={notification.type == "warning"}
+>
+	<div class="flex flex-col px-4 py-2">
+		<h2 class="text-xl font-semibold">{@html notification.title}</h2>
+		<p class="text-gray-600 text-lg"><slot></slot></p>
+	</div>
+	{#if notification.dismissable}
+		<button
+			class="border-l px-4 py-2 hover:bg-gray-100"
+			on:click={() => {
+				deleteNotification(notification.uid);
+				if (notification.onUserDismiss) {
+					notification.onUserDismiss()
+				}
+			}}>X</button
+		>
+	{/if}
+</div>
+
+<style>
+	:global(a) {
+		@apply text-blue-700;
+	}
+
+	:global(a:hover) {
+		@apply underline;
+	}
+
+	:global(kbd) {
+		@apply rounded-lg shadow-md border bg-gray-50 px-1.5 py-1 text-sm;
+	}
+</style>

src/components/AusweisPruefenTooltip.svelte

@@ -0,0 +1,8 @@
+<div class="dropdown dropdown-hover dropdown-bottom">
+	<div role="button" tabindex="0">
+		<slot></slot>
+	</div>
+	<div class="dropdown-content bg-gray-700 text-white z-10 menu w-max shadow rounded-lg">
+		<slot name="tooltip"></slot>
+	</div>
+</div>

src/components/Dashboard/DashboardSidebar.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { ripple } from "svelte-ripple-action";
 	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
-	import { Home, Reader, EnvelopeClosed, Cube, Sun, Moon, Bell, Gear, LockClosed } from "radix-svelte-icons"
+	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed } from "radix-svelte-icons"
 	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
 	import DashboardNotification from "./DashboardNotification.svelte";
-	import { onMount } from "svelte";
-	import { addNotification } from "#components/NotificationProvider/shared";
 	import { notifications } from "#components/NotificationProvider/shared";
 	import ThemeController from "#components/ThemeController.svelte";
 	import { BenutzerClient } from "#components/Ausweis/types";
@@ -17,16 +15,6 @@
 		center: false,
 		color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
 	};
-
-	onMount(() => {
-		addNotification({
-			title: "Test",
-			type: "success",
-			dismissable: true,
-			timeout: 0,
-			description: "Dies ist ein sehr wissenschaftlicher Test...",
-		})
-	})
 </script>
 
 <aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">

src/layouts/UserLayout.astro

@@ -5,9 +5,7 @@ import "../style/global.scss";
 import "../../svelte-dialogs.config"
 import "svelte-ripple-action/ripple.css"
 import DashboardSidebar from "../components/Dashboard/DashboardSidebar.svelte"
-import { NotificationWrapper } from "@ibcornelsen/ui";
 import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
-import { prisma } from "@ibcornelsen/database/server";
 import { createCaller } from "#lib/caller";
 
 const valid = validateAccessTokenServer(Astro)

src/lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.ts

@@ -25,10 +25,11 @@ export function energetischeNutzflaecheVerbrauchsausweisWohnen_2016(
 export async function endEnergieVerbrauchVerbrauchsausweis_2016(
 	ausweis: VerbrauchsausweisWohnenClient
 ) {
-	let startdatum = moment(ausweis.startdatum);
+	if (!ausweis.gebaeude_aufnahme_allgemein || !ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten) {
+		return null;
+	}
 
-	console.log(startdatum);
+	let startdatum = moment(ausweis.startdatum);
-	
 
 	let klimafaktoren: Awaited<ReturnType<typeof getKlimafaktoren>> = [{
 		month: startdatum.month(),

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -140,8 +140,7 @@
 					beschreibung: e.stack,
 					email: user.email ?? "",
 					metadata: JSON.stringify({
-						ausweis,
+						ausweis
-						gebaeude
 					})
 				})
 				// TODO: Ticket mit Fehldermeldung abschicken.
@@ -664,7 +663,7 @@
 				dismissable: true,
 				onUserDismiss: () => {
 					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
-					gebaeude = gebaeude;
+					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
 				},
 				type: "warning",
 			}}

src/modules/AusweisePruefenModule.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-    const calculations: Record<string, any> = {};
-    const ausweis: Record<string, any> = {};
-</script>
-
-<div class="list-ausweis" style="border: 1px solid #ccc;">
-    <div class="flex-row justify-between">
-        <div class="flex-column">
-            <table class="table-borderless" style="border:none;">
-                <tr>
-                    <td title="" width="50px"
-                        ><div class="checkTextPreviewButton">
-                            <div
-                                class="checkTextPreview"
-                                style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 600px; z-index:9999;"
-                            >
-                                {#if ausweis["ausweisart"] == "VA" || ausweis["ausweisart"] == "VANW"}
-                                    ({calculations["Klimafaktor_1"]} + {calculations["Klimafaktor_2"]} + {calculations["Klimafaktor_3"]}) / 3 &gt;&gt; durchschnittlicher Klimafaktor
-                                {:else}
-                                
-                                {/if}
-                                <br />
-                            </div>
-                        </div></td
-                    >
-                </tr>
-            </table>
-        </div>
-    </div>
-</div>

src/modules/Dashboard/DashboardAusweisePruefenModule.svelte

@@ -1,26 +1,104 @@
 <script lang="ts">
 	import {
-		BenutzerClient,
-		GebaeudeAufnahmeClient,
-		GebaeudeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "#components/Ausweis/types";
 	import AusweisPruefenBox from "#components/AusweisPruefenBox.svelte";
+	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
+	import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";
 
-	export let ausweise: (VerbrauchsausweisWohnenClient &
+	export let ausweise: VerbrauchsausweisWohnenClient[];
-		{
-			gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient & {
-				gebaeude_stammdaten: GebaeudeClient;
-			};
-			benutzer: BenutzerClient;
-		})[];
 </script>
 
-{#each ausweise as ausweis}
+<div class="gap-4 flex flex-col">
-	{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis)}
+	{#each ausweise as ausweis}
-		<p>Dies ist ein Platzhalter.</p>
+		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis)}
-	{:then calculations}
+			<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
-		<AusweisPruefenBox {ausweis} {calculations}></AusweisPruefenBox>
+				<div class="w-1/12 h-full flex flex-col gap-2">
-	{/await}
+					<div class="skeleton w-8 h-8 rounded-full"></div>
-{/each}
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="w-1/12 h-full flex flex-col gap-2">
+					<div class="skeleton w-full h-4"></div>
+					<div class="skeleton w-full h-4"></div>
+				</div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+				<div class="skeleton w-4 h-4"></div>
+			</div>
+		{:then calculations}
+			<AusweisPruefenBox {ausweis} {calculations}></AusweisPruefenBox>
+		{/await}
+	{/each}
+</div>
+
+<div class="flex items-center justify-center mt-12">
+	<div class="join">
+		<button class="join-item btn btn-ghost shadow-none">1</button>
+		<button class="join-item btn btn-ghost shadow-none">2</button>
+		<button class="join-item btn btn-ghost shadow-none">3</button>
+		<button class="join-item btn btn-ghost shadow-none">4</button>
+	</div>
+</div>
+
+<div class="fixed bottom-8 right-8 flex flex-col gap-4">
+	<NotificationProvider component={AusweisPruefenNotification}></NotificationProvider>
+</div>

src/modules/KaufabschlussModule.svelte

@@ -349,17 +349,18 @@
 				<hr />
 				<div class="flex flex-row items-center justify-between">
 					<span class="opacity-75 text-sm">Brutto</span>
-					<span class="font-semibold text-sm">75$</span>
+					<span class="font-semibold text-sm">45€</span>
 				</div>
 				<div class="flex flex-row items-center justify-between">
 					<span class="opacity-75 text-sm">Netto</span>
-					<span class="font-semibold text-sm">75$</span>
+					<span class="font-semibold text-sm">45€</span>
 				</div>
 				<hr />
 				<div class="flex flex-row items-center justify-between">
 					<span class="opacity-75 text-sm">Gesamt</span>
-					<span class="font-semibold text-sm">75$</span>
+					<span class="font-semibold text-sm">45€</span>
 				</div>
+				<p class="mt-8">Mit dem Klick auf "Bestellung Bestätigen" akzeptieren sie unsere <a href="/agb">AGB</a> und <a href="/impressum">Datenschutzbestimmungen</a>. Sie werden zu ihrem ausgewählten Bezahlprovider weitergeleitet, nach Bezahlung werden sie automatisch zu unserem Portal zurückgeleitet.</p>
 				<button class="btn btn-secondary w-full mt-4" disabled
 					>Bestellung Bestätigen</button
 				>

src/modules/KundendatenModule.svelte

@@ -51,6 +51,13 @@
 			(acc, service) => (service.selected && acc + service.price) || acc,
 			0
 		);
+
+	function speichern(e: SubmitEvent) {
+		e.preventDefault()
+		console.log("Speichern");
+	
+		window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
+	}
 </script>
 
 <div class="w-full px-8">
@@ -61,7 +68,7 @@
 		</div>
 	</div>
 
-	<form>
+	<form on:submit={speichern}>
 		<div class="grid grid-cols-[1.5fr_2fr] gap-4">
 			<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4">
 				<div class="flex flex-col gap-2 test-box">

src/pages/404.astro

@@ -0,0 +1,13 @@
+---
+
+import { BoxWithHeading } from "@ibcornelsen/ui";
+import Widget from "#components/Widget.svelte";
+import Layout from "#layouts/Layout.astro";
+import FeatureCard from "#components/FeatureCard.svelte";
+
+
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Ups... Diese Seite gibt es wohl nicht.</h1>
+</Layout>

src/pages/dashboard/admin/ausweise-pruefen.astro

@@ -3,6 +3,7 @@ import UserLayout from "../../../layouts/UserLayout.astro";
 import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
 import DashboardAusweisePruefenModule from "#modules/Dashboard/DashboardAusweisePruefenModule.svelte";
 import { prisma } from "@ibcornelsen/database/server";
+import { createCaller } from "#lib/caller";
 
 const accessTokenValid = await validateAccessTokenServer(Astro);
 
@@ -12,17 +13,11 @@ if (!accessTokenValid) {
 
 // TODO: Nutzer darf nur auf diese Seite, wenn er die Rolle "admin" hat
 
-const ausweise = await prisma.verbrauchsausweisWohnen.findMany({
+const caller = createCaller(Astro);
-	take: 10,
+
-	include: {
+const ausweise = await caller.v1.verbrauchsausweisWohnen.getMany({
-		gebaeude_aufnahme_allgemein: {
+	limit: 25
-			include: {
+});
-				gebaeude_stammdaten: true
-			}
-		},
-		benutzer: true
-	}
-})
 ---
 
 <UserLayout title="Dashboard">

src/pages/energieausweis-erstellen/verbrauchsausweis-wohnen/index.astro

@@ -4,11 +4,9 @@ import AusweisLayout from "#layouts/AusweisLayout.astro";
 import VerbrauchsausweisWohnenModule from "#modules/Ausweise/VerbrauchsausweisWohnenModule.svelte";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";
-import { zodGenerateDefaultSchema } from "#lib/zodGenerateDefaultSchema";
-import { VerbrauchsausweisWohnenValidator } from "@ibcornelsen/api";
 
 const uid = Astro.url.searchParams.get("uid");
-let ausweis: VerbrauchsausweisWohnenClient = zodGenerateDefaultSchema(VerbrauchsausweisWohnenValidator);
+let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
 
 const caller = createCaller(Astro);
 

src/pages/kaufabschluss.astro

@@ -2,27 +2,20 @@
 
 import KaufabschlussModule from "#modules/KaufabschlussModule.svelte";
 import AusweisLayout from "#layouts/AusweisLayout.astro";
-import { Benutzer, Enums } from "@ibcornelsen/database/client";
+import { Enums } from "@ibcornelsen/database/client";
-import { prisma } from "@ibcornelsen/database/server";
 import { createCaller } from "#lib/caller";
 
 // Man sollte nur auf diese Seite kommen, wenn ein Ausweis bereits vorliegt und in der Datenbank abgespeichert wurde.
-const uidAusweis = Astro.url.searchParams.get("uid");
+const uid = Astro.url.searchParams.get("uid");
-
-if (!uidAusweis) {
-	return Astro.redirect("/404");
-}
-
-const uid = Astro.cookies.get("uid").value;
 
 if (!uid) {
-	return Astro.redirect("/401");
+	return Astro.redirect("/404");
 }
 
 const caller = createCaller(Astro);
 
 const ausweis = await caller.v1.verbrauchsausweisWohnen.get({
-	uid: uidAusweis
+	uid
 })
 
 const user = await caller.v1.benutzer.self();

src/pages/kundendaten.astro

@@ -6,26 +6,21 @@ import { Enums } from "@ibcornelsen/database/client";
 import { createCaller } from "#lib/caller";
 
 // Man sollte nur auf diese Seite kommen, wenn ein Ausweis bereits vorliegt und in der Datenbank abgespeichert wurde.
-const uidAusweis = Astro.url.searchParams.get("uid");
+const uid = Astro.url.searchParams.get("uid");
-
-if (!uidAusweis) {
-	return Astro.redirect("/404");
-}
-
-const uid = Astro.cookies.get("uid").value;
 
 if (!uid) {
-	return Astro.redirect("/401");
+	return Astro.redirect("/404");
 }
 
 const caller = createCaller(Astro);
 
 const ausweis = await caller.v1.verbrauchsausweisWohnen.get({
-	uid: uidAusweis
+	uid
 })
 
 const user = await caller.v1.benutzer.self();
 
+
 if (!ausweis || !user) {
 	return Astro.redirect("/404");
 }