461 lines
12 KiB
Svelte
461 lines
12 KiB
Svelte
<script lang="ts">
|
|
import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
|
|
import Progressbar from "~/components/Ausweis/Progressbar.svelte";
|
|
import Hilfe from "~/components/Ausweis/Hilfe.svelte";
|
|
import HelpLabel from "~/components/HelpLabel.svelte";
|
|
import Verbrauch from "~/components/Ausweis/Verbrauch.svelte";
|
|
import Label from "~/components/Label.svelte";
|
|
import Ausweisart from "~/components/Ausweis/Ausweisart.svelte";
|
|
import ZipSearch from "../ZIPSearch.svelte";
|
|
import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
|
|
import moment from "moment";
|
|
import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
|
|
import { Gebaeude } from "src/lib/Gebaeude";
|
|
|
|
export let gebaeude: Gebaeude;
|
|
|
|
|
|
$: ausweis = gebaeude.ausweis || new Verbrauchsausweis();
|
|
|
|
let needsRequirementCertificate: boolean = false;
|
|
|
|
$: needsRequirementCertificate =
|
|
(gebaeude.baujahr < 1978 &&
|
|
gebaeude.einheiten <= 4 &&
|
|
gebaeude.saniert == false &&
|
|
(ausweis.ausstellgrund == "Vermietung" ||
|
|
ausweis.ausstellgrund == "Sonstiges")) ||
|
|
ausweis.ausstellgrund == "Neubau" ||
|
|
ausweis.ausstellgrund == "Modernisierung" ||
|
|
ausweis.ausstellgrund == "Verkauf";
|
|
|
|
function automatischAusfüllen() {
|
|
gebaeude.baujahr = 1962;
|
|
ausweis.baujahr_anlage = 1974;
|
|
gebaeude.saniert = true;
|
|
gebaeude.einheiten = 1;
|
|
ausweis.ausstellgrund = "Vermietung";
|
|
ausweis.kennwerte.verbrauch_1 = 15000;
|
|
ausweis.kennwerte.verbrauch_2 = 14000;
|
|
ausweis.kennwerte.verbrauch_3 = 16000;
|
|
gebaeude.wohnflaeche = 152;
|
|
gebaeude.keller_beheizt = true;
|
|
ausweis.kennwerte.energietraeger_1 = "Erdgas H";
|
|
ausweis.kennwerte.einheit_1 = "kWh";
|
|
ausweis.kennwerte.anteil_warmwasser_1 = 18;
|
|
ausweis.kennwerte.zeitraum = moment("12.01.2019");
|
|
gebaeude.plz = "21039";
|
|
gebaeude.ort = "Hamburg";
|
|
gebaeude.strasse = "Curslacker Deich 170";
|
|
gebaeude.gebaeudeteil = "Gesamtgebäude";
|
|
//ausweis.upload();
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-row gap-8 items-center mb-8">
|
|
<div class="flex flex-col w-full">
|
|
<h1>Verbrauchsausweis erstellen - 45€</h1>
|
|
<Progressbar progress={0} />
|
|
</div>
|
|
|
|
<PerformanceScore bind:ausweis />
|
|
</div>
|
|
|
|
<form method="post" action="/verbrauchsausweis/erstellen">
|
|
<fieldset
|
|
class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
|
|
>
|
|
<div class="flex flex-row justify-between">
|
|
<a class="button" href="/speichern">Später Weitermachen</a>
|
|
<div class="flex gap-4">
|
|
<Hilfe />
|
|
<button
|
|
on:click={automatischAusfüllen}
|
|
type="button"
|
|
class="button">Automatisch Ausfüllen</button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label>A - Prüfung der Ausweisart</Label>
|
|
|
|
<Ausweisart bind:gebaeude />
|
|
|
|
<div
|
|
class="flex flex-col p-4"
|
|
class:hidden={!needsRequirementCertificate}
|
|
>
|
|
<div class="form-group col-md-9">
|
|
<HelpLabel
|
|
title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
|
|
>
|
|
Der Bedarfsausweis ist die etwas umfangreichere Berechnung.
|
|
Sie benötigen z.B. Länge, Breite und Geschoßhöhe des
|
|
Gebäudes. Auch müssen genauere Angaben zur Anlagentechnik
|
|
gemacht werden.
|
|
</HelpLabel>
|
|
</div>
|
|
|
|
<div class="form-group col-md-3">
|
|
<a class="button" href="/bedarfsausweis"
|
|
>Bedarfsausweis erstellen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label
|
|
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
|
|
Dachgeschoss</Label
|
|
>
|
|
|
|
<div class="GRB">
|
|
<!-- Strasse -->
|
|
<div class="form-group col-md-4">
|
|
<HelpLabel title="Straße, Hausnummer *">
|
|
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
|
|
ein.
|
|
</HelpLabel>
|
|
<div>
|
|
<input
|
|
name="IGstrasse"
|
|
class=" strasse"
|
|
type="text"
|
|
autocomplete="off"
|
|
required
|
|
data-msg-minlength="min. 5 Zeichen"
|
|
data-msg-maxlength="max. 40 Zeichen"
|
|
bind:value={gebaeude.strasse}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLZ -->
|
|
<div class="form-group col-md-4 PLZ">
|
|
<ZipSearch
|
|
bind:zip={gebaeude.plz}
|
|
bind:city={gebaeude.ort}
|
|
name="zip"
|
|
/>
|
|
</div>
|
|
|
|
<!-- IGort: readonly entfernt - Nelson -->
|
|
<div class="form-group col-md-4">
|
|
<HelpLabel title="Ort *">
|
|
Ort des Gebäudes wird automatisch ermittelt.
|
|
</HelpLabel>
|
|
<div>
|
|
<input
|
|
name="IGort"
|
|
readonly={true}
|
|
bind:value={gebaeude.ort}
|
|
type="text"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- Wohnfläche -->
|
|
<div class="form-group col-md-4">
|
|
<HelpLabel title="Wohnfläche m² *">
|
|
Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
|
|
Dabei handelt es sich um die Wohnfläche abzüglich
|
|
vorhandener Flächen die sich außerhalb des Gebäudes
|
|
befinden. (Balkone, Terassen,etc.).
|
|
</HelpLabel>
|
|
<div>
|
|
<input
|
|
name="IGflaeche"
|
|
maxlength="4"
|
|
type="number"
|
|
required
|
|
autocomplete="off"
|
|
data-rule-minlength="2"
|
|
data-msg-minlength="min. 2 Zeichen"
|
|
bind:value={gebaeude.wohnflaeche}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Keller -->
|
|
<div class="form-group col-md-4">
|
|
<Label>Keller *</Label>
|
|
<div>
|
|
<select
|
|
name="IGkeller"
|
|
required
|
|
bind:value={gebaeude.keller_beheizt}
|
|
>
|
|
<option>Bitte auswählen</option>
|
|
<option value={false}>nicht vorhanden</option>
|
|
<option value={false}>unbeheizt</option>
|
|
<option value={true}>beheizt</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dachgeschoss -->
|
|
<div class="form-group col-md-4">
|
|
<Label>Dachgeschoss *</Label>
|
|
<div>
|
|
<select name="IGdach" class="" required>
|
|
<option>Bitte auswählen</option>
|
|
<option value="dnein">nicht vorhanden</option>
|
|
<option value="dub">unbeheizt</option>
|
|
<option value="dbh">beheizt</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
|
|
|
|
<div class="GRB">
|
|
<Verbrauch bind:ausweis />
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label
|
|
>D - Eingabe Warmwasseranteil und Verwendung von alternativen
|
|
Energieversorgungssystemen</Label
|
|
>
|
|
|
|
<div class="GRB">
|
|
<!-- Anteil WW enthalten -->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row gap-6">
|
|
<label class="radio-inline"
|
|
><input
|
|
type="checkbox"
|
|
class="IGwwbool"
|
|
name="IGwwbool"
|
|
bind:checked={ausweis.kennwerte.warmwasser_enthalten}
|
|
/>Warmwasser im Verbrauch enthalten</label
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Warmwasser Antel -->
|
|
<div class="form-group col-md-2">
|
|
<HelpLabel title="% Anteil Warmwasser">
|
|
Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
|
|
hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
|
|
</HelpLabel>
|
|
|
|
<input
|
|
name="IGwarmwasser"
|
|
maxlength="2"
|
|
type="number"
|
|
bind:value={ausweis.kennwerte.anteil_warmwasser_1}
|
|
disabled={!ausweis.warmwasser_enthalten}
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group col-md-2">
|
|
<HelpLabel title="zusätzliche Heizquelle">
|
|
Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
|
|
von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
|
|
ein Anteil von 18% angenommen.
|
|
</HelpLabel>
|
|
<input
|
|
name="IGwarmwasser2"
|
|
maxlength="3"
|
|
type="number"
|
|
autocomplete="off"
|
|
bind:value={ausweis.kennwerte.anteil_warmwasser_2}
|
|
disabled={!ausweis.kennwerte.zusaetzliche_heizquelle ||
|
|
!ausweis.warmwasser_enthalten}
|
|
/>
|
|
</div>
|
|
|
|
<!-- Alternative Energieversorgungssyteme -->
|
|
<div class="form-group col-md-5">
|
|
<HelpLabel
|
|
title="Alternative Energieversorgungssysteme genutzt für "
|
|
>
|
|
Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
|
|
Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
|
|
Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
|
|
</HelpLabel>
|
|
<div class="flex flex-row gap-4">
|
|
<label class="checkbox-inline"
|
|
><input
|
|
type="checkbox"
|
|
name="IGversorgungssysteme1"
|
|
bind:checked={gebaeude.energiequelle_2_nutzung[0]}
|
|
value="Heizung"
|
|
/>Heizung</label
|
|
>
|
|
<label class="checkbox-inline"
|
|
><input
|
|
type="checkbox"
|
|
name="IGversorgungssysteme2"
|
|
bind:checked={gebaeude.energiequelle_2_nutzung[1]}
|
|
value="Warmwasser"
|
|
/>Warmwasser</label
|
|
>
|
|
<label class="checkbox-inline"
|
|
><input
|
|
type="checkbox"
|
|
name="IGversorgungssysteme3"
|
|
bind:checked={gebaeude.energiequelle_2_nutzung[2]}
|
|
value="Lüftung"
|
|
/>Lüftung</label
|
|
>
|
|
<label class="checkbox-inline"
|
|
><input
|
|
type="checkbox"
|
|
name="IGversorgungssysteme4"
|
|
bind:checked={gebaeude.energiequelle_2_nutzung[3]}
|
|
value="Kühlung"
|
|
/>Kühlung</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label
|
|
>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
|
|
Leerstand</Label
|
|
>
|
|
|
|
<div class="GRB">
|
|
<!-- Gebäudetyp -->
|
|
<div class="form-group col-md-3">
|
|
<HelpLabel title="Gebäudetyp *">
|
|
Bitte wählen Sie hier den Gebäudetyp aus.
|
|
</HelpLabel>
|
|
<div>
|
|
<select name="IGtyp" class="" required autocomplete="off">
|
|
<option>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>
|
|
</div>
|
|
|
|
<!-- Gebäudeteil -->
|
|
<div class="form-group col-md-3">
|
|
<HelpLabel title="Gebäudeteil *">
|
|
Bitte geben Sie hier den Gebäudeteil ein. In den meisten
|
|
Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
|
|
allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
|
|
handeln, so sollten 2 Ausweise erstellt werden. In diesem
|
|
Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
|
|
'Gewerbe'.
|
|
</HelpLabel>
|
|
<div>
|
|
<select name="IGteil" class="" required autocomplete="off">
|
|
<option>Bitte auswählen</option>
|
|
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
|
<option value="Wohnen">Wohnen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lüftung -->
|
|
<div class="form-group col-md-2">
|
|
<HelpLabel title="Lüftung durch *">
|
|
Bitte geben Sie hier ein ob über die Fenster natürlich
|
|
belüftet wird oder über eine Lüftungsanlage.
|
|
</HelpLabel>
|
|
<div>
|
|
<select
|
|
name="IGlueftung"
|
|
class=""
|
|
required
|
|
autocomplete="off"
|
|
>
|
|
<option>Bitte auswählen</option>
|
|
<option value="Fensterlüftung">Fensterlüftung</option>
|
|
<option value="Schachtlüftung">Schachtlüftung</option>
|
|
<option value="Lüftungsanlage ohne Wärmerückgewinnung"
|
|
>Lüftungsanlage ohne Wärmerückgewinnung</option
|
|
>
|
|
<option value="Lüftungsanlage mit Wärmerückgewinnung"
|
|
>Lüftungsanlage mit Wärmerückgewinnung</option
|
|
>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lüftung -->
|
|
<div class="form-group col-md-2">
|
|
<HelpLabel title="Anlage Kühlung *">
|
|
Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
|
|
gekühlt wird.
|
|
</HelpLabel>
|
|
<div>
|
|
<select
|
|
name="IGkuehlung"
|
|
class=""
|
|
required
|
|
autocomplete="off"
|
|
>
|
|
<option>Bitte auswählen</option>
|
|
<option value="1">vorhanden</option>
|
|
<option value="0">nicht vorhanden</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leerstand -->
|
|
<div class="form-group col-md-2">
|
|
<HelpLabel title="Leerstand in %">
|
|
Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
|
|
(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
|
|
wären dann ca. 11%.
|
|
</HelpLabel>
|
|
<div>
|
|
<input
|
|
name="IGleer"
|
|
maxlength="2"
|
|
type="text"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<Label
|
|
>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
|
|
Gebäudes</Label
|
|
>
|
|
<BilderZusatzsysteme {gebaeude} />
|
|
<hr />
|
|
<div class="flex flex-row justify-between">
|
|
<Hilfe />
|
|
<button class="button">Weiter</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|