User Tickets

src/components/SidebarLeft.astro

@@ -2,7 +2,7 @@
 	<nav>
 		<div class="nav-card">
 			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
-				<a href="/energieausweis-erstellen"
+				<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen"
 					>Energieausweis erstellen</a
 				>
 				<div class="dropdown-content">

src/components/Tickets/TicketButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { dialogs } from "svelte-dialogs";
+	import TicketPopup from "./TicketPopup.svelte";
+	import { addNotification } from "@ibcornelsen/ui";
+
+	async function showTicketPopup() {
+		const success = await dialogs.modal(TicketPopup);
+
+		if (success) {
+			dialogs.alert({
+				title: "Ticket erstellt",
+				text: "Ihr Support Ticket wurde erfolgreich erstellt. Wir werden uns schnellstmöglich um ihre Angelegenheit kümmern. Vielen Dank für ihre Geduld.",
+				dismissButtonText: "Schließen",
+				dismissButtonClass: "btn btn-primary",
+				dialogClass: "modal-box",
+				headerClass: "bg-base-100 text-center",
+				titleClass: "text-base-content text-xl font-medium",
+				dividerClass: "hidden",
+				footerClass: "bg-base-100 justify-center gap-4 mt-4",
+			});
+		} else {
+			dialogs.alert({
+				title: "Ticket erstellen fehlgeschlagen",
+				text: "Leider ist beim erstellen des Tickets ein Fehler aufgetreten. Bitte versuchen sie es später erneut oder kontaktieren sie uns direkt per email unter info@ib-cornelsen.de.",
+				dismissButtonText: "Schließen",
+				dismissButtonClass: "btn btn-error",
+				dialogClass: "modal-box",
+				headerClass: "bg-base-100 text-center",
+				titleClass: "text-base-content text-xl font-medium",
+				dividerClass: "hidden",
+				footerClass: "bg-base-100 justify-center gap-4 mt-4",
+			});
+		}
+	}
+</script>
+
+<button
+	class="btn btn-primary fixed bottom-0 right-8 rounded-b-none rounded-t-xl w-48 h-12 text-xl hover:h-14 transition-all"
+	on:click={showTicketPopup}
+	>Support Ticket</button
+>

src/components/Tickets/TicketPopup.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { addNotification } from "#components/Notifications/shared";
+	import { client } from "src/trpc";
+	import { getClose } from "svelte-dialogs";
+
+	const close = getClose();
+
+	async function createTicket(e: SubmitEvent) {
+		e.preventDefault();
+		try {
+			await client.v1.tickets.erstellen.mutate({
+				beschreibung: description,
+				email: email,
+				metadata: {
+					category: category,
+					phone: phone,
+				},
+				titel: title,
+			})
+			// Ticket wurde erfolgreich erstellt
+			close(true)
+		} catch (e) {
+			// Beim erstellen des Tickets ist ein Fehler aufgetreten, das ist ja mal ironisch...
+			close(false)
+		}
+	}
+
+	let category = "";
+	let title = "";
+	let description = "";
+	let email = "";
+	let phone = "";
+</script>
+
+<form class="max-w-lg" on:submit={createTicket}>
+	<h1 class="text-2xl font-semibold mb-6">Ticket erstellen</h1>
+	<p class="mb-6">
+		Vielen Dank, dass sie sich die Zeit nehmen ein Support Ticket zu
+		erstellen. Wir werden uns schnellstmöglich um ihre Angelegenheit
+		kümmern. Hier können sie alle Details eintragen und uns ihr Problem
+		schildern.
+	</p>
+	<div class="flex flex-col gap-4">
+		<div>
+			<h4>Kategorie *</h4>
+			<select class="select select-bordered" bind:value={category}>
+				<option value="" disabled selected>Bitte Auswählen</option>
+				<option value="Verständnisproblem">Verständnisproblem</option>
+				<option value="Technischer Fehler">Technischer Fehler</option>
+				<option value="Feature anfordern">Feature anfordern</option>
+				<option value="Fehlende Funktionalität"
+					>Fehlende Funktionalität</option
+				>
+			</select>
+		</div>
+		<div>
+			<h4>Überschrift *</h4>
+			<input
+				class="input input-bordered"
+				type="text"
+				placeholder="Überschrift in einem Satz"
+				name="title"
+				bind:value={title}
+				required
+			/>
+		</div>
+		<div>
+			<h4>Beschreibung *</h4>
+			<textarea
+				cols="10"
+				rows="5"
+				class="textarea textarea-bordered"
+				placeholder="Schildern sie hier ihre Erfahrung"
+				bind:value={description}
+				required
+			></textarea>
+		</div>
+		<div class="flex flex-row gap-4">
+			<div class="w-full">
+				<h4>Email Adresse *</h4>
+				<input
+					class="input input-bordered"
+					type="email"
+					placeholder="Ihre Email Adresse"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+			<div class="w-full">
+				<h4>Telefonnummer</h4>
+				<input
+					class="input input-bordered"
+					type="tel"
+					placeholder="Ihre Telefonnumer"
+					name="phone"
+					bind:value={phone}
+					required
+				/>
+			</div>
+		</div>
+		<button class="btn btn-primary" type="submit">Abschicken</button>
+	</div>
+</form>

src/layouts/Layout.astro

@@ -8,6 +8,7 @@ import Header from "../components/Header.astro";
 import SidebarLeft from "../components/SidebarLeft.astro";
 import SidebarRight from "../components/SidebarRight.astro";
 import { NotificationWrapper } from "@ibcornelsen/ui";
+import TicketPopup from "../components/Tickets/TicketButton.svelte"
 
 export interface Props {
 	title: string;
@@ -104,6 +105,7 @@ const schema = JSON.stringify({
 		</main>
 		<Footer />
 		<NotificationWrapper client:load />
+		<TicketPopup client:load />
 	</body>
 </html>
 

src/modules/Dashboard/DashboardPDFDesignerModule.svelte

@@ -19,9 +19,17 @@
 	let container: HTMLDivElement;
 
 	let designer: Designer;
+	let page: number = 0;
 
 	onMount(() => {
 		designer = new Designer({ domContainer: container, template, plugins });
+
+		console.log(designer);
+		
+
+		designer.onChangePage((p) => {
+			page = p
+		});
 	});
 
 	function loadBasePDF() {
@@ -44,7 +52,7 @@
 	function addNewField() {
 		template = designer.getTemplate();
 
-		template.schemas[0]["new-field"] = {
+		template.schemas[page]["new-field"] = {
 				type: "text",
 				position: { x: 0, y: 0 },
 				width: 10,

src/pages/pdf/ansichtsausweis.astro

@@ -1,11 +1,12 @@
 ---
 import { generate } from "@pdfme/generator";
-import VerbrauchsausweisWohnen2016Template from "../../data/templates/verbrauchsausweis-wohnen-2016.json";
+import VerbrauchsausweisWohnen2016Template from "../../lib/pdf/templates/GEG24_Verbrauchsausweis.json";
 import { convertAusweisData } from "#lib/AusweisData";
 import { variable } from "#lib/pdf/plugins/variables";
 import { text, image } from "@pdfme/schemas"
 import { createCaller } from "#lib/caller";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { Template } from "@pdfme/common";
 
 const base64 = Astro.url.searchParams.get("base64");
 let ausweis: Partial<VerbrauchsausweisWohnenClient> | null = null;
@@ -27,16 +28,32 @@ if (base64) {
 	})
 }
 
+const template = VerbrauchsausweisWohnen2016Template as Template;
+
+template.schemas.push({})
+template.schemas.push({})
+template.schemas[2]["energie_1"] = {
+	position: {
+		x: 15,
+		y: 140
+	},
+	height: 5,
+	width: 14,
+	type: "text",
+	fontSize: 8,
+	verticalAlign: "middle"
+}
+
 const pdf = await generate({
-	template: VerbrauchsausweisWohnen2016Template,
+	template,
 	plugins: { text, image, variable },
-	inputs: [convertAusweisData(ausweis)],
+	inputs: [{...convertAusweisData(ausweis), energie_1: "Hallo"}],
 	options: {
 		author: "IB Cornelsen",
 		creationDate: new Date(),
 		creator: "IB Cornelsen",
 		language: "de",
-		title: "Verbrauchsausweis Wohnen 2016",
+		title: "Verbrauchsausweis Wohnen GEG 2024",
 	},
 });