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

Bezahlung Optionen, PLZ Suche

Browse Source
This commit is contained in:
Robert Jagtiani
2025-01-27 22:19:05 +01:00
parent a89b523d15
commit e41448cfc0
8 changed files with 73 additions and 47 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

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

@@ -26,7 +26,6 @@
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let Energieausweis;
console.log('HALLO:'+Energieausweis);
</script>
<div id="ausweisart" class="bereich-box grid

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

@@ -10,6 +10,8 @@
export let selectedPaymentType: Bezahlmethoden =
Enums.Bezahlmethoden.paypal;
</script>
@@ -38,7 +40,7 @@ grid-cols-5 justify-around justify-items-center items-center">
paymentType={Enums.Bezahlmethoden.creditcard}
bind:selectedPaymentType
name={"Kreditkarte"}
icon={"/images/mastercard.png"}
icon={"/images/creditcard.png"}
></PaymentOption>
<PaymentOption
paymentType={Enums.Bezahlmethoden.rechnung}

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 -->
<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">
<Inputlabel title="PLZ *"></Inputlabel>
@@ -73,6 +73,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div>
</div>
</div>
<!-- Wohnfläche m² * -->

42
src/components/Ausweis/Rechnungsadresse.svelte
View File

@@ -76,7 +76,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<!-- PLZ / ORT -->
<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
<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>
@@ -147,7 +147,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div>
</div>
<!-- Telefon -->
<!-- Telefon
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Telefon *"></Inputlabel>
@@ -164,7 +164,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</HelpLabel>
</div>
</div>
-->
<div class="col-span-3 order-7 md:order-7 xl:order-7">
@@ -193,9 +193,10 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<Inputlabel title="Versand-Empfänger *"></Inputlabel>
<input
name="rechnung_empfaenger"
name="versand_empfaenger"
type="text"
bind:value={rechnung.empfaenger}
readonly={!rechnung.abweichende_versand_adresse}
bind:value={rechnung.versand_empfaenger}
required
data-rule-maxlength="100"
data-msg-maxlength="max. 100 Zeichen"
@@ -214,13 +215,14 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
<input
name="rechnung_strasse"
bind:value={rechnung.strasse}
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>
@@ -231,14 +233,15 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<!-- PLZ / ORT -->
<div class="grid grid-cols-2 gap-x-4 order-10 md:order-10 xl:order-10">
<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="rechnung_plz"
bind:zip={rechnung.plz}
bind:city={rechnung.ort}
name="versand_plz"
readonly={!rechnung.abweichende_versand_adresse}
bind:zip={rechnung.versand_plz}
bind:city={rechnung.versand_ort}
/>
@@ -248,11 +251,11 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<Inputlabel title="Ort *"></Inputlabel>
<input
name="rechnung_ort"
readonly
name="versand_ort"
type="text"
readonly
required
value={rechnung.ort}
bind:value={rechnung.versand_ort}
/>
<div class="help-label">
@@ -270,9 +273,10 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<Inputlabel title="Zusatzzeile"></Inputlabel>
<input
name="rechnung_zusatzzeile"
bind:value={rechnung.zusatzzeile}
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"
/>
@@ -302,7 +306,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div>
</div>
<!-- Telefon -->
<!-- Telefon
<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
<Inputlabel title="Telefon *"></Inputlabel>
@@ -319,7 +323,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</HelpLabel>
</div>
</div>
-->
{/if }

22
src/components/PaymentOption.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import type { Bezahlmethoden } from "@ibcornelsen/database/client";
import Input from "radix-svelte-icons/src/lib/icons/Input.svelte";
export let name: string;
export let icon: string;
@@ -7,11 +8,26 @@
export let selectedPaymentType: Bezahlmethoden;
</script>
<button type="button" data-test={paymentType} class="bg-white" 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} />
<span aria-label={name}>
{name}
</span>
</div>
</button>
</div>
</button>
-->

7
src/components/PlzSuche.svelte
View File

@@ -45,9 +45,10 @@
}
}
}
</script>
<div class="relative" use:clickOutside={() => {
<div class="" use:clickOutside={() => {
hideZipDropdown = true;
}}>
@@ -67,9 +68,9 @@
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}
<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;
city = zipCode.stadt;
hideZipDropdown = true;

6
src/modules/KundendatenModule.svelte
View File

@@ -202,9 +202,11 @@
<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 class="zeile betrag mt-4 items-center">
<div><b>Bezahlmethode</b>
</div><div>:</div><div class="text-left"><b>{selectedPaymentType}</b></div>
</div><div>:</div><div class="justify-self-end">
<img src="images/{selectedPaymentType}.png" alt="{selectedPaymentType}" />
</div>
</div>
</div>