372 lines
9.7 KiB
Svelte
372 lines
9.7 KiB
Svelte
<script lang="ts">
|
|
import HelpLabel from "#components/labels/HelpLabel.svelte";
|
|
import Inputlabel from "#components/labels/InputLabel.svelte";
|
|
|
|
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,
|
|
};
|
|
|
|
let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
|
|
|
|
export let ausweis;
|
|
|
|
</script>
|
|
|
|
|
|
<div id="fensterflaechen" 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-4 xl:gap-x-8 xl:gap-y-8
|
|
"
|
|
>
|
|
|
|
<div class="input-standard order-1 md:order-1 xl:order-1">
|
|
<Inputlabel title="Fensterfläche 1 in m² *"></Inputlabel>
|
|
|
|
<input
|
|
name="fenster_flaeche_1"
|
|
bind:value={ausweis.fenster_flaeche_1}
|
|
type="number"
|
|
required
|
|
placeholder="0"
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-2 md:order-2 xl:order-2">
|
|
<Inputlabel title="Art der Fenster *"></Inputlabel>
|
|
|
|
<select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
|
|
<option>bitte auswählen</option>
|
|
{#each Object.entries(fensterArten) as [name, value]}
|
|
<option {value}>{name}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-3 md:order-3 xl:order-3">
|
|
<Inputlabel title="Fensterfläche 2 in m² *"></Inputlabel>
|
|
|
|
<input
|
|
name="fenster_flaeche_2"
|
|
type="number"
|
|
bind:value={ausweis.fenster_flaeche_2}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
|
|
die älter sind oder einen anderen U-Wert besitzen.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-4 md:order-4 xl:order-4">
|
|
<Inputlabel title="Art der Fenster *"></Inputlabel>
|
|
|
|
<select
|
|
name="fenster_art_2"
|
|
bind:value={ausweis.fenster_art_2}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each Object.entries(fensterArten) as [name, value]}
|
|
<option {value}>{name}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-5 md:order-5 xl:order-5">
|
|
<Inputlabel title="Dachfenster in m² *"></Inputlabel>
|
|
|
|
<input
|
|
name="dachfenster_flaeche"
|
|
type="number"
|
|
bind:value={ausweis.dachfenster_flaeche}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-6 md:order-6 xl:order-6">
|
|
<Inputlabel title="Art der Dachfenster *"></Inputlabel>
|
|
|
|
<select
|
|
name="dachfenster_art"
|
|
bind:value={ausweis.dachfenster_art}
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each Object.entries(fensterArten) as [name, value]}
|
|
<option {value}>{name}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-7 md:order-7 xl:order-7">
|
|
<Inputlabel title="Haustür in m² *"></Inputlabel>
|
|
|
|
<input
|
|
name="haustuer_flaeche"
|
|
type="number"
|
|
bind:value={ausweis.haustuer_flaeche}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-8 md:order-8 xl:order-8">
|
|
<Inputlabel title="Art der Tür *"></Inputlabel>
|
|
|
|
<select
|
|
name="haustuer_art"
|
|
bind:value={ausweis.haustuer_art}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
<option value={1.8}>Standard (U-Wert 1,8)</option>
|
|
<option value={5}>Ganz alte Tür (U-Wert 5,0)</option>
|
|
<option value={2.7}>U-Wert 2,7</option>
|
|
<option value={3}>U-Wert 3,0</option>
|
|
<option value={4.3}>U-Wert 4,3</option>
|
|
<option value={1.1}>U-Wert 1,1</option>
|
|
<option value={0.9}>U-Wert 0,9</option>
|
|
<option value={0.85}>U-Wert 0,85</option>
|
|
<option value={0.7}>Passivhaustür (U-Wert 0,7)</option>
|
|
<option value={0.6}>Passivhaustür (U-Wert 0,6)</option>
|
|
<option value={2.3}>U-Wert 2,3</option>
|
|
<option value={1.6}>U-Wert 1,6</option>
|
|
<option value={1.7}>U-Wert 1,7</option>
|
|
<option value={1.3}>U-Wert 1,3</option>
|
|
<option value={1}>U-Wert 1,0</option>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="dachflaechen" class="mt-6 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-4 xl:gap-x-8 xl:gap-y-8
|
|
"
|
|
>
|
|
|
|
|
|
|
|
|
|
<div class="input-standard order-1 md:order-1 xl:order-1">
|
|
<Inputlabel title="Bauart Dachfläche *"></Inputlabel>
|
|
|
|
<select
|
|
name="dach_bauart"
|
|
bind:value={ausweis.dach_bauart}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
<option value="Massive Konstruktion"
|
|
>Massive Konstruktion (insbesondere Flachdächer)</option
|
|
>
|
|
<option value="Holzkonstruktion"
|
|
>Holzkonstruktion (insbesondere Steildächer)</option
|
|
>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-2 md:order-2 xl:order-2">
|
|
<Inputlabel title="nachträgliche Dämmung"></Inputlabel>
|
|
|
|
<select
|
|
name="dach_daemmung"
|
|
bind:value={ausweis.dach_daemmung}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each daemmungsBreiten as breite}
|
|
<option value={breite}>{breite * 100} cm</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="input-standard order-3 md:order-3 xl:order-3">
|
|
<Inputlabel title="Bauart Geschossdecke *"></Inputlabel>
|
|
|
|
<select
|
|
name="decke_bauart"
|
|
bind:value={ausweis.decke_bauart}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
<option value="Massive Konstruktion"
|
|
>Massive Konstruktion (insbesondere Flachdächer)</option
|
|
>
|
|
<option value="Holzkonstruktion"
|
|
>Holzkonstruktion (insbesondere Steildächer)</option
|
|
>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-4 md:order-4 xl:order-4">
|
|
<Inputlabel title="nachträgliche Dämmung"></Inputlabel>
|
|
|
|
<select
|
|
name="decke_daemmung"
|
|
bind:value={ausweis.decke_daemmung}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each daemmungsBreiten as breite}
|
|
<option value={breite}>{breite * 100} cm</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="input-standard order-5 md:order-5 xl:order-5">
|
|
<Inputlabel title="Bauart Außenwand *"></Inputlabel>
|
|
|
|
<select
|
|
name="aussenwand_bauart"
|
|
bind:value={ausweis.aussenwand_bauart}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
<option value="Massive Konstruktion"
|
|
>Massive Konstruktion (insbesondere Flachdächer)</option
|
|
>
|
|
<option value="Holzkonstruktion"
|
|
>Holzkonstruktion (insbesondere Steildächer)</option
|
|
>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-6 md:order-6 xl:order-6">
|
|
<Inputlabel title="nachträgliche Dämmung"></Inputlabel>
|
|
|
|
<select
|
|
name="aussenwand_daemmung"
|
|
bind:value={ausweis.aussenwand_daemmung}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each daemmungsBreiten as breite}
|
|
<option value={breite}>{breite * 100} cm</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="input-standard order-7 md:order-7 xl:order-7">
|
|
<Inputlabel title="Bauart Fußboden *"></Inputlabel>
|
|
|
|
<select
|
|
name="boden_bauart"
|
|
bind:value={ausweis.boden_bauart}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
<option value="Massive Konstruktion"
|
|
>Massive Konstruktion (insbesondere Flachdächer)</option
|
|
>
|
|
<option value="Holzkonstruktion"
|
|
>Holzkonstruktion (insbesondere Steildächer)</option
|
|
>
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-8 md:order-8 xl:order-8">
|
|
<Inputlabel title="nachträgliche Dämmung"></Inputlabel>
|
|
|
|
<select
|
|
name="boden_daemmung"
|
|
bind:value={ausweis.boden_daemmung}
|
|
required
|
|
>
|
|
<option>bitte auswählen</option>
|
|
{#each daemmungsBreiten as breite}
|
|
<option value={breite}>{breite * 100} cm</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |