84 lines
2.1 KiB
Svelte
84 lines
2.1 KiB
Svelte
<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 active: number;
|
|
export let progress: number = active / (steps.length - 1) * 100;
|
|
export let ausweisart: Enums.Ausweisart;
|
|
export let ausweistyp: Enums.AusweisTyp
|
|
export let anliegen;
|
|
</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)]">
|
|
{#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">
|
|
<div
|
|
class="w-[calc(100%-0rem)] ml-[0] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg"
|
|
>
|
|
<div
|
|
class="left-0 h-3 absolute"
|
|
style={`width: ${progress}%;`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#each steps as step, i}
|
|
<div class="phase">
|
|
<div class="point" class:active={i === active}>{i + 1}</div>
|
|
<div class="phaseTitel">{step}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<style lang="postcss">
|
|
.phase {
|
|
@apply grid grid-cols-1 items-center justify-items-center z-10;
|
|
.point {
|
|
@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;
|
|
}
|
|
.active {
|
|
@apply bg-secondary;
|
|
}
|
|
.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
|
|
}
|
|
|
|
:nth-child(1 of .phase), :nth-child(1 of .phase) .point {
|
|
justify-self: start;
|
|
}
|
|
|
|
.point, .phase {
|
|
justify-self: center;
|
|
}
|
|
|
|
.phase:last-of-type, .phase:last-of-type .point {
|
|
justify-self: end;
|
|
}
|
|
</style>
|
|
|