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

Mobile Seite schön gemacht und generelle Verbesserungen

Browse Source
This commit is contained in:
Moritz Utcke
2024-03-01 14:33:13 +07:00
parent db7cc9af33
commit 26058e3205
13 changed files with 75 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -51,6 +51,7 @@
"katex": "^0.16.7",
"knex": "^2.4.2",
"moment": "^2.29.4",
"moment-timezone": "^0.5.45",
"pg": "^8.11.0",
"radix-svelte-icons": "^1.0.0",
"sass": "^1.62.1",

13
src/components/AnsichtsausweisButton.svelte
View File

@@ -1,17 +1,10 @@
<script lang="ts">
import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { Buffer } from "buffer";
import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let gebaeude: GebaeudeClient;
export let ausweis: VerbrauchsausweisWohnenClient;
let base64: string = "";
$: {
if (ausweis && gebaeude) {
base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
}
}
$: 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}">

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

@@ -5,8 +5,6 @@
import ImageGrid from "../ImageGrid.svelte";
import {
Enums,
type BedarfsausweisWohnen,
type VerbrauchsausweisGewerbe,
} from "@ibcornelsen/database/client";
import {
@@ -16,9 +14,7 @@
} from "./types";
export let ausweis:
| VerbrauchsausweisWohnenClient
| VerbrauchsausweisGewerbe
| BedarfsausweisWohnen;
| VerbrauchsausweisWohnenClient;
export let gebaeude: GebaeudeClient;
export let images: UploadedGebaeudeBild[] = [];
@@ -53,8 +49,8 @@
<hr class="trenner_form_100" />
<div class="flex flex-row gap-4">
<AnsichtsausweisButton {ausweis} {gebaeude} />
<DatenblattButton {ausweis} {gebaeude} />
<AnsichtsausweisButton {ausweis} />
<DatenblattButton {ausweis} />
</div>
</div>
</div>

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

@@ -36,14 +36,17 @@
fuelMap[fuel[0]].push(fuel[1]);
}
let month: string = "01";
let year: string = "2018";
$: {
if (month && year) {
ausweis.startdatum = moment(`${month}.01.${year}`).toDate();
console.log(ausweis.startdatum);
let month = ausweis.startdatum?.getMonth() || 1;
let year = ausweis.startdatum?.getFullYear() || 2018;
$: {
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();
}
}
@@ -171,7 +174,7 @@
>
<option>auswählen</option>
{#each availableMonths as m, i}
<option value={i + 1}>{m}</option>
<option value={i}>{m}</option>
{/each}
</select>

2
src/components/Dashboard/DashboardAusweis.svelte
View File

@@ -60,7 +60,7 @@
<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
{#if ausweis.gebaeude_aufnahme_allgemein.storniert}
<div class="absolute top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.7)] z-[5] rounded-lg select-none">
<h1 class="absolute -rotate-[25deg] text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
<h1 class="absolute -rotate-[25deg] text-5xl md:text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
</div>
{/if}
<figure class="lg:w-1/2">

29
src/components/Dashboard/DashboardSidebar.svelte
View File

@@ -1,12 +1,14 @@
<script lang="ts">
import { ripple } from "svelte-ripple-action";
import type { RippleOptions } from "svelte-ripple-action/dist/constants";
import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed } from "radix-svelte-icons"
import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu } from "radix-svelte-icons"
import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
import DashboardNotification from "./DashboardNotification.svelte";
import { notifications } from "#components/NotificationProvider/shared";
import ThemeController from "#components/ThemeController.svelte";
import { BenutzerClient } from "#components/Ausweis/types";
import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
import { slide } from "svelte/transition";
export let lightTheme: boolean;
export let benutzer: BenutzerClient;
@@ -15,10 +17,29 @@
center: false,
color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
};
let headerOpen = false;
</script>
<aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
<a href="/" class="px-8"
<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-20">
<button on:click={() => headerOpen = !headerOpen}>
{#if headerOpen}
<Cross1 size={28}></Cross1>
{:else}
<HamburgerMenu size={28}></HamburgerMenu>
{/if}
</button>
<a href="/" class="block md:hidden"
><img
src="/images/header/logo-big.svg"
class="w-24"
alt="IBCornelsen - Logo"
/></a
>
</header>
<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
<a href="/" class="px-8 hidden md:block"
><img
src="/images/header/logo-big.svg"
class="w-36"
@@ -26,7 +47,7 @@
/></a
>
<div class="menu flex flex-col gap-2 mt-12 px-0">
<div class="menu flex flex-col gap-2 mt-0 md:mt-12 px-0">
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
<Home width={22} height={22} />
Home

13
src/components/DatenblattButton.svelte
View File

@@ -1,17 +1,10 @@
<script lang="ts">
import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { Buffer } from "buffer";
import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let gebaeude: GebaeudeClient;
export let ausweis: VerbrauchsausweisWohnenClient;
let base64: string = "";
$: {
if (ausweis && gebaeude) {
base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
}
}
$: 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}">

