Array von Optionen zu Component umgewandelt

This commit is contained in:
Moritz Utcke
2024-12-19 10:28:29 +07:00
parent ae592aa981
commit c682de182b
3 changed files with 104 additions and 105 deletions

View File

@@ -14,32 +14,15 @@
GebaeudeClient, GebaeudeClient,
UploadedGebaeudeBild, UploadedGebaeudeBild,
VerbrauchsausweisWohnenClient, VerbrauchsausweisWohnenClient,
} from "./types"; } from "./types.js";
import { boolean } from "astro:schema"; import { boolean } from "astro:schema";
import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
export let gebaeude: GebaeudeClient; export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient; export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let ausweis: VerbrauchsausweisWohnenClient export let ausweis: VerbrauchsausweisWohnenClient
export let images: UploadedGebaeudeBild[]; export let images: UploadedGebaeudeBild[];
var sanierungsoptionen =[
{"id":1,"name":"zentralheizung","help":"helptext","value":"ZH","bindchecked":gebaeude_aufnahme_allgemein.zentralheizung,"label":"Zentral/Etage"},
{"id":2,"name":"einzelofen","help":"helptext","value":"EO","bindchecked":gebaeude_aufnahme_allgemein.einzelofen,"label":"Einzelofen"},
{"id":3,"name":"durchlauf_erhitzer","help":"helptext","value":"DH","bindchecked":gebaeude_aufnahme_allgemein.durchlauf_erhitzer,"label":"Durchlauferhitzer"},
{"id":4,"name":"standard_kessel","help":"helptext","value":"SK","bindchecked":gebaeude_aufnahme_allgemein.standard_kessel,"label":"Standardkessel"},
{"id":5,"name":"solarsystem_warmwasser","help":"helptext","value":"SSWW","bindchecked":gebaeude_aufnahme_allgemein.solarsystem_warmwasser,"label":"Solarsystem für Warmwasser"},
{"id":6,"name":"waermepumpe","help":"helptext","value":"WP","bindchecked":gebaeude_aufnahme_allgemein.waermepumpe,"label":"Wärmepumpe"},
{"id":7,"name":"niedertemperatur_kessel","help":"helptext","value":"NK","bindchecked":gebaeude_aufnahme_allgemein.niedertemperatur_kessel,"label":"Niedertemperaturkessel"},
{"id":8,"name":"brennwert_kessel","help":"helptext","value":"BWK","bindchecked":gebaeude_aufnahme_allgemein.brennwert_kessel,"label":"Brennwertkessel"},
{"id":9,"name":"warmwasser_rohre_gedaemmt","help":"helptext","value":"BWK","bindchecked":gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt,"label":"Warmwasserrohre gedämmt"},
{"id":10,"name":"heizungsrohre_gedaemmt","help":"helptext","value":"HRGD","bindchecked":gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt,"label":"Heizungsrohre gedämmt"},
{"id":11,"name":"zirkulation","help":"helptext","value":"ZK","bindchecked":gebaeude_aufnahme_allgemein.zirkulation,"label":"Zirkulation"},
{"id":12,"name":"raum_temperatur_regler","help":"helptext","value":"RTR","bindchecked":gebaeude_aufnahme_allgemein.raum_temperatur_regler,"label":"Raumtemperaturregler"}
];
</script> </script>
<div id="sanierungszustand" class="bereich-box grid <div id="sanierungszustand" class="bereich-box grid
@@ -53,32 +36,18 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
"> ">
{#each sanierungsoptionen as item} <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>
<div class="input-standard order-{item.id} md:order-{item.id} xl:order-{item.id}"> <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>
<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" > <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>
<input <SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="helptext" value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
id="{item.name}" <SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="helptext" value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
type="checkbox" <SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="helptext" value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
class="checkbox" <SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="helptext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
name="{item.name}" <SanierungsOption label="Zirkulation" name="zirkulation" help="helptext" value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
bind:checked={item.bindchecked} <SanierungsOption label="Raumtemperaturregler" name="raum_temperatur_regler" help="helptext" value="RTR" bind:checked={gebaeude_aufnahme_allgemein.raum_temperatur_regler}></SanierungsOption>
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}
</div> </div>
<HeizungImage bind:images bind:ausweis bind:gebaeude /> <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

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