Merge pull request #325 from IBCornelsen/UMBE

Layout
2025-02-11 00:53:29 +01:00
parent 5e88f1d572 41ac87f5e1
commit e0efad1cc5
12 changed files with 301 additions and 30 deletions
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -7,7 +7,7 @@
 	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64")
 </script>

-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/ansichtsausweis?base64={base64}">
+<a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/ansichtsausweis?base64={base64}">
 	<img src="/images/ausweis.webp" alt="Ausweis" />
 	<span class="text-black font-medium text-lg">Ansichtsausweis</span>
 </a>
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -55,7 +55,7 @@

 		</div>

-		<div class="flex flex-row gap-4 mt-4">
+		<div class="grid grid-cols-2 gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} />
 			<DatenblattButton {ausweis} />
 		</div>
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -110,24 +110,37 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 "
 >
 	<!-- primäre Heizquellen -->
+	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+		<div class="input-standard">
+			<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={true}
-				/>
-				<label for="primaere_heizquelle">primäre Heizquelle</label>
+			<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={true}
+					/>
+					<label for="primaere_heizquelle">primäre Heizquelle</label>
+				</div>
+	
 			</div>
+	
+			<div class="help-label">
+				<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
+					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
+					Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
+				Verbräuche öffnet sich dann.</HelpLabel>
+			</div>
+		</div>

+		<div class="input-standard">
+			<Inputlabel title="Heizquellen"></Inputlabel>
+			<div class="input-checkboxen">
 			<div
 				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
 			>
@@ -146,15 +159,14 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 					>
 				{/if}
 			</div>
