From 267a81a8374a42966269f57559e399807a207f54 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Fri, 31 Jan 2025 11:01:45 +0100 Subject: [PATCH] prettier --- assets/controllers/form_controller.js | 91 ++++++++++++++++++--------- assets/styles/app.css | 2 +- 2 files changed, 61 insertions(+), 32 deletions(-) diff --git a/assets/controllers/form_controller.js b/assets/controllers/form_controller.js index 4fa6f74..3e157b6 100644 --- a/assets/controllers/form_controller.js +++ b/assets/controllers/form_controller.js @@ -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 = `
@@ -140,20 +169,20 @@ export default class extends Controller {
`; - + 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() { diff --git a/assets/styles/app.css b/assets/styles/app.css index 16aa25c..f5756ba 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -8,4 +8,4 @@ option:disabled { display: none; -} \ No newline at end of file +}