-
This commit is contained in:
Robert Jagtiani
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
|
||||
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
|
||||
import TagInput from "../TagInput.svelte";
|
||||
@@ -16,142 +17,165 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Anlass für Energieausweis -->
|
||||
<div class="flex flex-col">
|
||||
<span>Anlass für Energieausweis * </span>
|
||||
<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
|
||||
<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
|
||||
">
|
||||
|
||||
<!-- 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"
|
||||
class="radio radio-secondary"
|
||||
value={ausstellgrund}
|
||||
bind:group={ausweis.ausstellgrund}
|
||||
/>{name}</label
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<label class="radio-inline">
|
||||
<input
|
||||
name="ausstellgrund"
|
||||
type="radio"
|
||||
value={ausstellgrund}
|
||||
bind:group={ausweis.ausstellgrund}
|
||||
/>{name}</label
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Baujahr Heizung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Baujahr Heizung *">
|
||||
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>
|
||||
<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 -->
|
||||
<div class="form-group col-md-2">
|
||||
<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>
|
||||
<!-- Baujahr Heizung -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Baujahr Heizung">
|
||||
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>
|
||||
|
||||
<!-- Anzahl der Wohnungen -->
|
||||
<div class="form-group col-md-2">
|
||||
<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>
|
||||
|
||||
<!-- Dachgeschoss -->
|
||||
<div class="form-group col-md-2">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<style>
|
||||
<!-- 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>
|
||||
|
||||
|
||||
input[type="radio"] {
|
||||
@apply w-5 h-5 rounded-full;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
input[type="radio"] {
|
||||
@apply w-5 h-5 accent-secondary
|
||||
}
|
||||
|
||||
.radio-inline {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button type="button" class="button" on:click={() => (showHelp = !showHelp)}
|
||||
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
|
||||
>Hilfe anfordern</button
|
||||
>
|
||||
|
||||
|
||||
@@ -64,25 +64,158 @@
|
||||
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
|
||||
<div>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox w-[20px] h-[20px] self-center -mt-1"
|
||||
name="zusaetzliche_heizquelle"
|
||||
bind:checked={ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
|
||||
<div class="w-[150px]">
|
||||
<HelpLabel title="zusätzliche Heizquelle">
|
||||
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
|
||||
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
|
||||
Verbrauchszeiträume wie bei der primären Heizung verwendet
|
||||
werden.
|
||||
</HelpLabel>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
name="zusaetzliche_heizquelle"
|
||||
bind:checked={ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input class="hidden xl:invisible xl:block"/>
|
||||
<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
|
||||
<div></div>
|
||||
<span>Zeitraum:</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HelpLabel title="Brennstoff *">
|
||||
<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<span class="">von</span>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_monat"
|
||||
class="rounded-tr-none rounded-br-none w-full m-0"
|
||||
bind:value={month}
|
||||
required
|
||||
>
|
||||
<option>Monat</option>
|
||||
{#if year !== null}
|
||||
{#each availableDates.filter(date => date.year == year) as date}
|
||||
<option value={date.month}>{monthNames[date.month]}</option>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.month);
|
||||
return a;
|
||||
}, new Set())) as month}
|
||||
<option value={month}>{monthNames[month]}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_jahr"
|
||||
class="rounded-tl-none rounded-bl-none w-full m-0"
|
||||
bind:value={year}
|
||||
required
|
||||
>
|
||||
<option>Jahr</option>
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.year);
|
||||
return a;
|
||||
}, new Set())) as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
||||
<span class="">bis</span>
|
||||
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="invisible">
|
||||
<span>leer</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<div></div>
|
||||
|
||||
<span class="justify-self-center">von</span>
|
||||
|
||||
<input
|
||||
class="klima text-right"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
<span class="justify-self-center">bis</span>
|
||||
|
||||
<input
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="invisible">
|
||||
<span>leer</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<div></div>
|
||||
|
||||
<span class="justify-self-center">von</span>
|
||||
|
||||
<input
|
||||
class="klima text-right"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
<span class="justify-self-center">bis</span>
|
||||
|
||||
<input
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("3", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-6">
|
||||
|
||||
<div>
|
||||
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||
|
||||
<div>
|
||||
<HelpLabel title="* Brennstoff">
|
||||
<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
|
||||
entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
|
||||
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
|
||||
@@ -109,23 +242,30 @@
|
||||
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
|
||||
<select
|
||||
class="rounded-e-none"
|
||||
name="brennstoff_1"
|
||||
required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
|
||||
>
|
||||
|
||||
<option disabled>Bitte auswählen</option>
|
||||
{#each Object.keys(fuelMap) as fuel}
|
||||
<option value={fuel}>{fuel}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HelpLabel title="Einheit *">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HelpLabel title="* Einheit">
|
||||
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
|
||||
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
|
||||
vor. Pellets oder Brennholz in SRm (Schüttraummetern).
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
|
||||
<select
|
||||
class="rounded-s-none"
|
||||
name="einheit_1"
|
||||
required
|
||||
bind:value={ausweis.einheit_1}
|
||||
@@ -134,14 +274,60 @@
|
||||
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
|
||||
<option value={unit}>{unit}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_1"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(1) > -1}
|
||||
bind:value={ausweis.verbrauch_1}
|
||||
required
|
||||
/>
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_2"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(2) > -1}
|
||||
bind:value={ausweis.verbrauch_2}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_3"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(3) > -1}
|
||||
bind:value={ausweis.verbrauch_3}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||
|
||||
<div>
|
||||
|
||||
<Label>* Brennstoff</Label>
|
||||
|
||||
<div>
|
||||
<Label>Brennstoff *</Label>
|
||||
<div>
|
||||
<select
|
||||
class="rounded-e-none"
|
||||
name="brennstoff_2"
|
||||
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
@@ -152,13 +338,14 @@
|
||||
<option value={fuel}>{fuel}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<Label>* Einheit</Label>
|
||||
|
||||
<div>
|
||||
<Label>Einheit *</Label>
|
||||
<div>
|
||||
<select
|
||||
class="rounded-s-none"
|
||||
name="einheit_2"
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
bind:value={ausweis.einheit_2}
|
||||
@@ -169,137 +356,13 @@
|
||||
<option value={unit}>{unit}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_monat"
|
||||
class="rounded-tr-none rounded-br-none w-full m-0"
|
||||
bind:value={month}
|
||||
required
|
||||
>
|
||||
<option>auswählen</option>
|
||||
{#if year !== null}
|
||||
{#each availableDates.filter(date => date.year == year) as date}
|
||||
<option value={date.month}>{monthNames[date.month]}</option>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.month);
|
||||
return a;
|
||||
}, new Set())) as month}
|
||||
<option value={month}>{monthNames[month]}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_jahr"
|
||||
class="rounded-tl-none rounded-bl-none w-full m-0"
|
||||
bind:value={year}
|
||||
required
|
||||
>
|
||||
<option>auswählen</option>
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.year);
|
||||
return a;
|
||||
}, new Set())) as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<input
|
||||
class="klima"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<input
|
||||
class="klima"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
<div>
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("3", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_1"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(1) > -1}
|
||||
bind:value={ausweis.verbrauch_1}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_2"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(2) > -1}
|
||||
bind:value={ausweis.verbrauch_2}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_3"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(3) > -1}
|
||||
bind:value={ausweis.verbrauch_3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_4"
|
||||
@@ -308,8 +371,7 @@
|
||||
class:linked={abweichung.indexOf(4) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_5"
|
||||
@@ -318,8 +380,7 @@
|
||||
class:linked={abweichung.indexOf(5) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_6"
|
||||
@@ -328,13 +389,18 @@
|
||||
class:linked={abweichung.indexOf(6) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.column {
|
||||
@apply flex flex-row items-center gap-4;
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
input[type="checkbox"] {@apply accent-secondary}
|
||||
|
||||
</style>
|
||||
|
||||
21
src/components/BereichLabel.svelte
Normal file
21
src/components/BereichLabel.svelte
Normal file
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let bereich: string = "";
|
||||
</script>
|
||||
|
||||
<div class="bereichs-label">
|
||||
|
||||
<label class="text-base-content" for={title}>
|
||||
<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
|
||||
<div class="formular-abschnitt1">{bereich}</div>
|
||||
<div class="formular-abschnitt2"><slot></slot></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
.bereichs-label{ }
|
||||
label{@apply [font-size:_clamp(15px,1vw,36px)]}
|
||||
|
||||
</style>
|
||||
@@ -3,9 +3,10 @@
|
||||
export let tooltip: string = "";
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row justify-between mb-2">
|
||||
<label class="text-base-content">{title}</label>
|
||||
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
|
||||
<div class="grid grid-cols-2 mt-[5px]">
|
||||
|
||||
<label>{title}</label>
|
||||
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
|
||||
<img
|
||||
src="/images/question-mark.png"
|
||||
alt="?"
|
||||
@@ -13,18 +14,22 @@
|
||||
/>
|
||||
<div class="tooltip">
|
||||
<slot></slot>
|
||||
<div id="arrow" class="invisible absolute h-3 w-3 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
|
||||
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="postcss">
|
||||
label {
|
||||
@apply text-base font-medium;
|
||||
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
|
||||
[font-size:_clamp(15px,1rem,10px)]
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tooltip {
|
||||
@apply absolute -right-1 max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
|
||||
@apply absolute -right-1 max-w-[480px] w-max break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
|
||||
}
|
||||
|
||||
.tooltip-opener:hover .tooltip {
|
||||
|
||||
@@ -2,6 +2,13 @@
|
||||
export let name: string = "";
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row justify-between items-center gap-4 mb-2">
|
||||
<label class="text-base font-medium" for={name}><slot></slot></label>
|
||||
<div class="h-[26.5px] mt-[5px]">
|
||||
<label for={name}><slot></slot></label>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
label {
|
||||
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
|
||||
[font-size:_clamp(15px,1rem,10px)]
|
||||
}
|
||||
</style>
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="relative" use:clickOutside={() => {
|
||||
hideZipDropdown = true;
|
||||
}}>
|
||||
<Label name={name}>PLZ *</Label>
|
||||
|
||||
<input
|
||||
name={name}
|
||||
id={name}
|
||||
|
||||
@@ -4,73 +4,64 @@ import Login from "#sidebarCards/card-login.svelte";
|
||||
|
||||
<header>
|
||||
|
||||
<div class="max-w-[1920px] w-full grid relative bg-white
|
||||
<div class="grid relative bg-white items-center gap-4 pt-4 px-0
|
||||
|
||||
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
|
||||
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
|
||||
grid-cols-1
|
||||
sm:grid-cols-1
|
||||
md:grid-cols-1
|
||||
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-4 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-6 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-6 2xl:py-4">
|
||||
|
||||
<div class="justify-self-center xs:justify-self-start">
|
||||
|
||||
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
||||
md:gap-y-4
|
||||
lg:px-0 lg:gap-x-4">
|
||||
|
||||
<!---
|
||||
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
|
||||
<div class="self-start justify-self-start">
|
||||
<a href="/">
|
||||
<img class="w-full
|
||||
xs:max-w-[64px]
|
||||
sm:max-w-[64px]
|
||||
md:max-w-[64px] md:ml-6
|
||||
lg:max-w-[64px] lg:ml-0
|
||||
xl:max-w-[94px] xl:ml-0
|
||||
"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
|
||||
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
<div class="text-secondary justify-self-center
|
||||
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
|
||||
|
||||
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
|
||||
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
|
||||
Energieausweis online erstellen
|
||||
</h2>
|
||||
|
||||
<h2 class="text-primary font-normal absolute
|
||||
top-[1.6rem] right-2 text-[0.85rem]
|
||||
xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
|
||||
|
||||
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
|
||||
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
|
||||
Energieausweise nach aktuellem GEG
|
||||
</h2> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[110px_auto] gap-6 pt-[0px]">
|
||||
|
||||
<div class="self-start justify-self-start">
|
||||
|
||||
<a href="/">
|
||||
<img class="w-full absolute top-2 left-6 max-w-[94px]"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="self-center justify-self-start mt-[10px]">
|
||||
<div class="text-secondary
|
||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
Energieausweis online erstellen</div>
|
||||
<div class="text-primary
|
||||
<div class="text-primary justify-self-center
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem] pl-[1px]">
|
||||
xl:leading-[0.5rem]">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full justify-self-center">
|
||||
<Login client:load />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
|
||||
<Login client:load />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@@ -22,16 +22,12 @@
|
||||
let errorHidden = true;
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="card-login">
|
||||
<div id="card-login" class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2" >
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<form on:submit={login}>
|
||||
<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
class="my-1 rounded-md px-2 py-1 w-full"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
@@ -40,7 +36,7 @@
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
class="my-1 rounded-md px-2 py-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
@@ -56,8 +52,14 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-2">
|
||||
<button class="button self-center" type="submit">login</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
|
||||
|
||||
|
||||
<div class="w-full text-left self-center">
|
||||
<a
|
||||
@@ -70,16 +72,11 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ if(innerWidth>1024){
|
||||
|
||||
|
||||
<div class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-6
|
||||
xs:px-4
|
||||
lg:hidden">
|
||||
|
||||
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
||||
@@ -97,7 +97,7 @@ if(innerWidth>1024){
|
||||
|
||||
|
||||
|
||||
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block">
|
||||
<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block">
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
@@ -192,18 +192,7 @@ if(innerWidth>1024){
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.nav-element-child{@apply before:bg-primary/50 before:rotate-[45deg];}
|
||||
.nav-element-child:hover{@apply before:bg-white;}
|
||||
|
||||
.nav-element-child:before{
|
||||
position:absolute;
|
||||
content:' ';
|
||||
top:22px;
|
||||
left:10px;
|
||||
width:5px;
|
||||
height:5px;
|
||||
border-radius:0%;
|
||||
}
|
||||
|
||||
|
||||
.dd-symbol::before{
|
||||
|
||||
@@ -6,27 +6,27 @@
|
||||
class=" box card hidden bg-white px-6 py-4 mt-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid grid-cols-[max-content]">
|
||||
<div class="">
|
||||
|
||||
<h2>Was wird der Energieausweis kosten?</h2>
|
||||
<hr class="mb-4 bg-primary h-[2px]">
|
||||
<p>Verbrauchsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Verbrauchsausweis Gewerbe</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Gewerbe</p>
|
||||
<p>ab 300€ inkl. MwSt.</p>
|
||||
<p>ab 300€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Wohngebäude</p>
|
||||
<p>ab 400€ inkl. MwSt.</p>
|
||||
<p>ab 400€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Gewerbe</p>
|
||||
<p>ab 450€ inkl. MwSt.</p>
|
||||
<p>ab 450€ inkl. MwSt.</p>
|
||||
<hr class="mt-2">
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import Preistabelle from "#sidebarCards/card-price-info.svelte";
|
||||
|
||||
---
|
||||
|
||||
<div class="flex flex-col grow">
|
||||
<div class="">
|
||||
|
||||
|
||||
<Navigation client:load />
|
||||
|
||||
@@ -61,22 +61,22 @@ const { title } = Astro.props;
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<container class="w-full max-w-[1920px]">
|
||||
|
||||
<Header />
|
||||
|
||||
<main
|
||||
class="w-full p-0 grid
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
|
||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-5
|
||||
xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
|
||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
|
||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-6
|
||||
">
|
||||
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box grow rounded-tl-none">
|
||||
<article class="box rounded-tl-none">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
@@ -84,13 +84,14 @@ const { title } = Astro.props;
|
||||
|
||||
<Footer />
|
||||
<NotificationWrapper client:load />
|
||||
</container>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global lang="scss">
|
||||
<style is:global lang="postcss">
|
||||
body {
|
||||
min-height: 100vh;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
article {
|
||||
@@ -125,29 +126,16 @@ article p {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
article {
|
||||
@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply px-8 py-2 bg-secondary
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||
rounded-lg text-white
|
||||
hover:shadow-lg transition-all
|
||||
hover:no-underline
|
||||
hover:ring-2
|
||||
hover:ring-primary
|
||||
active:bg-blue-900 text-center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
@apply text-xl font-medium mt-6 mb-4;
|
||||
}
|
||||
|
||||
input, select, textarea, .input {
|
||||
@apply py-1.5 px-2.5 rounded-lg w-full outline-none text-base text-slate-800 border bg-white;
|
||||
@apply py-1.5 px-2.5 w-full outline-none text-base text-slate-800 border bg-white;
|
||||
}
|
||||
|
||||
input:disabled, input:read-only, select:disabled {
|
||||
|
||||
@@ -31,22 +31,22 @@ const { title } = Astro.props;
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<container class="w-full max-w-[1920px]">
|
||||
|
||||
<Header />
|
||||
|
||||
<main
|
||||
class="w-full p-0 grid
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
|
||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
|
||||
class="w-full p-0 grid
|
||||
xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
|
||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
|
||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
|
||||
">
|
||||
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box grow rounded-tl-none">
|
||||
<article class="box rounded-tl-none">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
@@ -56,7 +56,6 @@ const { title } = Astro.props;
|
||||
|
||||
<Footer />
|
||||
<NotificationWrapper client:load />
|
||||
</container>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
import BereichLabel from "#components/BereichLabel.svelte";
|
||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
||||
import ZipSearch from "#components/PlzSuche.svelte";
|
||||
import moment from "moment";
|
||||
@@ -134,25 +135,24 @@
|
||||
|
||||
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
|
||||
|
||||
<div id="formular-box">
|
||||
<div id="formular-box" class="formular-boxen ring-0">
|
||||
|
||||
<div class="flex flex-row justify-between">
|
||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
||||
>Später Weitermachen</button
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<Hilfe />
|
||||
<button
|
||||
on:click={automatischAusfüllen}
|
||||
type="button"
|
||||
class="button">Automatisch Ausfüllen</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full grid gap-x-4 gap-y-2
|
||||
grid-cols-1
|
||||
xs:grid-cols-2
|
||||
">
|
||||
<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
|
||||
<div class="md:justify-self-end"><Hilfe /></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label>A - Prüfung der Ausweisart</Label>
|
||||
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
|
||||
|
||||
<div class="bereich-box">
|
||||
|
||||
<Ausweisart
|
||||
bind:gebaeude
|
||||
@@ -160,17 +160,26 @@
|
||||
bind:ausweis
|
||||
/>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
<BereichLabel bereich="B">Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss</BereichLabel>
|
||||
|
||||
<Label
|
||||
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
|
||||
Dachgeschoss</Label
|
||||
>
|
||||
<div class="bereich-box">
|
||||
|
||||
<div class="w-full grid
|
||||
grid-cols-bereich-B gap-x-4
|
||||
xl:grid-cols-bereich-B-xl xl:gap-x-8
|
||||
2xl:grid-cols-bereich-B-2xl 2xl:gap-x-8
|
||||
">
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-4
|
||||
md:grid-cols-2 md:gap-x-6 md:mb-6
|
||||
xl:mb-0
|
||||
2xl:grid-cols-3 2xl:gap-x-6
|
||||
">
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Strasse -->
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Straße, Hausnummer *">
|
||||
<div class="md:col-span-2 2xl:col-span-1">
|
||||
<HelpLabel title="* Straße, Hausnummer">
|
||||
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
|
||||
ein.
|
||||
</HelpLabel>
|
||||
@@ -189,7 +198,8 @@
|
||||
</div>
|
||||
|
||||
<!-- PLZ -->
|
||||
<div class="form-group col-md-4 PLZ">
|
||||
<div class="PLZ">
|
||||
<Label>* PLZ</Label>
|
||||
<ZipSearch
|
||||
bind:zip={gebaeude_aufnahme_allgemein.plz}
|
||||
bind:city={gebaeude_aufnahme_allgemein.ort}
|
||||
@@ -197,8 +207,9 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Ort *">
|
||||
<!-- Ort -->
|
||||
<div class="">
|
||||
<HelpLabel title="* Ort">
|
||||
Ort des Gebäudes wird automatisch ermittelt.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
@@ -211,9 +222,17 @@
|
||||
/>
|
||||
</div>
|
||||
</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
|
||||
">
|
||||
|
||||
<!-- Wohnfläche -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Wohnfläche m² *">
|
||||
<div class="">
|
||||
<HelpLabel title="* Wohnfläche m²">
|
||||
Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
|
||||
Dabei handelt es sich um die Wohnfläche abzüglich
|
||||
vorhandener Flächen die sich außerhalb des Gebäudes
|
||||
@@ -234,9 +253,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gesamtfläche -->
|
||||
<div class="">
|
||||
<HelpLabel title=" Gesamtfläche m²">
|
||||
Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
|
||||
(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
|
||||
weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
|
||||
beheizten Kellers). Diese Fläche wird dann im Energieausweis
|
||||
als energetische Nutzfläche (An) ausgewiesen.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="nutzflaeche"
|
||||
data-test="nutzflaeche"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
required
|
||||
autocomplete="off"
|
||||
data-rule-minlength="2"
|
||||
data-msg-minlength="min. 2 Zeichen"
|
||||
bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keller -->
|
||||
<div class="form-group col-md-3">
|
||||
<Label>Keller *</Label>
|
||||
<div class="">
|
||||
<Label>* Keller</Label>
|
||||
<div>
|
||||
<select
|
||||
name="keller"
|
||||
@@ -259,8 +302,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Dachgeschoss -->
|
||||
<div class="form-group col-md-3">
|
||||
<Label>Dachgeschoss *</Label>
|
||||
<div class="">
|
||||
<Label>* Dachgeschoss</Label>
|
||||
<div>
|
||||
<select
|
||||
name="dachgeschoss"
|
||||
@@ -282,31 +325,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gesamtfläche -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gesamtfläche m²">
|
||||
Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
|
||||
(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
|
||||
weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
|
||||
beheizten Kellers). Diese Fläche wird dann im Energieausweis
|
||||
als energetische Nutzfläche (An) ausgewiesen.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="nutzflaeche"
|
||||
data-test="nutzflaeche"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
required
|
||||
autocomplete="off"
|
||||
data-rule-minlength="2"
|
||||
data-msg-minlength="min. 2 Zeichen"
|
||||
bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<BereichLabel bereich="C">Eingabe von 3 zusammenhängenden Verbrauchsjahren</BereichLabel>
|
||||
|
||||
<div class="bereich-box">
|
||||
|
||||
<div class="w-full grid
|
||||
grid-cols-bereich-C gap-x-4 gap-y-8
|
||||
xl:grid-cols-bereich-C-xl xl:gap-x-8 xl:gap-y-0
|
||||
2xl:grid-cols-bereich-C-2xl 2xl:gap-x-8
|
||||
">
|
||||
|
||||
<Verbrauch
|
||||
bind:gebaeude
|
||||
bind:gebaeude_aufnahme_allgemein
|
||||
bind:ausweis
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
</div>
|
||||
|
||||
6
src/pages/test.astro
Normal file
6
src/pages/test.astro
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="grid grid-cols-formbutton-line-4">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
@@ -1,29 +1,26 @@
|
||||
|
||||
.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
|
||||
#formular-box{@apply bg-formular-box;}
|
||||
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[8px] ring-2 ring-formular-rahmen rounded-md font-bold;}
|
||||
.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
|
||||
|
||||
.Phase_und_Skala{grid-area:phase_und_skala;}
|
||||
.Bereich_A{grid-area:a}
|
||||
.Bereich_B{grid-area:b}
|
||||
|
||||
#formular-box{
|
||||
@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
|
||||
/* background: linear-gradient(
|
||||
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
|
||||
.bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4 bg-[rgba(252,_234,_187,_0.2)]
|
||||
border-y-2 border-formular-rahmen
|
||||
sm:ring-2 sm:px-2 sm:rounded-lg sm:border-none
|
||||
md:px-4
|
||||
;
|
||||
/*background: linear-gradient(
|
||||
135deg,
|
||||
rgba(252, 234, 187, 1) 0%,
|
||||
rgba(253, 235, 189, 1) 52%,
|
||||
rgba(253, 235, 189, 1) 50%,
|
||||
rgba(251, 223, 147, 1) 100%
|
||||
|
||||
); */
|
||||
}
|
||||
|
||||
|
||||
.GRB {
|
||||
@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
rgba(252, 234, 187, 1) 0%,
|
||||
rgba(253, 235, 189, 1) 52%,
|
||||
rgba(251, 223, 147, 1) 100%
|
||||
); */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
:global(input[type="number"]),
|
||||
|
||||
@@ -48,14 +48,25 @@
|
||||
|
||||
|
||||
body{
|
||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-md text-white text-nowrap
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
|
||||
}
|
||||
|
||||
input[type="text"], input[type="number"], input[type="password"], select{
|
||||
@apply min-h-[38px] ring-1 ring-black/15 rounded-md}
|
||||
input[type="checkbox"]{@apply inline-block}
|
||||
radio{@apply accent-primary}
|
||||
|
||||
|
||||
/*ARTICLE*/
|
||||
|
||||
article {
|
||||
@apply px-6 py-6 w-full relative bg-white min-h-screen;
|
||||
@apply w-full relative bg-white min-h-screen px-0 py-0;
|
||||
|
||||
hr {@apply mb-4 mt-4;}
|
||||
|
||||
@@ -71,8 +82,9 @@ article {
|
||||
|
||||
/*BOXES*/
|
||||
.box{
|
||||
@apply rounded-none
|
||||
lg:rounded-lg lg:shadow-box lg:ring-1 lg:ring-gray-300
|
||||
@apply rounded-lg
|
||||
|
||||
lg:shadow-box lg:ring-1 lg:ring-gray-300
|
||||
xl:rounded-xl
|
||||
|
||||
}
|
||||
@@ -103,6 +115,7 @@ article {
|
||||
@apply !bg-primary !text-white cursor-pointer
|
||||
}
|
||||
|
||||
|
||||
.nav-element:hover > .dropdown-content{
|
||||
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
|
||||
}
|
||||
@@ -129,8 +142,8 @@ article {
|
||||
li {@apply text-sm bg-white flex
|
||||
xl:text-lg}
|
||||
|
||||
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||
lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
|
||||
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||
lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
|
||||
xl:text-lg}
|
||||
|
||||
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||
|
||||
@@ -9,8 +9,10 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
xs: '480px'
|
||||
'2xs': '320px',
|
||||
xs: '480px',
|
||||
},
|
||||
|
||||
content: {
|
||||
'nav-disc': ' ',
|
||||
},
|
||||
@@ -30,7 +32,12 @@ module.exports = {
|
||||
'base-content': '#1e2734',
|
||||
'box-heading': '#3A4AB5',
|
||||
|
||||
|
||||
"formular-box": "rgba(252,234,187,0.2)",
|
||||
"formular-rahmen": "rgba(255,204,6,1)",
|
||||
|
||||
"bereich-box": "rgba(252,234,187,0.2)",
|
||||
|
||||
|
||||
"pdf-yellow-bright": "#f3cb00",
|
||||
"pdf-yellow-light": "#fff6ca",
|
||||
@@ -42,7 +49,27 @@ module.exports = {
|
||||
},
|
||||
|
||||
gridTemplateColumns: {
|
||||
// Simple 16 column grid
|
||||
'formbutton-line': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||
'formbutton-line-md': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||
'formbutton-line-xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||
'formbutton-line-2xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||
|
||||
'bereich-A': '1fr',
|
||||
'bereich-A-md': '2fr 2fr',
|
||||
'bereich-A-xl': '2fr 2fr',
|
||||
'bereich-A-2xl': '3fr 4fr',
|
||||
|
||||
'bereich-B': '1fr',
|
||||
'bereich-B-lg': '2fr 2fr',
|
||||
'bereich-B-xl': '2fr 2fr',
|
||||
'bereich-B-2xl': '3fr 4fr',
|
||||
|
||||
'bereich-C': '1fr',
|
||||
'bereich-C-lg': '2fr 2fr',
|
||||
'bereich-C-xl': '2fr 2fr',
|
||||
'bereich-C-2xl': '3fr 4fr',
|
||||
|
||||
|
||||
//'standard-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||
//'standard-md': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||
//'standard-lg': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||
|
||||
Reference in New Issue
Block a user