WIP Migrate filter panel
This commit is contained in:
Björn Fromme
@@ -8,15 +8,12 @@
|
||||
pluginName="Ajax"
|
||||
data="{'search-target': 'form'}">
|
||||
|
||||
<div class="p-8 bg-cover text-white"
|
||||
style="background-image: url( {f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/winter.jpg')} )">
|
||||
|
||||
<div class="mb-4"
|
||||
<div class="mb-4 p-4 bg-ep-primary text-white"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="true">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold text-lg">
|
||||
<span class="uppercase font-bold">
|
||||
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
@@ -24,7 +21,8 @@
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<div data-collapse-target="container"
|
||||
class="pt-2">
|
||||
<f:form.hidden property="dateFrom"
|
||||
data="{'search-target': 'dateFrom'}"/>
|
||||
<f:form.hidden property="dateTo"
|
||||
@@ -63,11 +61,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-controller="collapse"
|
||||
<div class="mb-4 p-4 bg-ep-primary text-white"
|
||||
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 text-lg">
|
||||
<span class="uppercase font-bold">
|
||||
Reisekonzepte
|
||||
</span>
|
||||
<svg class="w-6 h-6 text-white transform"
|
||||
@@ -75,27 +74,38 @@
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div data-collapse-target="container">
|
||||
<ul class="mb-0 p-0">
|
||||
<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>
|
||||
<f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0"
|
||||
<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>
|
||||
<div class="px-4 divide-y">
|
||||
|
||||
<div data-controller="collapse"
|
||||
<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">
|
||||
<span class="uppercase font-bold">
|
||||
Reiseziel
|
||||
</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">
|
||||
@@ -125,10 +135,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-controller="collapse"
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
|
||||
<button data-action="click->collapse#toggle">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
Preis
|
||||
</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">
|
||||
@@ -147,10 +165,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-controller="collapse"
|
||||
<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">
|
||||
<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">
|
||||
@@ -168,11 +194,19 @@
|
||||
4: 'Gästehaus',
|
||||
5: 'Pension'
|
||||
}"/>
|
||||
<div data-controller="collapse"
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
Unterkunft
|
||||
</label>
|
||||
</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">
|
||||
@@ -190,11 +224,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-controller="collapse"
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
Verpflegung
|
||||
</label>
|
||||
</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">
|
||||
@@ -222,11 +264,19 @@
|
||||
5: 'ab 5 Pers.',
|
||||
6: 'mit anderen'
|
||||
}"/>
|
||||
<div data-controller="collapse"
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
Zimmerarten/Apart.
|
||||
</label>
|
||||
</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">
|
||||
@@ -245,11 +295,19 @@
|
||||
</div>
|
||||
|
||||
<f:if condition="{filterOptions.busAvailable}">
|
||||
<div data-controller="collapse"
|
||||
<div class="py-2"
|
||||
data-controller="collapse"
|
||||
data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
|
||||
<label data-action="click->collapse#toggle">
|
||||
<button data-action="click->collapse#toggle"
|
||||
class="flex items-center justify-between w-full">
|
||||
<span class="uppercase font-bold">
|
||||
Anreise
|
||||
</label>
|
||||
</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>
|
||||
@@ -266,6 +324,8 @@
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
</div>
|
||||
|
||||
</f:form>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
<div class="col-span-3 lg:col-span-1 relative"
|
||||
data-controller="collapse"
|
||||
data-collapse-until-value="991">
|
||||
<div class="lg:block bg-white"
|
||||
<div class="lg:block bg-white p-4"
|
||||
data-collapse-target="container">
|
||||
<h3 class="headline headline--underlined px-8 py-4">
|
||||
<h3 class="headline headline--underlined mb-4">
|
||||
Filter
|
||||
</h3>
|
||||
<f:render partial="Search/FilterPanel" arguments="{_all}"/>
|
||||
<div class="px-8 py-4">
|
||||
<div class="mt-4">
|
||||
<button class="button button--secondary w-full"
|
||||
data-action="search#reset">
|
||||
Filter zurücksetzen
|
||||
|
||||
Reference in New Issue
Block a user