UMBENOMENA
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
||||||
import BereichLabel from "#labels/BereichLabel.svelte";
|
console.log('Hallo Welt');
|
||||||
|
|
||||||
import HelpLabel from "#labels/HelpLabel.svelte";
|
import HelpLabel from "#labels/HelpLabel.svelte";
|
||||||
import Inputlabel from "#labels/InputLabel.svelte";
|
import Inputlabel from "#labels/InputLabel.svelte";
|
||||||
|
|
||||||
@@ -24,12 +25,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="bereich-box grid
|
<div class="bereich-box grid
|
||||||
grid-cols-1 gap-x-4 gap-y-8
|
grid-cols-1 gap-x-4 gap-y-8
|
||||||
|
|
||||||
sm:grid-cols-2 sm:gap-x-6 sm: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
|
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||||
">
|
">
|
||||||
|
|||||||
183
src/components/Ausweis/GebaeudeDaten.svelte
Normal file
183
src/components/Ausweis/GebaeudeDaten.svelte
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
|
||||||
|
import HelpLabel from "#labels/HelpLabel.svelte";
|
||||||
|
import Inputlabel from "#labels/InputLabel.svelte";
|
||||||
|
|
||||||
|
import ZipSearch from "#components/PlzSuche.svelte";
|
||||||
|
import { Enums } from "@ibcornelsen/database/client"
|
||||||
|
|
||||||
|
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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
|
||||||
|
">
|
||||||
|
|
||||||
|
<!-- Straße, Hausnummer * -->
|
||||||
|
|
||||||
|
<div class="input-standard order-1 md:order-1 xl:order-1">
|
||||||
|
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
|
||||||
|
|
||||||
|
<input
|
||||||
|
name="adresse"
|
||||||
|
data-test="adresse"
|
||||||
|
type="text"
|
||||||
|
autocomplete="off"
|
||||||
|
required
|
||||||
|
data-msg-minlength="min. 5 Zeichen"
|
||||||
|
data-msg-maxlength="max. 40 Zeichen"
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.adresse}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
|
||||||
|
</HelpLabel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PLZ / ORT -->
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[2fr_3fr] order-2 md:order-2 xl:order-2">
|
||||||
|
|
||||||
|
<div class="input-standard">
|
||||||
|
<Inputlabel title="PLZ *"></Inputlabel>
|
||||||
|
|
||||||
|
<ZipSearch
|
||||||
|
bind:zip={gebaeude_aufnahme_allgemein.plz}
|
||||||
|
bind:city={gebaeude_aufnahme_allgemein.ort}
|
||||||
|
name="plz"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-standard">
|
||||||
|
<Inputlabel title="Ort *"></Inputlabel>
|
||||||
|
|
||||||
|
<input
|
||||||
|
name="ort"
|
||||||
|
data-test="ort"
|
||||||
|
readonly={true}
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.ort}
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
Geben Sie die PLZ ein, der Ort des Gebäudes wird automatisch eingetragen.
|
||||||
|
</HelpLabel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wohnfläche m² * -->
|
||||||
|
|
||||||
|
<div class="input-standard order-3 md:order-3 xl:order-3">
|
||||||
|
<Inputlabel title="Wohnfläche m² *"></Inputlabel>
|
||||||
|
|
||||||
|
<input
|
||||||
|
name="flaeche"
|
||||||
|
data-test="flaeche"
|
||||||
|
maxlength="4"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
autocomplete="off"
|
||||||
|
data-rule-minlength="2"
|
||||||
|
data-msg-minlength="min. 2 Zeichen"
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.flaeche}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Keller * -->
|
||||||
|
|
||||||
|
<div class="input-standard order-4 md:order-2 xl:order-4">
|
||||||
|
<Inputlabel title="Keller *"></Inputlabel>
|
||||||
|
|
||||||
|
<select
|
||||||
|
name="keller"
|
||||||
|
data-test="keller"
|
||||||
|
required
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.keller}
|
||||||
|
>
|
||||||
|
<option disabled>Bitte auswählen</option>
|
||||||
|
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
|
||||||
|
<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
|
||||||
|
<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
TEXT FEHLT
|
||||||
|
</HelpLabel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dachgeschoss *-->
|
||||||
|
|
||||||
|
<div class="input-standard order-4 md:order-2 xl:order-4">
|
||||||
|
<Inputlabel title="Dachgeschoss *"></Inputlabel>
|
||||||
|
|
||||||
|
<select
|
||||||
|
name="dachgeschoss"
|
||||||
|
data-test="dachgeschoss"
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option disabled>Bitte auswählen</option>
|
||||||
|
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
|
||||||
|
<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
|
||||||
|
<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
TEXT FEHLT
|
||||||
|
</HelpLabel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gesamtfläche * -->
|
||||||
|
|
||||||
|
<div class="input-standard order-6 md:order-6 xl:order-6">
|
||||||
|
<Inputlabel title="Gesamtfläche m² *"></Inputlabel>
|
||||||
|
|
||||||
|
<input
|
||||||
|
name="nutzflaeche"
|
||||||
|
data-test="nutzflaeche"
|
||||||
|
maxlength="4"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
autocomplete="off"
|
||||||
|
data-rule-minlength="2"
|
||||||
|
data-msg-minlength="min. 2 Zeichen"
|
||||||
|
bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>
|
||||||
|
Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
|
||||||
|
(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
|
||||||
|
weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
|
||||||
|
beheizten Kellers). Diese Fläche wird dann im Energieausweis
|
||||||
|
als energetische Nutzfläche (An) ausgewiesen.
|
||||||
|
</HelpLabel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -1,423 +0,0 @@
|
|||||||
<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 Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
|
||||||
import Label from "#components/Label.svelte";
|
|
||||||
import HelpLabel from "#components/HelpLabel.svelte";
|
|
||||||
import ZipSearch from "#components/PlzSuche.svelte";
|
|
||||||
import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
|
|
||||||
import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
|
|
||||||
import moment from "moment";
|
|
||||||
import { BitChecker } from "src/lib/BitChecker";
|
|
||||||
import type { BedarfsausweisWohnen } from "@ibcornelsen/database/client";
|
|
||||||
|
|
||||||
let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
|
|
||||||
|
|
||||||
let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
|
|
||||||
|
|
||||||
let fensterArten = {
|
|
||||||
Einfachverglasung: 5,
|
|
||||||
"Holzfenster Doppelverglasung": 2.7,
|
|
||||||
"Kunststofffenster Doppelverglasung": 3,
|
|
||||||
"Alu- oder Stahlfenster Doppelverglasung": 4.3,
|
|
||||||
"Fenster Doppelverglasung (ab 1995)": 1.8,
|
|
||||||
"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
|
|
||||||
"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
|
|
||||||
"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
|
|
||||||
"Passivhausfenster(U-Wert 0,7)": 0.7,
|
|
||||||
"Passivhausfenster(U-Wert 0,6)": 0.6,
|
|
||||||
"Fenster mit U-Wert 2,3": 2.3,
|
|
||||||
"Fenster mit U-Wert 1,6": 1.6,
|
|
||||||
"Fenster mit U-Wert 1,7": 1.7,
|
|
||||||
"Fenster mit U-Wert 1,3": 1.3,
|
|
||||||
"Fenster mit U-Wert 1": 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
const arrayRange = (start: number, stop: number, step: number) =>
|
|
||||||
Array.from(
|
|
||||||
{ length: (stop - start) / step + 1 },
|
|
||||||
(value, index) => start + index * step
|
|
||||||
);
|
|
||||||
|
|
||||||
function automatischAusfüllen() {
|
|
||||||
ausweis.baujahr_anlage = 1974;
|
|
||||||
ausweis.baujahr_gebaeude = 1962;
|
|
||||||
ausweis.anzahl_einheiten = 1;
|
|
||||||
ausweis.objekt_saniert = true;
|
|
||||||
ausweis.objekt_strasse = "Mönckebergstraße";
|
|
||||||
ausweis.objekt_plz = "22049";
|
|
||||||
ausweis.objekt_ort = "Hamburg";
|
|
||||||
ausweis.wohnflaeche = 152;
|
|
||||||
ausweis.keller_beheizt = true;
|
|
||||||
ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
|
|
||||||
ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
|
|
||||||
ausweis.energietraeger_1 = "Erdgas";
|
|
||||||
ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
|
|
||||||
ausweis.versorgungssysteme = BitChecker(1);
|
|
||||||
ausweis.fenster_dach = BitChecker(1);
|
|
||||||
ausweis.daemmung = BitChecker(1);
|
|
||||||
ausweis.objekt_typ = "Einfamilienhaus";
|
|
||||||
ausweis.objekt_gebaeudeteil = "Gesamtgebäude";
|
|
||||||
ausweis.lueftungskonzept = "Fensterlüftung";
|
|
||||||
ausweis.wird_gekuehlt = false;
|
|
||||||
ausweis.energieverbrauch_1_heizquelle_1 = 40120;
|
|
||||||
ausweis.energieverbrauch_2_heizquelle_1 = 42120;
|
|
||||||
ausweis.energieverbrauch_3_heizquelle_1 = 41120;
|
|
||||||
ausweis.anzahl_vollgeschosse = 2;
|
|
||||||
ausweis.geschosshoehe = 2.25;
|
|
||||||
ausweis.anzahl_gauben = 1;
|
|
||||||
ausweis.breite_gauben = 0.7;
|
|
||||||
ausweis.masse_a = 4;
|
|
||||||
ausweis.masse_b = 12;
|
|
||||||
ausweis.masse_c = 3;
|
|
||||||
ausweis.masse_d = 6;
|
|
||||||
ausweis.masse_e = 4;
|
|
||||||
ausweis.masse_f = 9;
|
|
||||||
ausweis.fensterflaeche_so_sw = 8;
|
|
||||||
ausweis.fensterflaeche_nw_no = 8;
|
|
||||||
ausweis.aussenwandflaeche_unbeheizt = 15;
|
|
||||||
ausweis.fenster_flaeche_1 = 16;
|
|
||||||
ausweis.fenster_art_1 = 5;
|
|
||||||
ausweis.fenster_flaeche_2 = 0;
|
|
||||||
ausweis.fenster_art_2 = 5;
|
|
||||||
ausweis.dachfenster_flaeche = 12;
|
|
||||||
ausweis.dachfenster_art = 5;
|
|
||||||
ausweis.haustuer_flaeche = 2;
|
|
||||||
ausweis.haustuer_art = 5;
|
|
||||||
ausweis.dach_bauart = "Massive Konstruktion";
|
|
||||||
ausweis.dach_daemmung = 0;
|
|
||||||
ausweis.decke_bauart = "Massive Konstruktion";
|
|
||||||
ausweis.decke_daemmung = 0.02;
|
|
||||||
ausweis.aussenwand_bauart = "Massive Konstruktion";
|
|
||||||
ausweis.aussenwand_daemmung = 0.05;
|
|
||||||
ausweis.boden_bauart = "Massive Konstruktion";
|
|
||||||
ausweis.boden_daemmung = 0.08;
|
|
||||||
ausweis.warmwasser_verteilung = "zvmzbis1978";
|
|
||||||
ausweis.warmwasser_speicherung = "zwwsath";
|
|
||||||
ausweis.warmwasser_erzeugung = "ktkesselbis1986";
|
|
||||||
ausweis.heizung_zentral = false;
|
|
||||||
ausweis.heizung_verteilung = "zv7055bis1978";
|
|
||||||
ausweis.waerme_erzeugung_heizung = "ktkesselbis1986h";
|
|
||||||
ausweis.heizung_speicherung = "elzs7055bis1994";
|
|
||||||
ausweis.energietraeger_2 = "Braunkohle";
|
|
||||||
ausweis.anteil_zusatzheizung = 0.7;
|
|
||||||
ausweis = ausweis;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSection(section: HTMLElement): void {
|
|
||||||
// Find the next sibling element and assert it's an HTMLElement
|
|
||||||
const formContainer = section.nextElementSibling as HTMLElement | null;
|
|
||||||
if (!formContainer) {
|
|
||||||
console.error("Form container not found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the icon inside the section and assert it's an HTMLElement
|
|
||||||
const icon = section.querySelector('.toggle-icon') as HTMLElement | null;
|
|
||||||
if (!icon) {
|
|
||||||
console.error("Toggle icon not found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle classes for expanded and collapsed states
|
|
||||||
formContainer.classList.toggle('expanded');
|
|
||||||
section.classList.toggle('collapsed');
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="mt-8 m-auto w-[95%] relative">
|
|
||||||
|
|
||||||
<div class="flex flex-row gap-8 items-center mb-8">
|
|
||||||
<div class="flex flex-col w-full">
|
|
||||||
<h1>Bedarfsausweis erstellen - 75€</h1>
|
|
||||||
<Progressbar progress={0} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PerformanceScore {ausweis} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
|
|
||||||
|
|
||||||
<div class="form-section" onclick="toggleSection(this)">
|
|
||||||
<label id="headlinep" class="section-title">A - Prüfung der Ausweisart</label>
|
|
||||||
<span class="toggle-icon">▶</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-container">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="form-grid">
|
|
||||||
|
|
||||||
<!-- Anlass für Energieausweis -->
|
|
||||||
<div class="form-group">
|
|
||||||
<select id="ausstellgrund" name="ausstellgrund" required class="form-select">
|
|
||||||
<option value="" disabled selected>Anlass *</option>
|
|
||||||
<option value="Neubau">Neubau</option>
|
|
||||||
<option value="Vermietung">Vermietung</option>
|
|
||||||
<option value="Verkauf">Verkauf</option>
|
|
||||||
<option value="Modernisierung">Modernisierung</option>
|
|
||||||
<option value="Sonstiges">Sonstiges</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Baujahr Heizung -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung *" class="form-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Baujahr Gebäude -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Anzahl der Wohnungen -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sanierungsstatus -->
|
|
||||||
<div class="form-group">
|
|
||||||
<select id="objekt_saniert" name="objekt_saniert" required class="form-select">
|
|
||||||
<option value="" disabled selected>Sanierungsstatus *</option>
|
|
||||||
<option value="1">saniert</option>
|
|
||||||
<option value="0">unsaniert</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section" onclick="toggleSection(this)">
|
|
||||||
<label id="headlinep" class="section-title">B - Eingabe der Gebäudeadresse</label>
|
|
||||||
<span class="toggle-icon">▶</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collapsible Container -->
|
|
||||||
<div class="form-container">
|
|
||||||
<div class="form-grid">
|
|
||||||
<!-- Straße und Hausnummer -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
name="objekt_strasse"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="Straße, Hausnummer *"
|
|
||||||
bind:value="{ausweis.objekt_strasse}"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PLZ und Ort -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
name="objekt_plz"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="PLZ *"
|
|
||||||
bind:value="{ausweis.objekt_plz}"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Ort -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
name="objekt_ort"
|
|
||||||
type="text"
|
|
||||||
placeholder="Ort *"
|
|
||||||
bind:value="{ausweis.objekt_ort}"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Wohnfläche -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
name="wohnflaeche"
|
|
||||||
type="number"
|
|
||||||
required
|
|
||||||
placeholder="Wohnfläche in m² *"
|
|
||||||
bind:value="{ausweis.wohnflaeche}"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Gebäudetyp -->
|
|
||||||
<div class="form-group">
|
|
||||||
<select
|
|
||||||
name="objekt_typ"
|
|
||||||
required
|
|
||||||
bind:value="{ausweis.objekt_typ}"
|
|
||||||
class="form-input"
|
|
||||||
>
|
|
||||||
<option value="" disabled selected>Gebäudetyp *</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>
|
|
||||||
|
|
||||||
<!-- Gebäudeteil -->
|
|
||||||
<div class="form-group">
|
|
||||||
<select
|
|
||||||
name="objekt_gebaeudeteil"
|
|
||||||
required
|
|
||||||
bind:value="{ausweis.objekt_gebaeudeteil}"
|
|
||||||
class="form-input"
|
|
||||||
>
|
|
||||||
<option value="" disabled selected>Gebäudeteil *</option>
|
|
||||||
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
|
||||||
<option value="Wohnen">Wohnen</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
|
|
||||||
.form-section {
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.125rem; // 18px
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: #f3f4f6; // Tailwind's bg-gray-100
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
margin-bottom: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(12, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
grid-column: span 4; // Equivalent to col-span-4 in Tailwind
|
|
||||||
|
|
||||||
&.full-width {
|
|
||||||
grid-column: span 12;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.875rem; // 14px
|
|
||||||
font-weight: 500;
|
|
||||||
color: #374151; // Tailwind's text-gray-700
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-select {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #111827; // Tailwind's text-gray-900
|
|
||||||
border: 1px solid #d1d5db; // Tailwind's border-gray-300
|
|
||||||
border-radius: 0.375rem; // Rounded-md
|
|
||||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); // Tailwind's shadow-sm
|
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: #6366f1; // Tailwind's focus:border-indigo-500
|
|
||||||
box-shadow: 0 0 0 1px #6366f1; // Tailwind's focus:ring-indigo-500
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #9ca3af; // Tailwind's text-gray-400
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
option {
|
|
||||||
color: #111827; // Tailwind's text-gray-900
|
|
||||||
}
|
|
||||||
|
|
||||||
option[disabled] {
|
|
||||||
color: #9ca3af; // Tailwind's text-gray-400
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-options {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
|
|
||||||
.radio-option {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
|
|
||||||
input {
|
|
||||||
accent-color: #6366f1; // Tailwind's text-indigo-600
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #374151; // Tailwind's text-gray-700
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsed .toggle-icon {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsed .form-container {
|
|
||||||
max-height: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container.expanded {
|
|
||||||
max-height: 500px; /* Adjust based on content size */
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,262 +0,0 @@
|
|||||||
<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 BereichLabel from "#components/labels/BereichLabel.svelte";
|
|
||||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
|
||||||
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 { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
|
|
||||||
import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
|
|
||||||
import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
|
|
||||||
import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
|
|
||||||
import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
|
|
||||||
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 { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
|
|
||||||
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
|
||||||
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
|
|
||||||
import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
|
|
||||||
import { Enums } from "@ibcornelsen/database/client"
|
|
||||||
import Overlay from "#components/Overlay.svelte";
|
|
||||||
import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
|
|
||||||
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 || [];
|
|
||||||
|
|
||||||
async function spaeterWeitermachen() {
|
|
||||||
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}`);
|
|
||||||
speichernOverlayHidden = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function automatischAusfüllen() {
|
|
||||||
gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
|
|
||||||
gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
|
|
||||||
gebaeude_aufnahme_allgemein.saniert = true;
|
|
||||||
gebaeude_aufnahme_allgemein.einheiten = 1;
|
|
||||||
ausweis.ausstellgrund = "Vermietung";
|
|
||||||
ausweis.verbrauch_1 = 15000;
|
|
||||||
ausweis.verbrauch_2 = 14000;
|
|
||||||
ausweis.verbrauch_3 = 16000;
|
|
||||||
gebaeude_aufnahme_allgemein.flaeche = 152;
|
|
||||||
gebaeude_aufnahme_allgemein.nutzflaeche = 172;
|
|
||||||
ausweis.keller_beheizt = true;
|
|
||||||
gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
|
|
||||||
ausweis.einheit_1 = "kWh";
|
|
||||||
ausweis.anteil_warmwasser_1 = 18;
|
|
||||||
ausweis.startdatum = moment("01.01.2019").toDate();
|
|
||||||
gebaeude_aufnahme_allgemein.plz = "21039";
|
|
||||||
gebaeude_aufnahme_allgemein.ort = "Hamburg";
|
|
||||||
gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
|
|
||||||
gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
|
|
||||||
|
|
||||||
gebaeude = gebaeude;
|
|
||||||
ausweis = ausweis;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async function ausweisAbschicken(e: SubmitEvent) {
|
|
||||||
if (e && e.preventDefault) e.preventDefault();
|
|
||||||
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}`);
|
|
||||||
window.location.href = `/kundendaten?uid=${result.uid}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let waitOverlayHidden = true;
|
|
||||||
let speichernOverlayHidden = true;
|
|
||||||
|
|
||||||
$: {
|
|
||||||
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}>
|
|
||||||
<div class="bg-white w-full max-w-screen-sm py-8 px-8">
|
|
||||||
<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
|
|
||||||
</div>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<Overlay bind:hidden={waitOverlayHidden}>
|
|
||||||
<p class="text-white font-semibold text-4xl">
|
|
||||||
Bitte warten sie, ihr Ausweis wird nun erstellt.
|
|
||||||
</p>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<form action="" enctype="multipart/form-data">
|
|
||||||
|
|
||||||
<BereichLabel bereich="A">Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss</BereichLabel>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Anlass *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anlass">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Heizung *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Gebäude *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Anzahl Wohnungen *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anzahl Wohnungen">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Sanierungsstatus *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Sanierungsstatus">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Gebäudetyp *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gebäudetyp">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Straße, Hausnummer *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Straße, Hausnummer *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">PLZ *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="PLZ *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Ort *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Ort *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Wohnfläche m² *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Wohnfläche m² *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Keller *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Keller *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Dachgeschoss *</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Dachgeschoss *">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
|
||||||
<div class="absolute text-[12px] right-[45px] top-[3px]">Gesamtfläche m²</div>
|
|
||||||
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gesamtfläche m²">
|
|
||||||
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
||||||
|
|
||||||
<!-- Baujahr Heizung -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Baujahr Gebäude -->
|
|
||||||
|
|
||||||
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Anzahl der Wohnungen -->
|
|
||||||
|
|
||||||
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Sanierungsstatus -->
|
|
||||||
|
|
||||||
<select id="objekt_saniert" name="objekt_saniert" required class="form-select">
|
|
||||||
<option value="" disabled selected>Sanierungsstatus *</option>
|
|
||||||
<option value="1">saniert</option>
|
|
||||||
<option value="0">unsaniert</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,10 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
||||||
export let title: string = "";
|
|
||||||
export let bereich: string;
|
export let bereich: string;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -12,7 +7,7 @@
|
|||||||
<div class="bereichs-label">
|
<div class="bereichs-label">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class="grid grid-cols-[max-content_max-content_50px] items-center justify-items-start gap-2">
|
<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
|
||||||
<div class="formular-abschnitt1">{bereich}</div>
|
<div class="formular-abschnitt1">{bereich}</div>
|
||||||
<div class="formular-abschnitt2"><slot></slot></div>
|
<div class="formular-abschnitt2"><slot></slot></div>
|
||||||
<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
|
<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
|
||||||
@@ -25,7 +20,4 @@
|
|||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
|
||||||
.bereichs-label{ }
|
|
||||||
label{@apply [font-size:_clamp(15px,1vw,36px)]}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="absolute border-x-[1px] border-t-[1px] border-black/25 bg-white/15 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">{title}</div>
|
<div class="absolute border-x-[1px] border-t-[1px] border-black/25 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">{title}</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,18 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
//import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
||||||
import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
//import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
||||||
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
||||||
|
|
||||||
|
import BereichLabel from "#labels/BereichLabel.svelte";
|
||||||
import HelpLabel from "#labels/HelpLabel.svelte";
|
import HelpLabel from "#labels/HelpLabel.svelte";
|
||||||
import Inputlabel from "#labels/InputLabel.svelte";
|
import Inputlabel from "#labels/InputLabel.svelte";
|
||||||
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
|
||||||
import Label from "#components/Label.svelte";
|
import Label from "#components/Label.svelte";
|
||||||
|
|
||||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
||||||
import ZipSearch from "#components/PlzSuche.svelte";
|
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
|
||||||
|
|
||||||
|
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
||||||
|
//import ZipSearch from "#components/PlzSuche.svelte";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
|
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";
|
||||||
@@ -24,9 +29,9 @@
|
|||||||
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
||||||
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
|
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
|
||||||
import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
|
import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
|
||||||
import { Enums } from "@ibcornelsen/database/client"
|
//import { Enums } from "@ibcornelsen/database/client"
|
||||||
import Overlay from "#components/Overlay.svelte";
|
import Overlay from "#components/Overlay.svelte";
|
||||||
import AusweisGespeichertModule from "./AusweisGespeichertModule.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";
|
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
|
||||||
|
|
||||||
@@ -125,6 +130,10 @@
|
|||||||
|
|
||||||
<div id="formular-box" class="formular-boxen ring-0">
|
<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
|
grid-cols-1
|
||||||
xs:grid-cols-2
|
xs:grid-cols-2
|
||||||
@@ -140,8 +149,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- A Prüfung der Ausweisart -->
|
||||||
|
|
||||||
|
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
|
||||||
<Ausweisart
|
<Ausweisart
|
||||||
bind:gebaeude
|
bind:gebaeude
|
||||||
bind:gebaeude_aufnahme_allgemein
|
bind:gebaeude_aufnahme_allgemein
|
||||||
@@ -149,11 +159,18 @@
|
|||||||
client:load
|
client:load
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
|
||||||
|
|
||||||
|
<BereichLabel bereich="B">Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss</BereichLabel>
|
||||||
|
|
||||||
|
<GebaeudeDaten
|
||||||
|
bind:gebaeude_aufnahme_allgemein
|
||||||
|
client:load
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
import AusweisLayout from "#layouts/AusweisLayout.astro";
|
import AusweisLayout from "#layouts/AusweisLayout.astro";
|
||||||
import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent2.svelte";
|
import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -5,11 +5,11 @@
|
|||||||
|
|
||||||
|
|
||||||
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
|
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
|
||||||
.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
|
.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] md:[font-size:_clamp(20px,1.25vw,36px)] pl-1;}
|
||||||
|
|
||||||
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
|
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
|
||||||
|
|
||||||
.bereich-box {@apply w-full bg-gray-500/15 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
|
.bereich-box {@apply w-full bg-gray-500/10 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
|
||||||
|
|
||||||
/*background: linear-gradient(
|
/*background: linear-gradient(
|
||||||
135deg,
|
135deg,
|
||||||
|
|||||||
Reference in New Issue
Block a user