Merge pull request #236 from IBCornelsen/UMBE

UpDate Component mit Helptext
This commit is contained in:
UMBENOMENA
2024-12-19 16:59:56 +01:00
committed by GitHub
4 changed files with 109 additions and 106 deletions

View File

@@ -14,32 +14,15 @@
GebaeudeClient,
UploadedGebaeudeBild,
VerbrauchsausweisWohnenClient,
} from "./types";
} from "./types.js";
import { boolean } from "astro:schema";
import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let ausweis: VerbrauchsausweisWohnenClient
export let images: UploadedGebaeudeBild[];
var sanierungsoptionen =[
{"id":1,"name":"zentralheizung","help":"Bitte anklicken wenn die Heizwärme <strong>zentral erzeugt</strong> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu.","value":"ZH","bindchecked":gebaeude_aufnahme_allgemein.zentralheizung,"label":"Zentral/Etage"},
{"id":2,"name":"einzelofen","help":"Bei <strong>dezentraler Erzeugung</strong> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu.","value":"EO","bindchecked":gebaeude_aufnahme_allgemein.einzelofen,"label":"Einzelofen"},
{"id":3,"name":"durchlauf_erhitzer","help":"Wenn <strong>dezentrale</strong> elektrische <strong>Warmwassererzeugung</strong> vorhanden ist.","value":"DH","bindchecked":gebaeude_aufnahme_allgemein.durchlauf_erhitzer,"label":"Durchlauferhitzer (elektrisch)"},
{"id":4,"name":"standard_kessel","help":"Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel.","value":"SK","bindchecked":gebaeude_aufnahme_allgemein.standard_kessel,"label":"Standardkessel"},
{"id":5,"name":"solarsystem_warmwasser","help":"Solarpanele auf dem Dach zur <strong>alternativen Warmwassererzeugung</strong> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik.","value":"SSWW","bindchecked":gebaeude_aufnahme_allgemein.solarsystem_warmwasser,"label":"Solarsystem für Warmwasser"},
{"id":6,"name":"waermepumpe","help":"Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <strong>Umgebungsluft, dem Erdreich oder Grundwasser</strong> nutzbar macht.","value":"WP","bindchecked":gebaeude_aufnahme_allgemein.waermepumpe,"label":"Wärmepumpe"},
{"id":7,"name":"niedertemperatur_kessel","help":"Heizkessel der mit <strong>niedrigen Vorlauftemperaturen</strong> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt.","value":"NK","bindchecked":gebaeude_aufnahme_allgemein.niedertemperatur_kessel,"label":"Niedertemperaturkessel"},
{"id":8,"name":"brennwert_kessel","help":"Hat einen besonders <strong>hohen Wirkungsgrad</strong> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt.","value":"BWK","bindchecked":gebaeude_aufnahme_allgemein.brennwert_kessel,"label":"Brennwertkessel"},
{"id":9,"name":"warmwasser_rohre_gedaemmt","help":"Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.","value":"BWK","bindchecked":gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt,"label":"Warmwasserrohre gedämmt"},
{"id":10,"name":"heizungsrohre_gedaemmt","help":"Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.","value":"HRGD","bindchecked":gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt,"label":"Heizungsrohre gedämmt"},
{"id":11,"name":"zirkulation","help":"Kreislauf von Heizungs- oder Warmwasser <strong>innerhalb eines Leitungssystems</strong>, um eine gleichmäßige Wärmeverteilung sicherzustellen.","value":"ZK","bindchecked":gebaeude_aufnahme_allgemein.zirkulation,"label":"Zirkulation"},
{"id":12,"name":"photovoltaik","help":"Direkte Umwandlung von Sonnenlicht in <strong>elektrische Energie</strong> mittels Solarzellen, die den photoelektrischen Effekt nutzen.","value":"RTR","bindchecked":gebaeude_aufnahme_allgemein.photovoltaik,"label":"Photovoltaik auf dem Dach"}
];
</script>
<div id="sanierungszustand" class="bereich-box grid
@@ -52,33 +35,18 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
">
{#each sanierungsoptionen as item}
<div class="input-standard order-{item.id} md:order-{item.id} xl:order-{item.id}">
<div class="grid grid-cols-[40px_1fr] items-center justify-items-start h-[38px] ring-1 ring-black/15 bg-white active:bg-green-100" >
<input
id="{item.name}"
type="checkbox"
class="checkbox"
name="{item.name}"
bind:checked={item.bindchecked}
value="{item.value}"
/>
<label class="w-full" for="{item.name}">{item.label}</label>
</div>
<div class="help-label">
<HelpLabel>{@html item.help}</HelpLabel>
</div>
</div>
{/each}
<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="helptext" value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
<SanierungsOption label="Einzelofen" name="einzelofen" help="helptext" value="EO" bind:checked={gebaeude_aufnahme_allgemein.einzelofen}></SanierungsOption>
<SanierungsOption label="Durchlauferhitzer" name="durchlauf_erhitzer" help="helptext" value="DH" bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}></SanierungsOption>
<SanierungsOption label="Standardkessel" name="standard_kessel" help="helptext" value="SK" bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}></SanierungsOption>
<SanierungsOption label="Solarsystem für Warmwasser" name="solarsystem_warmwasser" help="helptext" value="SSWW" bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}></SanierungsOption>
<SanierungsOption label="Wärmepumpe" name="waermepumpe" help="helptext" value="WP" bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}></SanierungsOption>
<SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="helptext" value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
<SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="helptext" value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
<SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="helptext" value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="helptext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
<SanierungsOption label="Zirkulation" name="zirkulation" help="helptext" value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
<SanierungsOption label="Raumtemperaturregler" name="raum_temperatur_regler" help="helptext" value="RTR" bind:checked={gebaeude_aufnahme_allgemein.raum_temperatur_regler}></SanierungsOption>
</div>
<HeizungImage bind:images bind:ausweis bind:gebaeude />

