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

91
assets/controllers/form_controller.js
View File

@ -2,7 +2,17 @@ import { Controller } from "@hotwired/stimulus";
import { loadStripe } from "@stripe/stripe-js";
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;
@ -13,28 +23,30 @@ export default class extends Controller {
addEntry(event) {
event.preventDefault();
const template = this.element.querySelector(".forms").firstElementChild.cloneNode(true);
template.querySelectorAll('select, input').forEach(element => {
element.value = '';
const template = this.element
.querySelector(".forms")
.firstElementChild.cloneNode(true);
template.querySelectorAll("select, input").forEach((element) => {
element.value = "";
if (element.id) {
element.id = `${element.id}_${Date.now()}`;
}
});
template.querySelectorAll('label').forEach(label => {
const forAttribute = label.getAttribute('for');
template.querySelectorAll("label").forEach((label) => {
const forAttribute = label.getAttribute("for");
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);
requestAnimationFrame(() => {
template.classList.remove('opacity-0');
template.classList.add('transition-all', 'duration-300');
template.classList.remove("opacity-0");
template.classList.add("transition-all", "duration-300");
});
}
@ -48,8 +60,8 @@ export default class extends Controller {
const ticketElement = event.currentTarget.closest(".bg-white\\/80");
if (!ticketElement) return;
ticketElement.classList.add('opacity-0', 'transition-all', 'duration-300');
ticketElement.classList.add("opacity-0", "transition-all", "duration-300");
setTimeout(() => {
ticketElement.remove();
}, 300);
@ -71,7 +83,7 @@ export default class extends Controller {
const formData = {
personal: personalData,
tickets: ticketData
tickets: ticketData,
};
fetch("/ticket/submit", {
@ -83,9 +95,13 @@ export default class extends Controller {
}).then((response) => {
if (!response.ok) {
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.showError("Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.");
this.showError(
"Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
);
} else {
response.json().then((data) => {
this.stripe.redirectToCheckout({
@ -99,7 +115,7 @@ export default class extends Controller {
validateForm() {
let isValid = true;
['firstname', 'lastname', 'email'].forEach(field => {
["firstname", "lastname", "email"].forEach((field) => {
const target = this[`${field}Target`];
if (!target.value.trim()) {
this.showFieldError(target);
@ -107,9 +123,9 @@ export default class extends Controller {
}
});
this.element.querySelectorAll(".forms > div").forEach(ticket => {
const selects = ticket.querySelectorAll('select[required]');
selects.forEach(select => {
this.element.querySelectorAll(".forms > div").forEach((ticket) => {
const selects = ticket.querySelectorAll("select[required]");
selects.forEach((select) => {
if (!select.value) {
this.showFieldError(select);
isValid = false;
@ -121,15 +137,28 @@ export default class extends Controller {
}
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 });
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';
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">
@ -140,20 +169,20 @@ export default class extends Controller {
</div>
</div>
`;
document.body.appendChild(errorDiv);
requestAnimationFrame(() => {
errorDiv.classList.remove('opacity-0', 'translate-x-4');
errorDiv.classList.remove("opacity-0", "translate-x-4");
});
setTimeout(() => {
errorDiv.classList.add('opacity-0', 'translate-x-4');
errorDiv.classList.add("opacity-0", "translate-x-4");
setTimeout(() => errorDiv.remove(), 500);
}, 5000);
}
getTicketData(tickets) {
return Array.from(tickets).map(ticket => this.extractTicketData(ticket));
return Array.from(tickets).map((ticket) => this.extractTicketData(ticket));
}
getPersonalData() {

2
assets/styles/app.css
View File

@ -8,4 +8,4 @@
option:disabled {
display: none;
}
}