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

Merge pull request #247 from IBCornelsen/main

Browse Source 
Update Jens
This commit is contained in:
Jens Cornelsen
2024-12-20 14:08:29 +01:00
committed by GitHub
parent 2c6dc7a045 74d915d277
commit 0725b8c941
34 changed files with 1121 additions and 2477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/images/SKALA-1405-180.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

37
public/images/SKALA-1405-180_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

3
public/images/SKALA-910.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

0
public/images/SKALA-910.png → public/images/formular/SKALA-910.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

31
public/images/formular/verbrauchsausweis-skala.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

17
src/components/Ausweis/AusweisPreviewContainer.svelte
View File

@@ -2,7 +2,7 @@
import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
import DatenblattButton from "#components/DatenblattButton.svelte";
import HelpLabel from "#components/HelpLabel.svelte";
import ImageGrid from "../ImageGrid.svelte";
import ImageGrid from "#components/ImageGrid.svelte";
import {
Enums,
} from "@ibcornelsen/database/client";
@@ -11,16 +11,18 @@
GebaeudeClient,
UploadedGebaeudeBild,
VerbrauchsausweisWohnenClient,
} from "./types";
} from "./types.js";
export let ausweis: VerbrauchsausweisWohnenClient;
export let gebaeude: GebaeudeClient;
export let images: UploadedGebaeudeBild[] = [];
</script>
<div class="grid grid-cols-2 p-4 gap-4">
<div class="rounded-lg border-4 p-4 bg-white">
<div class="GRB4">
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0">
<div class="form-group col-md-12 nopad">
<HelpLabel title="Gebäudebild Bildupload :">
Wenn vorhanden können Sie ein Gebäudefoto (Außenansicht)
@@ -33,14 +35,15 @@
name={"gebaeude_image"}
kategorie={Enums.BilderKategorie.Gebaeude}
max={1}
min={1}
bind:gebaeude
bind:images
bind:ausweis
/>
</div>
</div>
<div class="rounded-lg border-4 p-4 bg-white">
<div class="box card mb-0">
<HelpLabel title="Ansichtsausweis & Datenblatt :">
Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
</HelpLabel>

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

@@ -44,6 +44,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
class="rounded-e-none"
name="ausstellgrund"
placeholder="Anlass"
bind:value={ausweis.ausstellgrund}
required
>
<option disabled selected value={false}>Bitte auswählen</option>

25
src/components/Ausweis/BilderZusatzsysteme.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HeizungImage from "./HeizungImage.svelte";
import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
@@ -10,22 +10,23 @@ import Inputlabel from "#labels/InputLabel.svelte";
//import Label from "../Label.svelte";
import {
GebaeudeAufnahmeClient,
GebaeudeAufnahmeClient,
GebaeudeClient,
UploadedGebaeudeBild,
VerbrauchsausweisWohnenClient,
} from "./types.js";
import { boolean } from "astro:schema";
import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
import { boolean } from "astro:schema";
import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let ausweis: VerbrauchsausweisWohnenClient
export let ausweis: VerbrauchsausweisWohnenClient;
export let images: UploadedGebaeudeBild[];
</script>
<div id="sanierungszustand" class="bereich-box grid
<div
id="sanierungszustand"
class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
@@ -33,6 +34,7 @@ md:grid-cols-2 md:gap-x-6 md:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
">
<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <b>zentral erzeugt</b> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
@@ -47,14 +49,11 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
<SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <b>innerhalb eines Leitungssystems</b>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
<SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <b>elektrische Energie</b> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
</div>
<HeizungImage bind:images bind:ausweis bind:gebaeude />
<style lang="postcss">
</style>
<!--
<HelpLabel title="Heizungsanlage (bitte immer zutreffendes ankreuzen) *">
Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
@@ -286,3 +285,5 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
-->
<style lang="postcss">
</style>

39
src/components/Ausweis/ButtonSpaeterHilfe.svelte Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts">
import Hilfe from "#components/Ausweis/Hilfe.svelte";
export let spaeterWeitermachen;
export let automatischAusfüllen;
</script>
<!-- Später weitermachen / Hilfe anfordern -->
<div
class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
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 px-4">
<button
class="button hidden"
on:click={automatischAusfüllen}
type="button">Automatisch Ausfüllen
</button
>
</div>

4
src/components/Ausweis/DaemmungImage.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import ImageGrid from "../ImageGrid.svelte";;
import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
export let images: UploadedGebaeudeBild[] = [];
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -59,6 +59,6 @@
Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
</p>
<ImageGrid max={4} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
<ImageGrid max={4} min={2} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
</div>
</div>

4
src/components/Ausweis/FensterImage.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import ImageGrid from "../ImageGrid.svelte";;
import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
export let images: UploadedGebaeudeBild[] = [];
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -55,6 +55,6 @@
Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
</p>
<ImageGrid max={4} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
<ImageGrid max={4} min={1} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
</div>
</div>

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

@@ -51,6 +51,6 @@
Ihrem Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
</p>
<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} bind:gebaeude bind:images bind:ausweis />
<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} min={1} bind:gebaeude bind:images bind:ausweis />
</div>
</div>

10
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -79,11 +79,11 @@
}
</script>
<div class="w-full rounded-lg border-[#ffcc03] border-2 relative p-2">
<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<ThickArrowDown
size={28}
class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
translation_1,
50,
@@ -94,7 +94,7 @@
/>
<ThickArrowUp
size={28}
class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
translation_2,
50,
@@ -103,4 +103,4 @@
100
)}%)"
/>
</div>

10
src/components/Ausweis/Progressbar.svelte
View File