-		</div>
-
-		<div class="help-label">
-			<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
-				(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
-				Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
-			Verbräuche öffnet sich dann.</HelpLabel>
+			</div>
+			<div class="help-label">
+				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
+					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
+			</div>
 		</div>
 	</div>
+	

 	<!-- Zeitraum 1 -->

--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -7,7 +7,7 @@
 	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64");
 </script>

-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">
+<a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">
 	<img src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
 </a>
--- a/src/components/design/header/AusweisHeader_immowelt.astro
+++ b/src/components/design/header/AusweisHeader_immowelt.astro
@@ -0,0 +1,60 @@
+---
+import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
+---
+
+<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
+
+	<div class="grid grid-cols-[min-content_1fr] items-center">
+		
+
+	<div class="w-[150px] h-[80px]">
+	<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
+	<img class="w-[109px]" src="/images/immowelt/immowelt.svg" alt="immowelt"/>
+	</div>	
+	</div>
+
+<div>
+
+<ul class="navlist">
+<li><button>Verbrauchsausweis</button></li>
+<li><button>Bedarfssausweis</button></li>
+<li><button>Verbrauchsausweis Gewerbe</button></li>
+</ul>
+
+</div>
+
+</div>
+
+
+
+</header>
+
+<div class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover" style="background-image: url('/images/immowelt/hero-desktop.webp'); 
+background-repeat:no-repeat; background-position:right;">
+</div>
+
+<style lang="postcss">
+
+@font-face {
+    font-family: "immo Sans";
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+}
+
+
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+
+	.navlist{@apply block sm:flex pl-[1.75rem];}
+	.navlist li{@apply flex md:pr-[6px]}
+	.navlist li button{@apply text-[0.75rem] md:text-[1rem]  text-[#646464] sm:p-2 text-left
+		hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
+		font-family: "immo Sans";
+		font-weight:400;}
+
+</style>
--- a/src/layouts/AusweisLayoutDaten_immowelt.astro
+++ b/src/layouts/AusweisLayoutDaten_immowelt.astro
@@ -0,0 +1,102 @@
+---
+import "../style/global.css";
+import "../style/formular.css";
+import "../../svelte-dialogs.config"
+import Header from "#components/design/header/AusweisHeader_immowelt.astro";
+import Footer from "#components/design/footer/Footer.astro";
+import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<script>
+window.addEventListener("scroll", (event) => {
+    let scroll = window.scrollY;
+
+
+//	if(scroll>=400){
+//
+//		document.getElementById('skala')?.classList.add('2xl:w-[calc(100%-6rem)]', '2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20' ,'2xl:[box-shadow:0_2px_12px_#ccc;]');
+//		document.getElementById('formInput-1')?.classList.add('2xl:mt-[270px]');	
+//	}else{
+//
+//		document.getElementById('skala')?.classList.remove('2xl:w-[calc(100%-6rem)]','2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20','2xl:[box-shadow:0_0_20px_#000;]');
+//		document.getElementById('formInput-1')?.classList.remove('2xl:mt-[270px]');
+//	}
+    
+
+});
+
+</script>
+
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<link rel="canonical" href="https://online-energieausweis.org/" />
+
+		<meta property="og:locale" content="de_DE" />
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			property="og:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta property="og:url" content="https://online-energieausweis.org/" />
+		<meta property="og:site_name" content="Energieausweis online erstellen" />
+
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta
+			name="twitter:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			name="twitter:image"
+			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
+		/>
+		<title>
+			{title || 'Energieausweis online erstellen - Online Energieausweis'}
+		</title>
+	</head>
+
+	<body>
+			
+		<Header />
+	
+		<main class="w-full p-0 grid grid-cols-1">
+
+		<!--<SidebarLeft />-->
+
+		<article class="box rounded-tl-none p-2 lg:p-12">
+		<slot />
+		</article>
+ 
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+
+	</body>
+</html>
+
+<style is:global lang="postcss">
+
+</style>
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -175,12 +175,12 @@ const ausweisart: Enums.Ausweisart = "VerbrauchsausweisWohnen"



-<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
+<div id="skala" class="bg-white grid grid-cols-1 p-4

-2xl:grid-cols-2 2xl:gap-x-8
+lg:grid-cols-2 lg:gap-x-6
 ">

-<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
+<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
@@ -188,7 +188,7 @@ const ausweisart: Enums.Ausweisart = "VerbrauchsausweisWohnen"
 	/>
 </div>

-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
+<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
 	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
--- a/src/pages/immowelt/verbrauchsausweis-wohngebaeude/index.astro
+++ b/src/pages/immowelt/verbrauchsausweis-wohngebaeude/index.astro
@@ -0,0 +1,80 @@
+---
+import AusweisLayout from "#layouts/AusweisLayoutDaten_immowelt.astro";
+import VerbrauchsausweisWohnenModule from "#modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte";
+import { AufnahmeClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { createCaller } from "../../../astro-typesafe-api-caller.js";
+import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants";
+import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
+
+const uid = Astro.url.searchParams.get("uid");
+let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
+let aufnahme: AufnahmeClient = {} as AufnahmeClient;
+let objekt: ObjektClient = {} as ObjektClient;
+let bilder: UploadedGebaeudeBild[] = []
+
+const valid = validateAccessTokenServer(Astro);
+
+const caller = createCaller(Astro);
+
+if (uid) {
+	if (!valid) {
+		return Astro.redirect(
+			`/auth/login?redirect=${Astro.url.toString()}`
+		);
+	}
+
+	try {
+		ausweis = await caller["verbrauchsausweis-wohnen"]._uid.GET.fetch(null, {
+			headers: {
+				authorization: `Bearer ${Astro.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)?.value}`
+			},
+			params: {
+				uid
+			}
+		});
+
+		aufnahme = await caller.aufnahme._uid.GET.fetch(null, {
+			headers: {
+				authorization: `Bearer ${Astro.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)?.value}`
+			},
+			params: {
+				uid: ausweis.uid_aufnahme
+			}
+		})
+
+		objekt = await caller.objekt._uid.GET.fetch(null, {
+			headers: {
+				authorization: `Bearer ${Astro.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)?.value}`
+			},
+			params: {
+				uid: ausweis.uid_objekt
+			}
+		})
+
+		bilder = await caller.objekt._uid.bilder.GET.fetch(null, {
+			headers: {
+				authorization: `Bearer ${Astro.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)?.value}`
+			},
+			params: {
+				uid: ausweis.uid_objekt
+			}
+		})
+
+		if (!ausweis) {
+			// Der Ausweis scheint nicht zu existieren.
+			// Wir leiten auf die generische Ausweisseite ohne UID weiter.
+			return Astro.redirect(
+				"/energieausweis-erstellen/verbrauchsausweis-wohnen"
+			);
+		}
+	} catch(e) {
+		return Astro.redirect(
+			"/energieausweis-erstellen/verbrauchsausweis-wohnen"
+		);
+	}
+}
+---
+
+<AusweisLayout title="Verbrauchsausweis erstellen">
+	<VerbrauchsausweisWohnenModule client:load {ausweis} {objekt} {aufnahme} {bilder} />
+</AusweisLayout>
--- a/src/pages/immowelt/verbrauchsausweis-wohngebaeude/produkt-uebersicht.astro
+++ b/src/pages/immowelt/verbrauchsausweis-wohngebaeude/produkt-uebersicht.astro
@@ -0,0 +1,13 @@
+---
+import Layout from "#layouts/Layout.astro";
+import ProduktUebersichtVerbrauchsausweisWohnen from "#components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte";
+---
+
+<Layout title="Verbrauchsausweis Produktübersicht">
+
+<ProduktUebersichtVerbrauchsausweisWohnen>
+
+</ProduktUebersichtVerbrauchsausweisWohnen>
+
+
+</Layout>
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -40,9 +40,12 @@


 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-[#efefef] min-w-[320px]
 }

+main{
+	@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-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap