Files
online-energieausweis/src/components/Tickets/TicketPopup.svelte
2025-08-19 17:07:14 +02:00

103 lines
2.4 KiB
Svelte

<script lang="ts">
import { api } from "astro-typesafe-api/client";
import { getClose } from "svelte-dialogs";
export let email: string = "";
const close = getClose();
async function createTicket(e: SubmitEvent) {
e.preventDefault();
try {
await api.ticket.PUT.fetch({
beschreibung: description,
email: email,
metadata: {
category: category,
telefon: telefon,
},
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 telefon = "";
</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={null} disabled selected>Bitte Auswählen</option>
<option value="Technischer Fehler">Technischer Fehler</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 Telefonnummer"
name="telefon"
bind:value={telefon}
required
/>
</div>
</div>
<button class="btn btn-primary" type="submit">Abschicken</button>
</div>
</form>