Login Umgestaltung
This commit is contained in:
Moritz Utcke
@@ -1,6 +1,6 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import { success, MissingPropertyError, MissingEntityError, ActionFailedError, InvalidDataError, error } from "../../lib/APIResponse";
|
||||
import { validatePassword } from "../../lib/Password";
|
||||
import { success, MissingPropertyError, error } from "../../lib/APIResponse";
|
||||
import { validatePassword, hashPassword } from "../../lib/Password";
|
||||
import { User } from "../../lib/User";
|
||||
import moment from "moment";
|
||||
import { encodeToken } from "../../lib/JsonWebToken";
|
||||
|
||||
233
src/pages/pdf/ansichtsausweis.astro
Normal file
233
src/pages/pdf/ansichtsausweis.astro
Normal file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
import moment from "moment";
|
||||
import Checkbox from "~/components/Checkbox.svelte";
|
||||
import PDFHeader from "~/components/PDF/PDFHeader.svelte";
|
||||
import PDFSectionHeader from "~/components/PDF/PDFSectionHeader.svelte";
|
||||
import PDFLayout from "~/layouts/PDFLayout.astro";
|
||||
---
|
||||
|
||||
<PDFLayout title="">
|
||||
<div class="flex flex-col gap-20">
|
||||
<div class="flex flex-col gap-2">
|
||||
<PDFHeader></PDFHeader>
|
||||
<PDFSectionHeader number={1}>
|
||||
<p class="text-xs">
|
||||
Gültig bis: <span
|
||||
>{
|
||||
moment().add("10", "years").format("DD. MMM. YYYY")
|
||||
}</span>
|
||||
</p>
|
||||
<p class="text-xs">Ausweis ID <span>1293819</span></p>
|
||||
<p class="text-xs">
|
||||
Registriernummer wird nach Zahlungseingang vergeben
|
||||
</p>
|
||||
</PDFSectionHeader>
|
||||
<div
|
||||
class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg"
|
||||
>
|
||||
<h2>Gebäude</h2>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Gebäudetyp</td>
|
||||
<td>Einfamilienhaus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adresse</td>
|
||||
<td>Mönckebergstraße, 22049 Hamburg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudeteil</td>
|
||||
<td>Gesamtgebäude</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baujahr Gebäude ³</td>
|
||||
<td>1962</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
>Baujahr Wärmeerzeuger <sup>3</sup>
|
||||
<sup>4</sup></td
|
||||
>
|
||||
<td>1974</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anzahl Wohnungen</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>182m²</td>
|
||||
<td
|
||||
class="flex flex-row items-center h-full w-full gap-2 pl-2"
|
||||
>
|
||||
<input type="checkbox" />
|
||||
nach § 19 EnEV aus der Wohnfläche ermittelt
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
>Wesentliche Energieträger für<br /> Heizung und
|
||||
Warmwasser <sup>3</sup></td
|
||||
>
|
||||
<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="w-[35%]">
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>
|
||||
Hinweise zu den Angaben über die energetische Qualität des
|
||||
Gebäudes
|
||||
</h2>
|
||||
<div class="bg-white w-full">
|
||||
<p>
|
||||
Die energetische Qualität eines Gebäudes kann durch die
|
||||
Berechnung des <strong>Energiebedarfs</strong> unter Annahme
|
||||
von standardisierten Randbedingungen oder durch die Auswertung
|
||||
des <strong>Energieverbrauchs</strong> ermittelt werden. Als
|
||||
Bezugsfläche dient die energetische Gebäudenutzfläche nach der
|
||||
EnEV, die sich in der Regel von den allgemeinen Wohnflächenangaben
|
||||
unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige
|
||||
Vergleiche ermöglichen (<strong
|
||||
>Erläuterungen - siehe Seite 5</strong
|
||||
>). Teil des Energieausweises sind die
|
||||
Modernisierungsempfehlungen (Seite 4).
|
||||
</p>
|
||||
<Checkbox checked={true}>
|
||||
Der Energieausweis wurde auf der Grundlage von Berechnungen
|
||||
des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis).
|
||||
Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt.
|
||||
Zusätzliche Informationen zum Verbrauch sind freiwillig.
|
||||
</Checkbox>
|
||||
<Checkbox checked={false}>
|
||||
Der Energieausweis wurde auf der Grundlage von Auswertungen
|
||||
des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis).
|
||||
Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
|
||||
</Checkbox>
|
||||
<div class="flex flex-row justify-between items-center w-[80%]">
|
||||
<p>Datenerhebung Bedarf/Verbrauch durch</p>
|
||||
<Checkbox checked={true}>Eigentümer</Checkbox>
|
||||
<Checkbox checked={false}>Aussteller</Checkbox>
|
||||
</div>
|
||||
<Checkbox>
|
||||
Dem Energieausweis sind zusätzliche Informationen zur
|
||||
energetischen Qualität beigefügt (freiwillige Angabe).
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Hinweise zur Verwendung des Energieausweises</h2>
|
||||
<p class="bg-white">
|
||||
Der Energieausweis dient lediglich der Information. Die Angaben
|
||||
im Energieausweis beziehen sich auf das gesamte Wohngebäude oder
|
||||
den oben bezeichneten Gebäudeteil. Der Energieausweis ist
|
||||
lediglich dafür gedacht, einen überschlägigen Vergleich von
|
||||
Gebäuden zu ermöglichen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
|
||||
<p>Aussteller:</p>
|
||||
</div>
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20"></div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<p>
|
||||
<sup>1</sup> Datum der angewendeten EnEV, gegebenenfalls angewendeten
|
||||
Änderungsverordnung zur EnEV
|
||||
</p>
|
||||
<p>
|
||||
<sup>2</sup> Bei nicht rechtzeitiger Zuteilung der Registriernummer
|
||||
(§ 17 Absatz 4 Satz 4 und 5 EnEV) ist das Datum der Antragstellung
|
||||
einzutragen; die Registriernummer ist nach deren Eingang nachträglich
|
||||
einzusetzen.
|
||||
</p>
|
||||
<p><sup>3</sup> Mehrfachangaben möglich</p>
|
||||
<p><sup>4</sup> bei Wärmenetzen Baujahr der Übergabestation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<PDFHeader></PDFHeader>
|
||||
<PDFSectionHeader number={2}>
|
||||
<p>Berechneter Energiebedarf des Gebäudes</p>
|
||||
</PDFSectionHeader>
|
||||
<div
|
||||
class="box"
|
||||
>
|
||||
<h2>Energiebedarf</h2>
|
||||
<div class="bg-white w-full flex flex-col">
|
||||
<div class="flex flex-col items-end text-center">
|
||||
<div class="flex flex-row">
|
||||
<span class="bg-gray-300 p-0.5">200</span>
|
||||
<span>kg/(m²a)</span>
|
||||
</div>
|
||||
<span>CO² Treibhausgas Emissionen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PDFLayout>
|
||||
|
||||
<style is:global>
|
||||
table {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
td > table td {
|
||||
@apply px-0 py-0 border-t-0 border-b-0;
|
||||
}
|
||||
|
||||
td:has(table) {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
td > table td:first-child {
|
||||
@apply border-l-0;
|
||||
}
|
||||
|
||||
td > table td:last-child {
|
||||
@apply border-r-0;
|
||||
}
|
||||
|
||||
td {
|
||||
@apply border border-black px-1 text-xs py-0.5;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply font-bold text-sm;
|
||||
}
|
||||
|
||||
p,
|
||||
label {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.box {
|
||||
@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
|
||||
}
|
||||
|
||||
.box > * {
|
||||
@apply px-1 py-0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -1,169 +0,0 @@
|
||||
---
|
||||
import moment from "moment";
|
||||
import Checkbox from "~/components/Checkbox.svelte";
|
||||
import PDFLayout from "~/layouts/PDFLayout.astro";
|
||||
|
||||
---
|
||||
|
||||
<PDFLayout title="">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="rounded-lg border-4 border-pdf-yellow-bright p-2">
|
||||
<div class="flex flex-row gap-2 items-end">
|
||||
<h1 class="text-4xl font-bold">ENERGIEAUSWEIS</h1>
|
||||
<span class="text-lg font-semibold">für Wohngebäude</span>
|
||||
</div>
|
||||
<p>gemäß den §§ 16 ff. Energieeinsparverordnung (EnEV) vom ¹ <span class="bg-gray-300 p-0.5">18. November 2013</span></p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="bg-pdf-yellow-light rounded-lg w-full h-10 items-center justify-between flex flex-row px-2">
|
||||
<p class="text-xs">Gültig bis: <span>{moment().add("10", "years").format("DD. MMM. YYYY")}</span></p>
|
||||
<p class="text-xs">Ausweis ID <span>1293819</span></p>
|
||||
<p class="text-xs">Registriernummer wird nach Zahlungseingang vergeben</p>
|
||||
</div>
|
||||
<span class="w-10 h-10 rounded-full border-pdf-yellow-bright border-4 bg-pdf-yellow-light flex items-center justify-center font-bold text-xl">1</span>
|
||||
</div>
|
||||
<div class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg">
|
||||
<h2>Gebäude</h2>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Gebäudetyp</td>
|
||||
<td>Einfamilienhaus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adresse</td>
|
||||
<td>Mönckebergstraße, 22049 Hamburg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudeteil</td>
|
||||
<td>Gesamtgebäude</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baujahr Gebäude ³</td>
|
||||
<td>1962</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baujahr Wärmeerzeuger <sup>3</sup> <sup>4</sup></td>
|
||||
<td>1974</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anzahl Wohnungen</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>182m²</td>
|
||||
<td class="flex flex-row items-center h-full w-full gap-2 pl-2">
|
||||
<input type="checkbox">
|
||||
nach § 19 EnEV aus der Wohnfläche ermittelt
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wesentliche Energieträger für<br> Heizung und Warmwasser <sup>3</sup></td>
|
||||
<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="w-[35%]">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Hinweise zu den Angaben über die energetische Qualität des Gebäudes</h2>
|
||||
<div class="bg-white w-full">
|
||||
<p>Die energetische Qualität eines Gebäudes kann durch die Berechnung des <strong>Energiebedarfs</strong> unter Annahme von
|
||||
standardisierten Randbedingungen oder durch die Auswertung des <strong>Energieverbrauchs</strong> ermittelt werden. Als Bezugsfläche dient die energetische Gebäudenutzfläche nach der EnEV, die sich in der Regel von den allgemeinen
|
||||
Wohnflächenangaben unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige Vergleiche ermöglichen (<strong>Erläuterungen - siehe Seite 5</strong>). Teil des Energieausweises sind die Modernisierungsempfehlungen (Seite 4).</p>
|
||||
<Checkbox checked={true}>
|
||||
Der Energieausweis wurde auf der Grundlage von Berechnungen des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis). Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt. Zusätzliche Informationen zum Verbrauch sind freiwillig.
|
||||
</Checkbox>
|
||||
<Checkbox checked={false}>
|
||||
Der Energieausweis wurde auf der Grundlage von Auswertungen des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis). Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
|
||||
</Checkbox>
|
||||
<div class="flex flex-row justify-between items-center w-[80%]">
|
||||
<p>Datenerhebung Bedarf/Verbrauch durch</p>
|
||||
<Checkbox checked={true}>
|
||||
Eigentümer
|
||||
</Checkbox>
|
||||
<Checkbox checked={false}>
|
||||
Aussteller
|
||||
</Checkbox>
|
||||
</div>
|
||||
<Checkbox>Dem Energieausweis sind zusätzliche Informationen zur energetischen Qualität beigefügt (freiwillige Angabe).</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Hinweise zur Verwendung des Energieausweises</h2>
|
||||
<p class="bg-white">Der Energieausweis dient lediglich der Information. Die Angaben im Energieausweis beziehen sich auf das
|
||||
gesamte Wohngebäude oder den oben bezeichneten Gebäudeteil. Der Energieausweis ist lediglich dafür gedacht,
|
||||
einen überschlägigen Vergleich von Gebäuden zu ermöglichen.</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
|
||||
<p>Aussteller:</p>
|
||||
</div>
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
|
||||
<p>Aussteller:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PDFLayout>
|
||||
|
||||
<style is:global>
|
||||
table {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
td > table td {
|
||||
@apply px-0 py-0 border-t-0 border-b-0;
|
||||
}
|
||||
|
||||
td:has(table) {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
td > table td:first-child {
|
||||
@apply border-l-0;
|
||||
}
|
||||
|
||||
td > table td:last-child {
|
||||
@apply border-r-0;
|
||||
}
|
||||
|
||||
td {
|
||||
@apply border border-black px-1 text-xs py-0.5;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply font-bold text-sm;
|
||||
}
|
||||
|
||||
p, label {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.box {
|
||||
@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
|
||||
}
|
||||
|
||||
.box > * {
|
||||
@apply px-1 py-0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
import moment from "moment";
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import { decodeToken } from "../../lib/JsonWebToken";
|
||||
import { User } from "../../lib/User";
|
||||
import UserLayout from "~/layouts/UserLayout.astro";
|
||||
import AusweisCard from "~/components/AusweisCard.svelte";
|
||||
|
||||
const token = Astro.cookies.get("token").value;
|
||||
const expires = Astro.cookies.get("expires").number();
|
||||
@@ -25,15 +26,15 @@ if (!user) {
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Dashboard">
|
||||
<div class="profile_container">
|
||||
<div><h1>Willkommen zurück <b>{user.username}</b></h1>
|
||||
<div id="searchBoxContainer" class="flex-row" style="gap: 5px; margin: 10px 0;"></div>
|
||||
<UserLayout title="Dashboard">
|
||||
<h1>Willkommen zurück <b>{user.email}</b></h1>
|
||||
|
||||
<h2>Ihre Ausweise</h2>
|
||||
<div class="overflow-x-auto grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<AusweisCard strasse="Götheborgstraße 12" plz="21030" stadt="Hamburg"></AusweisCard>
|
||||
<AusweisCard strasse="Götheborgstraße 12" plz="21030" stadt="Hamburg"></AusweisCard>
|
||||
<AusweisCard strasse="Götheborgstraße 12" plz="21030" stadt="Hamburg"></AusweisCard>
|
||||
<AusweisCard strasse="Götheborgstraße 12" plz="21030" stadt="Hamburg"></AusweisCard>
|
||||
<AusweisCard strasse="Götheborgstraße 12" plz="21030" stadt="Hamburg"></AusweisCard>
|
||||
</div>
|
||||
<div class="flex-column" style="gap: 10px;">
|
||||
<a href="/user/settings" class="button">Account Details Ändern</a>
|
||||
<a href="/logout" class="button">Ausloggen</a>
|
||||
</div>
|
||||
<div class='login-container' id="items-container"></div>
|
||||
</div>
|
||||
</Layout>
|
||||
</UserLayout>
|
||||
Reference in New Issue
Block a user