334 lines
8.7 KiB
Svelte
334 lines
8.7 KiB
Svelte
<script lang="ts">
|
|
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
|
import ProgressBar from "#components/Ausweis/Progressbar.svelte";
|
|
import Pruefung from "#components/Ausweis/Pruefung.svelte";
|
|
import ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte";
|
|
|
|
import type { Bezahlmethoden } from "@ibcornelsen/database/client";
|
|
import { Enums } from "@ibcornelsen/database/client";
|
|
import { dialogs } from "svelte-dialogs";
|
|
import LoginDialog from "#components/LoginDialog.svelte";
|
|
import { PRICES } from "#lib/constants.js";
|
|
import {
|
|
BenutzerClient,
|
|
VerbrauchsausweisWohnenClient,
|
|
} from "#components/Ausweis/types.js";
|
|
import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
|
|
import { client } from "src/trpc.js";
|
|
|
|
export let user: BenutzerClient;
|
|
export let ausweis: VerbrauchsausweisWohnenClient;
|
|
|
|
export let bereich;
|
|
export let title;
|
|
export let bullets;
|
|
|
|
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
|
|
let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
|
|
|
|
let services = [
|
|
{
|
|
name: "Qualitätsdruck per Post (zusätzlich zur PDF Version)",
|
|
id: Enums.Service.Qualitaetsdruck,
|
|
price: 9,
|
|
selected: false,
|
|
},
|
|
{
|
|
name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)",
|
|
id: Enums.Service.Aushang,
|
|
price: 10,
|
|
selected: false,
|
|
},
|
|
{
|
|
name: "Same Day Service <br>Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag",
|
|
id: Enums.Service.SameDay,
|
|
price: 29,
|
|
selected: false,
|
|
},
|
|
{
|
|
name: "Telefonische Energieeffizienzberatung",
|
|
id: Enums.Service.Telefonberatung,
|
|
price: 75,
|
|
selected: false,
|
|
},
|
|
];
|
|
|
|
export let selectedPaymentType: Bezahlmethoden =
|
|
Enums.Bezahlmethoden.paypal;
|
|
|
|
let prices: number[] = [];
|
|
|
|
if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
|
|
prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart];
|
|
}
|
|
|
|
let basePrice: number = prices[0];
|
|
|
|
$: price =
|
|
basePrice +
|
|
services.reduce(
|
|
(acc, service) => (service.selected && acc + service.price) || acc,
|
|
0
|
|
);
|
|
|
|
async function speichern(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
|
|
// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
|
|
// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
|
|
if (!(await validateAccessTokenClient())) {
|
|
// TOOD: Auf Dialog umstellen.
|
|
const loggedIn = await dialogs.modal(LoginDialog);
|
|
|
|
if (!loggedIn) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
|
|
await client.v1.verbrauchsausweisWohnen.claim.mutate({
|
|
uid: ausweis.uid,
|
|
});
|
|
|
|
window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
|
|
}
|
|
</script>
|
|
|
|
<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
|
|
|
|
2xl:grid-cols-2 2xl:gap-x-8
|
|
">
|
|
|
|
<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
|
|
<PerformanceScore
|
|
bind:ausweis
|
|
bind:gebaeude_aufnahme_allgemein
|
|
bind:gebaeude
|
|
/>
|
|
</div>
|
|
|
|
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
|
|
|
|
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
|
|
<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
|
|
<ProgressBar progress={50}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<form id="formInput-2" on:submit={speichern}>
|
|
<div id="formular-box" class="formular-boxen ring-0">
|
|
|
|
<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2 mb-6">
|
|
<div class="formular-abschnitt1">€</div>
|
|
<div class="formular-abschnitt2">Prüfung, Leistungsbeschreibung und Kosten</div>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-[2fr_3fr] gap-8">
|
|
|
|
<div class="bereich-box pr-12">
|
|
|
|
<Pruefung
|
|
bereich="A"
|
|
title="Prüfung der Ausweisart"
|
|
bullets={[
|
|
["Vermietung, Verkauf oder sonstiges.", false],
|
|
["Baujahr Heizung nicht kleiner als Baujahr Gebäude.", false],
|
|
["Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten", false],
|
|
["Heizung min. 3 Jahre alt.", false],
|
|
["Verbrauchsausweis zulässig.", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="B"
|
|
title="Prüfung der Adresse, Wohnfläche, Keller und Dach"
|
|
bullets={[
|
|
["PLZ gültig.", false],
|
|
["Klimafaktorern.", false],
|
|
["Wohnfläche passt zu Wohneinheiten", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="C"
|
|
title="Prüfung der Verbrauchsangaben"
|
|
bullets={[
|
|
["Verbrauchsmenge schlüssig.", false],
|
|
["Verbrauchsabweichung im Rahmen.", false],
|
|
["Endenergieverbrauch schlüssig", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="D"
|
|
title="Prüfung Warmwasser und alternative Energieversorgung"
|
|
bullets={[
|
|
["Warmwasseranteil schlüssig.", false],
|
|
["Verbrauchsabweichung im Rahmen.", false],
|
|
["Endenergieverbrauch schlüssig", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="E"
|
|
title="Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand"
|
|
bullets={[
|
|
["Leerstand nicht größer als 30%.", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="F"
|
|
title="Prüfung des Sanierungsstandes und der Gebäudebilder"
|
|
bullets={[
|
|
["Mindestens ein Bild pro Abschnitt vorhanden.", false],
|
|
["Angaben zum Sanierungsstand vorhanden.", false],
|
|
["Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt.", false]
|
|
]}>
|
|
</Pruefung>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="grid grid-rows-3 gap-y-6">
|
|
|
|
<div class="bereich-box bg-white ring-primary/50 ring-4" >
|
|
|
|
<div class="ProduktKostenTabelle">
|
|
<div class="zeile">
|
|
<div>Produkt</div><div>:</div><div>Verbrauchsausweis</div>
|
|
</div>
|
|
<div class="zeile">
|
|
<div>Beschreibung</div><div>:</div>
|
|
<div class="col-span-2">Registrierung beim DiBt<br />
|
|
Prüfung durch Diplom Ingenieur<br />
|
|
Energieausweis Vorschau als PDF<br />
|
|
</div>
|
|
</div>
|
|
<div class="zeile betrag">
|
|
<div>Netto-Preis</div><div>:</div><div class="text-right"><b>{(price * 0.81).toFixed(2) + " €"}</b></div>
|
|
</div>
|
|
<div class="zeile betrag">
|
|
<div>19% gesetzl. MwSt.
|
|
</div><div>:</div><div class="text-right"><b>{(price * 0.19).toFixed(2) + " €"}</b></div>
|
|
</div>
|
|
<div class="zeile betrag">
|
|
<div><b>Preis inkl. MwSt.</b>
|
|
</div><div>:</div><div class="text-right"><b>{price.toFixed(2) + " €"}</b></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="varianten bereich-box bg-white">
|
|
<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>
|
|
|
|
|
|
|
|
<div class="variante">
|
|
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[0]}
|
|
name="Preis"
|
|
checked
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
|
|
<div>Verbrauchsausweis online als PDF per E-Mail</div>
|
|
</div>
|
|
|
|
|
|
<div class="variante">
|
|
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[1]}
|
|
name="Preis"
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
|
|
<div>Verbrauchsausweis online inkl. Beratung als PDF per E-Mail</div>
|
|
</div>
|
|
|
|
<div class="variante">
|
|
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[2]}
|
|
name="Preis"
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
|
|
<div>Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="zusaetze bereich-box bg-white">
|
|
|
|
<h3>Zusatzleistungen</h3>
|
|
|
|
{#each services as service}
|
|
|
|
<div class="zusatz">
|
|
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={service.selected}
|
|
/>
|
|
<div class="text-right pr-6"><b>{@html service.price} €</b> inkl. Mwst</div>
|
|
<div>{@html service.name}</div>
|
|
|
|
</div>
|
|
{/each}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ButtonZurueckSpeichernKaufabschluss />
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<style lang="postcss">
|
|
h3{@apply text-[1.25rem] ml-0 font-bold mb-6}
|
|
|
|
.ProduktKostenTabelle{@apply block;
|
|
.zeile{@apply grid grid-cols-[10rem_2rem_5rem_1fr];}
|
|
.zeile:nth-child(3){@apply mt-6}
|
|
.zeile:nth-child(5){@apply mt-6}
|
|
.betrag{@apply font-bold text-[1.25rem]}
|
|
}
|
|
|
|
.varianten{@apply block;
|
|
.variante{@apply grid grid-cols-[40px_8rem_1fr] items-start pb-4;
|
|
input{@apply mt-[5px]
|
|
}
|
|
}
|
|
}
|
|
|
|
.zusaetze{@apply block;
|
|
.zusatz{@apply grid grid-cols-[40px_8rem_1fr] items-start pb-3;
|
|
input{@apply mt-[4px]
|
|
}
|
|
}
|
|
}
|
|
</style>
|