Don't render empty table
This commit is contained in:
Björn Fromme
+188
-187
@@ -22,198 +22,199 @@
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
<table class="w-full mb-4">
|
||||
<thead>
|
||||
<tr class="bg-ep-primary-dark text-white">
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Termin
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Nächte
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
ab
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{dates}" as="row" iteration="iteration">
|
||||
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
data-pricetable-target="row">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
class="text-left text-ep-primary-light text-sm md:text-base"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block text-sm md:text-base{f:if(condition: row.available, else: ' line-through')}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<span class="block text-sm md:text-base">
|
||||
{row.nights}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 p-1">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
<f:if condition="{dates}">
|
||||
<table class="w-full mb-4">
|
||||
<thead>
|
||||
<tr class="bg-ep-primary-dark text-white">
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Termin
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Nächte
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
ab
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{dates}" as="row" iteration="iteration">
|
||||
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
data-pricetable-target="row">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
class="text-left text-ep-primary-light text-sm md:text-base"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block text-sm md:text-base{f:if(condition: row.available, else: ' line-through')}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||
role="tooltip">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:if>
|
||||
<button type="button"
|
||||
class="text-ep-primary-light col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="services"
|
||||
data-uid="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
Leistungen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
{row.pseudoPrice} €
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<span class="block text-sm md:text-base">
|
||||
{row.nights}
|
||||
</span>
|
||||
</f:if>
|
||||
<span class="font-bold normal-case text-sm md:text-base whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
{row.minPrice}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<f:then>
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 p-1">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||
role="tooltip">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:if>
|
||||
<button type="button"
|
||||
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
<svg class="w-6 h-6 hidden md:block">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-xs md:text-sm uppercase">
|
||||
Infos & buchen
|
||||
</span>
|
||||
class="text-ep-primary-light col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="services"
|
||||
data-uid="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
Leistungen
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
title="Reisen-Alert"
|
||||
class="flex space-x-1 items-center text-ep-primary-light">
|
||||
<svg class="w-6 h-6 hidden md:block">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-xs md:text-sm uppercase">
|
||||
Reisen-Alert
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
{row.pseudoPrice} €
|
||||
</span>
|
||||
</f:if>
|
||||
<span class="font-bold normal-case text-sm md:text-base whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
{row.minPrice}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
<svg class="w-6 h-6 hidden md:block">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-xs md:text-sm uppercase">
|
||||
Infos & buchen
|
||||
</span>
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
title="Reisen-Alert"
|
||||
class="flex space-x-1 items-center text-ep-primary-light">
|
||||
<svg class="w-6 h-6 hidden md:block">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-xs md:text-sm uppercase">
|
||||
Reisen-Alert
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{dates -> f:count()} > 5">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
|
||||
data-action="pricetable#toggleRows">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
|
||||
data-pricetable-target="rowToggleIcon"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="rowToggleLabel">
|
||||
Alle Termine anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{altProductLink}">
|
||||
<li class="py-2">
|
||||
<a href="{altProductLink}"
|
||||
title="{altLabel}"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{altLabel}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{dates -> f:count()} > 5">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
|
||||
data-action="pricetable#toggleRows">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
|
||||
data-pricetable-target="rowToggleIcon"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="rowToggleLabel">
|
||||
Alle Termine anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{altProductLink}">
|
||||
<li class="py-2">
|
||||
<a href="{altProductLink}"
|
||||
title="{altLabel}"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{altLabel}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
<div class="hidden fixed inset-0 w-full h-full z-50"
|
||||
|
||||
Reference in New Issue
Block a user