Files
online-energieausweis/src/components/Dashboard/DashboardNachweis.svelte
2025-03-12 18:14:13 -03:00

112 lines
3.2 KiB
Svelte

<script lang="ts">
import { AufnahmeKomplettClient, GEGNachweisWohnenClient, getAusweisartFromUUID } from "#components/Ausweis/types.js";
import {
CrossCircled,
DotsVertical,
Pencil2,
QuestionMarkCircled,
} from "radix-svelte-icons";
import { Enums, Objekt } from "#lib/client/prisma.js";
export let nachweis: GEGNachweisWohnenClient;
export let aufnahme: AufnahmeKomplettClient;
export let objekt: Objekt;
const ausweisart = getAusweisartFromUUID(nachweis.uid);
let hilfeModal: HTMLDialogElement;
</script>
<div class="relative bg-base-200 border border-base-300 rounded-lg p-4">
{#if nachweis.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><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">
{#if ausweisart == Enums.Ausweisart.GEGNachweisWohnen}
<div class="text-lg font-semibold">
GEG Nachweis Wohnen
</div>
{:else if ausweisart == Enums.Ausweisart.GEGNachweisGewerbe}
<div class="text-lg font-semibold">
GEG Nachweis Gewerbe
</div>
{:else if ausweisart == Enums.Ausweisart.BedarfsausweisGewerbe}
<div class="text-lg font-semibold">
Bedarfsausweis Gewerbe
</div>
{/if}
</div>
<div class="badge badge-accent font-semibold text-black text-m">{objekt.adresse}</div>
<div class="flex flex-row justify-end gap-4 mt-4">
</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>