Bezahlung Optionen, PLZ Suche

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

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}

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² * -->

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
+	<input
-    name="rechnung_empfaenger"
+	name="versand_empfaenger"
-    type="text"
+	type="text"
-    bind:value={rechnung.empfaenger}
+	readonly={!rechnung.abweichende_versand_adresse}
-    required
+	bind:value={rechnung.versand_empfaenger}
-    data-rule-maxlength="100"
+	required
-    data-msg-maxlength="max. 100 Zeichen"
+	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
+	<input
-						name="rechnung_strasse"
+	name="versand_strasse"
-						bind:value={rechnung.strasse}
+	type="text"
-						type="text"
+	readonly={!rechnung.abweichende_versand_adresse}
-						required
+	bind:value={rechnung.versand_strasse}
-						data-rule-maxlength="40"
+	required
-						data-msg-maxlength="max. 40 Zeichen"
+	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"
+	name="versand_plz"
-    bind:zip={rechnung.plz}
+	readonly={!rechnung.abweichende_versand_adresse}
-    bind:city={rechnung.ort}
+	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"
+	name="versand_ort"
-    readonly
+	type="text"
-    type="text"
+	readonly
-    required
+	required
-    value={rechnung.ort}
+	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
+	<input
-    name="rechnung_zusatzzeile"
+	name="versand_zusatzzeile"
-    bind:value={rechnung.zusatzzeile}
+	type="text"
-    type="text"
+	readonly={!rechnung.abweichende_versand_adresse}
-    data-rule-maxlength="80"
+	bind:value={rechnung.versand_zusatzzeile}
-    data-msg-maxlength="max. 80 Zeichen"
+	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 }
 

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>
+	</div>
-</button>
+	</button>
+-->

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;

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>