IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #298 from IBCornelsen/main

Browse Source 
Update Jens
This commit is contained in:
Jens Cornelsen
2025-01-28 00:04:01 +01:00
committed by GitHub
parent cd5e4e0f1e 739abc58eb
commit 6b4d3b2953
16 changed files with 1057 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/images/mastercard.png → public/images/creditcard.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/images/giropay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

100
src/components/Ausweis/Ansprechpartner.svelte Normal file
View File

@@ -0,0 +1,100 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
export let user: BenutzerClient;
</script>
<div id="ansprechpartner" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">
<!-- Anrede *
<div class="input-standard order-3 md:order-3 xl:order-3">
<Inputlabel title="Anrede *"></Inputlabel>
<select name="anrede" bind:value={user.anrede}>
<option>bitte auswählen</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
<option value="Frau">Frau</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
Dabei handelt es sich um die Wohnfläche abzüglich
vorhandener Flächen die sich außerhalb des Gebäudes
befinden. (Balkone, Terassen,etc.).
</HelpLabel>
</div>
</div>-->
<!-- Vorname * -->
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Vorname *"></Inputlabel>
<input
name="vorname"
type="text"
bind:value={user.vorname}
required
/>
<div class="help-label">
<HelpLabel>
Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
</HelpLabel>
</div>
</div>
<!-- Nachname * -->
<div class="input-standard order-2 md:order-2 xl:order-2">
<Inputlabel title="Nachname *"></Inputlabel>
<input
name="name"
type="text"
bind:value={user.name}
required
/>
<div class="help-label">
<HelpLabel>
Bitte Geben Sie hier den Nachnamen des Ansprechpartners&nbsp;ein.
</HelpLabel>
</div>
</div>
<!-- Telefon & Email * -->
<div class="input-standard order-3 md:order-3 xl:order-3">
<Inputlabel title="Telefonnummer *"></Inputlabel>
<input
name="telefon"
bind:value={user.telefon}
type="text"
/>
<div class="help-label">
<HelpLabel>
Bitte Geben Sie hier die Telefonnummer des Ansprechpartners&nbsp;ein.
</HelpLabel>
</div>
</div>
</div>

3
src/components/Ausweis/Ausweisart.svelte
View File

