FELDER DESIGN
This commit is contained in:
Robert Jagtiani
@@ -1,6 +1,11 @@
|
||||
<script lang="ts">
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
|
||||
import BereichLabel from "#labels/BereichLabel.svelte";
|
||||
import HelpLabel from "#labels/HelpLabel.svelte";
|
||||
import Inputlabel from "#labels/InputLabel.svelte";
|
||||
|
||||
//import Label from "#components/Label.svelte";
|
||||
|
||||
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
|
||||
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
|
||||
import TagInput from "../TagInput.svelte";
|
||||
@@ -17,168 +22,213 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="w-full grid
|
||||
grid-cols-bereich-A gap-x-4
|
||||
xl:grid-cols-bereich-A-xl xl:gap-x-6
|
||||
2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
|
||||
|
||||
|
||||
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
|
||||
|
||||
|
||||
<div class="bereich-box grid
|
||||
grid-cols-1 gap-x-4 gap-y-8
|
||||
|
||||
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8
|
||||
xl:grid-cols-3 xl:gap-x-4 xl:gap-y-8
|
||||
">
|
||||
|
||||
<!-- Anlass für Energieausweis -->
|
||||
<div class="">
|
||||
<Label>* Anlass für den Energieausweis</Label>
|
||||
<div class="grid gap-x-6 mb-8
|
||||
grid-cols-[minmax(min-content,_130px)]
|
||||
xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
|
||||
sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
|
||||
xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0
|
||||
2xl:grid-cols-[1fr_1fr_1fr]
|
||||
">
|
||||
|
||||
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
|
||||
<label class="radio-inline">
|
||||
<input
|
||||
name="ausstellgrund"
|
||||
type="radio"
|
||||
value={ausstellgrund}
|
||||
bind:group={ausweis.ausstellgrund}
|
||||
/>{name}</label
|
||||
>
|
||||
{/each}
|
||||
<div class="input-standard order-1 md:order-1 xl:order-1">
|
||||
<Inputlabel title="Anlass *"></Inputlabel>
|
||||
|
||||
<select id="ausstellgrund"
|
||||
class="rounded-e-none"
|
||||
name="ausstellgrund"
|
||||
placeholder="Anlass"
|
||||
required>
|
||||
|
||||
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
|
||||
<option value={ausstellgrund}>{name}</option>
|
||||
{/each}
|
||||
|
||||
</select>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Gebäudetyp -->
|
||||
|
||||
<div class="input-standard order-2 md:order-3 xl:order-2">
|
||||
<Inputlabel title="Gebäudetyp *"></Inputlabel>
|
||||
|
||||
<select
|
||||
name="gebaeudetyp"
|
||||
data-test="gebaeudetyp"
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
|
||||
|
||||
>
|
||||
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
|
||||
<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
|
||||
<option value="Doppelhaushälfte">Doppelhaushälfte</option>
|
||||
<option value="Reihenendhaus">Reihenendhaus</option>
|
||||
<option value="Reihenmittelhaus">Reihenmittelhaus</option>
|
||||
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
||||
<option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
|
||||
<option value="Atrium-Bungalow">Atrium-Bungalow</option>
|
||||
<option value="Winkelbungalow">Winkelbungalow</option>
|
||||
|
||||
</select>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte wählen Sie hier den Gebäudetyp aus.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Anzahl der Wohnungen -->
|
||||
|
||||
<div class="input-standard order-3 md:order-5 xl:order-3">
|
||||
<Inputlabel title="Anzahl Wohnungen *"></Inputlabel>
|
||||
|
||||
<input id="einheiten"
|
||||
class="rounded-e-none"
|
||||
name="einheiten"
|
||||
type="number"
|
||||
required
|
||||
autocomplete="off"
|
||||
data-msg="Pflichtfeld"
|
||||
maxlength="3"
|
||||
bind:value={gebaeude_aufnahme_allgemein.einheiten}
|
||||
|
||||
>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
|
||||
Gebäude befinden.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Sanierungsstatus -->
|
||||
|
||||
<div class="input-standard order-4 md:order-2 xl:order-4">
|
||||
<Inputlabel title="Sanierungsstatus *"></Inputlabel>
|
||||
|
||||
<select
|
||||
name="saniert"
|
||||
class=""
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.saniert}
|
||||
>
|
||||
|
||||
<option disabled selected value={false}>Bitte auswählen</option>
|
||||
<option value={true}>saniert</option>
|
||||
<option value={false}>unsaniert</option>
|
||||
|
||||
</select>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
|
||||
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
|
||||
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Baujahr -->
|
||||
|
||||
<div class="input-standard order-5 md:order-4 xl:order-5">
|
||||
<Inputlabel title="Baujahr *"></Inputlabel>
|
||||
|
||||
<TagInput
|
||||
name="baujahr_gebaeude"
|
||||
type="number"
|
||||
onlyUnique={true}
|
||||
minChars={4}
|
||||
onFocusIn={() => {
|
||||
addNotification({
|
||||
message: "Info",
|
||||
subtext:
|
||||
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
|
||||
dismissable: true,
|
||||
uid: "GEBAEUDE_BAUJAHR",
|
||||
timeout: 0,
|
||||
type: "info",
|
||||
});
|
||||
}}
|
||||
onFocusOut={() => {
|
||||
deleteNotification("GEBAEUDE_BAUJAHR");
|
||||
}}
|
||||
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
|
||||
? "linked"
|
||||
: ""}
|
||||
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
|
||||
/>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
|
||||
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
|
||||
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
|
||||
-saniert- angeben.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-4
|
||||
md:grid-cols-2 md:gap-x-6
|
||||
2xl:grid-cols-4 2xl:gap-x-6
|
||||
">
|
||||
|
||||
<!-- Baujahr Heizung -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Baujahr Heizung">
|
||||
|
||||
<div class="input-standard order-6 md:order-6 xl:order-6">
|
||||
<Inputlabel title="Baujahr Heizung *"></Inputlabel>
|
||||
|
||||
<TagInput
|
||||
name="baujahr_heizung"
|
||||
type="number"
|
||||
onlyUnique={true}
|
||||
minChars={4}
|
||||
onFocusIn={() => {
|
||||
addNotification({
|
||||
message: "Info",
|
||||
subtext:
|
||||
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
|
||||
dismissable: true,
|
||||
uid: "HEIZUNG_BAUJAHR",
|
||||
timeout: 0,
|
||||
type: "info",
|
||||
});
|
||||
}}
|
||||
onFocusOut={() => {
|
||||
deleteNotification("HEIZUNG_BAUJAHR");
|
||||
}}
|
||||
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
|
||||
? "linked"
|
||||
: ""}
|
||||
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
|
||||
/>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
|
||||
unterschiedliche Baujahre vorliegen, dann geben Sie einen
|
||||
Zeitbereich ein <br />z.B. 1994-2001.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<TagInput
|
||||
name="baujahr_heizung"
|
||||
type="number"
|
||||
onlyUnique={true}
|
||||
minChars={4}
|
||||
onFocusIn={() => {
|
||||
addNotification({
|
||||
message: "Info",
|
||||
subtext:
|
||||
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
|
||||
dismissable: true,
|
||||
uid: "HEIZUNG_BAUJAHR",
|
||||
timeout: 0,
|
||||
type: "info",
|
||||
});
|
||||
}}
|
||||
onFocusOut={() => {
|
||||
deleteNotification("HEIZUNG_BAUJAHR");
|
||||
}}
|
||||
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
|
||||
? "linked"
|
||||
: ""}
|
||||
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Baujahr -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Baujahr Gebäude">
|
||||
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
|
||||
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
|
||||
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
|
||||
-saniert- angeben.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<TagInput
|
||||
name="baujahr_gebaeude"
|
||||
type="number"
|
||||
onlyUnique={true}
|
||||
minChars={4}
|
||||
onFocusIn={() => {
|
||||
addNotification({
|
||||
message: "Info",
|
||||
subtext:
|
||||
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
|
||||
dismissable: true,
|
||||
uid: "GEBAEUDE_BAUJAHR",
|
||||
timeout: 0,
|
||||
type: "info",
|
||||
});
|
||||
}}
|
||||
onFocusOut={() => {
|
||||
deleteNotification("GEBAEUDE_BAUJAHR");
|
||||
}}
|
||||
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
|
||||
? "linked"
|
||||
: ""}
|
||||
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Anzahl der Wohnungen -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Anzahl Wohnungen">
|
||||
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
|
||||
Gebäude befinden.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="einheiten"
|
||||
type="number"
|
||||
required
|
||||
autocomplete="off"
|
||||
data-msg="Pflichtfeld"
|
||||
bind:value={gebaeude_aufnahme_allgemein.einheiten}
|
||||
maxlength="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sanierungsstatus -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Sanierungsstatus">
|
||||
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
|
||||
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
|
||||
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="saniert"
|
||||
class=""
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.saniert}
|
||||
>
|
||||
<option disabled selected value={false}>Bitte auswählen</option>
|
||||
<option value={true}>saniert</option>
|
||||
<option value={false}>unsaniert</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
input[type="radio"] {
|
||||
@apply w-5 h-5 accent-secondary
|
||||
}
|
||||
|
||||
.radio-inline {
|
||||
@apply flex items-center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user