147
src/data/templates/verbrauchsausweis-wohnen-2016.json
View File

File diff suppressed because one or more lines are too long

2
src/layouts/UserLayout.astro
View File

@@ -103,7 +103,7 @@ let lightTheme = Astro.cookies.get("theme").value === "light";
<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
<DashboardSidebar lightTheme={lightTheme} benutzer={benutzer} client:load></DashboardSidebar>
<main class="p-8 overflow-auto h-screen bg-base-100">
<main class="p-4 md:p-8 overflow-auto h-screen bg-base-100 pt-20 md:!pt-24">
<slot />
</main>
</body>

17
src/lib/AusweisData.ts
View File

@@ -1,17 +1,20 @@
import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
export function convertAusweisData(
inputs: VerbrauchsausweisWohnenClient
inputs: Partial<VerbrauchsausweisWohnenClient>
): Record<string, string> {
let gebaeude_aufnahme_allgemein = inputs.gebaeude_aufnahme_allgemein || {};
let gebaeude_stammdaten = inputs.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
return {
"gebaeude_stammdaten.adresse": inputs.gebaeude_aufnahme_allgemein.adresse || "",
"gebaeude_stammdaten.adresse": gebaeude_stammdaten.adresse || "",
"gebaeude_stammdaten.gebaeudetyp":
inputs.gebaeude_aufnahme_allgemein.gebaeudetyp || "",
gebaeude_stammdaten.gebaeudetyp || "",
"gebaeude_stammdaten.baujahr_gebaeude":
inputs.gebaeude_aufnahme_allgemein.baujahr_gebaeude.join(", ") || "",
gebaeude_stammdaten.gebaeude_aufnahme_allgemein?.join(", ") || "",
"gebaeude_stammdaten.baujahr_heizung":
inputs.gebaeude_aufnahme_allgemein.baujahr_heizung.join(", ") || "",
"gebaeude_stammdaten.plz": inputs.gebaeude_aufnahme_allgemein.plz || "",
"gebaeude_stammdaten.ort": inputs.gebaeude_aufnahme_allgemein.ort || "",
gebaeude_stammdaten.gebaeude_aufnahme_allgemein?.join(", ") || "",
"gebaeude_stammdaten.plz": gebaeude_stammdaten.plz || "",
"gebaeude_stammdaten.ort": gebaeude_stammdaten.ort || "",
};
}

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

