257 lines
8.5 KiB
Svelte
257 lines
8.5 KiB
Svelte
<script lang="ts">
|
|
import { ausweisSpeichern } from "#client/lib/ausweisSpeichern.js";
|
|
import { validateAccessTokenClient } from "#client/lib/validateAccessToken.js";
|
|
import { AufnahmeClient, BedarfsausweisWohnenClient, BenutzerClient, ObjektClient, BildClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
|
|
import Overlay from "#components/Overlay.svelte";
|
|
import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
|
|
|
|
import { AusweisTyp, BedarfsausweisGewerbe, Enums, GEGNachweisGewerbe, GEGNachweisWohnen, Unterlage, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
|
|
import { openWindowWithPost } from "#lib/helpers/window.js";
|
|
import { PRICES } from "#lib/constants.js";
|
|
import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";
|
|
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient | BedarfsausweisGewerbe | GEGNachweisWohnen | GEGNachweisGewerbe;
|
|
export let bilder: BildClient[];
|
|
export let unterlagen: Unterlage[] = [];
|
|
export let user: BenutzerClient | null;
|
|
export let objekt: ObjektClient;
|
|
export let aufnahme: AufnahmeClient;
|
|
export let ausweisart: Enums.Ausweisart
|
|
export let form: HTMLFormElement;
|
|
export let skala: HTMLDivElement;
|
|
export let blockLocalStorageSync: boolean = false;
|
|
|
|
export let showWeiter: boolean = true;
|
|
export let showHelpButton: boolean = true;
|
|
export let partner_code: string = "";
|
|
|
|
export let ausweistyp: AusweisTyp = Enums.AusweisTyp.Standard;
|
|
|
|
async function ausweisAbschicken() {
|
|
// Wir müssen überprüfen, dass mindestens ein Baujahr eingegeben wurde.
|
|
if (aufnahme.baujahr_gebaeude.length === 0) {
|
|
(form.querySelector("input[name='baujahr_gebaeude']") as HTMLInputElement).setCustomValidity("Die Eingabe von mindestens einem Baujahr ist verpflichtend.")
|
|
} else {
|
|
(form.querySelector("input[name='baujahr_gebaeude']") as HTMLInputElement).setCustomValidity("")
|
|
}
|
|
|
|
if (aufnahme.baujahr_heizung.length === 0) {
|
|
(form.querySelector("input[name='baujahr_heizung']") as HTMLInputElement).setCustomValidity("Die Eingabe von mindestens einem Baujahr ist verpflichtend.")
|
|
} else {
|
|
(form.querySelector("input[name='baujahr_heizung']") as HTMLInputElement).setCustomValidity("")
|
|
}
|
|
|
|
// Wir holen uns die Daten aus dem Formular
|
|
const data = new FormData(form);
|
|
// Und gleichen diese mit allen Feldern ab die "required" sind, damit stellen wir sicher, dass alles richtig ausgefüllt wurde.
|
|
(form.querySelectorAll("select[name][required],input[name][required]") as NodeListOf<HTMLInputElement | HTMLSelectElement>).forEach((element) => {
|
|
const value = data.get(element.getAttribute("name") as string)
|
|
|
|
if (!value && element.required) {
|
|
element.setCustomValidity("Eine Auswahl ist verpflichtend.")
|
|
} else {
|
|
element.setCustomValidity("")
|
|
}
|
|
})
|
|
|
|
// Falls das Formular nicht valid ist markieren wir die fehlenden Felder.
|
|
if (!form.checkValidity()) {
|
|
// Entferne die Klasse "2xl:mt-[370px]" falls vorhanden
|
|
form.classList.remove("2xl:mt-[370px]");
|
|
|
|
// Verhindere das Scrollen (falls erforderlich)
|
|
skala.classList.add("no-scroll");
|
|
|
|
// Zeige die Validierungsmeldungen
|
|
form.reportValidity();
|
|
|
|
// Finde das erste ungültige Feld und scrolle sanft darauf
|
|
let firstInvalidField = form.querySelector(":invalid");
|
|
if (firstInvalidField) {
|
|
let offset = 150; // Abstand für bessere Sichtbarkeit
|
|
let fieldPosition = firstInvalidField.getBoundingClientRect().top + window.scrollY;
|
|
window.scrollTo({ top: fieldPosition - offset, behavior: "smooth" });
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
|
|
openWindowWithPost("/kundendaten", {
|
|
ausweis: { ...ausweis, nachweistyp: ausweistyp },
|
|
objekt,
|
|
aufnahme,
|
|
bilder,
|
|
unterlagen,
|
|
ausweisart,
|
|
ausweistyp,
|
|
partner_code
|
|
}, "")
|
|
} else {
|
|
openWindowWithPost("/kundendaten", {
|
|
ausweis: { ...ausweis, ausweistyp },
|
|
objekt,
|
|
aufnahme,
|
|
bilder,
|
|
unterlagen,
|
|
ausweisart,
|
|
ausweistyp,
|
|
partner_code
|
|
}, "")
|
|
}
|
|
}
|
|
|
|
let loginAction: () => any = ausweisAbschicken;
|
|
|
|
async function speichern() {
|
|
loginAction = speichern;
|
|
if (!(await validateAccessTokenClient())) {
|
|
loginOverlayHidden = false;
|
|
return
|
|
}
|
|
|
|
loginOverlayHidden = true
|
|
|
|
let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
|
|
if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
|
|
result = await nachweisSpeichern({ ...ausweis as GEGNachweisWohnen, nachweistyp: ausweistyp }, objekt, aufnahme, bilder, unterlagen, ausweisart)
|
|
|
|
if (result) {
|
|
ausweis.id = result.nachweis_id;
|
|
}
|
|
} else {
|
|
result = await ausweisSpeichern({ ...ausweis as VerbrauchsausweisWohnen, ausweistyp }, objekt, aufnahme, bilder, unterlagen, ausweisart)
|
|
|
|
if (result) {
|
|
ausweis.id = result.ausweis_id;
|
|
}
|
|
}
|
|
|
|
if (result !== null) {
|
|
window.history.pushState(
|
|
{},
|
|
"",
|
|
`${location.pathname}?ausweis_id=${ausweis.id}`
|
|
);
|
|
blockLocalStorageSync = true;
|
|
localStorage.clear()
|
|
window.location.href = `/dashboard/objekte/${ausweis.id}`
|
|
}
|
|
}
|
|
|
|
async function hilfeBestellen() {
|
|
openWindowWithPost("/kundendaten", {
|
|
ausweis: { ...ausweis, ausweistyp },
|
|
objekt,
|
|
aufnahme,
|
|
bilder,
|
|
ausweisart
|
|
}, "")
|
|
}
|
|
|
|
let showHelp: boolean = false;
|
|
let loginOverlayHidden = true;
|
|
</script>
|
|
|
|
<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
|
|
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">
|
|
|
|
<div></div>
|
|
|
|
{#if showHelpButton}
|
|
<div>
|
|
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
|
|
>Hilfe anfordern</button
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
<button class="button" type="button" on:click={speichern}
|
|
>Später Weitermachen
|
|
</button>
|
|
|
|
|
|
{#if showWeiter}
|
|
<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<Overlay bind:hidden={loginOverlayHidden}>
|
|
<div class="bg-white w-full max-w-screen-sm py-8">
|
|
<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
|
|
</div>
|
|
</Overlay>
|
|
|
|
{#if showHelp}
|
|
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
|
|
<div
|
|
class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
|
|
grid-cols-1 gap-x-2 gap-y-4
|
|
|
|
"
|
|
>
|
|
<div class="pr-4 xs:pr-12">
|
|
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
|
|
haben. Kurze Fragen zum Formular oder der Ausweisart werden
|
|
kostenfrei telefonisch unter <a href="tel:+4940209339850"
|
|
>040/209339850</a
|
|
> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
|
|
benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
|
|
lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
|
|
Auswahl und klicken auf weiter:
|
|
</div>
|
|
|
|
<hr class="m-0" />
|
|
|
|
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
|
<input
|
|
type="radio"
|
|
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
|
id="Produkttb1"
|
|
value={Enums.AusweisTyp.Beratung}
|
|
name="Produkt"
|
|
bind:group={ausweistyp}
|
|
/>
|
|
|
|
<div class="text-center xs:text-left justify-self-stretch">
|
|
<b>Selbsteingabe online</b><br>inkl. ausführlicher telefonischer
|
|
Beratung!
|
|
</div>
|
|
|
|
<div class="text-center xs:text-right">
|
|
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
|
<input
|
|
type="radio"
|
|
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
|
id="Produktof1"
|
|
value={Enums.AusweisTyp.Offline}
|
|
name="Produkt"
|
|
bind:group={ausweistyp}
|
|
/>
|
|
|
|
<div class="text-center xs:text-left justify-self-stretch">
|
|
<b>Wir übernehmen die Eingabe</b><br>Sie übermitteln die nötigen Unterlagen per Upload oder E-Mail.
|
|
</div>
|
|
|
|
<div class="text-center xs:text-right">
|
|
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="m-0" />
|
|
|
|
<button class="button" type="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
|
|
|
|
<button
|
|
class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
|
|
type="button"
|
|
on:click={() => (showHelp = !showHelp)}>X</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|