projects/abiball
projects/abiball
0
0
Fork 0
Code Pull Requests 1 Actions Packages Activity

feat(form): update styling and functionality

Browse Source
This commit is contained in:
Hop In, I Have Puppies AND WiFi 2025-01-30 20:51:13 +01:00
parent a688200480
commit 024e9fe186
Signed by: jleibl
GPG Key ID: E7B6F77BF5EDB6F7
2 changed files with 157 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
assets/controllers/form_controller.js
View File

@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus";
import { loadStripe } from "@stripe/stripe-js"; import { loadStripe } from "@stripe/stripe-js";
export default class extends Controller { export default class extends Controller {
static targets = ["key", "submit", "firstname", "lastname", "email", "phone"]; static targets = ["key", "submit", "firstname", "lastname", "email", "phone", "ticketType", "foodType", "note"];
stripe; stripe;
@ -13,39 +13,64 @@ export default class extends Controller {
addEntry(event) { addEntry(event) {
event.preventDefault(); event.preventDefault();
const formClone = this.element.querySelector("form").cloneNode(true); const template = this.element.querySelector(".forms").firstElementChild.cloneNode(true);
formClone.querySelectorAll("select").forEach((input) => { template.querySelectorAll('select, input').forEach(element => {
input.value = "1"; element.value = '';
if (element.id) {
element.id = `${element.id}_${Date.now()}`;
}
}); });
formClone.querySelector("input").value = "";
this.element.querySelector(".forms").appendChild(formClone); template.querySelectorAll('label').forEach(label => {
const forAttribute = label.getAttribute('for');
if (forAttribute) {
label.setAttribute('for', `${forAttribute}_${Date.now()}`);
}
});
template.classList.add('opacity-0');
this.element.querySelector(".forms").appendChild(template);
requestAnimationFrame(() => {
template.classList.remove('opacity-0');
template.classList.add('transition-all', 'duration-300');
});
} }
removeEntry(event) { removeEntry(event) {
event.preventDefault(); event.preventDefault();
if (document.querySelector(".forms").childElementCount === 1) { const forms = this.element.querySelector(".forms");
if (forms.childElementCount <= 1) {
return; return;
} }
event.target.closest("form").remove(); const ticketElement = event.currentTarget.closest(".bg-white\\/80");
if (!ticketElement) return;
ticketElement.classList.add('opacity-0', 'transition-all', 'duration-300');
setTimeout(() => {
ticketElement.remove();
}, 300);
} }
submit(event) { submit(event) {
event.preventDefault(); event.preventDefault();
if (!this.validateForm()) {
return;
}
this.submitTarget.querySelector("span").classList.add("hidden"); this.submitTarget.querySelector("span").classList.add("hidden");
this.submitTarget.querySelector("svg").classList.remove("hidden"); this.submitTarget.querySelector("svg").classList.remove("hidden");
const forms = document.querySelectorAll("form"); const tickets = this.element.querySelectorAll(".forms > div");
const personalData = this.getPersonalData(); const personalData = this.getPersonalData();
const ticketData = this.getTicketData(forms); const ticketData = this.getTicketData(tickets);
const formData = { const formData = {
personal: personalData, personal: personalData,
tickets: ticketData, tickets: ticketData
}; };
fetch("/ticket/submit", { fetch("/ticket/submit", {
@ -58,7 +83,7 @@ export default class extends Controller {
if (!response.ok) { if (!response.ok) {
this.submitTarget.querySelector("svg").classList.add("hidden"); this.submitTarget.querySelector("svg").classList.add("hidden");
this.submitTarget.querySelector("span").classList.remove("hidden"); this.submitTarget.querySelector("span").classList.remove("hidden");
alert("An error occurred"); this.showError("Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.");
} else { } else {
response.json().then((data) => { response.json().then((data) => {
this.stripe.redirectToCheckout({ this.stripe.redirectToCheckout({
@ -69,29 +94,80 @@ export default class extends Controller {
}); });
} }
getTicketData(forms) { validateForm() {
const formData = []; let isValid = true;
forms.forEach((form) => {
formData.push(this.extractFormData(form)); ['firstname', 'lastname', 'email'].forEach(field => {
const target = this[`${field}Target`];
if (!target.value.trim()) {
this.showFieldError(target);
isValid = false;
}
}); });
return formData; this.element.querySelectorAll(".forms > div").forEach(ticket => {
const selects = ticket.querySelectorAll('select[required]');
selects.forEach(select => {
if (!select.value) {
this.showFieldError(select);
isValid = false;
}
});
});
return isValid;
}
showFieldError(element) {
element.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-200');
element.addEventListener('input', () => {
element.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-200');
}, { once: true });
}
showError(message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'fixed top-4 right-4 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-lg transform transition-all duration-500 opacity-0 translate-x-4';
errorDiv.innerHTML = `
<div class="flex items-center">
<div class="flex-shrink-0">
<twig:ux:icon name="mdi:alert-circle" class="w-5 h-5 text-red-400" />
</div>
<div class="ml-3">
<p class="text-sm text-red-700">${message}</p>
</div>
</div>
`;
document.body.appendChild(errorDiv);
requestAnimationFrame(() => {
errorDiv.classList.remove('opacity-0', 'translate-x-4');
});
setTimeout(() => {
errorDiv.classList.add('opacity-0', 'translate-x-4');
setTimeout(() => errorDiv.remove(), 500);
}, 5000);
}
getTicketData(tickets) {
return Array.from(tickets).map(ticket => this.extractTicketData(ticket));
} }
getPersonalData() { getPersonalData() {
return { return {
firstname: this.firstnameTarget.value, firstname: this.firstnameTarget.value.trim(),
lastname: this.lastnameTarget.value, lastname: this.lastnameTarget.value.trim(),
email: this.emailTarget.value, email: this.emailTarget.value.trim(),
phone: this.phoneTarget.value, phone: this.phoneTarget.value.trim(),
}; };
} }
extractFormData(form) { extractTicketData(ticket) {
return { return {
ticket: parseInt(form.querySelector('select[name="ticket"]').value), ticket: parseInt(ticket.querySelector('select[name="ticket"]').value),
food: parseInt(form.querySelector('select[name="food"]').value), food: parseInt(ticket.querySelector('select[name="food"]').value),
note: form.querySelector('input[name="note"]').value, note: ticket.querySelector('input[name="note"]').value.trim(),
}; };
} }
} }

66
templates/ticket/_partials/_form.html.twig
View File

@ -1,46 +1,66 @@
<div class="bg-white/50 backdrop-blur-sm rounded-2xl border border-gray-100 p-4 hover:shadow-md transition-all duration-300"> <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group">
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-5">
<div class="relative col-span-4"> <div class="relative col-span-5">
<twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" /> <label for="ticket" class="block text-sm font-medium text-gray-700 mb-1 ml-1">Ticket Kategorie</label>
<select name="ticket" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all"> <div class="relative group">
<option value="" disabled selected>Ticket wählen*</option> <twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<option value="1">All-Inclusive</option> <select name="ticket"
<option value="2">After-Show</option> id="ticket"
<option value="3">Kind (6-12)</option> required
<option value="4">Kind (0-6)</option> data-form-target="ticketType"
class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
<option value="" disabled selected>Bitte wählen</option>
<option value="1">All-Inclusive Ticket</option>
<option value="2">After-Show Ticket</option>
<option value="3">Kinder-Ticket (6-12 Jahre)</option>
<option value="4">Klein-Kind (0-6 Jahre)</option>
</select> </select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none"> <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" /> <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
</div>
</div> </div>
</div> </div>
<div class="relative col-span-3"> <div class="relative col-span-4">
<twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" /> <label for="food" class="block text-sm font-medium text-gray-700 mb-1 ml-1">Menü-Auswahl</label>
<select name="food" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all"> <div class="relative group">
<option value="" disabled selected>Ernährung wählen*</option> <twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<select name="food"
id="food"
required
data-form-target="foodType"
class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
<option value="" disabled selected>Bitte wählen</option>
<option value="1">Mit Fleisch</option> <option value="1">Mit Fleisch</option>
<option value="2">Vegetarisch</option> <option value="2">Vegetarisch</option>
<option value="3">Vegan</option> <option value="3">Vegan</option>
</select> </select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none"> <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" /> <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
</div>
</div> </div>
</div> </div>
<div class="relative col-span-4"> <div class="relative col-span-2">
<twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" /> <label for="note" class="block text-sm font-medium text-gray-700 mb-1 ml-1">Anmerkungen</label>
<div class="relative group">
<twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<input type="text" <input type="text"
placeholder="z.B. Allergien" id="note"
placeholder="Optional"
name="note" name="note"
class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" /> data-form-target="note"
class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300" />
</div>
</div> </div>
<div class="flex justify-center items-center col-span-1"> <div class="flex justify-center items-end col-span-1 pb-1">
<button data-action="form#removeEntry" <button data-action="form#removeEntry"
class="group p-2.5 hover:bg-red-50 rounded-xl transition-all duration-300" type="button"
class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200"
title="Ticket entfernen"> title="Ticket entfernen">
<twig:ux:icon name="mingcute:delete-fill" <twig:ux:icon name="mingcute:delete-fill"
class="w-6 h-6 text-red-400 group-hover:text-red-500 transition-colors" /> class="w-5 h-5 text-red-400 group-hover/btn:text-red-500 transition-colors" />
</button> </button>
</div> </div>
</div> </div>