@@ -26,7 +26,6 @@
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient; export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let Energieausweis; export let Energieausweis;
console.log('HALLO:'+Energieausweis);
</script> </script>
<div id="ausweisart" class="bereich-box grid <div id="ausweisart" class="bereich-box grid
@@ -74,7 +73,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
> >
<option disabled selected value={false}>Bitte auswählen</option> <option disabled selected value={false}>Bitte auswählen</option>
{#if Energieausweis=="Verbrauchsausweis Wohngebäude"} {#if Energieausweis=="Verbrauchsausweis Wohngebäude" || Energieausweis=="Bedarfsausweis Wohngebäude"}
<option value="Einfamilienhaus">Einfamilienhaus</option> <option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option> <option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option> <option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>

56
src/components/Ausweis/Bezahlung.svelte Normal file
View File

@@ -0,0 +1,56 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import ZipSearch from "#components/PlzSuche.svelte";
import { Enums } from "@ibcornelsen/database/client";
import PaymentOption from "#components/PaymentOption.svelte";
export let selectedPaymentType: Bezahlmethoden =
Enums.Bezahlmethoden.paypal;
</script>
<div id="bezahlung" class="bereich-box grid
grid-cols-5 justify-around justify-items-center items-center">
<PaymentOption
paymentType={Enums.Bezahlmethoden.paypal}
bind:selectedPaymentType
name={"PayPal"}
icon={"/images/paypal.png"}
></PaymentOption>
<PaymentOption
paymentType={Enums.Bezahlmethoden.sofort}
bind:selectedPaymentType
name={"Sofort"}
icon={"/images/sofort.png"}
></PaymentOption>
<PaymentOption
paymentType={Enums.Bezahlmethoden.giropay}
bind:selectedPaymentType
name={"Giropay"}
icon={"/images/giropay.png"}
></PaymentOption>
<PaymentOption
paymentType={Enums.Bezahlmethoden.creditcard}
bind:selectedPaymentType
name={"Kreditkarte"}
icon={"/images/creditcard.png"}
></PaymentOption>
<PaymentOption
paymentType={Enums.Bezahlmethoden.rechnung}
bind:selectedPaymentType
name={"Rechnung"}
icon={"/images/rechnung.png"}
></PaymentOption>
</div>

2
src/components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte
View File

@@ -21,7 +21,7 @@
<button class="button">Speichern</button> <button class="button">Speichern</button>
<button class="button"><a href="/kaufabschluss?uid=b27f02b4-e7a8-4c2e-bb19-1d0e39edf634" class="text-white">Zum Kaufabschluss</a></button <button class="button">kostenpflichtig bestellen</button
> >

4
src/components/Ausweis/GebaeudeDaten.svelte
View File

@@ -41,7 +41,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<!-- PLZ / ORT --> <!-- PLZ / ORT -->
<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2"> <div class="grid grid-cols-[2fr_6fr] gap-x-4 order-2 md:order-2 xl:order-2 relative">
<div class="input-noHelp"> <div class="input-noHelp">
<Inputlabel title="PLZ *"></Inputlabel> <Inputlabel title="PLZ *"></Inputlabel>
@@ -73,6 +73,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div> </div>
</div> </div>
</div> </div>
<!-- Wohnfläche m² * --> <!-- Wohnfläche m² * -->

320
src/components/Ausweis/GebaeudeVolumen.svelte Normal file
View File

@@ -0,0 +1,320 @@
<script lang="ts">
import HelpLabel from "#components/HelpLabel.svelte";
import Label from "#components/Label.svelte";
export let ausweis: BedarfsausweisWohnenClient;
const arrayRange = (start: number, stop: number, step: number) =>
Array.from(
{ length: (stop - start) / step + 1 },
(value, index) => start + index * step
);
</script>
<div class="grid grid-cols-[3fr_2fr] gap-4">
<div class="GRB3 gap-4">
<HelpLabel
title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
>Hier wählen Sie Ihren passenden Grundriss aus, und tragen
die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
nur den Grundriss der zum beheizten Gebäude gehört. Garagen
oder Schuppen die an das Haus herangebaut sind aber keine
Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
>
<div class="grid grid-cols-4 gap-4">
<div>
<HelpLabel title="Anzahl Vollgeschosse *"
>Bitte geben Sie hier die Anzahl der Vollgeschosse
an. Keller und Dachgeschoss mit Schrägen zählen
nicht dazu.</HelpLabel
>
<input
name="anzahl_vollgeschosse"
bind:value={ausweis.anzahl_vollgeschosse}
type="number"
required
/>
</div>
<div>
<HelpLabel title="Geschosshöhe *"
>Bitte geben Sie hier die Geschosshöhe (lichte
Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
unterschiedlichen Geschosshöhen bilden Sie einen
Mittelwert.</HelpLabel
>
<select
name="geschosshoehe"
bind:value={ausweis.geschosshoehe}
required
>
<option>Bitte auswählen</option>
{#each arrayRange(2.1, 4.5, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option
>
{/each}
</select>
</div>
<div>
<HelpLabel title="Gaubenanzahl"
>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
die Anzahl ein.</HelpLabel
>
<input
name="anzahl_gauben"
bind:value={ausweis.anzahl_gauben}
type="number"
/>
</div>
<div>
<HelpLabel title="Breite aller Gauben in m"
>Bitte geben Sie hier die Gesamtbreite aller Gauben
in m ein.</HelpLabel
>
<select
name="breite_gauben"
bind:value={ausweis.breite_gauben}
>
<option>Bitte auswählen</option>
{#each arrayRange(0.5, 10, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option
>
{/each}
</select>
</div>
</div>
<div class="grid grid-cols-4 gap-4">
<img src="/images/r.png" alt="rechteck" />
<img src="/images/l.png" alt="l-form" />
<img src="/images/t.png" alt="t-form" />
<img src="/images/u.png" alt="u-form" />
</div>
<div class="grid grid-cols-6 gap-4">
<div>
<HelpLabel title="A"
>Bitte Eingabe in m. Punkt statt Komma verwenden
z.B.: 10.40 (Eingabebeispiel)</HelpLabel
>
<input
name="masse_a"
type="number"
bind:value={ausweis.masse_a}
/>
</div>
<div>
<Label>B</Label>
<input
name="masse_b"
type="number"
bind:value={ausweis.masse_b}
/>
</div>
<div>
<Label>C</Label>
<input
name="masse_c"
type="number"
bind:value={ausweis.masse_c}
/>
</div>
<div>
<Label>D</Label>
<input
name="masse_d"
type="number"
bind:value={ausweis.masse_d}
/>
</div>
<div>
<Label>E</Label>
<input
name="masse_e"
type="number"
bind:value={ausweis.masse_e}
/>
</div>
<div>
<Label>F</Label>
<input
name="masse_f"
type="number"
bind:value={ausweis.masse_f}
/>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<Label>Fensterfläche Südost bis Südwest in m²</Label>
<input
name="fensterflaeche_so_sw"
bind:value={ausweis.fensterflaeche_so_sw}
type="number"
/>
</div>
<div>
<Label>Fensterfläche Nordwest bis Nordost in m²</Label>
<input
name="fensterflaeche_nw_no"
bind:value={ausweis.fensterflaeche_nw_no}
type="number"
/>
</div>
<div>
<Label>Außenwandfläche an unbeheizten Vorbau</Label>
<input
name="aussenwandflaeche_unbeheizt"
bind:value={ausweis.aussenwandflaeche_unbeheizt}
type="number"
/>
</div>
</div>
</div>
<div class="GRB3">
<HelpLabel title="Außenflächen, U-Werte und Volumen"
>Die wärmeübertragende Umfassungsflächen sind die
Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
an unbeheizte Vorbauten grenzen. Wenn Ihnen die
Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
Sie die Eingabe direkt vornehmen. Hier können Sie auch das
von den Umfassungsflächen eingeschlossene Volumen des
Gebäudes eingeben. Die ermittelten Werte der
Berechnungshilfe können hier präzisiert werden.</HelpLabel
>
<div class="flex flex-row items-center gap-4">
<Label>Tabellenwerte manuell ändern</Label>
<input
type="checkbox"
bind:checked={ausweis.tabellenwerte_aendern}
name="tabellenwerte_aendern"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Dachfläche in m²</Label>
<input
name="dachflaeche"
bind:value={ausweis.dachflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="dach_u_wert"
bind:value={ausweis.dach_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Geschoßdecke in m²</Label>
<input
name="deckenflaeche"
bind:value={ausweis.deckenflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="decke_u_wert"
bind:value={ausweis.decke_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Außenwand in m²</Label>
<input
name="aussenwand_flaeche"
bind:value={ausweis.aussenwand_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="aussenwand_u_wert"
bind:value={ausweis.aussenwand_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Fußboden in m²</Label>
<input
name="fussboden_flaeche"
bind:value={ausweis.fussboden_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="fussboden_u_wert"
bind:value={ausweis.fussboden_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div>
<Label
>Das von den Flächen eingeschlossene Gebäudevolumen in
m³</Label
>
<input
name="volumen"
type="number"
bind:value={ausweis.volumen}
readonly={!ausweis.tabellenwerte_aendern}
/>
</div>
<div>
<Label>Blower-Door-Test erfolgreich durchgeführt</Label>
<div class="flex flex-row gap-4">
<label class="radio-inline"
><input
type="radio"
value={true}
bind:group={ausweis.dicht}
name="dichtheit"
/>Ja</label
>
<label class="radio-inline"
><input
type="radio"
value={false}
bind:group={ausweis.dicht}
name="dichtheit"
/>Nein</label
>
</div>
</div>
</div>
</div>

330
src/components/Ausweis/Rechnungsadresse.svelte Normal file
View File

@@ -0,0 +1,330 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import ZipSearch from "#components/PlzSuche.svelte";
export let user: BenutzerClient;
let rechnung: inferProcedureInput<
AppRouter["v1"]["rechnungen"]["erstellen"]
> = {
email: user.email,
empfaenger: user.vorname + " " + user.name,
strasse: user.adresse,
plz: user.plz,
ort: user.ort,
versand_empfaenger: user.vorname + " " + user.name,
versand_strasse: user.adresse,
versand_plz: user.plz,
versand_ort: user.ort,
telefon: user.telefon,
};
</script>
<div id="rechnungsadresse" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">
<!-- Empfänger * -->
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Rechnungs-Empfänger *"></Inputlabel>
<input
name="rechnung_empfaenger"
type="text"
bind:value={rechnung.empfaenger}
required
data-rule-maxlength="100"
data-msg-maxlength="max. 100 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie den Empfänger ein, auf den die Rechnung ausgestellt wird.
</HelpLabel>
</div>
</div>
<!-- Straße, Hausnummer * -->
<div class="input-standard order21 md:order-2 xl:order-2">
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
<input
name="rechnung_strasse"
bind:value={rechnung.strasse}
type="text"
required
data-rule-maxlength="40"
data-msg-maxlength="max. 40 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der Rechnung erscheinen soll, ein.
</HelpLabel>
</div>
</div>
<!-- PLZ / ORT -->
<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
<div class="input-noHelp">
<Inputlabel title="PLZ *"></Inputlabel>
<ZipSearch
name="rechnung_plz"
bind:zip={rechnung.plz}
bind:city={rechnung.ort}
/>
</div>
<div class="input-standard">
<Inputlabel title="Ort *"></Inputlabel>
<input
name="rechnung_ort"
readonly
type="text"
required
value={rechnung.ort}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die PLZ des Ortes, so wie Sie auf der Rechnung erscheinen soll, ein.
</HelpLabel>
</div>
</div>
</div>
<!-- Zusatzzeile -->
<div class="input-standard order-4 md:order-4 xl:order-4">
<Inputlabel title="Zusatzzeile"></Inputlabel>
<input
name="rechnung_zusatzzeile"
bind:value={rechnung.zusatzzeile}
type="text"
data-rule-maxlength="80"
data-msg-maxlength="max. 80 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
</HelpLabel>
</div>
</div>
<!-- E-mail -->
<div class="input-standard order-5 md:order-5 xl:order-5">
<Inputlabel title="E-mail *"></Inputlabel>
<input
name="rechnung_email"
bind:value={rechnung.email}
type="email"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
</HelpLabel>
</div>
</div>
<!-- Telefon
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Telefon *"></Inputlabel>
<input
name="rechnung_telefon"
bind:value={rechnung.telefon}
type="text"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
</HelpLabel>
</div>
</div>
-->
<div class="col-span-3 order-7 md:order-7 xl:order-7">
<div class="grid grid-cols-[25px_max-content] items-center justify-items-start">
<input
id="abweichende_versand_adresse"
class="w-[15px] h-[15px]"
type="checkbox"
name="abweichende_versand_adresse"
bind:checked={rechnung.abweichende_versand_adresse}
/>
<label for="abweichende_versand_adresse" class="cursor-pointer"
>abweichende Versandadresse</label>
</div>
</div>
{#if rechnung.abweichende_versand_adresse}
<!-- Versand Empfänger * -->
<div class="input-standard order-8 md:order-8 xl:order-8">
<Inputlabel title="Versand-Empfänger *"></Inputlabel>
<input
name="versand_empfaenger"
type="text"
readonly={!rechnung.abweichende_versand_adresse}
bind:value={rechnung.versand_empfaenger}
required
data-rule-maxlength="100"
data-msg-maxlength="max. 100 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie den Namen des Versand-Empfängers ein.
</HelpLabel>
</div>
</div>
<!-- Versand Straße, Hausnummer * -->
<div class="input-standard order-9 md:order-9 xl:order-9">
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
<input
name="versand_strasse"
type="text"
readonly={!rechnung.abweichende_versand_adresse}
bind:value={rechnung.versand_strasse}
required
data-rule-maxlength="40"
data-msg-maxlength="max. 40 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer ein, an die die Rechnung versandt wird.
</HelpLabel>
</div>
</div>
<!-- PLZ / ORT -->
<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10">
<div class="input-noHelp">
<Inputlabel title="PLZ *"></Inputlabel>
<ZipSearch
name="versand_plz"
readonly={!rechnung.abweichende_versand_adresse}
bind:zip={rechnung.versand_plz}
bind:city={rechnung.versand_ort}
/>
</div>
<div class="input-standard">
<Inputlabel title="Ort *"></Inputlabel>
<input
name="versand_ort"
type="text"
readonly
required
bind:value={rechnung.versand_ort}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein, an den die Rechnung versandt wird.
</HelpLabel>
</div>
</div>
</div>
<!-- Zusatzzeile -->
<div class="input-standard order-11 md:order-11 xl:order-11">
<Inputlabel title="Zusatzzeile"></Inputlabel>
<input
name="versand_zusatzzeile"
type="text"
readonly={!rechnung.abweichende_versand_adresse}
bind:value={rechnung.versand_zusatzzeile}
data-rule-maxlength="80"
data-msg-maxlength="max. 80 Zeichen"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
</HelpLabel>
</div>
</div>
<!-- E-mail -->
<div class="input-standard order-12 md:order-12 xl:order-12">
<Inputlabel title="E-mail *"></Inputlabel>
<input
name="rechnung_email"
bind:value={rechnung.email}
type="email"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die E-Mail Adresse des Versand-Empfängers ein.
</HelpLabel>
</div>
</div>
<!-- Telefon
<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
<Inputlabel title="Telefon *"></Inputlabel>
<input
name="rechnung_telefon"
bind:value={rechnung.telefon}
type="text"
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
</HelpLabel>
</div>
</div>
-->
{/if }
</div>

22
src/components/PaymentOption.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Bezahlmethoden } from "@ibcornelsen/database/client"; import type { Bezahlmethoden } from "@ibcornelsen/database/client";
import Input from "radix-svelte-icons/src/lib/icons/Input.svelte";
export let name: string; export let name: string;
export let icon: string; export let icon: string;
@@ -7,9 +8,26 @@
export let selectedPaymentType: Bezahlmethoden; export let selectedPaymentType: Bezahlmethoden;
</script> </script>
<button type="button" data-test={paymentType} class="flex flex-col items-center cursor-pointer" class:bg-gray-100={paymentType == selectedPaymentType} on:click={() => selectedPaymentType = paymentType}> <div>
<input type="radio" data-test={paymentType} id={paymentType} name="paymentType" on:change={() => selectedPaymentType = paymentType} />
<label for={paymentType}>
<div class="grid grid-rows-[1fr_20px] justify-items-center items-center cursor-pointer">
<img src={icon} alt={name} />
{name}
</div>
</label>
</div>
<!--
<button type="button" class="bg-white px-4 py-2" on:click={() => selectedPaymentType = paymentType}>
<div class="grid grid-rows-[max-content-max-content] w-fit">
<img src={icon} alt={name} /> <img src={icon} alt={name} />
<span aria-label={name}> <span aria-label={name}>
{name} {name}
</span> </span>
</button> </div>
</button>
-->

7
src/components/PlzSuche.svelte
View File

@@ -45,9 +45,10 @@
} }
} }
} }
</script> </script>
<div class="relative" use:clickOutside={() => { <div class="" use:clickOutside={() => {
hideZipDropdown = true; hideZipDropdown = true;
}}> }}>
@@ -67,9 +68,9 @@
maxlength="5" maxlength="5"
/> />
<div data-test="plz-container" class="absolute top-[calc(100%+4px)] left-0 w-full bg-white py-2 shadow-md rounded-lg" hidden={hideZipDropdown}> <div data-test="plz-container" class="absolute top-[calc(100%+4px)] left-0 z-10 bg-white py-2 shadow-md rounded-lg" hidden={hideZipDropdown}>
{#each zipCodes as zipCode} {#each zipCodes as zipCode}
<div class="hover:bg-gray-100 cursor-pointer px-2 py-0.5" tabindex="-1" on:click={() => { <div class="hover:bg-gray-100 cursor-pointer px-2 py-0.5 text-nowrap" tabindex="-1" on:click={() => {
zip = zipCode.plz; zip = zipCode.plz;
city = zipCode.stadt; city = zipCode.stadt;
hideZipDropdown = true; hideZipDropdown = true;

581
src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
View File

@@ -1,12 +1,26 @@
<script lang="ts"> <script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte"; import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import Progressbar from "#components/Ausweis/Progressbar.svelte"; import ProgressBar from "#components/Ausweis/Progressbar.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte"; //import Hilfe from "#components/Ausweis/Hilfe.svelte";
import { PRICES } from "#lib/constants";
import Bereich from "#components/labels/Bereich.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte"; import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte"; import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
import GebaeudeVolumen from "#components/Ausweis/GebaeudeVolumen.svelte";
import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
import Label from "#components/Label.svelte"; import Label from "#components/Label.svelte";
import HelpLabel from "#components/HelpLabel.svelte"; import HelpLabel from "#components/HelpLabel.svelte";
import ZipSearch from "#components/PlzSuche.svelte"; import ZipSearch from "#components/PlzSuche.svelte";
import { hotWaterProductionTypes } from "./HotWaterProductionTypes.js"; import { hotWaterProductionTypes } from "./HotWaterProductionTypes.js";
import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte"; import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
import moment from "moment"; import moment from "moment";
@@ -17,12 +31,14 @@
BenutzerClient, BenutzerClient,
UploadedGebaeudeBild, UploadedGebaeudeBild,
} from "#components/Ausweis/types.js"; } from "#components/Ausweis/types.js";
import Bereich from "#components/labels/Bereich.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte"; import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
export let ausweis: BedarfsausweisWohnenClient; export let ausweis: BedarfsausweisWohnenClient;
export let user: BenutzerClient = {} as BenutzerClient; export let user: BenutzerClient = {} as BenutzerClient;
let Energieausweis = "Bedarfsausweis Wohngebäude";
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {}; let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
let gebaeude = let gebaeude =
ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {}; ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -145,480 +161,67 @@
} }
</script> </script>
<div class="grid grid-cols-2 gap-x-8 px-4 items-center"> <div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
<Progressbar progress={0} />
</div>
<div class="w-full rounded-lg border-gray/35 border-2 relative px-4"> 2xl:grid-cols-2 2xl:gap-x-8
<PerformanceScore ">
bind:ausweis
bind:gebaeude_aufnahme_allgemein <div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
bind:gebaeude <PerformanceScore
/> bind:ausweis
</div> bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div> </div>
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} /> <div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data"> <h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
<h2 class="text-primary text-xl">{Energieausweis} {PRICES.BedarfsausweisWohnen[0]} €</h2>
<ProgressBar progress={0} />
</div>
</div>
<form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0"> <div id="formular-box" class="formular-boxen ring-0">
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
<!-- A Prüfung der Ausweisart -->
<Bereich bereich="A" title="Prüfung der Ausweisart"> <Bereich bereich="A" title="Prüfung der Ausweisart">
<Ausweisart <Ausweisart
bind:gebaeude bind:gebaeude
bind:gebaeude_aufnahme_allgemein bind:gebaeude_aufnahme_allgemein
bind:ausweis bind:ausweis
{Energieausweis}
/> />
</Bereich> </Bereich>
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
<Bereich
bereich="B"
title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
><GebaeudeDaten bind:gebaeude_aufnahme_allgemein /></Bereich
>
<hr />
<Bereich <Bereich
bereich="B" bereich="B"
title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil" title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
><GebaeudeDaten bind:gebaeude_aufnahme_allgemein /></Bereich
> >
<div class="GRB">
<div>
<HelpLabel title="Straße, Hausnummer *"
>Bitte geben Sie hier die Straße und Hausnummer des
Gebäudes ein.</HelpLabel
>
<div>
<input
name="objekt_strasse"
class=" strasse"
type="text"
bind:value={ausweis.objekt_strasse}
required
/>
</div>
</div>
<ZipSearch <!-- C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen -->
bind:zip={ausweis.objekt_plz}
bind:city={ausweis.objekt_ort} <Bereich
name="zip" bind:ausweis
bereich="C"
title="Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen"
>
<GebaeudeVolumen
bind:ausweis
/> />
<div>
<HelpLabel title="Ort *"
>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
>
<div>
<input
name="objekt_ort"
type="text"
bind:value={ausweis.objekt_ort}
/>
</div>
</div>
<div>
<HelpLabel title="Wohnfläche m² *"
>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
Dabei handelt es sich um die Wohnfläche abzüglich
vorhandener Flächen die sich außerhalb des Gebäudes
befinden. (Balkone, Terassen,etc.).</HelpLabel
>
<div>
<input
name="wohnflaeche"
type="number"
required
bind:value={ausweis.wohnflaeche}
/>
</div>
</div>
<div>
<HelpLabel title="Gebäudetyp *"
>Bitte wählen Sie hier den Gebäudetyp aus.
</HelpLabel>
<div>
<select
name="objekt_typ"
bind:value={ausweis.objekt_typ}
required
>
<option>Bitte auswählen</option>
<option value="Einfamilienhaus">
Einfamilienhaus</option
>
<option value="Freistehendes Einfamilienhaus">
Freistehendes Einfamilienhaus</option
>
<option value="Freistehendes Zweifamilienhaus">
Freistehendes Zweifamilienhaus</option
>
<option value="Doppelhaushälfte">
Doppelhaushälfte</option
>
<option value="Reihenendhaus">
Reihenendhaus</option
>
<option value="Reihenmittelhaus">
Reihenmittelhaus</option
>
<option value="Mehrfamilienhaus">
Mehrfamilienhaus</option
>
<option value="Wohn- und Geschäftshaus">
Wohn- und Geschäftshaus</option
>
<option value="Atrium-Bungalow">
Atrium-Bungalow</option
>
<option value="Winkelbungalow">
Winkelbungalow</option
>
</select>
</div>
</div>
<div>
<HelpLabel title="Gebäudeteil *"
>Bitte geben Sie hier den Gebäudeteil ein. In den
meisten Fällen handelt es sich um das Gesamtgebäude.
Sollte es sich allerdings um ein Gebäude mit mehr als
10% Gewerbeanteil handeln, so sollten 2 Ausweise
erstellt werden. In diesem Fall wählen Sie Gebäudeteil
'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
>
<div>
<select
name="objekt_gebaeudeteil"
bind:value={ausweis.objekt_gebaeudeteil}
required
>
<option>Bitte auswählen</option>
<option value="Gesamtgebäude">
Gesamtgebäude</option
>
<option value="Wohnen"> Wohnen</option>
</select>
</div>
</div>
</div>
</Bereich> </Bereich>
<hr /> <hr />
<Label
>C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und
Gebäudevolumen</Label
>
<div class="grid grid-cols-[3fr_2fr] gap-4">
<div class="GRB3 gap-4">
<HelpLabel
title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
>Hier wählen Sie Ihren passenden Grundriss aus, und tragen
die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
nur den Grundriss der zum beheizten Gebäude gehört. Garagen
oder Schuppen die an das Haus herangebaut sind aber keine
Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
>
<div class="grid grid-cols-4 gap-4">
<div>
<HelpLabel title="Anzahl Vollgeschosse *"
>Bitte geben Sie hier die Anzahl der Vollgeschosse
an. Keller und Dachgeschoss mit Schrägen zählen
nicht dazu.</HelpLabel
>
<input
name="anzahl_vollgeschosse"
bind:value={ausweis.anzahl_vollgeschosse}
type="number"
required
/>
</div>
<div>
<HelpLabel title="Geschosshöhe *"
>Bitte geben Sie hier die Geschosshöhe (lichte
Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
unterschiedlichen Geschosshöhen bilden Sie einen
Mittelwert.</HelpLabel
>
<select
name="geschosshoehe"
bind:value={ausweis.geschosshoehe}
required
>
<option>Bitte auswählen</option>
{#each arrayRange(2.1, 4.5, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option
>
{/each}
</select>
</div>
<div>
<HelpLabel title="Gaubenanzahl"
>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
die Anzahl ein.</HelpLabel
>
<input
name="anzahl_gauben"
bind:value={ausweis.anzahl_gauben}
type="number"
/>
</div>
<div>
<HelpLabel title="Breite aller Gauben in m"
>Bitte geben Sie hier die Gesamtbreite aller Gauben
in m ein.</HelpLabel
>
<select
name="breite_gauben"
bind:value={ausweis.breite_gauben}
>
<option>Bitte auswählen</option>
{#each arrayRange(0.5, 10, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option
>
{/each}
</select>
</div>
</div>
<div class="grid grid-cols-4 gap-4">
<img src="/images/r.png" alt="rechteck" />
<img src="/images/l.png" alt="l-form" />
<img src="/images/t.png" alt="t-form" />
<img src="/images/u.png" alt="u-form" />
</div>
<div class="grid grid-cols-6 gap-4">
<div>
<HelpLabel title="A"
>Bitte Eingabe in m. Punkt statt Komma verwenden
z.B.: 10.40 (Eingabebeispiel)</HelpLabel
>
<input
name="masse_a"
type="number"
bind:value={ausweis.masse_a}
/>
</div>
<div>
<Label>B</Label>
<input
name="masse_b"
type="number"
bind:value={ausweis.masse_b}
/>
</div>
<div>
<Label>C</Label>
<input
name="masse_c"
type="number"
bind:value={ausweis.masse_c}
/>
</div>
<div>
<Label>D</Label>
<input
name="masse_d"
type="number"
bind:value={ausweis.masse_d}
/>
</div>
<div>
<Label>E</Label>
<input
name="masse_e"
type="number"
bind:value={ausweis.masse_e}
/>
</div>
<div>
<Label>F</Label>
<input
name="masse_f"
type="number"
bind:value={ausweis.masse_f}
/>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<Label>Fensterfläche Südost bis Südwest in m²</Label>
<input
name="fensterflaeche_so_sw"
bind:value={ausweis.fensterflaeche_so_sw}
type="number"
/>
</div>
<div>
<Label>Fensterfläche Nordwest bis Nordost in m²</Label>
<input
name="fensterflaeche_nw_no"
bind:value={ausweis.fensterflaeche_nw_no}
type="number"
/>
</div>
<div>
<Label>Außenwandfläche an unbeheizten Vorbau</Label>
<input
name="aussenwandflaeche_unbeheizt"
bind:value={ausweis.aussenwandflaeche_unbeheizt}
type="number"
/>
</div>
</div>
</div>
<div class="GRB3">
<HelpLabel title="Außenflächen, U-Werte und Volumen"
>Die wärmeübertragende Umfassungsflächen sind die
Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
an unbeheizte Vorbauten grenzen. Wenn Ihnen die
Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
Sie die Eingabe direkt vornehmen. Hier können Sie auch das
von den Umfassungsflächen eingeschlossene Volumen des
Gebäudes eingeben. Die ermittelten Werte der
Berechnungshilfe können hier präzisiert werden.</HelpLabel
>
<div class="flex flex-row items-center gap-4">
<Label>Tabellenwerte manuell ändern</Label>
<input
type="checkbox"
bind:checked={ausweis.tabellenwerte_aendern}
name="tabellenwerte_aendern"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Dachfläche in m²</Label>
<input
name="dachflaeche"
bind:value={ausweis.dachflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="dach_u_wert"
bind:value={ausweis.dach_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Geschoßdecke in m²</Label>
<input
name="deckenflaeche"
bind:value={ausweis.deckenflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="decke_u_wert"
bind:value={ausweis.decke_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Außenwand in m²</Label>
<input
name="aussenwand_flaeche"
bind:value={ausweis.aussenwand_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="aussenwand_u_wert"
bind:value={ausweis.aussenwand_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Fußboden in m²</Label>
<input
name="fussboden_flaeche"
bind:value={ausweis.fussboden_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="fussboden_u_wert"
bind:value={ausweis.fussboden_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div>
<Label
>Das von den Flächen eingeschlossene Gebäudevolumen in
m³</Label
>
<input
name="volumen"
type="number"
bind:value={ausweis.volumen}
readonly={!ausweis.tabellenwerte_aendern}
/>
</div>
<div>
<Label>Blower-Door-Test erfolgreich durchgeführt</Label>
<div class="flex flex-row gap-4">
<label class="radio-inline"
><input
type="radio"
value={true}
bind:group={ausweis.dicht}
name="dichtheit"
/>Ja</label
>
<label class="radio-inline"
><input
type="radio"
value={false}
bind:group={ausweis.dicht}
name="dichtheit"
/>Nein</label
>
</div>
</div>
</div>
</div>
<hr />
<Label <Label
>D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden >D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden
und Boden</Label und Boden</Label
@@ -1352,20 +955,62 @@ title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgesc
/> />
</div> </div>
</div> </div>
<hr />
<Label
>G - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des <!-- F Angaben zur Heizungsanlage -->
Gebäudes</Label
<Bereich bereich="F" title="Angaben zur Heizunganlage"
><SanierungszustandHeizungsanlage
bind:images
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/></Bereich
>
<!-- G Angaben zur Fenster, Dachfenster und Türen -->
<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
><SanierungszustandFensterTueren
bind:images
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/></Bereich
>
<!-- H Angaben zur Wärmedammung -->
<Bereich bereich="H" title="Angaben zur Wärmedämmung"
><SanierungszustandWaermedammung
bind:images
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/></Bereich
>
<!-- I Gebäudebild und Energieausweis PDF Vorschau -->
<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
><AusweisPreviewContainer
bind:images
bind:ausweis
bind:gebaeude
/></Bereich
>
<ButtonWeiterHilfe {spaeterWeitermachen}
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
> >
<BilderZusatzsysteme </ButtonWeiterHilfe>
{ausweis}
{gebaeude}
{gebaeude_aufnahme_allgemein}
{images}
/>
<hr />
<div class="flex flex-row justify-between">
<button class="button">Weiter</button>
</div>
</div> </div>
</form> </form>

223
src/modules/KundendatenModule.svelte
View File

@@ -1,6 +1,11 @@
<script lang="ts"> <script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte"; import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import ProgressBar from "#components/Ausweis/Progressbar.svelte"; import ProgressBar from "#components/Ausweis/Progressbar.svelte";
import Bereich from "#labels/Bereich.svelte";
import Ansprechpartner from "#components/Ausweis/Ansprechpartner.svelte";
import Rechnungsadresse from "#components/Ausweis/Rechnungsadresse.svelte";
import Bezahlung from "#components/Ausweis/Bezahlung.svelte";
import Pruefung from "#components/Ausweis/Pruefung.svelte"; import Pruefung from "#components/Ausweis/Pruefung.svelte";
import ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte"; import ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte";
@@ -19,10 +24,6 @@
export let user: BenutzerClient; export let user: BenutzerClient;
export let ausweis: VerbrauchsausweisWohnenClient; export let ausweis: VerbrauchsausweisWohnenClient;
export let bereich;
export let title;
export let bullets;
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {}; let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {}; let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -40,7 +41,7 @@
selected: false, selected: false,
}, },
{ {
name: "Same Day Service <br>Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag", name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
id: Enums.Service.SameDay, id: Enums.Service.SameDay,
price: 29, price: 29,
selected: false, selected: false,
@@ -98,7 +99,6 @@
2xl:grid-cols-2 2xl:gap-x-8 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"> <div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
<PerformanceScore <PerformanceScore
bind:ausweis bind:ausweis
@@ -107,6 +107,7 @@
/> />
</div> </div>
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"> <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> <h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
@@ -120,15 +121,103 @@
<form id="formInput-2" on:submit={speichern}> <form id="formInput-2" on:submit={speichern}>
<div id="formular-box" class="formular-boxen ring-0"> <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> <Bereich
<div class="formular-abschnitt2">Prüfung, Leistungsbeschreibung und Kosten</div> bind:user
bereich="1"
title="Eingabe des Ansprechpartners -> {user.email}"
>
<Ansprechpartner
bind:user
/></Bereich
>
<Bereich
bind:user
bereich="2"
title="Rechnungsadresse"
>
<Rechnungsadresse
bind:user
/></Bereich
>
<Bereich
bind:selectedPaymentType
bereich="3"
title="Bezahlmethode"
>
<Bezahlung
bind:selectedPaymentType
/></Bereich
>
<div class="grid grid-cols-2 gap-x-6 my-6">
<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 class=" bereich-box bg-white ring-primary/50 ring-2" >
<h3>Kosten:</h3>
<div class="ProduktKostenTabelle">
<div class="zeile betrag">
<div>Netto-Preis Energieausweis</div><div>:</div><div class="text-right"><b>{(price * 0.81).toFixed(2) + " €"}</b></div>
</div>
<div class="zeile betrag">
<div>Zusatzleistung (Prüfung Mehraufwand)
</div><div>:</div><div class="text-right"><b>0.00 €</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 mt-4">
<div><b>Preis inkl. MwSt.</b>
</div><div>:</div><div class="text-right"><b>{price.toFixed(2) + " €"}</b></div>
</div>
<div class="zeile betrag mt-4 items-center">
<div><b>Bezahlmethode</b>
</div><div>:</div><div class="justify-self-end">
<img src="images/{selectedPaymentType}.png" alt="{selectedPaymentType}" />
</div>
</div>
</div> </div>
</div>
<div class="grid grid-cols-[2fr_3fr] gap-8"> </div>
<div class="bereich-box pr-12"> <ButtonZurueckSpeichernKaufabschluss />
<div class="bereich-box pr-12 mt-6">
<Pruefung <Pruefung
bereich="A" bereich="A"
@@ -194,114 +283,10 @@
</div> </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>
</div>
<ButtonZurueckSpeichernKaufabschluss />
</form> </form>
@@ -311,10 +296,8 @@
h3{@apply text-[1.25rem] ml-0 font-bold mb-6} h3{@apply text-[1.25rem] ml-0 font-bold mb-6}
.ProduktKostenTabelle{@apply block; .ProduktKostenTabelle{@apply block;
.zeile{@apply grid grid-cols-[10rem_2rem_5rem_1fr];} .zeile{@apply grid grid-cols-[19rem_1rem_5rem_1fr];}
.zeile:nth-child(3){@apply mt-6} .betrag{@apply font-bold text-[1.15rem]}
.zeile:nth-child(5){@apply mt-6}
.betrag{@apply font-bold text-[1.25rem]}
} }
.varianten{@apply block; .varianten{@apply block;

6
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -1,13 +1,9 @@
<script lang="ts"> <script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte"; import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import ProgressBar from "#components/Ausweis/Progressbar.svelte"; import ProgressBar from "#components/Ausweis/Progressbar.svelte";
//import Hilfe from "#components/Ausweis/Hilfe.svelte";
import { PRICES } from "#lib/constants"; import { PRICES } from "#lib/constants";
import Bereich from "#labels/Bereich.svelte"; import Bereich from "#labels/Bereich.svelte";
//import HelpLabel from "#labels/HelpLabel.svelte";
//import Inputlabel from "#labels/InputLabel.svelte";
//import Label from "#components/Label.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte"; import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte"; import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
@@ -24,8 +20,6 @@
import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte"; import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte"; import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
//import ZipSearch from "#components/PlzSuche.svelte";
import { import {
RawNotificationWrapper, RawNotificationWrapper,
RawNotification, RawNotification,

2
src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro
View File

@@ -1,6 +1,6 @@
--- ---
import AusweisLayout from "#layouts/AusweisLayout.astro"; import AusweisLayout from "#layouts/AusweisLayoutDaten.astro";
import BedarfsausweisWohnenModule from "#modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte"; import BedarfsausweisWohnenModule from "#modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte";
import { BedarfsausweisWohnenClient } from "#components/Ausweis/types"; import { BedarfsausweisWohnenClient } from "#components/Ausweis/types";
import { createCaller } from "#lib/caller"; import { createCaller } from "#lib/caller";

1
src/style/global.css
View File

@@ -53,6 +53,7 @@ input, select, textarea{
} }
input[type="text"], input[type="text"],
input[type="email"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],
input[type="file"], input[type="file"],