Merge pull request #203 from IBCornelsen/main

update UMBE

package.json

@@ -45,6 +45,7 @@
     "i18next-http-backend": "^2.6.2",
     "js-cookie": "^3.0.5",
     "js-interpolate": "^1.0.1",
+    "jsonwebtoken": "^9.0.2",
     "katex": "^0.16.11",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",

src/components/Bedarfsausweis/BedarfsausweisContent1.svelte

@@ -0,0 +1,417 @@
+<script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
+	import Label from "#components/Label.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
+	import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
+	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
+	import moment from "moment";
+	import { BitChecker } from "src/lib/BitChecker";
+	import type { BedarfsausweisWohnen } from "@ibcornelsen/database/client";
+
+	let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
+
+	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
+
+	let fensterArten = {
+		Einfachverglasung: 5,
+		"Holzfenster Doppelverglasung": 2.7,
+		"Kunststofffenster Doppelverglasung": 3,
+		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
+		"Fenster Doppelverglasung (ab 1995)": 1.8,
+		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
+		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
+		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
+		"Passivhausfenster(U-Wert 0,7)": 0.7,
+		"Passivhausfenster(U-Wert 0,6)": 0.6,
+		"Fenster mit U-Wert 2,3": 2.3,
+		"Fenster mit U-Wert 1,6": 1.6,
+		"Fenster mit U-Wert 1,7": 1.7,
+		"Fenster mit U-Wert 1,3": 1.3,
+		"Fenster mit U-Wert 1": 1,
+	};
+
+	const arrayRange = (start: number, stop: number, step: number) =>
+		Array.from(
+			{ length: (stop - start) / step + 1 },
+			(value, index) => start + index * step
+		);
+
+	function automatischAusfüllen() {
+		ausweis.baujahr_anlage = 1974;
+		ausweis.baujahr_gebaeude = 1962;
+		ausweis.anzahl_einheiten = 1;
+		ausweis.objekt_saniert = true;
+		ausweis.objekt_strasse = "Mönckebergstraße";
+		ausweis.objekt_plz = "22049";
+		ausweis.objekt_ort = "Hamburg";
+		ausweis.wohnflaeche = 152;
+		ausweis.keller_beheizt = true;
+		ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
+		ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
+		ausweis.energietraeger_1 = "Erdgas";
+		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
+		ausweis.versorgungssysteme = BitChecker(1);
+		ausweis.fenster_dach = BitChecker(1);
+		ausweis.daemmung = BitChecker(1);
+		ausweis.objekt_typ = "Einfamilienhaus";
+		ausweis.objekt_gebaeudeteil = "Gesamtgebäude";
+		ausweis.lueftungskonzept = "Fensterlüftung";
+		ausweis.wird_gekuehlt = false;
+		ausweis.energieverbrauch_1_heizquelle_1 = 40120;
+		ausweis.energieverbrauch_2_heizquelle_1 = 42120;
+		ausweis.energieverbrauch_3_heizquelle_1 = 41120;
+		ausweis.anzahl_vollgeschosse = 2;
+		ausweis.geschosshoehe = 2.25;
+		ausweis.anzahl_gauben = 1;
+		ausweis.breite_gauben = 0.7;
+		ausweis.masse_a = 4;
+		ausweis.masse_b = 12;
+		ausweis.masse_c = 3;
+		ausweis.masse_d = 6;
+		ausweis.masse_e = 4;
+		ausweis.masse_f = 9;
+		ausweis.fensterflaeche_so_sw = 8;
+		ausweis.fensterflaeche_nw_no = 8;
+		ausweis.aussenwandflaeche_unbeheizt = 15;
+		ausweis.fenster_flaeche_1 = 16;
+		ausweis.fenster_art_1 = 5;
+		ausweis.fenster_flaeche_2 = 0;
+		ausweis.fenster_art_2 = 5;
+		ausweis.dachfenster_flaeche = 12;
+		ausweis.dachfenster_art = 5;
+		ausweis.haustuer_flaeche = 2;
+		ausweis.haustuer_art = 5;
+		ausweis.dach_bauart = "Massive Konstruktion";
+		ausweis.dach_daemmung = 0;
+		ausweis.decke_bauart = "Massive Konstruktion";
+		ausweis.decke_daemmung = 0.02;
+		ausweis.aussenwand_bauart = "Massive Konstruktion";
+		ausweis.aussenwand_daemmung = 0.05;
+		ausweis.boden_bauart = "Massive Konstruktion";
+		ausweis.boden_daemmung = 0.08;
+		ausweis.warmwasser_verteilung = "zvmzbis1978";
+		ausweis.warmwasser_speicherung = "zwwsath";
+		ausweis.warmwasser_erzeugung = "ktkesselbis1986";
+		ausweis.heizung_zentral = false;
+		ausweis.heizung_verteilung = "zv7055bis1978";
+		ausweis.waerme_erzeugung_heizung = "ktkesselbis1986h";
+		ausweis.heizung_speicherung = "elzs7055bis1994";
+		ausweis.energietraeger_2 = "Braunkohle";
+		ausweis.anteil_zusatzheizung = 0.7;
+		ausweis = ausweis;
+	}
+
+  function toggleSection(section: HTMLElement): void {
+  // Find the next sibling element and assert it's an HTMLElement
+  const formContainer = section.nextElementSibling as HTMLElement | null;
+  if (!formContainer) {
+    console.error("Form container not found.");
+    return;
+  }
+
+  // Find the icon inside the section and assert it's an HTMLElement
+  const icon = section.querySelector('.toggle-icon') as HTMLElement | null;
+  if (!icon) {
+    console.error("Toggle icon not found.");
+    return;
+  }
+
+  // Toggle classes for expanded and collapsed states
+  formContainer.classList.toggle('expanded');
+  section.classList.toggle('collapsed');
+}
+
+</script>
+
+<div class="mt-8 m-auto w-[95%] relative">
+
+<div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Bedarfsausweis erstellen - 75€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore {ausweis} />
+</div>
+
+<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
+
+      <div class="form-section" onclick="toggleSection(this)">
+        <label id="headlinep" class="section-title">A - Prüfung der Ausweisart</label>
+        <span class="toggle-icon">▶</span>
+      </div>
+      
+      <div class="form-container">
+        <div class="form-grid">
+          <!-- Anlass für Energieausweis -->
+          <div class="form-group">
+            <select id="ausstellgrund" name="ausstellgrund" required class="form-select">
+              <option value="" disabled selected>Anlass *</option>
+              <option value="Neubau">Neubau</option>
+              <option value="Vermietung">Vermietung</option>
+              <option value="Verkauf">Verkauf</option>
+              <option value="Modernisierung">Modernisierung</option>
+              <option value="Sonstiges">Sonstiges</option>
+            </select>
+          </div>
+      
+          <!-- Baujahr Heizung -->
+          <div class="form-group">
+            <input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung *" class="form-input">
+          </div>
+      
+          <!-- Baujahr Gebäude -->
+          <div class="form-group">
+            <input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
+          </div>
+      
+          <!-- Anzahl der Wohnungen -->
+          <div class="form-group">
+            <input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
+          </div>
+      
+          <!-- Sanierungsstatus -->
+          <div class="form-group">
+            <select id="objekt_saniert" name="objekt_saniert" required class="form-select">
+              <option value="" disabled selected>Sanierungsstatus *</option>
+              <option value="1">saniert</option>
+              <option value="0">unsaniert</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+  <div class="form-section" onclick="toggleSection(this)">
+    <label id="headlinep" class="section-title">B - Eingabe der Gebäudeadresse</label>
+    <span class="toggle-icon">▶</span>
+  </div>
+
+  <!-- Collapsible Container -->
+  <div class="form-container">
+    <div class="form-grid">
+    <!-- Straße und Hausnummer -->
+    <div class="form-group">
+        <input
+          name="objekt_strasse"
+          type="text"
+          required
+          placeholder="Straße, Hausnummer *"
+          bind:value="{ausweis.objekt_strasse}"
+          class="form-input"
+        />
+    </div>
+
+    <!-- PLZ und Ort -->
+    <div class="form-group">
+      <input
+          name="objekt_plz"
+          type="text"
+          required
+          placeholder="PLZ *"
+          bind:value="{ausweis.objekt_plz}"
+          class="form-input"
+        />
+    </div>
+
+    <!-- Ort -->
+    <div class="form-group">
+        <input
+          name="objekt_ort"
+          type="text"
+          placeholder="Ort *"
+          bind:value="{ausweis.objekt_ort}"
+          class="form-input"
+        />
+    </div>
+
+    <!-- Wohnfläche -->
+    <div class="form-group">
+        <input
+          name="wohnflaeche"
+          type="number"
+          required
+          placeholder="Wohnfläche in m² *"
+          bind:value="{ausweis.wohnflaeche}"
+          class="form-input"
+        />
+    </div>
+
+    <!-- Gebäudetyp -->
+    <div class="form-group">
+        <select
+          name="objekt_typ"
+          required
+          bind:value="{ausweis.objekt_typ}"
+          class="form-input"
+        >
+          <option value="" disabled selected>Gebäudetyp *</option>
+          <option value="Einfamilienhaus">Einfamilienhaus</option>
+          <option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
+          <option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
+          <option value="Doppelhaushälfte">Doppelhaushälfte</option>
+          <option value="Reihenendhaus">Reihenendhaus</option>
+          <option value="Reihenmittelhaus">Reihenmittelhaus</option>
+          <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+          <option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
+          <option value="Atrium-Bungalow">Atrium-Bungalow</option>
+          <option value="Winkelbungalow">Winkelbungalow</option>
+        </select>
+    </div>
+
+    <!-- Gebäudeteil -->
+    <div class="form-group">
+        <select
+          name="objekt_gebaeudeteil"
+          required
+          bind:value="{ausweis.objekt_gebaeudeteil}"
+          class="form-input"
+        >
+          <option value="" disabled selected>Gebäudeteil *</option>
+          <option value="Gesamtgebäude">Gesamtgebäude</option>
+          <option value="Wohnen">Wohnen</option>
+        </select>
+    </div>
+    </div> 
+  </div>
+
+</form>
+
+</div>
+
+<style lang="scss">
+
+    .form-section {
+  margin-bottom: 0.8rem;
+  margin-top: 2rem;
+
+  .section-title {
+    font-size: 1.125rem; // 18px
+    font-weight: 600;
+    text-align: left;
+  }
+}
+
+.form-container {
+  padding: 1rem;
+  background-color: #f3f4f6; // Tailwind's bg-gray-100
+  border-radius: 0.5rem;
+  margin-bottom: 1.5;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+
+  .form-group {
+    grid-column: span 4; // Equivalent to col-span-4 in Tailwind
+
+    &.full-width {
+      grid-column: span 12;
+    }
+
+    .form-label {
+      display: block;
+      font-size: 0.875rem; // 14px
+      font-weight: 500;
+      color: #374151; // Tailwind's text-gray-700
+      margin-bottom: 0.5rem;
+    }
+
+    .form-input,
+    .form-select {
+      display: block;
+      width: 100%;
+      padding: 0.5rem;
+      font-size: 0.875rem;
+      color: #111827; // Tailwind's text-gray-900
+      border: 1px solid #d1d5db; // Tailwind's border-gray-300
+      border-radius: 0.375rem; // Rounded-md
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); // Tailwind's shadow-sm
+      transition: border-color 0.2s, box-shadow 0.2s;
+
+      &:focus {
+        border-color: #6366f1; // Tailwind's focus:border-indigo-500
+        box-shadow: 0 0 0 1px #6366f1; // Tailwind's focus:ring-indigo-500
+        outline: none;
+      }
+
+      &::placeholder {
+        color: #9ca3af; // Tailwind's text-gray-400
+        font-style: italic;
+      }
+
+      option {
+      color: #111827; // Tailwind's text-gray-900
+    }
+
+    option[disabled] {
+      color: #9ca3af; // Tailwind's text-gray-400
+    }
+
+    }
+
+    .form-options {
+      margin-top: 0.5rem;
+
+      .radio-option {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+
+      input {
+          accent-color: #6366f1; // Tailwind's text-indigo-600
+          margin-right: 0.5rem;
+        }
+
+      span {
+          font-size: 0.875rem;
+          color: #374151; // Tailwind's text-gray-700
+        }
+      }
+    }
+
+  }
+}
+
+.form-section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+    }
+
+    .section-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+
+    .toggle-icon {
+      font-size: 1.5rem;
+      transition: transform 0.3s ease;
+    }
+
+    .collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+
+    .form-container {
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+    }
+
+    .collapsed .form-container {
+      max-height: 0;
+      padding: 0;
+    }
+
+    .form-container.expanded {
+      max-height: 500px; /* Adjust based on content size */
+      padding: 10px 0;
+    }
+
+</style>

src/components/design/content/banner-saeule.svelte

@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 
-
 <div class="mt-12 m-auto w-[90%] relative">
+
 <div id="saeulen">
 
     <div class="saeule">

src/lib/constants.ts

@@ -10,9 +10,9 @@ export const API_UID_COOKIE_NAME = "uid";
 export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
 	// per E-Mail , inkl.Beratung, offline
 	BedarfsausweisWohnen: [135, 145, 290],
-	VerbrauchsausweisWohnen: [55, 75, 180],
+	VerbrauchsausweisWohnen: [65, 75, 180],
 	VerbrauchsausweisGewerbe: [95, 115, 360],
-	BedarfsausweisGewerbe: [400, 0, 0]
+	BedarfsausweisGewerbe: [500, 0, 0]
 };
 
 export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {

src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro

@@ -1,7 +1,7 @@
 ---
 
 import AusweisLayout from "#layouts/AusweisLayout.astro";
-import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";
+import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent1.svelte";
 
 
 ---