655 lines
18 KiB
Svelte
655 lines
18 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-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="bereich-box col-span-2">
|
|
<div class="w-full grid grid-cols-4 gap-4 justify-between justify-items-center items-center">
|
|
<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>
|
|
|
|
<div>
|
|
|
|
<div
|
|
id="Berechnungshilfe2"
|
|
class="bereich-box grid w-full
|
|
grid-cols-1 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 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
|
|
id="Berechnungstabelle"
|
|
class="bereich-box grid w-full
|
|
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="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 in 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">
|
|
<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">
|
|
<Inputlabel title="Blower-Door-Test erfolgreich durchgeführt:"></Inputlabel>
|
|
|
|
|
|
<div class="grid grid-cols-[max-content_max-content] 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 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>
|
|
|
|
--> |