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

change form

Browse Source
This commit is contained in:
Constantin Simonis 2025-01-29 16:44:20 +01:00
parent 437809e6fc
commit ce2ee30efd
Signed by: csimonis
GPG Key ID: 3878FF77C24AF4D2
2 changed files with 72 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/controllers/form_controller.js Normal file
View File

@ -0,0 +1,33 @@
import {Controller} from "@hotwired/stimulus";
export default class extends Controller {
static targets = ['ticket', 'afterShowTicket', 'kid12yo', 'kid6yo', 'meat', 'vegetarian', 'vegan', 'error']
connect() {
this.element.addEventListener('submit', (e) => this.submit(e))
}
submit(e) {
e.preventDefault();
const ticketCount = this.getTotalTicketCount();
const foodCount = this.getTotalFoodCount();
if (foodCount > ticketCount) {
this.errorTarget.textContent = 'Sie können nicht mehr Essen als Tickets bestellen';
}
}
getTotalTicketCount() {
return parseInt(this.ticketTarget.value)
+ parseInt(this.kid12yoTarget.value)
+ parseInt(this.kid6yoTarget.value)
+ parseInt(this.afterShowTicketTarget.value);
}
getTotalFoodCount() {
return parseInt(this.meatTarget.value)
+ parseInt(this.vegetarianTarget.value)
+ parseInt(this.veganTarget.value);
}
}

49
templates/ticket/index.html.twig
View File

@ -22,28 +22,55 @@
</h1>
<div class="bg-white/80 backdrop-blur-md shadow-xl rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 mb-12 sm:mb-16 transform transition-all duration-300 border border-gray-100">
{{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
{{ form_start(form, { 'attr': { 'class': 'space-y-6', 'data-controller': 'form' } }) }}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<h2>Tickets</h2>
<br>
<div>
<label for="ticket" class="block text-sm font-medium text-gray-700 mb-1">Normales Tickets</label>
<input type="number" name="{{ field_name(form.ticket) }}" id="ticket" required value="0"
<input type="number" name="{{ field_name(form.ticket) }}" id="ticket" required value="0" data-form-target="ticket"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="afterShowTicket" class="block text-sm font-medium text-gray-700 mb-1">After-Show Tickets</label>
<input type="number" name="{{ field_name(form.afterShowTicket) }}" id="afterShowTicket" required value="0"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="12yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 0-6</label>
<input type="number" name="{{ field_name(form.kids12yo) }}" id="12yo" required value="0"
<input type="number" name="{{ field_name(form.afterShowTicket) }}" id="afterShowTicket" required value="0" data-form-target="afterShowTicket"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="6yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 6-12</label>
<input type="number" name="{{ field_name(form.kids6yo) }}" id="6yo" required value="0"
<label for="12yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 6-12</label>
<input type="number" name="{{ field_name(form.kids12yo) }}" id="12yo" required value="0" data-form-target="kid12yo"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="6yo" class="block text-sm font-medium text-gray-700 mb-1">Kinder 0-6</label>
<input type="number" name="{{ field_name(form.kids6yo) }}" id="6yo" required value="0" data-form-target="kid6yo"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<h2>Essen</h2>
<div data-form-target="error"></div>
<div>
<label for="meat" class="block text-sm font-medium text-gray-700 mb-1">Fleisch</label>
<input type="number" name="{{ field_name(form.afterShowTicket) }}" id="meat" required value="0" data-form-target="meat"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="vegetarian" class="block text-sm font-medium text-gray-700 mb-1">Vegetarier</label>
<input type="number" name="{{ field_name(form.afterShowTicket) }}" id="vegetarian" required value="0" data-form-target="vegetarian"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
<div>
<label for="vegan" class="block text-sm font-medium text-gray-700 mb-1">Veganer</label>
<input type="number" name="{{ field_name(form.afterShowTicket) }}" id="vegan" required value="0" data-form-target="vegan"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
</div>
</div>
@ -53,7 +80,7 @@
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Anmerkungen</label>
<textarea name="{{ field_name(form.notes) }}" id="notes" rows="4"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"
placeholder="Optionale Anmerkungen zu Ihrer Bestellung"></textarea>
placeholder="Unverträglichkeiten, Allergien etc."></textarea>
</div>
<div class="text-center pt-4">