@@ -103,8 +103,9 @@
// Jetzt müssen wir ihn nun nur noch abspeichern.
try {
const gebaeudeBilderEntfernt = exclude(gebaeude, ["gebaeude_bilder"])
const gebaeudeAufnahmeGeneratedFieldsEntfernt = exclude(gebaeude_aufnahme_allgemein, ["erstellungsdatum"])
const ausweisGeneratedFieldsEntfernt = exclude(ausweis, ["ausweisart", "rechnungen"])
const gebaeudeAufnahmeGeneratedFieldsEntfernt = exclude(gebaeude_aufnahme_allgemein, ["erstellungsdatum", "events"])
const ausweisGeneratedFieldsEntfernt = exclude(ausweis, ["ausweisart", "rechnungen", "erstellungsdatum"])
await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
...ausweisGeneratedFieldsEntfernt,
gebaeude_aufnahme_allgemein: {
@@ -115,6 +116,9 @@
}
})
console.log(ausweisGeneratedFieldsEntfernt);
await bilderHochladen();
return true;
@@ -187,7 +191,7 @@
gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
ausweis.einheit_1 = "kWh";
ausweis.anteil_warmwasser_1 = 18;
ausweis.startdatum = moment("12.01.2019").toDate();
ausweis.startdatum = moment("01.01.2019").toDate();
gebaeude.plz = "21039";
gebaeude.ort = "Hamburg";
gebaeude.adresse = "Curslacker Deich 170";

15
src/modules/Dashboard/DashboardEinstellungenModule.svelte
View File

@@ -61,9 +61,9 @@
}
</script>
<h1 class="text-4xl font-medium my-8">Einstellungen</h1>
<Tabs class="h-full">
<div class="grid grid-cols-[1fr_3fr] h-full gap-8">
<h1 class="text-4xl font-medium mb-8">Einstellungen</h1>
<Tabs class="h-[calc(100%-6rem)]">
<div class="grid grid-cols-1 md:grid-cols-[1fr_3fr] h-full gap-8">
<TabList>
<Tab>
<Person size={22} />
@@ -106,7 +106,7 @@
<TabPanel>
<h2 class="text-2xl font-medium">Profil</h2>
<form class="flex flex-col gap-4 my-4 max-w-2xl" on:submit={profilSpeichern}>
<div class="flex flex-row gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Vorname</span>
<input type="text" class="input text-base-content font-medium" placeholder="Max" bind:value={benutzer.vorname}>
@@ -124,7 +124,7 @@
<span class="whitespace-nowrap">Telefonnummer</span>
<input type="phone" class="input text-base-content font-medium" placeholder="040 12345678" bind:value={benutzer.telefon}>
</div>
<div class="flex flex-row gap-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Adresse</span>
<input type="text" class="input text-base-content font-medium" placeholder="Musterstraße 123" bind:value={benutzer.adresse}>
@@ -138,7 +138,7 @@
<input type="text" class="input text-base-content font-medium" placeholder="Musterhausen" bind:value={benutzer.ort}>
</div>
</div>
<div class="flex flex-row gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Passwort</span>
<input type="password" class="input text-base-content font-medium" placeholder="*********" bind:value={passwort}>
@@ -152,7 +152,8 @@
</form>
</TabPanel>
<TabPanel>
<h1>Panel Two</h1>
<h2 class="text-2xl font-medium">Ausweise</h2>
<p>In Zukunft werden sie hier spezifische Einstellungen für die Ausweisgenerierung ansehen können. Bitte haben sie Geduld.</p>
</TabPanel>
</div>
</div>

6
src/pages/pdf/ansichtsausweis.astro
View File

@@ -8,7 +8,7 @@ import { createCaller } from "#lib/caller";
import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
const base64 = Astro.url.searchParams.get("base64");
let ausweis: VerbrauchsausweisWohnenClient | null = null;
let ausweis: Partial<VerbrauchsausweisWohnenClient> | null = null;
if (base64) {
const buffer = Buffer.from(base64, "base64");
const json = buffer.toString("utf-8");
@@ -27,10 +27,6 @@ if (base64) {
})
}
if (!ausweis) {
return Astro.redirect("/404");
}
const pdf = await generate({
template: VerbrauchsausweisWohnen2016Template,
plugins: { text, image, variable },