online-energieausweis/src/components/Dashboard/DashboardAusweis.svelte

<script lang="ts">
	import { AufnahmeKomplettClient, getAusweisartFromUUID, ObjektKomplettClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import moment from "moment";
	import { dialogs } from "svelte-dialogs";
	import {
		CrossCircled,
		DotsVertical,
		Download,
		Pencil2,
		QuestionMarkCircled,
	} from "radix-svelte-icons";
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
	import { Enums } from "@ibcornelsen/database/client";

	export let ausweis: VerbrauchsausweisWohnenClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let objekt: ObjektKomplettClient;
	export let progress: number;

	const ausweisart = getAusweisartFromUUID(ausweis.uid);

	async function ausweisStornieren() {
		const result = await dialogs.confirm({
			title: "Ausweis Stornieren",
			text: "Sind sie sich sicher, dass sie den Ausweis stornieren möchten? Diese Operation kann nicht rückgängig gemacht werden!",
			confirmButtonText: "Ausweis Stornieren",
			confirmButtonClass: "btn btn-primary",
			declineButtonClass: "btn btn-bordered",
			declineButtonText: "Abbrechen",
			dialogClass: "modal-box",
			headerClass: "bg-base-100 text-center",
			titleClass: "text-base-content text-xl font-medium",
			dividerClass: "hidden",
			footerClass: "bg-base-100 justify-center gap-4 mt-4",
		});

		if (result === true) {
			await api["verbrauchsausweis-wohnen"]._uid.DELETE.fetch(undefined, {
				params: {
					uid: ausweis.uid,
				},
				headers: {
					Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
				},
			});

			ausweis.storniert
			ausweis = ausweis;

			dialogs.alert({
				title: "Ausweis Storniert",
				text: "Der Ausweis wurde erfolgreich storniert.",
				dismissButtonText: "Schließen",
				dismissButtonClass: "btn btn-primary",
				dialogClass: "modal-box",
				headerClass: "bg-base-100 text-center",
				titleClass: "text-base-content text-xl font-medium",
				dividerClass: "hidden",
				footerClass: "bg-base-100 justify-center gap-4 mt-4",
			});
		}
	}

	let hilfeModal: HTMLDialogElement;
</script>

<div class="card lg:card-side relative bg-base-200 card-bordered border-base-300">
	{#if ausweis.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-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">
		<img
			src={(bilder.length > 0 && `/bilder/${bilder[0].uid}.webp`) ||
				"/images/placeholder.jpg"}
			class="object-cover w-full h-full"
			alt="Gebäudebild"
		/>
	</figure> -->
	<div class="card-body">
		<div
			class="flex justify-end mb-2 dropdown dropdown-bottom absolute top-4 right-4"
		>
			<button class="rounded-full p-2.5 hover:bg-base-100">
				<DotsVertical size={15} />
			</button>
			<ul
				tabindex="-1"
				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64 gap-2"
			>
				<li>
					<button on:click={ausweisStornieren}
						><CrossCircled size={15} />Ausweis Stornieren</button
					>
				</li>
				<li>
					<button><Pencil2 size={15} /> Als Vorlage benutzen</button>
				</li>
				<li>
					<button on:click={() => hilfeModal.showModal()}
						><QuestionMarkCircled size={15} /> Hilfe Erhalten</button
					>
				</li>
			</ul>
		</div>
		<div class="flex flex-row flex-wrap gap-2">
			{#if ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen}
				<div class="badge badge-accent font-semibold">
					Verbrauchsausweis Wohnen
				</div>
			{:else if ausweisart == Enums.Ausweisart.BedarfsausweisWohnen}
				<div class="badge badge-accent font-semibold">
					Bedarfsausweis Wohnen
				</div>
			{:else if ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe}
				<div class="badge badge-accent font-semibold">
					Verbrauchsausweis Gewerbe
				</div>
			{/if}

			{#if ausweis.ausgestellt}
				<div class="badge badge-success font-semibold">Ausgestellt</div>
			{/if}
		</div>
		<h2 class="card-title">{objekt.adresse}</h2>
		<div class="mb-4 flex flex-row items-center gap-4">
			<progress class="progress w-full" value={progress} max="100"
			></progress>
			<!-- TODO: Metrics für den Fortschritt festlegen -->
			<span class="text-sm font-semibold text-base-content"
				>{progress}%</span
			>
		</div>
		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt) then calculations}
			<div class="flex flex-col gap-2">
				<div class="flex flex-row justify-between">
					<span>Energieverbrauch</span>
					<span class="font-bold text-base-content"
						>{calculations?.endEnergieVerbrauchGesamt}kWh/A</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>CO2 Ausstoß</span>
					<span class="font-bold text-base-content"
						>{calculations?.co2EmissionenGesamt}Kg/A</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Erstellungsdatum</span>
					<span class="font-bold text-base-content"
						>{moment(aufnahme.erstellungsdatum).format(
							"DD.MM.YYYY"
						)}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Baujahr</span>
					<span
						class="font-bold text-base-content"
						title="Gebäude / Heizung"
						>{aufnahme.baujahr_gebaeude[0] || "N/A"} /
						{aufnahme.baujahr_heizung[0] || "N/A"}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Wohnfläche</span>
					<span class="font-bold text-base-content"
						>{aufnahme.flaeche
							? `${aufnahme.flaeche}m²`
							: "N/A"}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>ID</span>
					<span class="font-bold text-base-content"
						>{ausweis.uid.split("-")[0]}</span
					>
				</div>
			</div>
		{/await}
		<div class="card-actions justify-end mt-8">
			<a
				class="btn btn-primary"
				href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
				>Bearbeiten</a
			>
			<a
				class="btn btn-ghost"
				title="PDF Herunterladen"
				target="_blank"
				href="/pdf/ansichtsausweis?uid={ausweis.uid}"
			>
				<Download size={22} />
			</a>
		</div>
	</div>
</div>

<dialog bind:this={hilfeModal} class="modal">
	<div class="modal-box">
		<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
		<p>
			Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres
			Ausweises?
		</p>
		<p>
			In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf
			häufig gestellte Fragen.
		</p>
		<p>
			Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch
			unter <a href="tel:040-209-339-850">040 209 339 850</a> an oder
			<a href="mailto:info@online-energieausweis.com">schreiben sie uns eine email</a
			>.
		</p>
		<p>
			Wenn wir telefonisch nicht erreichbar sind, können sie uns auch
			direkt hier eine Nachricht hinterlassen.
		</p>
		<form class="my-4">
			<textarea
				class="textarea textarea-bordered"
				placeholder="Ihre Nachricht..."
				cols="10"
				rows="5"
			></textarea>
			<button class="btn btn-primary">Nachricht Abschicken</button>
		</form>
		<div class="modal-action">
			<form method="dialog">
				<button class="btn">Schließen</button>
			</form>
		</div>
	</div>
</dialog>