IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #192 from IBCornelsen/UMBE

Browse Source 
Formular
This commit is contained in:
UMBENOMENA
2024-12-10 02:06:24 +01:00
committed by GitHub
parent 79f115f66c d2afa0eade
commit 2b563722b0
19 changed files with 694 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/components/Ausweis/Ausweisart.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import HelpLabel from "#components/HelpLabel.svelte"; import HelpLabel from "#components/HelpLabel.svelte";
import Label from "#components/Label.svelte";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr"; import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
import { addNotification, deleteNotification } from "@ibcornelsen/ui"; import { addNotification, deleteNotification } from "@ibcornelsen/ui";
import TagInput from "../TagInput.svelte"; import TagInput from "../TagInput.svelte";
@@ -16,142 +17,165 @@
</script> </script>
<div class="GRB"> <div class="w-full grid
<!-- Anlass für Energieausweis --> grid-cols-bereich-A gap-x-4
<div class="flex flex-col"> xl:grid-cols-bereich-A-xl xl:gap-x-6
<span>Anlass für Energieausweis * </span> 2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3"> ">
<!-- 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]} {#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<label class="radio-inline"> <label class="radio-inline">
<input <input
name="ausstellgrund" name="ausstellgrund"
type="radio" type="radio"
class="radio radio-secondary" value={ausstellgrund}
value={ausstellgrund} bind:group={ausweis.ausstellgrund}
bind:group={ausweis.ausstellgrund} />{name}</label
/>{name}</label >
> {/each}
{/each} </div>
</div> </div>
</div>
<!-- Baujahr Heizung --> <div class="grid grid-cols-1 gap-x-4
<div class="form-group col-md-2"> md:grid-cols-2 md:gap-x-6
<HelpLabel title="Baujahr Heizung *"> 2xl:grid-cols-4 2xl:gap-x-6
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 --> <!-- Baujahr Heizung -->
<div class="form-group col-md-2"> <div class="">
<HelpLabel title="Baujahr Gebäude *"> <HelpLabel title="* Baujahr Heizung">
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden unterschiedliche Baujahre vorliegen, dann geben Sie einen
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus Zeitbereich ein <br />z.B. 1994-2001.
-saniert- angeben. </HelpLabel>
</HelpLabel> <div>
<div> <TagInput
<TagInput name="baujahr_heizung"
name="baujahr_gebaeude" type="number"
type="number" onlyUnique={true}
onlyUnique={true} minChars={4}
minChars={4} onFocusIn={() => {
onFocusIn={() => { addNotification({
addNotification({ message: "Info",
message: "Info", subtext:
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.",
"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,
dismissable: true, uid: "HEIZUNG_BAUJAHR",
uid: "GEBAEUDE_BAUJAHR", timeout: 0,
timeout: 0, type: "info",
type: "info", });
}); }}
}} onFocusOut={() => {
onFocusOut={() => { deleteNotification("HEIZUNG_BAUJAHR");
deleteNotification("GEBAEUDE_BAUJAHR"); }}
}} className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein) ? "linked"
? "linked" : ""}
: ""} bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude} />
/> </div>
</div> </div>
</div>
<!-- Anzahl der Wohnungen --> <!-- Baujahr -->
<div class="form-group col-md-2"> <div class="">
<HelpLabel title="Anzahl Wohnungen *"> <HelpLabel title="* Baujahr Gebäude">
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
Gebäude befinden. grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
</HelpLabel> haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
<div> -saniert- angeben.
<input </HelpLabel>
name="einheiten" <div>
type="number" <TagInput
required name="baujahr_gebaeude"
autocomplete="off" type="number"
data-msg="Pflichtfeld" onlyUnique={true}
bind:value={gebaeude_aufnahme_allgemein.einheiten} minChars={4}
maxlength="3" onFocusIn={() => {
/> addNotification({
</div> message: "Info",
</div> 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.",
<!-- Dachgeschoss --> dismissable: true,
<div class="form-group col-md-2"> uid: "GEBAEUDE_BAUJAHR",
<HelpLabel title="Sanierungsstatus *"> timeout: 0,
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert type: "info",
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> onFocusOut={() => {
<div> deleteNotification("GEBAEUDE_BAUJAHR");
<select }}
name="saniert" className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
class="" ? "linked"
required : ""}
bind:value={gebaeude_aufnahme_allgemein.saniert} bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
> />
<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> <!-- 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>
input[type="radio"] { <!-- Sanierungsstatus -->
@apply w-5 h-5 rounded-full; <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>
<style lang="postcss">
input[type="radio"] {
@apply w-5 h-5 accent-secondary
} }
.radio-inline { .radio-inline {

2
src/components/Ausweis/Hilfe.svelte
View File

@@ -3,7 +3,7 @@
</script> </script>
<div> <div>
<button type="button" class="button" on:click={() => (showHelp = !showHelp)} <button class="button" type="button" on:click={() => (showHelp = !showHelp)}
>Hilfe anfordern</button >Hilfe anfordern</button
> >

402
src/components/Ausweis/Verbrauch.svelte
View File

@@ -64,25 +64,158 @@
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude); $: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
</script> </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"> <HelpLabel title="zusätzliche Heizquelle">
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
Verbrauchszeiträume wie bei der primären Heizung verwendet Verbrauchszeiträume wie bei der primären Heizung verwendet
werden. werden.
</HelpLabel> </HelpLabel>
<input </div>
type="checkbox"
class="checkbox" </div>
name="zusaetzliche_heizquelle" <input class="hidden xl:invisible xl:block"/>
bind:checked={ausweis.zusaetzliche_heizquelle} <div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
/> <div></div>
<span>Zeitraum:</span>
</div> </div>
<div> <div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
<HelpLabel title="Brennstoff *">
<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 <b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
entflammbaren Anteilen des Erdöls hergestellt.<br /><br /> entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in <b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
@@ -109,39 +242,92 @@
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br /> <b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel> </HelpLabel>
<div> <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> <option disabled>Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel} {#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option> <option value={fuel}>{fuel}</option>
{/each} {/each}
</select> </select>
</div> </div>
</div>
</div>
<div> <div>
<HelpLabel title="Einheit *"> <HelpLabel title="* Einheit">
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
vor. Pellets oder Brennholz in SRm (Schüttraummetern). vor. Pellets oder Brennholz in SRm (Schüttraummetern).
</HelpLabel> </HelpLabel>
<div>
<select <select
class="rounded-s-none"
name="einheit_1" name="einheit_1"
required required
bind:value={ausweis.einheit_1} bind:value={ausweis.einheit_1}
> >
<option disabled>Bitte auswählen</option> <option disabled>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit} {#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
<option value={unit}>{unit}</option> <option value={unit}>{unit}</option>
{/each} {/each}
</select> </select>
</div>
</div> </div>
<div> </div>
<Label>Brennstoff *</Label>
<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>
<select <select
class="rounded-e-none"
name="brennstoff_2" name="brennstoff_2"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2} bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
disabled={!ausweis.zusaetzliche_heizquelle} disabled={!ausweis.zusaetzliche_heizquelle}
@@ -152,13 +338,14 @@
<option value={fuel}>{fuel}</option> <option value={fuel}>{fuel}</option>
{/each} {/each}
</select> </select>
</div> </div>
</div>
<div>
<Label>* Einheit</Label>
<div>
<Label>Einheit *</Label>
<div>
<select <select
class="rounded-s-none"
name="einheit_2" name="einheit_2"
disabled={!ausweis.zusaetzliche_heizquelle} disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.einheit_2} bind:value={ausweis.einheit_2}
@@ -168,138 +355,14 @@
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit} {#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
<option value={unit}>{unit}</option> <option value={unit}>{unit}</option>
{/each} {/each}
</select> </select>
</div>
</div>
</div> </div>
<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6"> </div>
<div class="flex flex-col gap-2">
<div class="column">
<span>von</span> <div>
<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>
<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
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> <span>Verbrauch</span>
<input <input
name="verbrauch_4" name="verbrauch_4"
@@ -308,8 +371,7 @@
class:linked={abweichung.indexOf(4) > -1} class:linked={abweichung.indexOf(4) > -1}
disabled={!ausweis.zusaetzliche_heizquelle} disabled={!ausweis.zusaetzliche_heizquelle}
/> />
</div>
<div class="column">
<span>Verbrauch</span> <span>Verbrauch</span>
<input <input
name="verbrauch_5" name="verbrauch_5"
@@ -318,8 +380,7 @@
class:linked={abweichung.indexOf(5) > -1} class:linked={abweichung.indexOf(5) > -1}
disabled={!ausweis.zusaetzliche_heizquelle} disabled={!ausweis.zusaetzliche_heizquelle}
/> />
</div>
<div class="column">
<span>Verbrauch</span> <span>Verbrauch</span>
<input <input
name="verbrauch_6" name="verbrauch_6"
@@ -328,13 +389,18 @@
class:linked={abweichung.indexOf(6) > -1} class:linked={abweichung.indexOf(6) > -1}
disabled={!ausweis.zusaetzliche_heizquelle} disabled={!ausweis.zusaetzliche_heizquelle}
/> />
</div>
</div>
</div> </div>
</div> </div>
<style> </div>
.column {
@apply flex flex-row items-center gap-4;
}
<style lang="postcss">
input[type="checkbox"] {@apply accent-secondary}
</style> </style>

21
src/components/BereichLabel.svelte Normal file
View 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>

19
src/components/HelpLabel.svelte
View File

@@ -3,9 +3,10 @@
export let tooltip: string = ""; export let tooltip: string = "";
</script> </script>
<div class="flex flex-row justify-between mb-2"> <div class="grid grid-cols-2 mt-[5px]">
<label class="text-base-content">{title}</label>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help"> <label>{title}</label>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
<img <img
src="/images/question-mark.png" src="/images/question-mark.png"
alt="?" alt="?"
@@ -13,18 +14,22 @@
/> />
<div class="tooltip"> <div class="tooltip">
<slot></slot> <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> </div>
</div> </div>
<style> <style lang="postcss">
label { 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 { .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 { .tooltip-opener:hover .tooltip {

13
src/components/Label.svelte
View File

@@ -2,6 +2,13 @@
export let name: string = ""; export let name: string = "";
</script> </script>
<div class="flex flex-row justify-between items-center gap-4 mb-2"> <div class="h-[26.5px] mt-[5px]">
<label class="text-base font-medium" for={name}><slot></slot></label> <label for={name}><slot></slot></label>
</div> </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>

2
src/components/PlzSuche.svelte
View File

@@ -50,7 +50,7 @@
<div class="relative" use:clickOutside={() => { <div class="relative" use:clickOutside={() => {
hideZipDropdown = true; hideZipDropdown = true;
}}> }}>
<Label name={name}>PLZ *</Label>
<input <input
name={name} name={name}
id={name} id={name}

85
src/components/design/header/Header.astro
View File

@@ -2,77 +2,66 @@
import Login from "#sidebarCards/card-login.svelte"; import Login from "#sidebarCards/card-login.svelte";
--- ---
<header> <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 grid-cols-1
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2 sm:grid-cols-1
md:grid-cols-1
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg: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-5 xl: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-5 2xl: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">
<div class="self-start justify-self-start">
<!--- <a href="/">
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover <img class="w-full
xs:max-w-[64px]
<h2 class="text-secondary font-normal absolute sm:max-w-[64px]
top-1 right-2 text-[1.1rem] md:max-w-[64px] md:ml-6
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem] lg:max-w-[64px] lg:ml-0
xl:max-w-[94px] xl:ml-0
md:top-[1.25rem] md:right-4 md:text-[1.1rem] "
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]"> src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
Energieausweis online erstellen </a>
</h2> </div>
<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="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]
<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:[font-size:_clamp(15px,3vw,26px)]
lg:leading-[2rem] lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,36px)] xl:[font-size:_clamp(15px,3vw,36px)]
xl:leading-[4.5rem] pt-[0px]"> xl:leading-[4.5rem] pt-[0px]">
Energieausweis online erstellen</div> 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:[font-size:_clamp(15px,3vw,20px)]
lg:leading-[2rem] lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,24px)] xl:[font-size:_clamp(15px,3vw,24px)]
xl:leading-[0.5rem] pl-[1px]"> xl:leading-[0.5rem]">
Energieausweise nach aktuellem GEG</div> Energieausweise nach aktuellem GEG</div>
</div> </div>
</div>
</div>
<div class="w-full justify-self-center">
<Login client:load />
</div>
</div> </div>
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
<Login client:load />
</div>
</div> </div>

