WIP Migrate filter panel
This commit is contained in:
Björn Fromme
+286
-226
@@ -8,263 +8,323 @@
|
|||||||
pluginName="Ajax"
|
pluginName="Ajax"
|
||||||
data="{'search-target': 'form'}">
|
data="{'search-target': 'form'}">
|
||||||
|
|
||||||
<div class="p-8 bg-cover text-white"
|
<div class="mb-4 p-4 bg-ep-primary text-white"
|
||||||
style="background-image: url( {f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/winter.jpg')} )">
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="true">
|
||||||
<div class="mb-4"
|
<button data-action="click->collapse#toggle"
|
||||||
data-controller="collapse"
|
class="flex items-center justify-between w-full">
|
||||||
data-collapse-collapsed-value="true">
|
<span class="uppercase font-bold">
|
||||||
<button data-action="click->collapse#toggle"
|
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
||||||
class="flex items-center justify-between w-full">
|
</span>
|
||||||
<span class="uppercase font-bold text-lg">
|
<svg class="w-6 h-6 text-white transform"
|
||||||
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
data-collapse-target="icon">
|
||||||
</span>
|
<use href="#icon-arrow-right"></use>
|
||||||
<svg class="w-6 h-6 text-white transform"
|
</svg>
|
||||||
data-collapse-target="icon">
|
</button>
|
||||||
<use href="#icon-arrow-right"></use>
|
<div data-collapse-target="container"
|
||||||
</svg>
|
class="pt-2">
|
||||||
</button>
|
<f:form.hidden property="dateFrom"
|
||||||
<div data-collapse-target="container">
|
data="{'search-target': 'dateFrom'}"/>
|
||||||
<f:form.hidden property="dateFrom"
|
<f:form.hidden property="dateTo"
|
||||||
data="{'search-target': 'dateFrom'}"/>
|
data="{'search-target': 'dateTo'}"/>
|
||||||
<f:form.hidden property="dateTo"
|
<div data-controller="datepicker"
|
||||||
data="{'search-target': 'dateTo'}"/>
|
<f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}">
|
||||||
<div data-controller="datepicker"
|
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
||||||
<f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}">
|
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
||||||
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
</f:if>
|
||||||
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
||||||
</f:if>
|
<f:if condition="{settings.datePickerPresets}">
|
||||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
<div class="flex items-center justify-between pb-2">
|
||||||
<f:if condition="{settings.datePickerPresets}">
|
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||||
<div class="flex items-center justify-between pb-2">
|
<button class="daterange__preset"
|
||||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
data-preset='{preset -> f:format.json()}'
|
||||||
<button class="daterange__preset"
|
data-action="datepicker#selectPreset">
|
||||||
data-preset='{preset -> f:format.json()}'
|
<span>
|
||||||
data-action="datepicker#selectPreset">
|
{preset.label}
|
||||||
<span>
|
</span>
|
||||||
{preset.label}
|
</button>
|
||||||
</span>
|
</f:for>
|
||||||
</button>
|
|
||||||
</f:for>
|
|
||||||
</div>
|
|
||||||
</f:if>
|
|
||||||
<input type="hidden"
|
|
||||||
data-datepicker-target="field">
|
|
||||||
<div class="flex items-center justify-between pt-2">
|
|
||||||
<button class="daterange__button focus:outline-none">
|
|
||||||
schließen
|
|
||||||
</button>
|
|
||||||
<button class="daterange__button focus:outline-none"
|
|
||||||
data-action="datepicker#reset">
|
|
||||||
zurücksetzen
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</f:if>
|
||||||
|
<input type="hidden"
|
||||||
|
data-datepicker-target="field">
|
||||||
|
<div class="flex items-center justify-between pt-2">
|
||||||
|
<button class="daterange__button focus:outline-none">
|
||||||
|
schließen
|
||||||
|
</button>
|
||||||
|
<button class="daterange__button focus:outline-none"
|
||||||
|
data-action="datepicker#reset">
|
||||||
|
zurücksetzen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div data-controller="collapse"
|
<div class="mb-4 p-4 bg-ep-primary text-white"
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Reisekonzepte
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 text-white transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container"
|
||||||
|
class="pt-2">
|
||||||
|
<ul class="mb-0 p-0 space-y-2">
|
||||||
|
<f:for each="{filterOptions.concepts}" as="concept">
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
|
||||||
|
property="conceptUids"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="{concept.uid}"/>
|
||||||
|
{concept.name}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</f:for>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-4 divide-y">
|
||||||
|
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
|
||||||
<button data-action="click->collapse#toggle"
|
<button data-action="click->collapse#toggle"
|
||||||
class="flex items-center justify-between w-full">
|
class="flex items-center justify-between w-full">
|
||||||
<span class="uppercase font-bold text-lg">
|
<span class="uppercase font-bold">
|
||||||
Reisekonzepte
|
Reiseziel
|
||||||
</span>
|
</span>
|
||||||
<svg class="w-6 h-6 text-white transform"
|
<svg class="w-6 h-6 transform"
|
||||||
data-collapse-target="icon">
|
data-collapse-target="icon">
|
||||||
<use href="#icon-arrow-right"></use>
|
<use href="#icon-arrow-right"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div data-collapse-target="container">
|
<div data-collapse-target="container">
|
||||||
<ul class="mb-0 p-0">
|
<ul class="mb-0 p-0">
|
||||||
<f:for each="{filterOptions.concepts}" as="concept">
|
<f:for each="{filterOptions.destinations}" as="destination">
|
||||||
<li>
|
<li>
|
||||||
<f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0"
|
<f:form.checkbox class="mr-2"
|
||||||
property="conceptUids"
|
property="countryUids"
|
||||||
data="{action: 'search#filter'}"
|
data="{action: 'search#filter'}"
|
||||||
value="{concept.uid}"/>
|
value="{destination.country.uid}"/>
|
||||||
{concept.name}
|
{destination.country.label}
|
||||||
|
<f:if condition="{destination.regions}">
|
||||||
|
<ul class="pl-4 pt-1">
|
||||||
|
<f:for each="{destination.regions}" as="region">
|
||||||
|
<li>
|
||||||
|
<f:form.checkbox class="mr-2"
|
||||||
|
property="regionUids"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="{region.uid}"/>
|
||||||
|
{region.label}
|
||||||
|
</li>
|
||||||
|
</f:for>
|
||||||
|
</ul>
|
||||||
|
</f:if>
|
||||||
</li>
|
</li>
|
||||||
</f:for>
|
</f:for>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
<div data-controller="collapse"
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
|
<button data-action="click->collapse#toggle"
|
||||||
<button data-action="click->collapse#toggle">
|
class="flex items-center justify-between w-full">
|
||||||
Reiseziel
|
<span class="uppercase font-bold">
|
||||||
</button>
|
Preis
|
||||||
<div data-collapse-target="container">
|
</span>
|
||||||
<ul class="mb-0 p-0">
|
<svg class="w-6 h-6 transform"
|
||||||
<f:for each="{filterOptions.destinations}" as="destination">
|
data-collapse-target="icon">
|
||||||
<li>
|
<use href="#icon-arrow-right"></use>
|
||||||
<f:form.checkbox class="mr-2"
|
</svg>
|
||||||
property="countryUids"
|
</button>
|
||||||
data="{action: 'search#filter'}"
|
<div data-collapse-target="container">
|
||||||
value="{destination.country.uid}"/>
|
<ul class="mb-0 p-0">
|
||||||
{destination.country.label}
|
<f:for each="{filterOptions.priceRanges}" as="range">
|
||||||
<f:if condition="{destination.regions}">
|
|
||||||
<ul class="pl-4 pt-1">
|
|
||||||
<f:for each="{destination.regions}" as="region">
|
|
||||||
<li>
|
|
||||||
<f:form.checkbox class="mr-2"
|
|
||||||
property="regionUids"
|
|
||||||
data="{action: 'search#filter'}"
|
|
||||||
value="{region.uid}"/>
|
|
||||||
{region.label}
|
|
||||||
</li>
|
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</f:if>
|
|
||||||
</li>
|
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
|
|
||||||
<button data-action="click->collapse#toggle">
|
|
||||||
Preis
|
|
||||||
</button>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<ul class="mb-0 p-0">
|
|
||||||
<f:for each="{filterOptions.priceRanges}" as="range">
|
|
||||||
<li>
|
|
||||||
<label>
|
|
||||||
<f:form.checkbox class="mr-2"
|
|
||||||
property="priceRanges"
|
|
||||||
data="{action: 'search#filter'}"
|
|
||||||
value="{range.uid}"/>
|
|
||||||
{ep:priceRange(min: range.min, max: range.max)}
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
|
|
||||||
<button data-action="click->collapse#toggle">
|
|
||||||
Personen
|
|
||||||
</button>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<div class="border rounded">
|
|
||||||
<f:form.select property="pax"
|
|
||||||
options="{filterOptions.pax}"
|
|
||||||
data="{action: 'search#filter'}"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<f:variable name="hotelTypes" value="{
|
|
||||||
1: 'Ferienwohnung',
|
|
||||||
2: 'Sportclub',
|
|
||||||
3: 'Appartment',
|
|
||||||
4: 'Gästehaus',
|
|
||||||
5: 'Pension'
|
|
||||||
}"/>
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
|
|
||||||
<label data-action="click->collapse#toggle">
|
|
||||||
Unterkunft
|
|
||||||
</label>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<ul class="mb-0 p-0">
|
|
||||||
<f:for each="{filterOptions.hotelTypes}" as="type">
|
|
||||||
<li>
|
|
||||||
<label>
|
|
||||||
<f:form.checkbox class="mr-2"
|
|
||||||
property="hotelTypes"
|
|
||||||
data="{action: 'search#filter'}"
|
|
||||||
value="{type}"/>
|
|
||||||
{hotelTypes.{type}}
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
|
|
||||||
<label data-action="click->collapse#toggle">
|
|
||||||
Verpflegung
|
|
||||||
</label>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<ul class="mb-0 p-0">
|
|
||||||
<f:for each="{filterOptions.boardTypes}" as="type">
|
|
||||||
<f:if condition="{type.label}">
|
|
||||||
<li>
|
<li>
|
||||||
<label>
|
<label>
|
||||||
<f:form.checkbox class="mr-2"
|
<f:form.checkbox class="mr-2"
|
||||||
property="boardTypes"
|
property="priceRanges"
|
||||||
data="{action: 'search#filter'}"
|
data="{action: 'search#filter'}"
|
||||||
value="{type.uid}"/>
|
value="{range.uid}"/>
|
||||||
{type.label}
|
{ep:priceRange(min: range.min, max: range.max)}
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
</f:if>
|
</f:for>
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<f:variable name="roomTypes" value="{
|
|
||||||
1: 'EZ',
|
|
||||||
2: 'DZ / 2er',
|
|
||||||
3: '3er',
|
|
||||||
4: '4er',
|
|
||||||
5: 'ab 5 Pers.',
|
|
||||||
6: 'mit anderen'
|
|
||||||
}"/>
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
|
|
||||||
<label data-action="click->collapse#toggle">
|
|
||||||
Zimmerarten/Apart.
|
|
||||||
</label>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<ul class="mb-0 p-0 p-0">
|
|
||||||
<f:for each="{filterOptions.roomTypes}" as="type">
|
|
||||||
<li>
|
|
||||||
<label>
|
|
||||||
<f:form.checkbox class="mr-2"
|
|
||||||
property="roomTypes"
|
|
||||||
data="{action: 'search#filter'}"
|
|
||||||
value="{type}"/>
|
|
||||||
{roomTypes.{type}}
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</f:for>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<f:if condition="{filterOptions.busAvailable}">
|
|
||||||
<div data-controller="collapse"
|
|
||||||
data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
|
|
||||||
<label data-action="click->collapse#toggle">
|
|
||||||
Anreise
|
|
||||||
</label>
|
|
||||||
<div data-collapse-target="container">
|
|
||||||
<ul class="mb-0 p-0">
|
|
||||||
<li>
|
|
||||||
<label>
|
|
||||||
<f:form.checkbox class="mr-2"
|
|
||||||
property="bus"
|
|
||||||
data="{action: 'search#filter'}"
|
|
||||||
value="1"/>
|
|
||||||
Busanreise
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</f:if>
|
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Personen
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container">
|
||||||
|
<div class="border rounded">
|
||||||
|
<f:form.select property="pax"
|
||||||
|
options="{filterOptions.pax}"
|
||||||
|
data="{action: 'search#filter'}"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<f:variable name="hotelTypes" value="{
|
||||||
|
1: 'Ferienwohnung',
|
||||||
|
2: 'Sportclub',
|
||||||
|
3: 'Appartment',
|
||||||
|
4: 'Gästehaus',
|
||||||
|
5: 'Pension'
|
||||||
|
}"/>
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Unterkunft
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container">
|
||||||
|
<ul class="mb-0 p-0">
|
||||||
|
<f:for each="{filterOptions.hotelTypes}" as="type">
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<f:form.checkbox class="mr-2"
|
||||||
|
property="hotelTypes"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="{type}"/>
|
||||||
|
{hotelTypes.{type}}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</f:for>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Verpflegung
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container">
|
||||||
|
<ul class="mb-0 p-0">
|
||||||
|
<f:for each="{filterOptions.boardTypes}" as="type">
|
||||||
|
<f:if condition="{type.label}">
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<f:form.checkbox class="mr-2"
|
||||||
|
property="boardTypes"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="{type.uid}"/>
|
||||||
|
{type.label}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</f:if>
|
||||||
|
</f:for>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<f:variable name="roomTypes" value="{
|
||||||
|
1: 'EZ',
|
||||||
|
2: 'DZ / 2er',
|
||||||
|
3: '3er',
|
||||||
|
4: '4er',
|
||||||
|
5: 'ab 5 Pers.',
|
||||||
|
6: 'mit anderen'
|
||||||
|
}"/>
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Zimmerarten/Apart.
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container">
|
||||||
|
<ul class="mb-0 p-0 p-0">
|
||||||
|
<f:for each="{filterOptions.roomTypes}" as="type">
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<f:form.checkbox class="mr-2"
|
||||||
|
property="roomTypes"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="{type}"/>
|
||||||
|
{roomTypes.{type}}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</f:for>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<f:if condition="{filterOptions.busAvailable}">
|
||||||
|
<div class="py-2"
|
||||||
|
data-controller="collapse"
|
||||||
|
data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
|
||||||
|
<button data-action="click->collapse#toggle"
|
||||||
|
class="flex items-center justify-between w-full">
|
||||||
|
<span class="uppercase font-bold">
|
||||||
|
Anreise
|
||||||
|
</span>
|
||||||
|
<svg class="w-6 h-6 transform"
|
||||||
|
data-collapse-target="icon">
|
||||||
|
<use href="#icon-arrow-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div data-collapse-target="container">
|
||||||
|
<ul class="mb-0 p-0">
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<f:form.checkbox class="mr-2"
|
||||||
|
property="bus"
|
||||||
|
data="{action: 'search#filter'}"
|
||||||
|
value="1"/>
|
||||||
|
Busanreise
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</f:if>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</f:form>
|
</f:form>
|
||||||
|
|
||||||
|
|||||||
@@ -6,13 +6,13 @@
|
|||||||
<div class="col-span-3 lg:col-span-1 relative"
|
<div class="col-span-3 lg:col-span-1 relative"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
data-collapse-until-value="991">
|
data-collapse-until-value="991">
|
||||||
<div class="lg:block bg-white"
|
<div class="lg:block bg-white p-4"
|
||||||
data-collapse-target="container">
|
data-collapse-target="container">
|
||||||
<h3 class="headline headline--underlined px-8 py-4">
|
<h3 class="headline headline--underlined mb-4">
|
||||||
Filter
|
Filter
|
||||||
</h3>
|
</h3>
|
||||||
<f:render partial="Search/FilterPanel" arguments="{_all}"/>
|
<f:render partial="Search/FilterPanel" arguments="{_all}"/>
|
||||||
<div class="px-8 py-4">
|
<div class="mt-4">
|
||||||
<button class="button button--secondary w-full"
|
<button class="button button--secondary w-full"
|
||||||
data-action="search#reset">
|
data-action="search#reset">
|
||||||
Filter zurücksetzen
|
Filter zurücksetzen
|
||||||
|
|||||||
Reference in New Issue
Block a user