feat: hide pickup select on initial load when not applicable

This commit is contained in:
Björn Fromme
2025-01-16 14:54:46 +01:00
parent 9dc0992263
commit 6473ec8ec4
2 changed files with 16 additions and 13 deletions
@@ -4,18 +4,21 @@ export default class extends Controller {
static classes = [ 'hidden' ]
static targets = [ 'container' ]
static values = { show: Array }
static values = { show: Array, visible: Boolean }
toggle(event) {
let fieldType = event.target.type
let formValue = event.target.value
let showContainer
if ('checkbox' !== fieldType && 'radio' !== fieldType) {
showContainer = this.showValue.indexOf(formValue) !== -1
this.visibleValue = this.showValue.indexOf(formValue) !== -1
} else {
let toggleValue = event.target.dataset.selectToggleValue
showContainer = true === event.target.checked && this.showValue.includes(toggleValue)
this.visibleValue = true === event.target.checked && this.showValue.includes(toggleValue)
}
this.containerTarget.classList.toggle(this.hiddenClass, false === showContainer)
}
visibleValueChanged(visible) {
this.containerTarget.classList.toggle(this.hiddenClass, false === visible)
}
}
+9 -9
View File
@@ -130,7 +130,7 @@
<div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
<div class="flex flex-col space-y-4 pt-4">
<div class="relative">
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Persönliche Daten
</h3>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
@@ -154,14 +154,14 @@
{% endif %}
</div>
<div>
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Unterkunft
</h3>
{% set room = bookingData.roomForParticipant(participant.index) %}
{{ room.label }} ({{ room.individualPrice[participant.index]|format_currency('EUR') }})
</div>
<div class="relative">
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Leistungen
</h3>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
@@ -182,14 +182,14 @@
{% endif %}
</fieldset>
{% if not travelData.additionalServicesMutable %}
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
<div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %}
</div>
<div class="relative">
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Hin-/Rückreise
</h3>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'] }, { 'hidden': 'hidden' }) }}>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4" {{ stimulus_controller('select-toggle', { 'show': ['BUS'], 'visible': participant.transportationServiceTo.subType == 'BUS' }, { 'hidden': 'hidden' }) }}>
{{ form_row(child.transportationServiceTo) }}
{{ form_row(child.transportationServiceFro) }}
{% if child.pickup is defined %}
@@ -199,12 +199,12 @@
{% endif %}
</fieldset>
{% if not travelData.transportationServicesMutable %}
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
<div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
<div>
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Gesamtpreis
</h3>
<span class="text-2xl font-medium">{{ bookingData.priceForParticipant(participant.index)|format_currency('EUR') }}</span>
@@ -212,7 +212,7 @@
{% set surcharges = bookingData.surchargesForParticipant(participant.index) %}
{% if surcharges|length > 0 %}
<div>
<h3 class="text-xl font-semibold pb-2">
<h3 class="text-xl font-semibold">
Zuschläge
</h3>
<ul>