227 lines
7.1 KiB
Svelte
227 lines
7.1 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
AufnahmeClient,
|
|
ObjektClient,
|
|
UploadedGebaeudeBild,
|
|
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";
|
|
|
|
export let ausweis: VerbrauchsausweisWohnenClient;
|
|
export let aufnahme: AufnahmeClient;
|
|
export let bilder: UploadedGebaeudeBild[];
|
|
export let objekt: ObjektClient;
|
|
export let progress: number;
|
|
|
|
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)}`
|
|
}
|
|
})
|
|
|
|
aufnahme.storniert = true;
|
|
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 bg-base-200 card-bordered border-base-300">
|
|
{#if aufnahme.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 lg:w-1/2">
|
|
<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 aufnahme.ausweisart == "VerbrauchsausweisWohnen"}
|
|
<div class="badge badge-accent font-semibold">
|
|
Verbrauchsausweis Wohnen
|
|
</div>
|
|
{:else if aufnahme.ausweisart == "BedarfsausweisWohnen"}
|
|
<div class="badge badge-accent font-semibold">
|
|
Bedarfsausweis Wohnen
|
|
</div>
|
|
{:else if aufnahme.ausweisart == "VerbrauchsausweisGewerbe"}
|
|
<div class="badge badge-accent font-semibold">
|
|
Verbrauchsausweis Gewerbe
|
|
</div>
|
|
{/if}
|
|
|
|
{#if aufnahme.erledigt}
|
|
<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-wohnen?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-220-31-87">040 220 31 87</a> an oder
|
|
<a href="mailto:moritz.utcke@gmx.de">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>
|