33
src/components/design/sidebars/cards/card-login.svelte
View File

@@ -22,16 +22,12 @@
let errorHidden = true; let errorHidden = true;
</script> </script>
<div <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" >
id="card-login">
<div>
<form on:submit={login}> <form on:submit={login}>
<div class="grid grid-cols-[1fr_1fr] gap-2"> <div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
<input <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" type="text"
placeholder="nutzer@email.com" placeholder="nutzer@email.com"
name="email" name="email"
@@ -40,7 +36,7 @@
required required
/> />
<input <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" type="password"
minlength="8" minlength="8"
placeholder="********" placeholder="********"
@@ -55,9 +51,15 @@
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span> <span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
</div> </div>
{/if} {/if}
<button class="button self-center" type="submit">login</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
</div>
<div class="grid grid-cols-[3fr_2fr] gap-2">
<div class="w-full text-left self-center"> <div class="w-full text-left self-center">
<a <a
@@ -70,16 +72,11 @@
> >
</div> </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> </div>
</form> </form>
<div></div>
</div> </div>
</div>
<style lang="postcss"> <style lang="postcss">

15
src/components/design/sidebars/cards/card-navigation.svelte
View File

@@ -85,7 +85,7 @@ if(innerWidth>1024){
<div class="hamburger_menu py-1 px-2 bg-secondary <div class="hamburger_menu py-1 px-2 bg-secondary
xs:px-6 xs:px-4
lg:hidden"> lg:hidden">
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer"> <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 --> <!-- 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}> <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
@@ -206,18 +206,7 @@ if(innerWidth>1024){
<style lang="scss"> <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{ .dd-symbol::before{

14
src/components/design/sidebars/cards/card-price-info.svelte
View File

@@ -6,27 +6,27 @@
class=" box card hidden bg-white px-6 py-4 mt-5 class=" box card hidden bg-white px-6 py-4 mt-5
lg:block"> lg:block">
<div class="grid grid-cols-[max-content]"> <div class="">
<h2>Was wird der Energieausweis kosten?</h2> <h2>Was wird der Energieausweis kosten?</h2>
<hr class="mb-4 bg-primary h-[2px]"> <hr class="mb-4 bg-primary h-[2px]">
<p>Verbrauchsausweis Wohngebäude</p> <p>Verbrauchsausweis Wohngebäude</p>
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p> <p>ab&nbsp;{PRICES.VerbrauchsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr> <hr>
<p>Bedarfsausweis Wohngebäude</p> <p>Bedarfsausweis Wohngebäude</p>
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p> <p>ab&nbsp;{PRICES.BedarfsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr> <hr>
<p>Verbrauchsausweis Gewerbe</p> <p>Verbrauchsausweis Gewerbe</p>
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p> <p>ab&nbsp;{PRICES.VerbrauchsausweisGewerbe[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr> <hr>
<p>Bedarfsausweis Gewerbe</p> <p>Bedarfsausweis Gewerbe</p>
<p>ab 300€ inkl. MwSt.</p> <p>ab&nbsp;300€&nbsp;inkl.&nbsp;MwSt.</p>
<hr> <hr>
<p>GEG-Nachweis Wohngebäude</p> <p>GEG-Nachweis Wohngebäude</p>
<p>ab 400€ inkl. MwSt.</p> <p>ab&nbsp;400€&nbsp;inkl.&nbsp;MwSt.</p>
<hr> <hr>
<p>GEG-Nachweis Gewerbe</p> <p>GEG-Nachweis Gewerbe</p>
<p>ab 450€ inkl. MwSt.</p> <p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
<hr class="mt-2"> <hr class="mt-2">

2
src/components/design/sidebars/left/SidebarLeft.astro
View File

@@ -4,7 +4,7 @@ import Preistabelle from "#sidebarCards/card-price-info.svelte";
--- ---
<div class="flex flex-col grow"> <div class="">
<Navigation client:load /> <Navigation client:load />

44
src/layouts/AusweisLayout.astro
View File

@@ -61,36 +61,37 @@ const { title } = Astro.props;
</head> </head>
<body> <body>
<container class="w-full max-w-[1920px]">
<Header /> <Header />
<main <main
class="w-full p-0 grid class="w-full p-0 grid
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1 xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2 sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3 md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4 lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-5 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 /> <SidebarLeft />
<article class="box grow rounded-tl-none"> <article class="box rounded-tl-none">
<slot /> <slot />
</article> </article>
</main> </main>
<Footer /> <Footer />
<NotificationWrapper client:load /> <NotificationWrapper client:load />
</container>
</body> </body>
</html> </html>
<style is:global lang="scss"> <style is:global lang="postcss">
body { body {
min-height: 100vh; min-height: 100vh;
width:100%;
} }
article { article {
@@ -125,29 +126,16 @@ article p {
text-transform: none; 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 { h3 {
@apply text-xl font-medium mt-6 mb-4; @apply text-xl font-medium mt-6 mb-4;
} }
input, select, textarea, .input { 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 { input:disabled, input:read-only, select:disabled {

28
src/layouts/Layout.astro
View File

@@ -31,32 +31,30 @@ const { title } = Astro.props;
</head> </head>
<body> <body>
<container class="w-full max-w-[1920px]">
<Header /> <Header />
<main <main
class="w-full p-0 grid class="w-full p-0 grid
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0 sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3 md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4 lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5 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 /> <SidebarLeft />
<article class="box grow rounded-tl-none"> <article class="box rounded-tl-none">
<slot /> <slot />
</article> </article>
<SidebarRight />
</main> </main>
<Footer /> <Footer />
<NotificationWrapper client:load /> <NotificationWrapper client:load />
</container>
</body> </body>
</html> </html>

160
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
View File

@@ -5,6 +5,7 @@
import HelpLabel from "#components/HelpLabel.svelte"; import HelpLabel from "#components/HelpLabel.svelte";
import Verbrauch from "#components/Ausweis/Verbrauch.svelte"; import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
import Label from "#components/Label.svelte"; import Label from "#components/Label.svelte";
import BereichLabel from "#components/BereichLabel.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte"; import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import ZipSearch from "#components/PlzSuche.svelte"; import ZipSearch from "#components/PlzSuche.svelte";
import moment from "moment"; import moment from "moment";
@@ -134,25 +135,24 @@
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis"> <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 /> <hr />
<Label>A - Prüfung der Ausweisart</Label> <BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="bereich-box">
<Ausweisart <Ausweisart
bind:gebaeude bind:gebaeude
@@ -160,17 +160,26 @@
bind:ausweis bind:ausweis
/> />
<hr /> </div>
<BereichLabel bereich="B">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<Label <div class="bereich-box">
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
Dachgeschoss</Label <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 --> <!-- Strasse -->
<div class="form-group col-md-4"> <div class="md:col-span-2 2xl:col-span-1">
<HelpLabel title="Straße, Hausnummer *"> <HelpLabel title="* Straße, Hausnummer">
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
ein. ein.
</HelpLabel> </HelpLabel>
@@ -189,7 +198,8 @@
</div> </div>
<!-- PLZ --> <!-- PLZ -->
<div class="form-group col-md-4 PLZ"> <div class="PLZ">
<Label>* PLZ</Label>
<ZipSearch <ZipSearch
bind:zip={gebaeude_aufnahme_allgemein.plz} bind:zip={gebaeude_aufnahme_allgemein.plz}
bind:city={gebaeude_aufnahme_allgemein.ort} bind:city={gebaeude_aufnahme_allgemein.ort}
@@ -197,8 +207,9 @@
/> />
</div> </div>
<div class="form-group col-md-4"> <!-- Ort -->
<HelpLabel title="Ort *"> <div class="">
<HelpLabel title="* Ort">
Ort des Gebäudes wird automatisch ermittelt. Ort des Gebäudes wird automatisch ermittelt.
</HelpLabel> </HelpLabel>
<div> <div>
@@ -211,9 +222,17 @@
/> />
</div> </div>
</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 --> <!-- Wohnfläche -->
<div class="form-group col-md-3"> <div class="">
<HelpLabel title="Wohnfläche m² *"> <HelpLabel title="* Wohnfläche m²">
Bitte geben Sie hier die beheizte Wohnfläche in m² ein. Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
Dabei handelt es sich um die Wohnfläche abzüglich Dabei handelt es sich um die Wohnfläche abzüglich
vorhandener Flächen die sich außerhalb des Gebäudes vorhandener Flächen die sich außerhalb des Gebäudes
@@ -234,9 +253,33 @@
</div> </div>
</div> </div>
<!-- Gesamtfläche -->
<div class="">
<HelpLabel title="&nbsp;&nbsp;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 --> <!-- Keller -->
<div class="form-group col-md-3"> <div class="">
<Label>Keller *</Label> <Label>* Keller</Label>
<div> <div>
<select <select
name="keller" name="keller"
@@ -259,8 +302,8 @@
</div> </div>
<!-- Dachgeschoss --> <!-- Dachgeschoss -->
<div class="form-group col-md-3"> <div class="">
<Label>Dachgeschoss *</Label> <Label>* Dachgeschoss</Label>
<div> <div>
<select <select
name="dachgeschoss" name="dachgeschoss"
@@ -282,31 +325,36 @@
</div> </div>
</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>
</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 /> <hr />
</div> </div>

6
src/pages/test.astro Normal file
View 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>

31
src/style/formular.css
View File

@@ -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;} .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
.Bereich_A{grid-area:a} .bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4 bg-[rgba(252,_234,_187,_0.2)]
.Bereich_B{grid-area:b} border-y-2 border-formular-rahmen
sm:ring-2 sm:px-2 sm:rounded-lg sm:border-none
#formular-box{ md:px-4
@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box; ;
/* background: linear-gradient( /*background: linear-gradient(
135deg, 135deg,
rgba(252, 234, 187, 1) 0%, rgba(252, 234, 187, 1) 0%,
rgba(253, 235, 189, 1) 52%, rgba(253, 235, 189, 1) 50%,
rgba(251, 223, 147, 1) 100% 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"]), :global(input[type="number"]),

25
src/style/global.css
View File

@@ -48,14 +48,25 @@
body{ 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*/
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;} hr {@apply mb-4 mt-4;}
@@ -71,8 +82,9 @@ article {
/*BOXES*/ /*BOXES*/
.box{ .box{
@apply rounded-none @apply rounded-lg
lg:rounded-lg lg:shadow-box lg:ring-1 lg:ring-gray-300
lg:shadow-box lg:ring-1 lg:ring-gray-300
xl:rounded-xl xl:rounded-xl
} }
@@ -103,6 +115,7 @@ article {
@apply !bg-primary !text-white cursor-pointer @apply !bg-primary !text-white cursor-pointer
} }
.nav-element:hover > .dropdown-content{ .nav-element:hover > .dropdown-content{
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)] @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 li {@apply text-sm bg-white flex
xl:text-lg} 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 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 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
xl:text-lg} xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]} li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}

31
tailwind.config.cjs
View File

@@ -9,8 +9,10 @@ module.exports = {
theme: { theme: {
extend: { extend: {
screens: { screens: {
xs: '480px' '2xs': '320px',
xs: '480px',
}, },
content: { content: {
'nav-disc': ' ', 'nav-disc': ' ',
}, },
@@ -30,7 +32,12 @@ module.exports = {
'base-content': '#1e2734', 'base-content': '#1e2734',
'box-heading': '#3A4AB5', 'box-heading': '#3A4AB5',
"formular-box": "rgba(252,234,187,0.2)", "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-bright": "#f3cb00",
"pdf-yellow-light": "#fff6ca", "pdf-yellow-light": "#fff6ca",
@@ -42,7 +49,27 @@ module.exports = {
}, },
gridTemplateColumns: { 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-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
//'standard-md': '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)', //'standard-lg': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',