From e41448cfc0fe4354a481f745951b5992d03fec7c Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Mon, 27 Jan 2025 22:19:05 +0100
Subject: [PATCH] Bezahlung Optionen, PLZ Suche

---
 .../images/{mastercard.png => creditcard.png} | Bin
 src/components/Ausweis/Ausweisart.svelte      |   1 -
 src/components/Ausweis/Bezahlung.svelte       |   4 +-
 src/components/Ausweis/GebaeudeDaten.svelte   |   6 +-
 .../Ausweis/Rechnungsadresse.svelte           |  74 +++++++++---------
 src/components/PaymentOption.svelte           |  22 +++++-
 src/components/PlzSuche.svelte                |   7 +-
 src/modules/KundendatenModule.svelte          |   6 +-
 8 files changed, 73 insertions(+), 47 deletions(-)
 rename public/images/{mastercard.png => creditcard.png} (100%)

diff --git a/public/images/mastercard.png b/public/images/creditcard.png
similarity index 100%
rename from public/images/mastercard.png
rename to public/images/creditcard.png
diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index 01efa739..b7bad6e8 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -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
diff --git a/src/components/Ausweis/Bezahlung.svelte b/src/components/Ausweis/Bezahlung.svelte
index 1378f228..278c0823 100644
--- a/src/components/Ausweis/Bezahlung.svelte
+++ b/src/components/Ausweis/Bezahlung.svelte
@@ -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}
diff --git a/src/components/Ausweis/GebaeudeDaten.svelte b/src/components/Ausweis/GebaeudeDaten.svelte
index d9fc80c5..043aff60 100644
--- a/src/components/Ausweis/GebaeudeDaten.svelte
+++ b/src/components/Ausweis/GebaeudeDaten.svelte
@@ -41,12 +41,12 @@ 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>
 	
-	<ZipSearch
+	<ZipSearch 
 		bind:zip={gebaeude_aufnahme_allgemein.plz}
 		bind:city={gebaeude_aufnahme_allgemein.ort}
 		name="plz"
@@ -73,6 +73,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		</div>
 </div>
 
+
+
 </div>
 
 <!-- Wohnfläche m² * -->
diff --git a/src/components/Ausweis/Rechnungsadresse.svelte b/src/components/Ausweis/Rechnungsadresse.svelte
index 4eb1eeba..920d1989 100644
--- a/src/components/Ausweis/Rechnungsadresse.svelte
+++ b/src/components/Ausweis/Rechnungsadresse.svelte
@@ -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">
 
@@ -192,13 +192,14 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 <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"
+	<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">
@@ -213,14 +214,15 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 <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"
-					/>
+	<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>
@@ -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
-    type="text"
-    required
-    value={rechnung.ort}
+	name="versand_ort"
+	type="text"
+	readonly
+	required
+	bind:value={rechnung.versand_ort}
 />
 
 		<div class="help-label">
@@ -269,12 +272,13 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 <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"
+	<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">
@@ -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 }
 
diff --git a/src/components/PaymentOption.svelte b/src/components/PaymentOption.svelte
index 2021eb2b..57754d08 100644
--- a/src/components/PaymentOption.svelte
+++ b/src/components/PaymentOption.svelte
@@ -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>
+-->
\ No newline at end of file
diff --git a/src/components/PlzSuche.svelte b/src/components/PlzSuche.svelte
index 3306dc02..667cb07f 100644
--- a/src/components/PlzSuche.svelte
+++ b/src/components/PlzSuche.svelte
@@ -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;
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index c7e3d008..631c84d9 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -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>