IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Dateien umbenannt und aufgeräumt

Browse Source
This commit is contained in:
Moritz Utcke
2024-12-12 17:00:51 +07:00
parent 8094d136b4
commit 1b1c7bfdb6
15 changed files with 603 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@@ -1,7 +1,7 @@
.PHONY: dev database api online-energieausweis all prod bun-install-database bun-install-api
online-energieausweis:
bun run dev
bun run dev --host
dev: online-energieausweis api database

1
package.json
View File

@@ -45,7 +45,6 @@
"i18next-http-backend": "^2.6.2",
"js-cookie": "^3.0.5",
"js-interpolate": "^1.0.1",
"jsonwebtoken": "^9.0.2",
"katex": "^0.16.11",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",

8
src/client/lib/verbrauchsausweisWohnenSpeichern.ts
View File

@@ -4,11 +4,11 @@ import {
GebaeudeClient,
UploadedGebaeudeBild,
VerbrauchsausweisWohnenClient,
} from "#components/Ausweis/types";
} from "#components/Ausweis/types.js";
import { exclude } from "#lib/exclude";
import { client } from "src/trpc";
import { bilderHochladen } from "./bilderHochladen";
import { exclude } from "#lib/exclude.js";
import { client } from "src/trpc.js";
import { bilderHochladen } from "./bilderHochladen.js";
import { addNotification } from "@ibcornelsen/ui";
export async function verbrauchsausweisWohnenSpeichern(

386
src/components/Ausweis/Ausweisart.svelte
View File

@@ -1,234 +1,224 @@
<script lang="ts">
console.log('Hallo Welt');
console.log("Hallo Welt");
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
//import Label from "#components/Label.svelte";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
import TagInput from "../TagInput.svelte";
import type {
BedarfsausweisWohnen,
VerbrauchsausweisGewerbe,
} from "@ibcornelsen/database/client";
import { Enums } from "@ibcornelsen/database/client"
import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";
import { Enums } from "@ibcornelsen/database/client";
import {
GebaeudeAufnahmeClient,
GebaeudeClient,
VerbrauchsausweisWohnenClient,
} from "./types.js";
export let gebaeude: GebaeudeClient;
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let ausweis:
| VerbrauchsausweisWohnenClient
| VerbrauchsausweisGewerbe
| BedarfsausweisWohnen;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
</script>
<div class="bereich-box grid
<div
class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">
"
>
<!-- Anlass für Energieausweis -->
<!-- Anlass für Energieausweis -->
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Anlass *"></Inputlabel>
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Anlass *"></Inputlabel>
<select id="ausstellgrund"
class="rounded-e-none"
name="ausstellgrund"
placeholder="Anlass"
required>
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<option value={ausstellgrund}>{name}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
</div>
</div>
<!-- Gebäudetyp -->
<div class="input-standard order-2 md:order-3 xl:order-2">
<Inputlabel title="Gebäudetyp *"></Inputlabel>
<select
name="gebaeudetyp"
data-test="gebaeudetyp"
required
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
>
<option disabled>Bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
<option value="Doppelhaushälfte">Doppelhaushälfte</option>
<option value="Reihenendhaus">Reihenendhaus</option>
<option value="Reihenmittelhaus">Reihenmittelhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
<option value="Atrium-Bungalow">Atrium-Bungalow</option>
<option value="Winkelbungalow">Winkelbungalow</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte wählen Sie hier den Gebäudetyp aus.
</HelpLabel>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<div class="input-standard order-3 md:order-5 xl:order-3">
<Inputlabel title="Anzahl Wohnungen *"></Inputlabel>
<input id="einheiten"
class="rounded-e-none"
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
maxlength="3"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
>
<select
id="ausstellgrund"
class="rounded-e-none"
name="ausstellgrund"
placeholder="Anlass"
required
>
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<option value={ausstellgrund}>{name}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
</div>
</div>
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
</div>
</div>
<!-- Sanierungsstatus -->
<!-- Gebäudetyp -->
<div class="input-standard order-4 md:order-2 xl:order-4">
<Inputlabel title="Sanierungsstatus *"></Inputlabel>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<div class="input-standard order-2 md:order-3 xl:order-2">
<Inputlabel title="Gebäudetyp *"></Inputlabel>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
</div>
</div>
<!-- Baujahr -->
<div class="input-standard order-5 md:order-4 xl:order-5">
<Inputlabel title="Baujahr *"></Inputlabel>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
<select
name="gebaeudetyp"
data-test="gebaeudetyp"
required
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
>
<option disabled>Bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Freistehendes Einfamilienhaus"
>Freistehendes Einfamilienhaus</option
>
<option value="Freistehendes Zweifamilienhaus"
>Freistehendes Zweifamilienhaus</option
>
<option value="Doppelhaushälfte">Doppelhaushälfte</option>
<option value="Reihenendhaus">Reihenendhaus</option>
<option value="Reihenmittelhaus">Reihenmittelhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Wohn- und Geschäftshaus"
>Wohn- und Geschäftshaus</option
>
<option value="Atrium-Bungalow">Atrium-Bungalow</option>
<option value="Winkelbungalow">Winkelbungalow</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
</div>
</div>
<HelpLabel>Bitte wählen Sie hier den Gebäudetyp aus.</HelpLabel>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<!-- Baujahr Heizung -->
<div class="input-standard order-3 md:order-5 xl:order-3">
<Inputlabel title="Anzahl Wohnungen *"></Inputlabel>
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Baujahr Heizung *"></Inputlabel>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
<input
id="einheiten"
class="rounded-e-none"
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
maxlength="3"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
</div>
<HelpLabel>
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
</div>
</div>
<!-- Sanierungsstatus -->
<div class="input-standard order-4 md:order-2 xl:order-4">
<Inputlabel title="Sanierungsstatus *"></Inputlabel>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie an ob das Gebäude energetisch saniert oder
unsaniert ist. Wenn das Dach mindestens 12 cm gedämmt und
Heizung sowie Fenster nicht älter als 30 Jahre sind, können Sie
saniert auswählen.
</HelpLabel>
</div>
</div>
<!-- Baujahr -->
<div class="input-standard order-5 md:order-4 xl:order-5">
<Inputlabel title="Baujahr *"></Inputlabel>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine
eine grundlegende Sanierung von Dach, Fenster und Heizung
stattgefunden haben, dann berücksichtigen Sie das in dem Sie bei
Sanierungsstatus -saniert- angeben.
</HelpLabel>
</div>
</div>
<!-- Baujahr Heizung -->
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Baujahr Heizung *"></Inputlabel>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
</div>
</div>
</div>
</div>

408
src/components/Widget.svelte
View File

@@ -1,222 +1,218 @@
<script lang="ts">
import CardVerbrauchsausweisWidget from "#content/CardVerbrauchsausweisWidget.svelte";
import CardVerbrauchsausweisGewerbeWidget from "#content/CardVerbrauchsausweisGewerbeWidget.svelte";
import CardBedarfsausweisWidget from "#content/CardBedarfsausweisWidget.svelte";
import CardBedarfsausweisGewerbeWidget from "#content/CardBedarfsausweisGewerbeWidget.svelte";
import { fade } from "svelte/transition";
import VApromo from "#content/card-VA-widget.svelte";
import VAGpromo from "#content/card-VAG-widget.svelte";
import BApromo from "#content/card-BA-widget.svelte";
import BAGpromo from "#content/card-BAG-widget.svelte";
import { fade } from 'svelte/transition';
let gebaeudetyp: string;
let anlass: string;
let einheiten: string;
let sanierungsstatus: string;
let baujahr: string;
let selectedType: string = "";
let selectedReason: string = "";
let selectedUnits: string = "";
let selectedStatus: string = "";
let selectedYear: string = "";
const allowedTypes = [
"Einfamilienhaus",
"Zweifamilienhaus",
"Mehrfamilienhaus",
"Mischgebäude",
];
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
let showBA: boolean = false;
let showVAG: boolean = false;
let showBAG: boolean = false;
let showVA: boolean = false;
function handleTypeChange(event: Event) {
selectedType = (event.target as HTMLSelectElement).value;
updateResultVisibility();
}
function handleReasonChange(event: Event) {
selectedReason = (event.target as HTMLSelectElement).value;
updateResultVisibility();
}
function handleUnitsChange(event: Event) {
selectedUnits = (event.target as HTMLSelectElement).value;
updateResultVisibility();
}
function handleStatusChange(event: Event) {
selectedStatus = (event.target as HTMLSelectElement).value;
updateResultVisibility();
}
function handleYearChange(event: Event) {
selectedYear = (event.target as HTMLSelectElement).value;
updateResultVisibility();
}
const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
// const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
function updateResultVisibility() {
// Die Bedingung, um das Ergebnis anzuzeigen
// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
if (selectedYear === "vor 1978") {
showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
}
else
{
showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
}
showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
}
let showVerbrauchsausweis: boolean = false
$: {
if (baujahr === "vor 1978") {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) &&
(einheiten === "mehr als 4 Wohneinheiten" ||
sanierungsstatus === "saniert");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp);
}
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage">
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
</div>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
<option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
</select>
</div>
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
<div class="OEA_zeile3">
{#if showVA}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<VApromo client:load />
</div>
{/if}
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
{#if showBA}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<BApromo client:load />
</div>
{/if}
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
{#if showVAG}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<VAGpromo client:load />
</div>
{/if}
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select
class="OEA_auswahl1"
bind:value={anlass}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
>Vermietung/Verkauf</option
>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
</div>
{#if showBAG}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<BAGpromo client:load />
</div>
{/if}
</div>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select
class="OEA_auswahl2"
bind:value={baujahr}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
</div>
</div>
<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
#OEA_widget {
@apply bg-gray-100 p-4 shadow-xl;
#OEA_input { @apply space-y-2;
.OEA_zeile1, .OEA_zeile2 {
@apply flex flex-row space-x-2;
.OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
@apply w-full;
.OEA_title1, .OEA_title2 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
}
.OEA_title1 {
@apply bg-secondary;
}
.OEA_title2 {
@apply bg-primary;
}
.OEA_auswahl1, .OEA_auswahl2 {
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}
#OEA_result {
@apply rounded-lg text-gray-700;
}
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
class="OEA_auswahl2"
bind:value={einheiten}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten"
>bis 4 Wohneinheiten</option
>
<option value="mehr als 4 Wohneinheiten"
>mehr als 4 Wohneinheiten</option
>
</select>
</div>
.OEA_zeile3 {
@apply flex flex-row space-x-4 pt-6 items-center justify-center;
}
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
.OEA_item6 {
.result {
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
}
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisWidget />
</div>
{/if}
.result[style*="opacity: 1"] {
@apply opacity-100;
}
}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisWidget />
</div>
{/if}
}
}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisGewerbeWidget />
</div>
{/if}
</style>
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisGewerbeWidget />
</div>
{/if}
</div>
</div>
</div>
<style lang="scss">
#OEA_widget {
@apply bg-gray-100 p-4 shadow-xl;
#OEA_input {
@apply space-y-2;
.OEA_zeile1,
.OEA_zeile2 {
@apply flex flex-row space-x-2;
.OEA_item1,
.OEA_item2,
.OEA_item3,
.OEA_item4,
.OEA_item5 {
@apply w-full;
.OEA_title1,
.OEA_title2 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
}
.OEA_title1 {
@apply bg-secondary;
}
.OEA_title2 {
@apply bg-primary;
}
.OEA_auswahl1,
.OEA_auswahl2 {
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}
#OEA_result {
@apply rounded-lg text-gray-700;
}
.OEA_zeile3 {
@apply flex flex-row space-x-4 pt-6 items-start justify-center;
}
.OEA_item6 {
.result {
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
}
.result[style*="opacity: 1"] {
@apply opacity-100;
}
}
}
}
</style>

