UMBENOMENA
BIN
public/images/giropay.png
Normal file
BIN
public/images/giropay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
100
src/components/Ausweis/Ansprechpartner.svelte
Normal file
100
src/components/Ausweis/Ansprechpartner.svelte
Normal 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 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 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 ein.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
54
src/components/Ausweis/Bezahlung.svelte
Normal file
54
src/components/Ausweis/Bezahlung.svelte
Normal file
@@ -0,0 +1,54 @@
|
||||
<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/mastercard.png"}
|
||||
></PaymentOption>
|
||||
<PaymentOption
|
||||
paymentType={Enums.Bezahlmethoden.rechnung}
|
||||
bind:selectedPaymentType
|
||||
name={"Rechnung"}
|
||||
icon={"/images/rechnung.png"}
|
||||
></PaymentOption>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
326
src/components/Ausweis/Rechnungsadresse.svelte
Normal file
326
src/components/Ausweis/Rechnungsadresse.svelte
Normal file
@@ -0,0 +1,326 @@
|
||||
<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-2 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="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 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="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 Versand-Empfänger Strasse und Hausnummer ein, an die die Rechnung versandt wird.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PLZ / ORT -->
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-4 order-10 md:order-10 xl:order-10">
|
||||
|
||||
<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 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="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-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>
|
||||
@@ -7,9 +7,11 @@
|
||||
export let selectedPaymentType: Bezahlmethoden;
|
||||
</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}>
|
||||
<button type="button" data-test={paymentType} class="bg-white" class:bg-gray-100={paymentType == selectedPaymentType} on:click={() => selectedPaymentType = paymentType}>
|
||||
<div class="grid grid-rows-[max-content-max-content] w-fit">
|
||||
<img src={icon} alt={name} />
|
||||
<span aria-label={name}>
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script lang="ts">
|
||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.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 ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte";
|
||||
|
||||
@@ -19,10 +24,6 @@
|
||||
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 || {};
|
||||
|
||||
@@ -98,7 +99,6 @@
|
||||
|
||||
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
|
||||
@@ -107,6 +107,7 @@
|
||||
/>
|
||||
</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>
|
||||
@@ -120,15 +121,101 @@
|
||||
<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>
|
||||
|
||||
<Bereich
|
||||
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="grid grid-cols-[2fr_3fr] gap-8">
|
||||
<div class=" bereich-box bg-white ring-primary/50 ring-2" >
|
||||
|
||||
<div class="bereich-box pr-12">
|
||||
<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">
|
||||
<div><b>Bezahlmethode</b>
|
||||
</div><div>:</div><div class="text-left"><b>{selectedPaymentType}</b></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ButtonZurueckSpeichernKaufabschluss />
|
||||
|
||||
<div class="bereich-box pr-12 mt-6">
|
||||
|
||||
<Pruefung
|
||||
bereich="A"
|
||||
@@ -194,114 +281,10 @@
|
||||
</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>
|
||||
@@ -311,10 +294,8 @@
|
||||
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]}
|
||||
.zeile{@apply grid grid-cols-[19rem_1rem_5rem_1fr];}
|
||||
.betrag{@apply font-bold text-[1.15rem]}
|
||||
}
|
||||
|
||||
.varianten{@apply block;
|
||||
|
||||
@@ -53,6 +53,7 @@ input, select, textarea{
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="file"],
|
||||
|
||||
Reference in New Issue
Block a user