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

hide food select when selecting aftershow ticket
All checks were successful
build / build (pull_request) Successful in 5m33s
Details

Browse Source
This commit is contained in:
Constantin Simonis
2025-02-25 21:59:40 +01:00
parent c557551a73
commit feff4cb115
2 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/controllers/hide_food_controller.js Normal file
View File

@ -0,0 +1,23 @@
import {Controller} from "@hotwired/stimulus";
export default class extends Controller {
static targets = ['foodSelect', 'ticketSelect'];
prevValue;
connect() {
this.hide();
}
hide() {
if (this.ticketSelectTarget.value === '2') {
this.foodSelectTarget.disabled = true;
this.prevValue = this.foodSelectTarget.value;
this.foodSelectTarget.value = '0';
} else {
this.foodSelectTarget.disabled = false;
this.foodSelectTarget.value = this.prevValue ?? '';
}
}
}

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

@ -1,13 +1,17 @@
<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="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-1 md:grid-cols-12 gap-3 md:gap-5"> <div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5" data-controller="hide-food">
<div class="md:col-span-3"> <div class="md:col-span-3">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Ticket-Typ</div> <div class="mb-1.5 text-gray-600 font-medium text-sm">Ticket-Typ</div>
<div class="relative group"> <div class="relative group">
<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" /> <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"/>
<select name="ticket" <select name="ticket"
required required
data-form-target="ticketType" 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"> 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"
data-action="hide-food#hide"
data-hide-food-target="ticketSelect"
>
<option value="" disabled selected>Auswahl</option> <option value="" disabled selected>Auswahl</option>
<option value="1">All-Inclusive Ticket</option> <option value="1">All-Inclusive Ticket</option>
<option value="2">After-Show Ticket</option> <option value="2">After-Show Ticket</option>
@ -15,7 +19,8 @@
<option value="4">Klein-Kind (0-6 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-orange-400 transition-colors group-hover:text-orange-500" /> <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>
@ -23,18 +28,23 @@
<div class="md:col-span-3"> <div class="md:col-span-3">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Ernährung</div> <div class="mb-1.5 text-gray-600 font-medium text-sm">Ernährung</div>
<div class="relative group"> <div class="relative group">
<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" /> <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" <select name="food"
required required
data-form-target="foodType" 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"> 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 disabled:opacity-70 disabled:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-200 disabled:text-gray-500 disabled:hover:border-gray-200"
data-hide-food-target="foodSelect"
>
<option value="" disabled selected>Auswahl</option> <option value="" disabled selected>Auswahl</option>
<option value="0" disabled>Keine</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-orange-400 transition-colors group-hover:text-orange-500" /> <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>
@ -42,7 +52,8 @@
<div class="md:col-span-5"> <div class="md:col-span-5">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Anmerkungen</div> <div class="mb-1.5 text-gray-600 font-medium text-sm">Anmerkungen</div>
<div class="relative group"> <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" /> <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="Optional" placeholder="Optional"
name="note" name="note"