@@ -2,7 +2,7 @@
export let progress: number = 0;
</script>
<div class="flex flex-col relative">
<div class="progress-section">
<div class="w-full bg-gray-100 absolute h-3 rounded-lg">
<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
@@ -13,11 +13,11 @@
</div>
<div class="flex flex-row justify-between">
<p>Gebäudedaten</p>
<p>Prüfung</p>
<p>Kaufabschluss</p>
<div>Gebäudedaten</div>
<div>Prüfung</div>
<div>Kaufabschluss</div>
</div>
</div>
<style>
.progress-section {

7
src/components/Ausweis/SanierungszustandFensterTueren.svelte
View File

@@ -1,10 +1,7 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HeizungImage from "./HeizungImage.svelte";
import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
import DaemmungImage from "./DaemmungImage.svelte";
import FensterImage from "./FensterImage.svelte";
//import Label from "../Label.svelte";

10
src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
View File

@@ -1,11 +1,9 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HeizungImage from "./HeizungImage.svelte";
import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
import DaemmungImage from "./DaemmungImage.svelte";
import FensterImage from "./FensterImage.svelte";
//import Label from "../Label.svelte";

10
src/components/Ausweis/SanierungszustandWaermedammung.svelte
View File

@@ -1,11 +1,9 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HeizungImage from "./HeizungImage.svelte";
import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import DaemmungImage from "./DaemmungImage.svelte";
import FensterImage from "./FensterImage.svelte";
//import Label from "../Label.svelte";

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

@@ -1,15 +1,19 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import Verbrauchslabel from "#labels/VerbrauchsLabel.svelte";
import VerbrauchsHelpLabel from "#labels/VerbrauchsHelpLabel.svelte";
import Label from "../Label.svelte";
import moment from "moment";
import fuelList from "./brennstoffListe.js";
import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js";
import {
GebaeudeAufnahmeClient,
GebaeudeClient,
VerbrauchsausweisWohnenClient,
} from "./types.js";
export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
@@ -38,9 +42,15 @@
"Dezember",
];
const startDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(4, "years").subtract(6, "months");
const endDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(3, "years");
const startDate = moment(
ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
)
.subtract(4, "years")
.subtract(6, "months");
const endDate = moment(
ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
).subtract(3, "years");
for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
availableDates.push({
year: m.year(),
@@ -54,7 +64,6 @@
fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
fuelMap[fuel[0]].push(fuel[1]);
}
let month = ausweis.startdatum?.getMonth() || null;
let year = ausweis.startdatum?.getFullYear() || null;
@@ -63,451 +72,500 @@
if (typeof month === "number" && typeof year === "number") {
// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
ausweis.startdatum = moment().set("month", month).set("year", year).startOf("month").add(2, "days").toDate();
ausweis.startdatum = moment()
.set("month", month)
.set("year", year)
.startOf("month")
.add(2, "days")
.toDate();
}
}
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
</script>
<div id="verbrauch" class="bereich-box grid
<div
id="verbrauch"
class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">
"
>
<!-- primäre Heizquellen -->
<!-- primäre Heizquellen -->
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Heizquellen"></Inputlabel>
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Heizquellen"></Inputlabel>
<div class="input-checkboxen">
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
<input
id="primaere_heizquelle"
type="checkbox"
class="checkbox"
name="primaere_heizquelle"
checked="checked"
onclick="return false"
/>
<label for="primaere_heizquelle" >primäre Heizquelle</label>
</div>
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
{#if !ausweis.zusaetzliche_heizquelle}
<input
id="zusaetzliche_heizquelle_1"
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle_1"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<label for="zusaetzliche_heizquelle_1" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
{/if}
</div>
</div>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Zeitraum 1 -->
<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
<div class="input-standard">
<Inputlabel title="Start-Monat *"></Inputlabel>
<select
name="energieverbrauch_zeitraum_monat"
class="rounded-tr-none rounded-br-none w-full m-0"
bind:value={month}
required
>
<option disabled>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>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="Start-Jahr *"></Inputlabel>
<select
name="energieverbrauch_zeitraum_jahr"
class="rounded-tl-none rounded-bl-none w-full m-0"
bind:value={year}
required
>
<option disabled>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>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
</div>
<!-- primäre Brennstoff und Einheiten * -->
<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
<div class="input-standard">
<Inputlabel title="primär Brennstoff *"></Inputlabel>
<select
class="rounded-e-none"
name="brennstoff_1"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
required
<div class="input-checkboxen">
<div
class="grid grid-cols-[40px_max-content] items-center justify-items-start"
>
<option disabled selected value={false}>Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="Einheit *"></Inputlabel>
<select
class="rounded-s-none"
name="einheit_1"
bind:value={ausweis.einheit_1}
disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
required
>
<option disabled selected value={false}>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
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>
</div>
</div>
<!-- Verbrauch 1 -->
<div class="input-standard order-4 md:order-4 xl:order-4">
<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
<input
name="verbrauch_1"
type="number"
class:linked={abweichung.indexOf(1) > -1}
bind:value={ausweis.verbrauch_1}
required
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
<input
id="primaere_heizquelle"
type="checkbox"
class="checkbox"
name="primaere_heizquelle"
checked={true}
/>
<label for="primaere_heizquelle">primäre Heizquelle</label>
</div>
<div
class="grid grid-cols-[40px_max-content] items-center justify-items-start"
>
{#if !ausweis.zusaetzliche_heizquelle}
<input
id="zusaetzliche_heizquelle_1"
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle_1"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<label
for="zusaetzliche_heizquelle_1"
class="cursor-pointer">zusätzliche Heizquelle</label
>
{/if}
</div>
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=1></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<!-- Verbrauch 2 -->
<div class="input-standard order-5 md:order-5 xl:order-5">
<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
<input
name="verbrauch_2"
type="number"
class:linked={abweichung.indexOf(2) > -1}
bind:value={ausweis.verbrauch_2}
required
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=1></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<!-- Verbrauch 3 -->
<div class="input-standard order-6 md:order-6 xl:order-6">
<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
<input
name="verbrauch_3"
type="number"
class:linked={abweichung.indexOf(3) > -1}
bind:value={ausweis.verbrauch_3}
required
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=1></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
{#if ausweis.zusaetzliche_heizquelle}
<div class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"></div>
<!-- zusätzliche Heizquelle -->
<div class="input-standard order-7 md:order-7 xl:order-7">
<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
<div class="input-checkboxen">
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
<input
id="zusaetzliche_heizquelle"
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<label for="zusaetzliche_heizquelle" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
<HelpLabel>TEXT FEHLT</HelpLabel>
</div>
</div>
</div>
<!-- Zeitraum 1 -->
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
<div class="input-standard">
<Inputlabel title="Start-Monat *"></Inputlabel>
</div>
<select
name="energieverbrauch_zeitraum_monat"
class="rounded-tr-none rounded-br-none w-full m-0"
bind:value={month}
required
>
<option disabled>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}
selected={ausweis.startdatum?.getMonth() === month}
>{monthNames[month]}</option
>
{/each}
{/if}
</select>
<div class="input-standard order-8 md:order-8 xl:order-8">
</div>
<div class="help-label">
<HelpLabel>TEXT FEHLT</HelpLabel>
</div>
</div>
<!-- zusätzlicher Brennstoff und Einheiten * -->
<div class="input-standard">
<Inputlabel title="Start-Jahr *"></Inputlabel>
<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
<select
name="energieverbrauch_zeitraum_jahr"
class="rounded-tl-none rounded-bl-none w-full m-0"
bind:value={year}
required
>
<option disabled>Jahr</option>
{#each Array.from(availableDates.reduce((a, c) => {
a.add(c.year);
return a;
}, new Set())) as year}
<option
value={year}
selected={ausweis.startdatum?.getFullYear() === year}
>{year}</option
>
{/each}
</select>
<div class="help-label">
<HelpLabel>TEXT FEHLT</HelpLabel>
</div>
</div>
</div>
<!-- primäre Brennstoff und Einheiten * -->
<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
<div class="input-standard">
<Inputlabel title="primär Brennstoff *"></Inputlabel>
<div class="input-standard">
<Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
<select
class="rounded-e-none"
name="brennstoff_2"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
name="brennstoff_1"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
required
>
>
<option disabled selected value={false}>Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
<div class="help-label">
<HelpLabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
unterirdischen Lagerstätten vorkommt. Erdgas H hat im
Vergleich zu Erdgas L einen leicht höheren Methangehalt, und
daher einen etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische,
die bei Raumtemperatur unter vergleichsweise geringem Druck
flüssig bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von
organischen Substanzen entstandenes, bräunlich-schwarzes
Sedimentgestein.<br /><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
oder überwiegend aus Holz oder Sägenebenprodukten
hergestellt werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
Energie über wärmegedämmte Rohrsysteme. Die Wärme wird dabei
örtlich von Heizwerken produziert oder besteht aus
Prozesswärme von BHKW's. Im Unterschied zu Fernwärme wird
Nahwärme in kleineren Einheiten dezentral realisiert.<br
/><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br
/>
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br
/>
</HelpLabel>
</div>
</div>
</div>
</div>
<div class="input-standard">
<Inputlabel title="Einheit *"></Inputlabel>
<div class="input-standard">
<Inputlabel title="Einheit *"></Inputlabel>
<select
class="rounded-s-none"
name="einheit_2"
bind:value={ausweis.einheit_2}
disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
required
class="rounded-s-none"
name="einheit_1"
bind:value={ausweis.einheit_1}
disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
required
>
<option disabled selected value={false}>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
<option disabled selected value={false}>Bitte auswählen</option>
{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : [] as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
<div class="help-label">
<HelpLabel>
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).
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
Litern vor. Pellets oder Brennholz in SRm
(Schüttraummetern).
</HelpLabel>
</div>
</div>
</div>
</div>
</div>
<!-- Verbrauch 1 -->
<!-- Verbrauch 4 -->
<div class="input-standard order-4 md:order-4 xl:order-4">
<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
<div class="input-standard order-10 md:order-10 xl:order-10">
<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
<input
name="verbrauch_1"
type="number"
class:linked={abweichung.indexOf(1) > -1}
bind:value={ausweis.verbrauch_1}
required
/>
<input
name="verbrauch_4"
type="number"
bind:value={ausweis.verbrauch_4}
class:linked={abweichung.indexOf(4) > -1}
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=2></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<HelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={1}
heizquelle={1}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<!-- Verbrauch 5 -->
<!-- Verbrauch 2 -->
<div class="input-standard order-11 md:order-11 xl:order-11">
<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
<div class="input-standard order-5 md:order-5 xl:order-5">
<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
<input
name="verbrauch_5"
type="number"
bind:value={ausweis.verbrauch_5}
class:linked={abweichung.indexOf(5) > -1}
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
<input
name="verbrauch_2"
type="number"
class:linked={abweichung.indexOf(2) > -1}
bind:value={ausweis.verbrauch_2}
required
/>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=2></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<HelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={2}
heizquelle={1}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<!-- Verbrauch 6 -->
<!-- Verbrauch 3 -->
<div class="input-standard order-12 md:order-12 xl:order-12">
<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
<div class="input-standard order-6 md:order-6 xl:order-6">
<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
<input
name="verbrauch_6"
type="number"
bind:value={ausweis.verbrauch_6}
class:linked={abweichung.indexOf(6) > -1}
/>
<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
<input
name="verbrauch_3"
type="number"
class:linked={abweichung.indexOf(3) > -1}
bind:value={ausweis.verbrauch_3}
required
/>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={3}
heizquelle={1}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
{#if ausweis.zusaetzliche_heizquelle}
<div
class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"
></div>
<!-- zusätzliche Heizquelle -->
<div class="input-standard order-7 md:order-7 xl:order-7">
<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
<div class="input-checkboxen">
<div
class="grid grid-cols-[40px_max-content] items-center justify-items-start"
>
<input
id="zusaetzliche_heizquelle"
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<label for="zusaetzliche_heizquelle" class="cursor-pointer"
>zusätzliche Heizquelle</label
>
</div>
</div>
<div class="help-label">
<HelpLabel>TEXT FEHLT</HelpLabel>
</div>
</div>
<div class="input-standard order-8 md:order-8 xl:order-8"></div>
<!-- zusätzlicher Brennstoff und Einheiten * -->
<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
<div class="input-standard">
<Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
<select
class="rounded-e-none"
name="brennstoff_2"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
required
>
<option disabled selected value={false}
>Bitte auswählen</option
>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im
Vergleich zu Erdgas L einen leicht höheren Methangehalt,
und daher einen etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren
Gemische, die bei Raumtemperatur unter vergleichsweise
geringem Druck flüssig bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von
organischen Substanzen entstandenes, bräunlich-schwarzes
Sedimentgestein.<br /><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die
vollständig oder überwiegend aus Holz oder
Sägenebenprodukten hergestellt werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
Energie über wärmegedämmte Rohrsysteme. Die Wärme wird
dabei örtlich von Heizwerken produziert oder besteht aus
Prozesswärme von BHKW's. Im Unterschied zu Fernwärme
wird Nahwärme in kleineren Einheiten dezentral
realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br
/><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br
/><br />
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="Einheit *"></Inputlabel>
<select
class="rounded-s-none"
name="einheit_2"
bind:value={ausweis.einheit_2}
disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
required
>
<option disabled selected value={false}
>Bitte auswählen</option
>
{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : [] as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
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>
</div>
</div>
<!-- Verbrauch 4 -->
<div class="input-standard order-10 md:order-10 xl:order-10">
<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
<input
name="verbrauch_4"
type="number"
bind:value={ausweis.verbrauch_4}
class:linked={abweichung.indexOf(4) > -1}
/>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=2></VerbrauchsHelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={1}
heizquelle={2}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
</div>
{/if}
<!-- Verbrauch 5 -->
<div class="input-standard order-11 md:order-11 xl:order-11">
<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
<input
name="verbrauch_5"
type="number"
bind:value={ausweis.verbrauch_5}
class:linked={abweichung.indexOf(5) > -1}
/>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={2}
heizquelle={2}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
<!-- Verbrauch 6 -->
<div class="input-standard order-12 md:order-12 xl:order-12">
<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
<input
name="verbrauch_6"
type="number"
bind:value={ausweis.verbrauch_6}
class:linked={abweichung.indexOf(6) > -1}
/>
<div class="VerbrauchsEinheit">
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
</div>
<div class="help-label">
<HelpLabel>
<VerbrauchsHelpLabel
bind:ausweis
bind:gebaeude_aufnahme_allgemein
addYear={3}
heizquelle={2}
></VerbrauchsHelpLabel>
</HelpLabel>
</div>
</div>
{/if}
</div>
<style lang="postcss">
.VerbrauchsEinheit{@apply absolute right-[4rem]}
.VerbrauchsEinheit {
@apply absolute right-[4rem];
}
</style>

37
src/components/ImageGrid.svelte
View File

@@ -1,11 +1,12 @@
<script lang="ts">
import UploadImages from "./UploadImages.svelte";
import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
import { RotateCounterClockwise, Trash } from "radix-svelte-icons";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
export let images: UploadedGebaeudeBild[] = [];
export let max: number = 4;
export let min: number = 1;
export let name: string = "";
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let gebaeude: GebaeudeClient;
@@ -23,16 +24,19 @@
ctx?.translate(img.height / 2, img.width / 2);
ctx?.rotate((-90 * Math.PI) / 180);
ctx?.drawImage(img, -img.width / 2, -img.height / 2);
image.base64 = canvas.toDataURL("image/webp");
image.update = true;
resolve(image)
const clone = Object.assign({}, image)
clone.base64 = canvas.toDataURL("image/webp");
clone.update = true;
resolve(clone)
};
})
}
let upload: () => void;
</script>
<div class="flex flex-col gap-4">
<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis />
<div class="grid grid-cols-2 gap-2">
{#each images as image, i}
{#if image.kategorie == kategorie}
@@ -68,5 +72,26 @@
</div>
{/if}
{/each}
<!-- Wir zeigen Platzhalter an, damit der Nutzer sieht wie viele Bilder er hochladen soll -->
{#each { length: max - images.filter(image => image.kategorie === kategorie).length } as _, i}
<div class="relative group">
<img
src="/placeholder.png"
alt={kategorie}
class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
class:opacity-35={i >= min}
/>
<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
<button
type="button"
class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
on:click={upload}
>
<Upload size={20} color="#fff"></Upload>
</button>
</div>
</div>
{/each}
</div>
</div>

18
src/components/UploadImages.svelte
View File

@@ -2,10 +2,11 @@
import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
export let max: number = 2;
export let min: number = 1;
export let name: string = ""
// Array of base64 encoded images read into the input.
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
export let images: UploadedGebaeudeBild[] = [];
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -77,10 +78,19 @@
reader.readAsArrayBuffer(file);
}
}
let fileUpload: HTMLInputElement;
export const upload = () => {
fileUpload.click()
}
</script>
{#if max > 1}
<input type="file" class="file-input file-input-ghost" {name} multiple on:change={getAllImages} />
<!-- Falls die maximale Anzahl Bilder erreicht wurde grauen wir den input aus und zeigen einen Hilfstext -->
{#if images.filter((image) => image.kategorie === kategorie).length === max}
<span class="bg-base-200 border px-4 py-2">Maximale Anzahl Bilder wurde erreicht.</span>
{:else if max > 1}
<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
{:else}
<input type="file" class="file-input file-input-ghost" {name} on:change={getAllImages} />
<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} on:change={getAllImages} />
{/if}

55
src/components/labels/VerbrauchsHelpLabel.svelte
View File

@@ -1,36 +1,41 @@
<script lang="ts">
import moment from "moment";
import moment from "moment";
export let addYear: number;
export let heizquelle: number;
export let gebaeude_aufnahme_allgemein;
export let addYear: number;
export let heizquelle: number;
export let gebaeude_aufnahme_allgemein;
export let ausweis;
</script>
{#if ausweis.startdatum}
Bitte geben Sie Ihre
{#if heizquelle==1}
{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b> {gebaeude_aufnahme_allgemein.brennstoff_1} </b>{/if}
Verbräuche {#if ausweis.einheit_1} in <b>{ausweis.einheit_1} </b>{/if}
{:else if heizquelle==2}
{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b> {gebaeude_aufnahme_allgemein.brennstoff_2} </b>{/if}
Verbräuche {#if ausweis.einheit_2} in <b>{ausweis.einheit_2} </b>{/if}
{/if}
von <b>{moment(ausweis.startdatum).add((addYear-1), "year").format("MM.Y")}</b>
bis <b>{moment(ausweis.startdatum).add((addYear), "year").format("MM.Y")}</b>
ein.
Bitte geben Sie Ihre
{#if heizquelle == 1}
{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b>
{gebaeude_aufnahme_allgemein.brennstoff_1}
</b>{/if}
Verbräuche {#if ausweis.einheit_1}
in <b>{ausweis.einheit_1} </b>{/if}
{:else if heizquelle == 2}
{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b>
{gebaeude_aufnahme_allgemein.brennstoff_2}
</b>{/if}
Verbräuche {#if ausweis.einheit_2}
in <b>{ausweis.einheit_2} </b>{/if}
{/if}
von
<b
>{moment(ausweis.startdatum)
.add(addYear - 1, "year")
.format("MM.Y")}</b
>
bis <b>{moment(ausweis.startdatum).add(addYear, "year").format("MM.Y")}</b>
ein.
{:else}
Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die Verbräuche für den angegebenen Zeitraum eintragen.
Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff
und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die
Verbräuche für den angegebenen Zeitraum eintragen.
{/if}
<style lang="postcss">
</style>
</style>

58
src/layouts/AusweisLayout.astro
View File

@@ -100,65 +100,7 @@ const { title } = Astro.props;
}
}
article h1 {
font-size: 1.7rem;
font-weight: 500;
line-height: 1.2rem;
width: 100%;
text-align: center;
margin: 1em 0em;
}
article a {
color: #3a4ab5;
text-decoration: none;
display: inline;
}
article a:hover {
text-decoration: underline;
}
article p {
line-height: 1.7em;
padding-right: 1em;
font-size: 1.1em;
text-transform: none;
}
h3 {
@apply text-xl font-medium mt-6 mb-4;
}
input, select, textarea, .input {
@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 {
@apply bg-gray-200 border-gray-300;
}
input:disabled {
text-indent: -9999px;
}
.GRB3 {
@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
/* background: linear-gradient(
135deg,
rgba(252, 234, 187, 1) 0%,
rgba(253, 235, 189, 1) 52%,
rgba(251, 223, 147, 1) 100%
); */
}
.headline {

2
src/modules/EmbeddedAuthFlowModule.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { loginClient } from "#lib/login";
import { loginClient } from "#lib/login.js";
import EmbeddedLoginModule from "./EmbeddedLoginModule.svelte"
import EmbeddedRegisterModule from "./EmbeddedRegisterModule.svelte"

2
src/modules/EmbeddedLoginModule.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { addNotification } from "@ibcornelsen/ui";
import { loginClient } from "#lib/login";
import { loginClient } from "#lib/login.js";
export let navigate: (target: string) => void;
export let data: { email: string; passwort: string };

76
src/modules/KundendatenModule.svelte
View File

@@ -1,11 +1,16 @@
<script lang="ts">
import ProgressBar from "#components/Ausweis/Progressbar.svelte";
import type {
Bezahlmethoden,
} from "@ibcornelsen/database/client";
import type { Bezahlmethoden } from "@ibcornelsen/database/client";
import { Enums } from "@ibcornelsen/database/client";
import { dialogs } from "svelte-dialogs";
import LoginDialog from "#components/LoginDialog.svelte";
import LoginDialog from "#components/LoginDialog.svelte";
import { PRICES } from "#lib/constants.js";
import {
BenutzerClient,
VerbrauchsausweisWohnenClient,
} from "#components/Ausweis/types.js";
import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
import { client } from "src/trpc.js";
export let user: BenutzerClient;
export let ausweis: VerbrauchsausweisWohnenClient;
@@ -40,16 +45,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
export let selectedPaymentType: Bezahlmethoden =
Enums.Bezahlmethoden.paypal;
import { PRICES } from "#lib/constants";
import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
import { client } from "src/trpc";
let prices: number[] = [];
let prices: number[] = []
if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart]
}
if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart];
}
let basePrice: number = prices[0];
@@ -61,7 +61,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
);
async function speichern(e: SubmitEvent) {
e.preventDefault()
e.preventDefault();
// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
@@ -76,13 +76,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
await client.v1.verbrauchsausweisWohnen.claim.mutate({
uid: ausweis.uid
})
uid: ausweis.uid,
});
window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
}
</script>
<div class="w-full px-8">
@@ -95,7 +93,9 @@ import LoginDialog from "#components/LoginDialog.svelte";
<form on:submit={speichern}>
<div class="grid grid-cols-[1.5fr_2fr] gap-4">
<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4">
<div
class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4"
>
<div class="flex flex-col gap-2 test-box">
<strong>A - Prüfung der Ausweisart</strong>
<div>
@@ -160,15 +160,13 @@ import LoginDialog from "#components/LoginDialog.svelte";
</div>
</div>
<div>
<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
<div
class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
>
<table>
<tr>
<td><strong>Produkt:</strong></td>
<td
><div class="py-2">
Verbrauchsausweis
</div></td
>
<td><div class="py-2">Verbrauchsausweis</div></td>
</tr>
<tr>
<td><strong>Beschreibung:</strong></td>
@@ -196,7 +194,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
</div></td
>
</tr>
<hr>
<hr />
<tr>
<td>Preis inkl. MwSt.</td>
<td
@@ -207,13 +205,17 @@ import LoginDialog from "#components/LoginDialog.svelte";
</tr>
</table>
</div>
<h3 class="font-semibold mt-8">Hiermit bestelle ich folgende Version des Energieausweises:</h3>
<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
<h3 class="font-semibold mt-8">
Hiermit bestelle ich folgende Version des Energieausweises:
</h3>
<div
class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
>
<table>
<tr>
<td
>Verbrauchsausweis online für {prices[0]} € inkl. MwSt.
als PDF per E-Mail</td
>Verbrauchsausweis online für {prices[0]} € inkl.
MwSt. als PDF per E-Mail</td
>
<td
><input
@@ -242,8 +244,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
</td>
</tr><tr>
<td
>Verbrauchsausweis offline für {prices[2]} € inkl. MwSt.
als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
>Verbrauchsausweis offline für {prices[2]} € inkl.
MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
>
<td
><input
@@ -257,9 +259,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
</tr>
</table>
</div>
<h3 class="font-semibold mt-8">Zusatzleistungen</h3>
<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
<div
class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
>
<table>
{#each services as service}
<tr>
@@ -276,7 +280,6 @@ import LoginDialog from "#components/LoginDialog.svelte";
</table>
</div>
</div>
</div>
<div class="flex flex-row justify-between">
<!-- TODO: Zurück implementieren -->
@@ -284,7 +287,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
<div class="flex flex-row gap-4">
<!-- TODO: Speichern implementieren -->
<button class="btn btn-secondary mt-4">Speichern</button>
<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button>
<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button
>
</div>
</div>
</form>

44
src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte
View File

@@ -1,15 +1,17 @@
<script lang="ts">
import { BenutzerClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
import { BenutzerClient, GebaeudeAufnahmeClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
import { addNotification, updateNotification } from "@ibcornelsen/ui";
import { validateAccessTokenClient } from "../../client/lib/validateAccessToken";
import { client } from "src/trpc";
import { validateAccessTokenClient } from "../../client/lib/validateAccessToken.js";
import { client } from "src/trpc.js";
import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
import Overlay from "#components/Overlay.svelte";
import { verbrauchsausweisWohnenSpeichern } from "#client/lib/verbrauchsausweisWohnenSpeichern.js";
export let gebaeude: GebaeudeClient;
export let images: UploadedGebaeudeBild[];
export let ausweis: VerbrauchsausweisWohnenClient;
export let user: BenutzerClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
async function bilderHochladen() {
// Alle Bilder hochladen
@@ -62,6 +64,8 @@
return
}
loginOverlayHidden = true;
if (ausweis.uid) {
@@ -82,16 +86,24 @@
} else {
// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
try {
const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
ausweis,
gebaeude
})
ausweis.uid = response.uid;
gebaeude.uid = response.gebaeude_uid;
const response = await verbrauchsausweisWohnenSpeichern(ausweis,
gebaeude,
gebaeude_aufnahme_allgemein,
images,
user)
await bilderHochladen();
if (response !== null) {
await bilderHochladen();
// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
// Sonst müsste er alles neu eingeben...
ausweis.uid = response.uid;
gebaeude.uid = response.gebaeude_uid;
gebaeude_aufnahme_allgemein.uid = response.gebaeude_aufnahme_uid;
return true
}
return true;
return false;
} catch (e: any) {
await client.v1.tickets.erstellen.mutate({
titel: "Ausweis konnte nicht gespeichert werden",
@@ -116,11 +128,15 @@
return false
}
async function ausweisAbschicken(e: SubmitEvent) {
e.preventDefault()
async function ausweisAbschicken() {
const result = await ausweisSpeichern();
if (result === true) {
window.history.pushState(
{},
"",
`${location.pathname}?uid=${ausweis.uid}`
);
window.location.href = `/kundendaten?uid=${ausweis.uid}`;
}
}
@@ -134,4 +150,4 @@
</div>
</Overlay>
<button type="submit" class="button">Weiter</button>
<button on:click={ausweisAbschicken} type="button" class="button">Weiter</button>

351
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
//import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
//import Progressbar from "#components/Ausweis/Progressbar.svelte";
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import Progressbar from "#components/Ausweis/Progressbar.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte";
import BereichLabel from "#labels/BereichLabel.svelte";
@@ -8,6 +8,8 @@
//import Inputlabel from "#labels/InputLabel.svelte";
//import Label from "#components/Label.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
@@ -19,11 +21,10 @@
import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
//import ZipSearch from "#components/PlzSuche.svelte";
import {
RawNotificationWrapper,
RawNotification,
@@ -54,12 +55,16 @@
UploadedGebaeudeBild,
} from "#components/Ausweis/types.js";
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
import AusweisWeiter from "./AusweisWeiter.svelte";
import { Enums } from "@ibcornelsen/database/client";
// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
export let ausweis: VerbrauchsausweisWohnenClient;
export let user: BenutzerClient = {} as BenutzerClient;
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
let gebaeude =
ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -96,6 +101,11 @@
gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
gebaeude_aufnahme_allgemein.saniert = true;
gebaeude_aufnahme_allgemein.einheiten = 1;
gebaeude_aufnahme_allgemein.gebaeudetyp = "Einfamilienhaus"
gebaeude_aufnahme_allgemein.keller = Enums.Heizungsstatus.NICHT_VORHANDEN
gebaeude_aufnahme_allgemein.dachgeschoss = Enums.Heizungsstatus.NICHT_VORHANDEN
gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung"
gebaeude_aufnahme_allgemein.kuehlung = "1"
ausweis.ausstellgrund = "Vermietung";
ausweis.verbrauch_1 = 15000;
ausweis.verbrauch_2 = 14000;
@@ -103,10 +113,11 @@
gebaeude_aufnahme_allgemein.flaeche = 152;
gebaeude_aufnahme_allgemein.nutzflaeche = 172;
ausweis.keller_beheizt = true;
gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
ausweis.einheit_1 = "kWh";
ausweis.anteil_warmwasser_1 = 18;
ausweis.startdatum = moment("01.01.2019").toDate();
ausweis.startdatum = moment("01.01.2021").toDate();
gebaeude_aufnahme_allgemein.plz = "21039";
gebaeude_aufnahme_allgemein.ort = "Hamburg";
gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
@@ -157,6 +168,8 @@
}
</script>
<Overlay bind:hidden={speichernOverlayHidden}>
<div class="bg-white w-full max-w-screen-sm py-8 px-8">
<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
@@ -169,33 +182,28 @@
</p>
</Overlay>
<h1>Verbrauchsausweis erstellen - 45€</h1>
<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
<Progressbar progress={0} />
</div>
<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
<PerformanceScore
bind:ausweis
bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div>
</div>
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0">
<!-- Später weitermachen / Hilfe anfordern -->
<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>
<!-- A Prüfung der Ausweisart -->
@@ -229,7 +237,7 @@
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
</div>
<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
@@ -252,7 +260,7 @@
<LueftungundLeerstand bind:gebaeude_aufnahme_allgemein />
</div>
<!-- F Angaben zum Sanierungszustand des Gebäudes -->
<!-- F Angaben zur Heizungsanlage -->
<BereichLabel bereich="F"
>Angaben zur Heizunganlage</BereichLabel
@@ -280,7 +288,7 @@
/>
</div>
<!-- H Angaben zum Sanierungszustand des Gebäudes -->
<!-- H Angaben zur Wärmedammung -->
<BereichLabel bereich="H"
>Angaben zur Wärmedämmung</BereichLabel
@@ -294,11 +302,288 @@
/>
</div>
<!-- I Gebäudebild und Energieausweis PDF Vorschau -->
<BereichLabel bereich="I"
>Gebäudebild und Energieausweis PDF Vorschau</BereichLabel
>
<div class="collapseBereich">
<AusweisPreviewContainer
bind:images
bind:ausweis
bind:gebaeude />
</div>
</div>
<div
class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
grid-cols-1
xs:grid-cols-2"
>
<div class="md:justify-self-start">
<AusweisWeiter bind:ausweis bind:images bind:user bind:gebaeude bind:gebaeude_aufnahme_allgemein></AusweisWeiter>
</div>
<div class="md:justify-self-end"><Hilfe />
</div>
</div>
</form>
<RawNotificationWrapper>
{#each Object.entries($notifications) as [uid, notification] (uid)}
<RawNotification notification={{ ...notification, uid }}>
{@html notification.subtext}
</RawNotification>
{/each}
{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Bedarfsausweis benötigt!",
timeout: 0,
uid: "BEDARFSAUSWEIS",
dismissable: false,
type: "info",
}}
>
Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
>.
</RawNotification>
{/if}
{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "PLZ_NICHT_ERKANNT",
dismissable: false,
type: "warning",
}}
>
Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
sein, werden wir den Ort händisch zuordnen.
</RawNotification>
{/if}
{/await}
{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
},
type: "warning",
}}
>
Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
wurde. Sind sie sich sicher, dass das stimmt?
</RawNotification>
{/if}
{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "HEIZUNG_JUENGER_DREI_JAHRE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
ist daher nicht möglich. Bitte klicken Sie
<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
zu gelangen.
</RawNotification>
{/if}
{#if auditZeitraumAktuell(ausweis, gebaeude)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "ZEITRAUM_AKTUELL",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.ZEITRAUM_AKTUELL);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
zum Eingabeformular für den Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "KLIMA_FAKTOREN",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.KLIMA_FAKTOREN);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
Klimafaktoren dazu vor. Bitte verschieben Sie die
Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
ist, klicken Sie
<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{/await}
{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WOHN_FLAECHE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WOHN_FLAECHE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
Gebäude beziehen.
</RawNotification>
{/if}
{#if auditWarmWasser(ausweis)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WARM_WASSER",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WARM_WASSER);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
scheint nicht ganz im Rahmen zu liegen.
</RawNotification>
{/if}
{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "LEER_STAND",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.LEER_STAND);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
für den Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "VERBRAUCH_ABWEICHUNG",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
ausweis,
gebaeude_aufnahme_allgemein,
)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
dass das stimmt?
</RawNotification>
{/if}
{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "END_ENERGIE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.END_ENERGIE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
nochmal überprüfen. Bei Passivhäusern oder ganz alten
unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
</RawNotification>
{/if}
{/await}
{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Wohnfläche darf nicht größer als die Nutzfläche sein.
</RawNotification>
{/if}
</RawNotificationWrapper>
<style lang="scss">
</style>

1521
src/style/576.scss
View File

File diff suppressed because it is too large Load Diff

46
src/style/768.scss
View File

@@ -1,46 +0,0 @@
@media (min-width: 576px) and (max-width: 767.98px) {
/*-----------------------------------------------------------------*/
/*- -*/
/*- General Styles & Structure -*/
/*- (min-width: 576px) and (max-width: 767.98px) -*/
/*-----------------------------------------------------------------*/
.content {
max-width: 1920px;
display: grid;
column-gap: 0px;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.stretch-2 {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1/1/1/4 !important;
width: calc(100% - 3%);
}
.only-form-mainContent {
padding: 20px 1% !important;
width: 100%;
}
.right-sidebar {
display: block;
max-width: 940px;
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: 1/3/1/3;
padding-top: 0px;
margin-top: 0px;
width: 100%;
}
.login-container {
grid-template-columns: 1fr !important;
}
}
/* END QUERY */

228
src/style/992.scss
View File

@@ -1,228 +0,0 @@
@media (min-width: 992px) and (max-width: 10000px) {
/*-----------------------------------------------------------------*/
/*- -*/
/*- General Styles & Structure -*/
/*- (min-width: 992px) and (max-width: 10000px) -*/
/*-----------------------------------------------------------------*/
.hide-on-mobile {
display: block !important;
}
.content {
max-width: 1920px;
width: 100%;
padding: 0 2% 10px 2%;
margin: 20px auto;
display: grid;
column-gap: 20px;
grid-template-columns: 2fr 6fr 2fr;
grid-template-rows: auto;
}
.stretch-2 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-area: 1/2/1/2;
width: calc(100% - 4%);
}
.only-form-mainContent {
padding: 20px 1% !important;
width: calc(100% - 0%) !important;
grid-area: 1/2/1/4;
}
.only-login-mainContent {
padding: 20px 1% !important;
width: calc(100% - 0%) !important;
grid-area: 1/2/1/4;
}
.right-sidebar {
display: block;
max-width: 940px;
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: 1/3/1/3;
padding-top: 0px;
margin-top: 0px;
width: 100%;
}
.mainContent h1 {
margin-top: 0;
font-size: 2.5rem;
font-weight: 500;
line-height: 1.2;
width: 100%;
text-align: left;
}
.mainContent a {
color: #3A4AB5;
text-decoration: none;
display: inline;
}
.mainContent a:hover {
text-decoration: underline;
}
.mainContent p {
line-height: 1.7em;
padding-right: 1em;
font-size: 1.1em;
text-transform: none;
}
/*-----------------------------------------------------------------*/
/*- -*/
/*- Branding: -*/
/*- (min-width: 992px) and (max-width: 10000px) -*/
/*-----------------------------------------------------------------*/
.hamburger_menu {
display: none !important;
}
nav {
margin-top: 0px;
}
.active {
background-color: none;
opacity: 1;
transition: none;
}
.nav-hr {
display: block;
border: 1px solid #ff7d26;
margin: 0em 0;
height: 0px;
}
.active {
background-color: #FFF !important;
color: #000 !important;
opacity: 1;
}
.active:hover {
background-color: #ff7d26 !important;
color: #FFF !important;
}
.droparrow1::after {
transform: translate(0, -50%) rotate(0deg) !important;
transition: none !important;
}
footer a {
font-size: 18px;
line-height: 40px;
display: inline;
color: #fff;
text-decoration: none;
margin: 0 2em;
}
.grw-net-widget {
width: 100% !important
}
/*-----------------------------------------------------------------*/
/*- -*/
}
/* END QUERY */
/**
* SECTION: User Interface - Ausweis style
*/
.container-ausweis {
display: flex;
flex-direction: column;
background: #fff;
box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
width: 100%;
gap: 10px;
}
.container-ausweis a {
cursor: pointer;
color: rgb(58, 74, 181) !important;
text-decoration: none;
}
.container-ausweis h4 {
font-size: 24px;
font-weight: normal;
}
.container-ausweis h5 {
font-size: 18px;
}
.login-container {
grid-area: 4/1/4/3;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.energieausweis-img {
width: 100%;
height: min-content;
max-width: 80px;
}
/**
* SECTION: Popups
*/
.popup-bottom {
position: fixed;
bottom: 0;
left: 0;
min-height: 50px;
width: 100%;
background-color: rgb(255, 125, 38);
color: #fff;
text-align: center;
padding: 10px 20px;
z-index: 10;
font-size: 20px;
font-weight: 600;
}

46
src/style/ORG_global.scss
View File

@@ -1,46 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
* {
font-weight: 400;
box-sizing: border-box;
font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
@import './576';
@import './768';
@import './992';
@import "./smaller-768";
article hr {
@apply mb-4 mt-4;
}
article {
@apply px-6 md:px-8 py-6 w-full relative bg-white;
}
article h1 {
@apply text-4xl font-normal my-4;
}
article h2 {
@apply text-2xl font-normal my-4;
}
article h3 {
@apply text-xl font-normal my-2;
}
article a {
@apply text-blue-700 font-medium text-lg;
}
article select {
@apply rounded-lg px-2 py-1.5 outline-none;
}
.checkbox {
@apply h-5 w-4 checkbox-secondary;
}

32
src/style/global.css
View File

@@ -31,20 +31,11 @@
font-family: "Heron";
}
.promo1{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222;
}
.promo{
.promo{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
}
}
body{
@@ -57,13 +48,23 @@ body{
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{
input, select, textarea{
@apply py-1.5 px-2.5 w-full outline-none;
}
input[type="text"],
input[type="number"],
input[type="password"],
select{
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
input[type="checkbox"]{@apply inline-block accent-secondary}
radio{@apply accent-primary}
input:disabled, input:read-only, select:disabled {
@apply bg-gray-200 border-gray-500/15;
}
/*ARTICLE*/
@@ -76,15 +77,18 @@ article {
h2{@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal ml-1;}
a {@apply text-blue-700 font-medium text-lg;}
a {@apply text-blue-700 font-medium inline;}
p {@apply text-lg font-normal mb-2;}
li {@apply text-lg font-normal}
ul {@apply inline-block}
span {@apply text-secondary font-bold;}
}
/*SIDEBARS*/
/*BOXES*/

9
src/style/smaller-768.scss
View File

@@ -1,9 +0,0 @@
/*=============================================
= Target Everything below 768px =
=============================================*/
@media only screen and (max-width: 768px) {
.filter-bar {
flex-wrap: wrap;
}
}