Progressbar

src/components/Ausweis/Progressbar.svelte

@@ -1,27 +1,36 @@
 <script lang="ts">
+		import { PRICES } from "#lib/constants.js";
+		import { Enums } from "#lib/client/prisma.js";
+
 	export let steps: string[] = [
 		"Gebäudedaten",
 		"Kundendaten",
 		"Kaufbestätigung",
 	];
-	export let stepsalign: string[] = [
-		"justify-self-start",
-		"justify-self-center",
-		"justify-self-end",
-	];
 
 	export let active: number;
 	export let progress: number = active / (steps.length - 1) * 100;
-	export let ausweisart;
+	export let ausweisart: Enums.Ausweisart;
+	export let ausweistyp: Enums.AusweisTyp
 	export let anliegen;
-
-	import { PRICES } from "#lib/constants.js";
-	import { Enums } from "#lib/client/prisma.js";
 </script>
 
 <div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
 <h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">{anliegen}</h1>
-<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
+<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">
+	{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
+		Verbrauchsausweis Wohnen
+	{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
+		Verbrauchsausweis Gewerbe
+	{:else if ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
+		Bedarfsausweis Wohnen
+	{/if}
+	{#if ausweistyp === Enums.AusweisTyp.Beratung}
+		mit Beratung
+	{:else if ausweistyp === Enums.AusweisTyp.Offline}
+		offline
+	{/if}
+	{PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
 
 <div class="grid grid-cols-3 self-start justify-between">
 	<div class="col-span-3 relative">
@@ -38,7 +47,7 @@
 
 	{#each steps as step, i}
 		<div class="phase">
-			<div class="point {stepsalign[i]}" class:active={i === active}>{i + 1}</div>
+			<div class="point" class:active={i === active}>{i + 1}</div>
 			<div class="phaseTitel">{step}</div>
 		</div>
 	{/each}
@@ -59,12 +68,16 @@
 		.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
 	}
 
-	:nth-child(1 of .phase) {
-		@apply justify-self-start;
+	:nth-child(1 of .phase), :nth-child(1 of .phase) .point {
+		justify-self: start;
 	}
 
-	.phase:last-of-type {
-		@apply justify-self-end;
+	.point, .phase {
+		justify-self: center;
+	}
+
+	.phase:last-of-type, .phase:last-of-type .point {
+		justify-self: end;
 	}
 </style>
 

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -138,7 +138,7 @@ let skala: HTMLDivElement;
 		{ausweisart}
 	/>
 
-	<Progressbar active={0} {ausweisart} {anliegen}/>
+	<Progressbar active={0} {ausweisart} {anliegen} {ausweistyp}/>
 
 </div>