Files
online-energieausweis/src/components/Ausweis/GebaeudeVolumen.svelte
Moritz Utcke 074ee8b463 Bugfixes
2025-04-05 22:35:08 -03:00

717 lines
20 KiB
Svelte

<script lang="ts">
import HelpLabel from "#components/labels/HelpLabel.svelte";
import Inputlabel from "#components/labels/InputLabel.svelte";
export let ausweis;
const arrayRange = (start: number, stop: number, step: number) =>
Array.from(
{ length: (stop - start) / step + 1 },
(value, index) => start + index * step
);
</script>
<div
id="superBereich2"
class="grid w-full items-start
grid-cols-1 gap-x-4 gap-y-4
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
"
>
<div class="bereich-box col-span-2">
<div
class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4 justify-between justify-items-center items-center"
>
<div class="ring-1 ring-black/15 bg-white rounded-md">
<img src="/images/form-r.svg" alt="rechteck" />
</div>
<div class="ring-1 ring-black/15 bg-white rounded-md">
<img src="/images/form-l.svg" alt="l-form" />
</div>
<div class="ring-1 ring-black/15 bg-white rounded-md">
<img src="/images/form-t.svg" alt="t-form" />
</div>
<div class="ring-1 ring-black/15 bg-white rounded-md">
<img src="/images/form-u.svg" alt="u-form" />
</div>
</div>
</div>
<div class="col-span-2 xl:col-span-1">
<div
id="Berechnungshilfe2"
class="bereich-box grid w-full
grid-cols-2 gap-x-4 gap-y-8
sm:grid-cols-3 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>
<div class="input-standard col-span-2 sm:col-span-3">
<h4
class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm;"
>
Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl
und -höhe
</h4>
<div class="help-label">
<HelpLabel
>Hier wählen Sie Ihren passenden Grundriss aus, und
tragen die entsprechenden Maße unten ein. Bitte
berücksichtigen Sie nur den Grundriss der zum beheizten
Gebäude gehört. Garagen oder Schuppen die an das Haus
herangebaut sind aber keine Verbindung zum Wohnhaus
haben bitte weglassen.</HelpLabel
>
</div>
</div>
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="A"></Inputlabel>
<input
name="masse_a"
type="number"
bind:value={ausweis.masse_a}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-2 md:order-2 xl:order-2">
<Inputlabel title="B"></Inputlabel>
<input
name="masse_b"
type="number"
bind:value={ausweis.masse_b}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-3 md:order-3 xl:order-3">
<Inputlabel title="C"></Inputlabel>
<input
name="masse_c"
type="number"
bind:value={ausweis.masse_c}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-4 md:order-4 xl:order-4">
<Inputlabel title="D"></Inputlabel>
<input
name="masse_d"
type="number"
bind:value={ausweis.masse_d}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-5 md:order-5 xl:order-5">
<Inputlabel title="E"></Inputlabel>
<input
name="masse_e"
type="number"
bind:value={ausweis.masse_e}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="F"></Inputlabel>
<input
name="masse_f"
type="number"
bind:value={ausweis.masse_f}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
</div>
<div
id="Berechnungshilfe1"
class="bereich-box grid w-full mt-6
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
"
>
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Anzahl Vollgeschosse *"></Inputlabel>
<input
name="anzahl_vollgeschosse"
bind:value={ausweis.anzahl_vollgeschosse}
type="number"
required
/>
<div class="help-label">
<HelpLabel
>Bitte geben Sie hier die Anzahl der Vollgeschosse an.
Keller und Dachgeschoss mit Schrägen zählen nicht dazu.</HelpLabel
>
</div>
</div>
<div class="input-standard order-2 md:order-2 xl:order-2">
<Inputlabel title="Geschosshöhe *"></Inputlabel>
<select
name="geschosshoehe"
bind:value={ausweis.geschosshoehe}
required
>
<option>Bitte auswählen</option>
{#each arrayRange(2.1, 4.5, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option>
{/each}
</select>
<div class="help-label">
<HelpLabel
>Bitte geben Sie hier die Geschosshöhe (lichte Raumhöhe
+ Deckenstärke) des Gebäudes ein. Bei unterschiedlichen
Geschosshöhen bilden Sie einen Mittelwert.</HelpLabel
>
</div>
</div>
<div class="input-standard order-3 md:order-3 xl:order-3">
<Inputlabel title="Gaubenanzahl"></Inputlabel>
<input
name="anzahl_gauben"
bind:value={ausweis.anzahl_gauben}
type="number"
/>
<div class="help-label">
<HelpLabel
>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier die
Anzahl ein.</HelpLabel
>
</div>
</div>
<div class="input-standard order-4 md:order-4 xl:order-4">
<Inputlabel title="Breite aller Gauben in m"></Inputlabel>
<select name="breite_gauben" bind:value={ausweis.breite_gauben}>
<option>Bitte auswählen</option>
{#each arrayRange(0.5, 10, 0.1) as step}
<option value={step}>{step.toFixed(2)} m</option>
{/each}
</select>
<div class="help-label">
<HelpLabel
>Bitte geben Sie hier die Gesamtbreite aller Gauben in m
ein.</HelpLabel
>
</div>
</div>
</div>
</div>
<div class="bereich-box col-span-2 xl:col-span-1">
<div
id="Berechnungstabelle"
class="grid w-full
grid-cols-2 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8 xl:col-span-1
"
>
<div class="input-standard col-span-2">
<h4
class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm"
>
Außenflächen, U-Werte und Volumen
</h4>
<div class="help-label">
<HelpLabel
>Die wärmeübertragende Umfassungsflächen sind die
Hüllflächen des beheizten Gebäudes die an die Außenluft
bzw. an unbeheizte Vorbauten grenzen. Wenn Ihnen die
Außenwand-,Dach-,Decken- und Bodenflächen vorliegen
können Sie die Eingabe direkt vornehmen. Hier können Sie
auch das von den Umfassungsflächen eingeschlossene
Volumen des Gebäudes eingeben. Die ermittelten Werte der
Berechnungshilfe können hier präzisiert werden.</HelpLabel
>
</div>
</div>
<div class="input-standard col-span-2">
<Inputlabel title="Tabellenwerte"></Inputlabel>
<div class="input-checkboxen">
<div
class="grid grid-cols-[25px_max-content] items-center justify-items-start"
>
<input
id="tabellenwerte_aendern"
type="checkbox"
bind:checked={ausweis.tabellenwerte_aendern}
name="tabellenwerte_aendern"
/>
<label for="tabellenwerte_aendern"
>Tabellenwerte manuell ändern</label
>
</div>
</div>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Dachfläche in m²"></Inputlabel>
<input
name="dachflaeche"
bind:value={ausweis.dachflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-2 md:order-2 xl:order-2">
<Inputlabel title="U-Wert in W/m²K"></Inputlabel>
<input
name="dach_u_wert"
bind:value={ausweis.dach_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-3 md:order-3 xl:order-3">
<Inputlabel title="Geschoßdecke&nbsp;in&nbsp;m²"></Inputlabel>
<input
name="deckenflaeche"
bind:value={ausweis.deckenflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-4 md:order-4 xl:order-4">
<Inputlabel title="U-Wert in W/m²K"></Inputlabel>
<input
name="decke_u_wert"
bind:value={ausweis.decke_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-5 md:order-5 xl:order-5">
<Inputlabel title="Außenwand in m²"></Inputlabel>
<input
name="aussenwand_flaeche"
bind:value={ausweis.aussenwand_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="U-Wert in W/m²K"></Inputlabel>
<input
name="aussenwand_u_wert"
bind:value={ausweis.aussenwand_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-7 md:order-7 xl:order-7">
<Inputlabel title="Fußboden in m²"></Inputlabel>
<input
name="fussboden_flaeche"
bind:value={ausweis.fussboden_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div class="input-standard order-8 md:order-8 xl:order-8">
<Inputlabel title="U-Wert in W/m²K"></Inputlabel>
<input
name="fussboden_u_wert"
bind:value={ausweis.fussboden_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div
class="input-standard order-9 md:order-9 xl:order-9 col-span-2"
>
<Inputlabel title="eingeschlossenes Gebäudevolumen in m³"
></Inputlabel>
<input
name="volumen"
type="number"
bind:value={ausweis.volumen}
readonly={!ausweis.tabellenwerte_aendern}
/>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
<div
class="input-standard order-10 md:order-10 xl:order-10 col-span-2"
>
<Inputlabel title="Blower-Door-Test erfolgreich durchgeführt:"
></Inputlabel>
<div
class="grid grid-cols-[max-content_max-content] bg-white gap-x-12 p-1 min-h-[38px] ring-1 ring-black/15 rounded-sm"
>
<div
class="grid grid-cols-[25px_1fr] items-center justify-items-start"
>
<input
id="bow-yes"
type="radio"
value={true}
bind:group={ausweis.dicht}
name="dichtheit"
/>
<label for="bow-yes" class="radio-inline">Ja</label>
</div>
<div
class="grid grid-cols-[25px_1fr] items-center justify-items-start"
>
<input
id="bow-no"
type="radio"
value={false}
bind:group={ausweis.dicht}
name="dichtheit"
/>
<label for="bow-no" class="radio-inline">Nein</label>
</div>
</div>
<div class="help-label">
<HelpLabel></HelpLabel>
</div>
</div>
</div>
</div>
</div>
<!--<div class="grid grid-cols-[3fr_2fr] gap-4">
<div class="GRB3 gap-4">
<HelpLabel
title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
>Hier wählen Sie Ihren passenden Grundriss aus, und tragen
die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
nur den Grundriss der zum beheizten Gebäude gehört. Garagen
oder Schuppen die an das Haus herangebaut sind aber keine
Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
>
<div class="grid grid-cols-4 gap-4">
<img src="/images/r.png" alt="rechteck" />
<img src="/images/l.png" alt="l-form" />
<img src="/images/t.png" alt="t-form" />
<img src="/images/u.png" alt="u-form" />
</div>
<div class="grid grid-cols-6 gap-4">
<div>
<HelpLabel title="A"
>Bitte Eingabe in m. Punkt statt Komma verwenden
z.B.: 10.40 (Eingabebeispiel)</HelpLabel
>
<input
name="masse_a"
type="number"
bind:value={ausweis.masse_a}
/>
</div>
<div>
<Label>B</Label>
<input
name="masse_b"
type="number"
bind:value={ausweis.masse_b}
/>
</div>
<div>
<Label>C</Label>
<input
name="masse_c"
type="number"
bind:value={ausweis.masse_c}
/>
</div>
<div>
<Label>D</Label>
<input
name="masse_d"
type="number"
bind:value={ausweis.masse_d}
/>
</div>
<div>
<Label>E</Label>
<input
name="masse_e"
type="number"
bind:value={ausweis.masse_e}
/>
</div>
<div>
<Label>F</Label>
<input
name="masse_f"
type="number"
bind:value={ausweis.masse_f}
/>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<Label>Fensterfläche Südost bis Südwest in m²</Label>
<input
name="fensterflaeche_so_sw"
bind:value={ausweis.fensterflaeche_so_sw}
type="number"
/>
</div>
<div>
<Label>Fensterfläche Nordwest bis Nordost in m²</Label>
<input
name="fensterflaeche_nw_no"
bind:value={ausweis.fensterflaeche_nw_no}
type="number"
/>
</div>
<div>
<Label>Außenwandfläche an unbeheizten Vorbau</Label>
<input
name="aussenwandflaeche_unbeheizt"
bind:value={ausweis.aussenwandflaeche_unbeheizt}
type="number"
/>
</div>
</div>
</div>
<div class="GRB3">
<HelpLabel title="Außenflächen, U-Werte und Volumen"
>Die wärmeübertragende Umfassungsflächen sind die
Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
an unbeheizte Vorbauten grenzen. Wenn Ihnen die
Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
Sie die Eingabe direkt vornehmen. Hier können Sie auch das
von den Umfassungsflächen eingeschlossene Volumen des
Gebäudes eingeben. Die ermittelten Werte der
Berechnungshilfe können hier präzisiert werden.</HelpLabel
>
<div class="flex flex-row items-center gap-4">
<Label>Tabellenwerte manuell ändern</Label>
<input
type="checkbox"
bind:checked={ausweis.tabellenwerte_aendern}
name="tabellenwerte_aendern"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Dachfläche in m²</Label>
<input
name="dachflaeche"
bind:value={ausweis.dachflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="dach_u_wert"
bind:value={ausweis.dach_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Geschoßdecke in m²</Label>
<input
name="deckenflaeche"
bind:value={ausweis.deckenflaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="decke_u_wert"
bind:value={ausweis.decke_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Außenwand in m²</Label>
<input
name="aussenwand_flaeche"
bind:value={ausweis.aussenwand_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="aussenwand_u_wert"
bind:value={ausweis.aussenwand_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<Label>Fußboden in m²</Label>
<input
name="fussboden_flaeche"
bind:value={ausweis.fussboden_flaeche}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
<div>
<Label>U-Wert in W/m²K</Label>
<input
name="fussboden_u_wert"
bind:value={ausweis.fussboden_u_wert}
readonly={!ausweis.tabellenwerte_aendern}
type="number"
/>
</div>
</div>
<div>
<Label
>Das von den Flächen eingeschlossene Gebäudevolumen in
m³</Label
>
<input
name="volumen"
type="number"
bind:value={ausweis.volumen}
readonly={!ausweis.tabellenwerte_aendern}
/>
</div>
<div>
<Label>Blower-Door-Test erfolgreich durchgeführt</Label>
<div class="flex flex-row gap-4">
<label class="radio-inline"
><input
type="radio"
value={true}
bind:group={ausweis.dicht}
name="dichtheit"
/>Ja</label
>
<label class="radio-inline"
><input
type="radio"
value={false}
bind:group={ausweis.dicht}
name="dichtheit"
/>Nein</label
>
</div>
</div>
</div>
</div>
-->