288 lines
12 KiB
Svelte
288 lines
12 KiB
Svelte
<script lang="ts">
|
|
import HelpLabel from "#components/labels/HelpLabel.svelte";
|
|
import Inputlabel from "#components/labels/InputLabel.svelte";
|
|
|
|
//import Label from "#components/Label.svelte";
|
|
|
|
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
|
|
import { addNotification, deleteNotification } from "#components/Notifications/shared.js";
|
|
import TagInput from "../TagInput.svelte";
|
|
import { Enums } from "@ibcornelsen/database/client";
|
|
import {
|
|
AufnahmeClient,
|
|
ObjektClient,
|
|
GEGNachweisWohnenClient,
|
|
} from "../Ausweis/types.js";
|
|
|
|
export let objekt: ObjektClient;
|
|
export let ausweis:
|
|
GEGNachweisWohnenClient;
|
|
export let aufnahme: AufnahmeClient;
|
|
|
|
export let ausweisart: Enums.Ausweisart;
|
|
</script>
|
|
|
|
<div id="ausweisart" 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 -->
|
|
|
|
<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"
|
|
bind:value={ausweis.ausstellgrund}
|
|
required
|
|
data-cy="ausstellgrund"
|
|
>
|
|
<option disabled selected value={null}>Bitte auswählen</option>
|
|
<option value={Enums.Ausstellgrund.Neubau}>Neubau</option>
|
|
<option value={Enums.Ausstellgrund.Modernisierung}>Modernisierung</option>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte wählen Sie aus wofür Sie den Energieausweis benötigen.
|
|
<strong>Vermietung, Verkauf oder sonstiges (z.B. zur Vorlage bei der Bank) ist als Anlass für den Verbrauchsausweis zulässig.</strong>
|
|
Neubau oder Modernisierung ist Sie hier nicht zulässig.</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={aufnahme.gebaeudetyp}
|
|
>
|
|
<option disabled selected value={null}>Bitte auswählen</option>
|
|
|
|
{#if ausweisart === Enums.Ausweisart.GEGNachweisWohnen}
|
|
<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>
|
|
|
|
{:else if ausweisart==Enums.Ausweisart.VerbrauchsausweisGewerbe}
|
|
<option value="Verwaltungsgebäude (allgemein)">Verwaltungsgebäude (allgemein)</option>
|
|
<option value="Parlaments- und Gerichtsgebäude">Parlaments- und Gerichtsgebäude</option>
|
|
<option value="Ministerien u. Ämter u. Behörden">Ministerien u. Ämter u. Behörden</option>
|
|
<option value="Polizeidienstgebäude">Polizeidienstgebäude</option>
|
|
<option value="Gebäude für öffentliche Bereitschaftsdienste">Gebäude für öffentliche Bereitschaftsdienste</option>
|
|
<option value="Feuerwehrdienstgebäude">Feuerwehrdienstgebäude</option>
|
|
<option value="Bürogebäude">Bürogebäude</option>
|
|
<option value="Bürogebäude - überwiegend Großraumbüros">Bürogebäude - überwiegend Großraumbüros</option>
|
|
<option value="Bankgebäude">Bankgebäude</option>
|
|
<option value="Hochschule und Forschung (allgemein)">Hochschule und Forschung (allgemein)</option>
|
|
<option value="Gebäude für Lehre">Gebäude für Lehre</option>
|
|
<option value="Institute für Lehre und Forschung">Institute für Lehre und Forschung</option>
|
|
<option value="Gebäude für Forschung ohne Lehre">Gebäude für Forschung ohne Lehre</option>
|
|
<option value="Laborgebäude">Laborgebäude</option>
|
|
<option value="Gesundheitswesen (allgemein)">Gesundheitswesen (allgemein)</option>
|
|
<option value="Krankenhäuser (ohne Forschung und Lehre)">Krankenhäuser (ohne Forschung und Lehre)</option>
|
|
<option value="Krankenhäuser (ohne Forschung und Lehre) & teilstationäre Versorgung">Krankenhäuser (ohne Forschung und Lehre) & teilstationäre Versorgung</option>
|
|
<option value="Medizinische Einrichtungen für nicht stationäre Versorgung">Medizinische Einrichtungen für nicht stationäre Versorgung</option>
|
|
<option value="Gebäude für Reha">Gebäude für Reha</option>
|
|
<option value="Bildungseinrichtungen (allgemein)">Bildungseinrichtungen (allgemein)</option>
|
|
<option value="Schulen">Schulen</option>
|
|
<option value="Kinderbetreuungseinrichtungen">Kinderbetreuungseinrichtungen</option>
|
|
<option value="Kultureinrichtungen (allgemein)">Kultureinrichtungen (allgemein)</option>
|
|
<option value="Bibliotheken/Archive">Bibliotheken/Archive</option>
|
|
<option value="Ausstellungsgebäude">Ausstellungsgebäude</option>
|
|
<option value="Veranstaltungsgebäude">Veranstaltungsgebäude</option>
|
|
<option value="Gemeinschafts-/Gemeindehäuser">Gemeinschafts-/Gemeindehäuser</option>
|
|
<option value="Opern/Theater">Opern/Theater</option>
|
|
<option value="Sporteinrichtungen (allgemein)">Sporteinrichtungen (allgemein)</option>
|
|
<option value="Sporthallen">Sporthallen</option>
|
|
<option value="Fitnessstudios">Fitnessstudios</option>
|
|
<option value="Schwimmhallen">Schwimmhallen</option>
|
|
<option value="Gebäude für Sportaußenanlagen">Gebäude für Sportaußenanlagen</option>
|
|
<option value="Verpflegungseinrichtungen (allgemein)">Verpflegungseinrichtungen (allgemein)</option>
|
|
<option value="Beherbergungsstätten (allgemein)">Beherbergungsstätten (allgemein)</option>
|
|
<option value="Hotels/Pensionen">Hotels/Pensionen</option>
|
|
<option value="Jugendherbergen u. Ferienhäuser">Jugendherbergen u. Ferienhäuser</option>
|
|
<option value="Gaststätten">Gaststätten</option>
|
|
<option value="Mensen u. Kantinen">Mensen u. Kantinen</option>
|
|
<option value="Gewerbliche und industrielle Gebäude (allgemein)">Gewerbliche und industrielle Gebäude (allgemein)</option>
|
|
<option value="Gewerbliche und industrielle Gebäude - schwere Arbeit">Gewerbliche und industrielle Gebäude - schwere Arbeit</option>
|
|
<option value="Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit">Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit</option>
|
|
<option value="Gewerbliche und industrielle Gebäude - leichte Arbeit">Gewerbliche und industrielle Gebäude - leichte Arbeit</option>
|
|
<option value="Gebäude für Lagerung">Gebäude für Lagerung</option>
|
|
<option value="Verkaufsstätten (allgemein)">Verkaufsstätten (allgemein)</option>
|
|
<option value="Kaufhäuser">Kaufhäuser</option>
|
|
<option value="Kaufhauszentren/Einkaufszentren">Kaufhauszentren/Einkaufszentren</option>
|
|
<option value="Märkte">Märkte</option>
|
|
<option value="Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel">Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
|
|
<option value="Läden">Läden</option>
|
|
<option value="Läden mit sehr hohem Anteil von Kühlung für Lebensmittel">Läden mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
|
|
<option value="Fernmeldetechnik">Fernmeldetechnik</option>
|
|
{/if}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel><strong>Der Energieausweis bezieht sich immer auf das gesamte Gebäude</strong> oder den gesamten Wohnteil eines Mischgebäudes.
|
|
Für einzelne Wohnungen kann kein Energieausweis ausgestellt werden.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
{#if ausweisart=="VerbrauchsausweisWohnen"}
|
|
<!-- 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={aufnahme.einheiten}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
|
|
Gebäude befinden.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
{:else if ausweisart=="VerbrauchsausweisGewerbe"}
|
|
|
|
<!-- Baujahr Klimaanlage -->
|
|
|
|
<div class="input-standard order-3 md:order-5 xl:order-3">
|
|
<Inputlabel title="Baujahr Klimaanlage *"></Inputlabel>
|
|
|
|
<TagInput
|
|
name="baujahr_klimaanlage"
|
|
type="number"
|
|
onlyUnique={true}
|
|
minlength={4}
|
|
maxlength={4}
|
|
onFocusIn={() => {
|
|
addNotification({
|
|
message: "Info",
|
|
subtext:
|
|
"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
|
|
dismissable: true,
|
|
uid: "KLIMAANLAGE_BAUJAHR",
|
|
timeout: 0,
|
|
type: "info",
|
|
});
|
|
}}
|
|
onFocusOut={() => {
|
|
deleteNotification("KLIMAANLAGE_BAUJAHR");
|
|
}}
|
|
className={auditHeizungGebaeudeBaujahr(aufnahme)
|
|
? "linked"
|
|
: ""}
|
|
bind:tags={aufnahme.baujahr_klima}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
|
|
unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
<!-- Baujahr -->
|
|
|
|
<div class="input-standard order-5 md:order-4 xl:order-5">
|
|
<Inputlabel title="Baujahr *"></Inputlabel>
|
|
|
|
<TagInput
|
|
name="baujahr_gebaeude"
|
|
type="number"
|
|
minlength={4}
|
|
maxlength={4}
|
|
onlyUnique={true}
|
|
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(aufnahme)
|
|
? "linked"
|
|
: ""}
|
|
bind:tags={aufnahme.baujahr_gebaeude}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine grundlegende Sanierung stattgefunden haben, dann geben Sie das Sanierungsjahr ebenfalls an.
|
|
</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}
|
|
minlength={4}
|
|
maxlength={4}
|
|
onFocusIn={() => {
|
|
addNotification({
|
|
message: "Info",
|
|
subtext:
|
|
"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. 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(aufnahme)
|
|
? "linked"
|
|
: ""}
|
|
bind:tags={aufnahme.baujahr_heizung}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
|
|
unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
</div>
|