View File

@@ -0,0 +1,31 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
export let checked: boolean | null | undefined;
export let name: string;
export let label: string;
export let help: string;
export let value: string;
</script>
<div
class="input-standard"
>
<div
class="grid grid-cols-[40px_1fr] items-center justify-items-start h-[38px] ring-1 ring-black/15 bg-white active:bg-green-100"
>
<input
id={name}
type="checkbox"
class="checkbox"
{name}
bind:checked={checked}
value={value}
/>
<label class="w-full" for={name}>{label}</label>
</div>
<div class="help-label">
<HelpLabel>{@html help}</HelpLabel>
</div>
</div>

View File

@@ -5,6 +5,11 @@ import Inputlabel from "#labels/InputLabel.svelte";
export let ausweis;
$: {
if (!ausweis.warmwasser_enthalten) {
ausweis.warmwasser_anteil_bekannt = false;
}
}
</script>

View File

@@ -13,7 +13,7 @@
import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
import LueftungundLeerstand from "#components/Ausweis/LueftungundLeerstand.svelte";
//import ZipSearch from "#components/PlzSuche.svelte";
import moment from "moment";
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
@@ -190,75 +190,74 @@
>
</div>
<!-- A Prüfung der Ausweisart -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="collapseBereich">
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<!-- A Prüfung der Ausweisart -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="collapseBereich">
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
<!-- 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>
<div class="collapseBereich">
<GebaeudeDaten
bind:gebaeude_aufnahme_allgemein
/>
</div>
<BereichLabel bereich="B"
>Eingabe&nbsp;der&nbsp;Gebäudeadresse -
Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel
>
<div class="collapseBereich">
<GebaeudeDaten bind:gebaeude_aufnahme_allgemein />
</div>
<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
<BereichLabel bereich="C">Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel>
<div class="collapseBereich">
<Verbrauch
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<BereichLabel bereich="C"
>Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel
>
<div class="collapseBereich">
<Verbrauch
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
<BereichLabel bereich="D">Eingabe&nbsp;Warmwasseranteil und&nbsp;Verwendung&nbsp;von&nbsp;alternativen Energieversorgungssystemen</BereichLabel>
<div class="collapseBereich">
<Warmwasseranteil
bind:ausweis
/>
</div>
<BereichLabel bereich="D"
>Eingabe&nbsp;Warmwasseranteil
und&nbsp;Verwendung&nbsp;von&nbsp;alternativen
Energieversorgungssystemen</BereichLabel
>
<div class="collapseBereich">
<Warmwasseranteil bind:ausweis />
</div>
<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->
<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->
<BereichLabel bereich="E">Eingabe&nbsp;von&nbsp;Gebäudeteil, Lüftung,&nbsp;Kühlung&nbsp;und&nbsp;Leerstand</BereichLabel>
<div class="collapseBereich">
<LueftungundLeerstand
bind:gebaeude_aufnahme_allgemein
/>
</div>
<BereichLabel bereich="E"
>Eingabe&nbsp;von&nbsp;Gebäudeteil,
Lüftung,&nbsp;Kühlung&nbsp;und&nbsp;Leerstand</BereichLabel
>
<div class="collapseBereich">
<LueftungundLeerstand bind:gebaeude_aufnahme_allgemein />
</div>
<!-- F Angaben zum Sanierungszustand des Gebäudes -->
<BereichLabel bereich="F">Angaben zum Sanierungszustand des Gebäudes</BereichLabel>
<div class="collapseBereich">
<BilderZusatzsysteme
bind:images
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
</div>
<!-- F Angaben zum Sanierungszustand des Gebäudes -->
<BereichLabel bereich="F"
>Angaben zum Sanierungszustand des Gebäudes</BereichLabel
>
<div class="collapseBereich">
<BilderZusatzsysteme
bind:images
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
</div>
</form>
<style lang="scss">