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

prettier

Browse Source
This commit is contained in:
Constantin Simonis 2025-01-31 11:01:45 +01:00
parent 3742dee927
commit 267a81a837
Signed by: csimonis
GPG Key ID: 758DD9C506603183
2 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
assets/controllers/form_controller.js
View File

@ -2,7 +2,17 @@ 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", "ticketType", "foodType", "note"]; static targets = [
"key",
"submit",
"firstname",
"lastname",
"email",
"phone",
"ticketType",
"foodType",
"note",
];
stripe; stripe;
@ -13,28 +23,30 @@ export default class extends Controller {
addEntry(event) { addEntry(event) {
event.preventDefault(); event.preventDefault();
const template = this.element.querySelector(".forms").firstElementChild.cloneNode(true); const template = this.element
.querySelector(".forms")
.firstElementChild.cloneNode(true);
template.querySelectorAll('select, input').forEach(element => { template.querySelectorAll("select, input").forEach((element) => {
element.value = ''; element.value = "";
if (element.id) { if (element.id) {
element.id = `${element.id}_${Date.now()}`; element.id = `${element.id}_${Date.now()}`;
} }
}); });
template.querySelectorAll('label').forEach(label => { template.querySelectorAll("label").forEach((label) => {
const forAttribute = label.getAttribute('for'); const forAttribute = label.getAttribute("for");
if (forAttribute) { if (forAttribute) {
label.setAttribute('for', `${forAttribute}_${Date.now()}`); label.setAttribute("for", `${forAttribute}_${Date.now()}`);
} }
}); });
template.classList.add('opacity-0'); template.classList.add("opacity-0");
this.element.querySelector(".forms").appendChild(template); this.element.querySelector(".forms").appendChild(template);
requestAnimationFrame(() => { requestAnimationFrame(() => {
template.classList.remove('opacity-0'); template.classList.remove("opacity-0");
template.classList.add('transition-all', 'duration-300'); template.classList.add("transition-all", "duration-300");
}); });
} }
@ -49,7 +61,7 @@ export default class extends Controller {
const ticketElement = event.currentTarget.closest(".bg-white\\/80"); const ticketElement = event.currentTarget.closest(".bg-white\\/80");
if (!ticketElement) return; if (!ticketElement) return;
ticketElement.classList.add('opacity-0', 'transition-all', 'duration-300'); ticketElement.classList.add("opacity-0", "transition-all", "duration-300");
setTimeout(() => { setTimeout(() => {
ticketElement.remove(); ticketElement.remove();
}, 300); }, 300);
@ -71,7 +83,7 @@ export default class extends Controller {
const formData = { const formData = {
personal: personalData, personal: personalData,
tickets: ticketData tickets: ticketData,
}; };
fetch("/ticket/submit", { fetch("/ticket/submit", {
@ -83,9 +95,13 @@ export default class extends Controller {
}).then((response) => { }).then((response) => {
if (!response.ok) { if (!response.ok) {
this.submitTarget.querySelector("svg.error").classList.add("hidden"); this.submitTarget.querySelector("svg.error").classList.add("hidden");
this.submitTarget.querySelector("svg.loader").classList.remove("hidden"); this.submitTarget
.querySelector("svg.loader")
.classList.remove("hidden");
this.submitTarget.querySelector("span").classList.remove("hidden"); this.submitTarget.querySelector("span").classList.remove("hidden");
this.showError("Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut."); 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({
@ -99,7 +115,7 @@ export default class extends Controller {
validateForm() { validateForm() {
let isValid = true; let isValid = true;
['firstname', 'lastname', 'email'].forEach(field => { ["firstname", "lastname", "email"].forEach((field) => {
const target = this[`${field}Target`]; const target = this[`${field}Target`];
if (!target.value.trim()) { if (!target.value.trim()) {
this.showFieldError(target); this.showFieldError(target);
@ -107,9 +123,9 @@ export default class extends Controller {
} }
}); });
this.element.querySelectorAll(".forms > div").forEach(ticket => { this.element.querySelectorAll(".forms > div").forEach((ticket) => {
const selects = ticket.querySelectorAll('select[required]'); const selects = ticket.querySelectorAll("select[required]");
selects.forEach(select => { selects.forEach((select) => {
if (!select.value) { if (!select.value) {
this.showFieldError(select); this.showFieldError(select);
isValid = false; isValid = false;
@ -121,15 +137,28 @@ export default class extends Controller {
} }
showFieldError(element) { showFieldError(element) {
element.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-200'); element.classList.add(
element.addEventListener('input', () => { "border-red-500",
element.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-200'); "focus:border-red-500",
}, { once: true }); "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) { showError(message) {
const errorDiv = document.createElement('div'); 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.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 = ` errorDiv.innerHTML = `
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@ -143,17 +172,17 @@ export default class extends Controller {
document.body.appendChild(errorDiv); document.body.appendChild(errorDiv);
requestAnimationFrame(() => { requestAnimationFrame(() => {
errorDiv.classList.remove('opacity-0', 'translate-x-4'); errorDiv.classList.remove("opacity-0", "translate-x-4");
}); });
setTimeout(() => { setTimeout(() => {
errorDiv.classList.add('opacity-0', 'translate-x-4'); errorDiv.classList.add("opacity-0", "translate-x-4");
setTimeout(() => errorDiv.remove(), 500); setTimeout(() => errorDiv.remove(), 500);
}, 5000); }, 5000);
} }
getTicketData(tickets) { getTicketData(tickets) {
return Array.from(tickets).map(ticket => this.extractTicketData(ticket)); return Array.from(tickets).map((ticket) => this.extractTicketData(ticket));
} }
getPersonalData() { getPersonalData() {