295 lines
9.7 KiB
Svelte
295 lines
9.7 KiB
Svelte
<script lang="ts">
|
|
import { AufnahmeKomplettClient, BedarfsausweisWohnenClient, getAusweisartFromUUID, ObjektKomplettClient, RechnungClient, VerbrauchsausweisGewerbeClient, 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 { AusweisTyp, Enums, Objekt } from "#lib/client/prisma.js";
|
|
import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";
|
|
import { shortenUID } from "#server/lib/hash.js";
|
|
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
|
|
export let aufnahme: AufnahmeKomplettClient;
|
|
export let rechnung: RechnungClient;
|
|
export let objekt: Objekt;
|
|
const progress = ausweis.ausgestellt ? 100 : ausweis.bestellt ? 66 : 33;
|
|
|
|
const ausweisart = getAusweisartFromUUID(ausweis.uid);
|
|
|
|
const id = shortenUID(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) {
|
|
if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
|
|
await api["verbrauchsausweis-wohnen"]._uid.DELETE.fetch(undefined, {
|
|
params: {
|
|
uid: ausweis.uid,
|
|
},
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
|
|
},
|
|
});
|
|
} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
|
|
await api["verbrauchsausweis-gewerbe"]._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;
|
|
|
|
let calculations = null;
|
|
|
|
if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
|
|
calculations = endEnergieVerbrauchVerbrauchsausweis_2016(ausweis as VerbrauchsausweisWohnenClient, aufnahme, objekt);
|
|
} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
|
|
calculations = endEnergieVerbrauchVerbrauchsausweisGewerbe_2016(ausweis as VerbrauchsausweisGewerbeClient, aufnahme, objekt);
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mr-4">
|
|
{#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}
|
|
<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 items-center gap-2">
|
|
<div class="text-lg font-semibold">
|
|
{#if ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen}
|
|
Verbrauchsausweis Wohnen
|
|
{:else if ausweisart == Enums.Ausweisart.BedarfsausweisWohnen}
|
|
Bedarfsausweis Wohnen
|
|
{:else if ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe}
|
|
Verbrauchsausweis Gewerbe
|
|
{/if}
|
|
|
|
{#if rechnung.ausweistyp === Enums.AusweisTyp.Beratung}
|
|
(Beratung)
|
|
{:else if rechnung.ausweistyp === Enums.AusweisTyp.Offline}
|
|
(Offline)
|
|
{/if}
|
|
</div>
|
|
|
|
{#if ausweis.ausgestellt}
|
|
<span class="bg-green-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Ausgestellt</span>
|
|
{:else if ausweis.bestellt}
|
|
<span class="bg-primary px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Bestellt</span>
|
|
{:else}
|
|
<span class="bg-red-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Gespeichert</span>
|
|
{/if}
|
|
</div>
|
|
<div class="badge badge-accent font-semibold text-black text-m">{objekt.adresse}</div>
|
|
<div class="mb-4 flex flex-row items-center gap-4">
|
|
<div class="w-full border rounded-lg my-2">
|
|
<div class="bg-green-600 h-4 rounded-lg" class:bg-red-600={progress == 33} class:bg-primary={progress == 66} style="width: {progress}%;"></div>
|
|
</div>
|
|
<span class="text-sm font-semibold text-base-content"
|
|
>{progress}%</span
|
|
>
|
|
</div>
|
|
{#if ausweis.bestellt}
|
|
<p class="text-sm font-semibold">Der Ausweis wurde von Ihnen freigegeben und befindet sich in Prüfung vom IB Cornelsen</p>
|
|
{/if}
|
|
{#await calculations 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"
|
|
>{id}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{/await}
|
|
|
|
<div class="flex flex-row justify-end gap-4 mt-4">
|
|
{#if !ausweis.storniert && !ausweis.ausgestellt}
|
|
<a
|
|
class="button text-sm"
|
|
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
|
|
>Stornieren</a>
|
|
{/if}
|
|
|
|
{#if ausweis.bestellt && (!rechnung || rechnung.bezahlmethode === Enums.Bezahlmethoden.rechnung)}
|
|
<a href="/energieausweis-erstellen/bezahlung?uid={ausweis.uid}" class="button text-sm">Bezahlen</a>
|
|
{/if}
|
|
|
|
|
|
{#if !ausweis.ausgestellt && !ausweis.bestellt}
|
|
<!-- TODO -->
|
|
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
|
|
<a
|
|
class="button text-sm"
|
|
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
|
|
>Bearbeiten</a>
|
|
{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
|
|
<a
|
|
class="button text-sm"
|
|
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?uid={ausweis.uid}"
|
|
>Bearbeiten</a>
|
|
{/if}
|
|
{/if}
|
|
|
|
<a
|
|
class="p-2 rounded-lg hover:bg-gray-200"
|
|
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>
|