0
src/components/design/content/banner-saeule.svelte → src/components/design/content/BannerSaeule.svelte
View File

0
src/components/design/content/card-BAG-widget.svelte → src/components/design/content/CardBedarfsausweisGewerbeWidget.svelte
View File

0
src/components/design/content/card-BA-widget.svelte → src/components/design/content/CardBedarfsausweisWidget.svelte
View File

0
src/components/design/content/card-VAG-widget.svelte → src/components/design/content/CardVerbrauchsausweisGewerbeWidget.svelte
View File

96
src/components/design/content/CardVerbrauchsausweisWidget.svelte Normal file
View File

@@ -0,0 +1,96 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="">
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-2" />
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img
class="w-[100%] !min-w-[100px]"
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
ab<span class="promo pl-2"
>{PRICES.VerbrauchsausweisWohnen[0]}</span
>€
</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services">
<div>3 Jahresverbräuche der Heizung benötigt.</div>
<div class="check">✔</div>
</div>
<div class="services">
<div>Zulässig bei Vermietung oder Verkauf.</div>
<div class="check">✔</div>
</div>
<div class="services">
<div>Unzulässig bei unsanierten Gebäuden vor 1978.</div>
<div class="check-no">✘</div>
</div>
<div class="services">
<div>Ungenau durch individuelles Heizverhalten.</div>
<div class="check-no">✘</div>
</div>
<div class="services">
<div>Wird nicht immer bei den Banken akzeptiert.</div>
<div class="check-no">✘</div>
</div>
</div>
<div class="flex flex-row flex-wrap justify-center">
<a
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">jetzt online erstellen</a
>
<a
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">zur Produktübersicht</a
>
</div>
</div>
</div>
<style lang="scss">
#card-VA-promo {
.white {
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
}
.variante {
@apply w-fit text-black justify-self-end mr-3;
}
.variante {
@apply text-2xl;
}
.services {
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end font-bold text-green-700;
}
.check-no {
@apply justify-self-end font-bold text-red-700;
}
}
</style>

57
src/components/design/content/card-VA-widget.svelte
View File

@@ -1,57 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="">
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>3 Jahresverbräuche der Heizung benötigt.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
<div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-VA-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

30
src/components/design/sidebars/cards/card-VA-promo.svelte
View File

@@ -1,25 +1,29 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VA-promo"
class=" box card bg-white px-6 py-4 mb-5">
<div id="card-VA-promo" class=" box card bg-white px-6 py-4 mb-5">
<div class="grid">
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-4">
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-4" />
<img
class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]"
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
/>
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">
ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span
>€
</p>
<a
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt Verbrauchsausweis erstellen</a>
">jetzt Verbrauchsausweis erstellen</a
>
</div>
</div>
<style lang="scss">
</style>

158
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
View File

@@ -5,7 +5,7 @@
import BereichLabel from "#labels/BereichLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import Label from "#components/Label.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
@@ -15,7 +15,11 @@
//import ZipSearch from "#components/PlzSuche.svelte";
import moment from "moment";
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
import {
RawNotificationWrapper,
RawNotification,
notifications,
} from "#components/Notifications/index.js";
import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
@@ -24,7 +28,10 @@
import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
import {
AuditType,
hidden,
} from "#components/Verbrauchsausweis/audits/hidden.js";
import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
@@ -32,28 +39,45 @@
//import { Enums } from "@ibcornelsen/database/client"
import Overlay from "#components/Overlay.svelte";
import AusweisGespeichertModule from "#modules/Ausweise/AusweisGespeichertModule.svelte";
import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
import {
VerbrauchsausweisWohnenClient,
BenutzerClient,
UploadedGebaeudeBild,
} from "#components/Ausweis/types.js";
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
export let ausweis: VerbrauchsausweisWohnenClient;
export let user: BenutzerClient = {} as BenutzerClient;
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
let gebaeude =
ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
let images: (UploadedGebaeudeBild & { base64?: string })[] =
ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten
?.gebaeude_bilder || [];
async function spaeterWeitermachen() {
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
const result = await verbrauchsausweisWohnenSpeichern(
ausweis,
gebaeude,
gebaeude_aufnahme_allgemein,
images,
user
);
if (result !== null) {
// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
// Sonst müsste er alles neu eingeben...
ausweis.uid = result.uid
gebaeude.uid = result.gebaeude_uid
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
ausweis.uid = result.uid;
gebaeude.uid = result.gebaeude_uid;
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
window.history.pushState(
{},
"",
`${location.pathname}?uid=${result.uid}`
);
speichernOverlayHidden = false;
}
}
@@ -83,18 +107,27 @@
ausweis = ausweis;
}
async function ausweisAbschicken(e: SubmitEvent) {
if (e && e.preventDefault) e.preventDefault();
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
const result = await verbrauchsausweisWohnenSpeichern(
ausweis,
gebaeude,
gebaeude_aufnahme_allgemein,
images,
user
);
if (result !== null) {
// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
// Sonst müsste er alles neu eingeben...
ausweis.uid = result.uid
gebaeude.uid = result.gebaeude_uid
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
ausweis.uid = result.uid;
gebaeude.uid = result.gebaeude_uid;
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
window.history.pushState(
{},
"",
`${location.pathname}?uid=${result.uid}`
);
window.location.href = `/kundendaten?uid=${result.uid}`;
}
}
@@ -103,15 +136,16 @@
let speichernOverlayHidden = true;
$: {
if (gebaeude_aufnahme_allgemein.saniert
&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt === undefined
&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
if (
gebaeude_aufnahme_allgemein.saniert &&
gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt ===
undefined &&
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined
) {
gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
}
}
</script>
<Overlay bind:hidden={speichernOverlayHidden}>
@@ -127,58 +161,52 @@
</Overlay>
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0">
<!-- Später weitermachen / Hilfe anfordern -->
<div id="formular-box" class="formular-boxen ring-0">
<!-- Später weitermachen / Hilfe anfordern -->
<div class="w-full grid gap-x-4 gap-y-2
<div
class="w-full grid gap-x-4 gap-y-2
grid-cols-1
xs:grid-cols-2
">
<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
"
>
<div class="md:justify-self-start">
<button
class="button"
type="button"
on:click={spaeterWeitermachen}>Später Weitermachen</button
>
</div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<div class="mt-2">
<button
class="button hidden"
on:click={automatischAusfüllen}
type="button">Automatisch Ausfüllen</button
>
</div>
<!-- A Prüfung der Ausweisart -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
<!-- A Prüfung der Ausweisart -->
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
client:load
/>
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
<BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<GebaeudeDaten
bind:gebaeude_aufnahme_allgemein
client:load
/>
</div>
<BereichLabel bereich="B"
>Eingabe&nbsp;der&nbsp;Gebäudeadresse -
Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel
>
<GebaeudeDaten bind:gebaeude_aufnahme_allgemein />
</div>
</form>
<style lang="scss">
</style>

4
src/pages/index.astro
View File

@@ -1,6 +1,6 @@
---
import Layout from "#layouts/Layout.astro";
import BannerPrice from "#content/banner-saeule.svelte";
import BannerSaeule from "#content/BannerSaeule.svelte";
---
@@ -8,7 +8,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
<h1>Unsere Ausweise im Detail:</h1>
<!-- <BannerPrice client:load /> -->
<BannerSaeule client:load />
</Layout>

1
src/pages/index_1.astro
View File

@@ -1,6 +1,5 @@
---
import Layout from "#layouts/Layout_1.astro";
import BannerPrice from "#content/banner-saeule.svelte";
---