Fix event pricetable rendering empty
This commit is contained in:
Björn Fromme
@@ -1,139 +1,165 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:section name="Main">
|
||||
<f:if condition="{pricetable -> f:count()} == 0">
|
||||
<f:then>
|
||||
<f:render partial="NotBookable" arguments="{_all}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="w-full max-w-full overflow-x-scroll">
|
||||
<table class="min-w-full border border-gray-200 border-collapse mb-8">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Preis/Pers.
|
||||
</th>
|
||||
<th class="text-left">
|
||||
inkl.
|
||||
</th>
|
||||
<th></th>
|
||||
<th class="hidden lg:table-cell"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{pricetable}" as="row" iteration="iteration">
|
||||
<tr class="even:bg-gray-50">
|
||||
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
|
||||
{row.roomName}
|
||||
<div class="lg:hidden">
|
||||
<f:if condition="{row.roomAvailable}">
|
||||
<f:then>
|
||||
<a href="{row.bookingUrl}">
|
||||
Jetzt buchen <i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span>ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.roomAvailable}">
|
||||
<f:if condition="{pricetable -> f:count()} == 0">
|
||||
<f:then>
|
||||
<f:render partial="NotBookable" arguments="{_all}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="w-full max-w-full overflow-x-scroll"
|
||||
data-controller="pricetable"
|
||||
data-pricetable-show-all-rows-value="true">
|
||||
<table class="min-w-full border border-gray-200 border-collapse mb-8">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Preis/Pers.
|
||||
</th>
|
||||
<th class="text-left">
|
||||
inkl.
|
||||
</th>
|
||||
<th></th>
|
||||
<th class="hidden lg:table-cell"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{pricetable}" as="row" iteration="iteration">
|
||||
<tr class="even:bg-gray-50">
|
||||
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
|
||||
{row.roomName}
|
||||
<div class="lg:hidden">
|
||||
<f:if condition="{row.available}">
|
||||
<f:then>
|
||||
{row.roomPrice} €
|
||||
<a href="{row.bookingUrl}">
|
||||
Jetzt buchen <i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<s>{row.roomPrice} €</s>
|
||||
<span>ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.dateBusIncluded}">
|
||||
<span data-cooltipz-dir="top" aria-label="Busfahrt inklusive" role="tooltip">
|
||||
<i class="fa fa-bus"></i>
|
||||
</span>
|
||||
</f:if>
|
||||
<f:if condition="{row.dateSkipassIncluded}">
|
||||
<span data-cooltipz-dir="top" aria-label="Skipass inklusive" role="tooltip">
|
||||
<i class="fa fa-tag"></i>
|
||||
</span>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.roomOptionalServices}">
|
||||
<f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.roomAvailable}">
|
||||
<f:then>
|
||||
<a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="label label-default">ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Modal">
|
||||
<a href="#" data-toggle="modal" data-target="#optservices{index}"><i class="fa fa-plus-circle"></i></a>
|
||||
<div class="modal fade" id="optservices{index}" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button"
|
||||
class="close"
|
||||
data-dismiss="modal">
|
||||
<span>×</span>
|
||||
</button>
|
||||
<h5 class="modal-title">Optionale Zusatzleistungen</h5>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.available}">
|
||||
<f:then>
|
||||
{row.minPrice} €
|
||||
</f:then>
|
||||
<f:else>
|
||||
<s>{row.minPrice} €</s>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt"
|
||||
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 data-cooltipz-dir="top"
|
||||
aria-label="Skipass"
|
||||
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>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.optionalServices} && {row.available}">
|
||||
<button type="button"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="options"
|
||||
data-uid="{row.roomUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Zusatzleistungen anzeigen"
|
||||
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-plus-circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
|
||||
<f:if condition="{row.available}">
|
||||
<f:then>
|
||||
<a class="button button--small w-full"
|
||||
href="{row.bookingUrl}"
|
||||
title="{row.roomName} buchen"
|
||||
target="_blank">
|
||||
<span class="font-bold normal-case whitespace-nowrap">
|
||||
Jetzt buchen
|
||||
</span>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="label label-default">ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="hidden fixed inset-0 w-full h-full z-50"
|
||||
data-controller="modal"
|
||||
data-action="pricetable:options-modal:open@window->modal#open">
|
||||
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
|
||||
data-action="click->modal#close"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
|
||||
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
|
||||
<span class="text-xl font-bold">
|
||||
Optionale Zusatzleistungen
|
||||
</span>
|
||||
<button type="button"
|
||||
class="inline-block"
|
||||
data-action="modal#close">
|
||||
<svg class="w-8 h-8">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-128 p-4 overflow-y-scroll bg-white rounded-b">
|
||||
<f:for each="{pricetable}" as="row">
|
||||
<div class="hidden"
|
||||
data-modal-target="content"
|
||||
data-uid="{row.roomUid}">
|
||||
<f:for each="{row.optionalServices}" as="section">
|
||||
<div class="py-2 -mx-1">
|
||||
<div class="font-bold text-xl px-1">
|
||||
{section.label}
|
||||
</div>
|
||||
<f:for each="{section.services}" as="service">
|
||||
<dl class="flex items-start justify-between p-1 hover:bg-gray-50">
|
||||
<dt class="font-normal">
|
||||
{service.label}:
|
||||
</dt>
|
||||
<dd class="whitespace-nowrap">
|
||||
{service.price} €
|
||||
</dd>
|
||||
</dl>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="table-responsive">
|
||||
<f:render section="OptionalServices" arguments="{services: services}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="OptionalServices">
|
||||
<v:variable.set name="sectionLabels" value="{
|
||||
BUS: 'Anreise',
|
||||
VPF: 'Verpflegung',
|
||||
SPA: 'Skipass',
|
||||
KUR: 'Kurse',
|
||||
VER: 'Verleih'
|
||||
}"/>
|
||||
<table class="table table-striped services">
|
||||
<f:for each="{services}" as="section" key="serviceKey">
|
||||
<tr>
|
||||
<th colspan="2">{v:variable.get(name: 'sectionLabels.{serviceKey}')}</th>
|
||||
</tr>
|
||||
<f:for each="{section}" as="service">
|
||||
<tr>
|
||||
<td>{service.label}</td>
|
||||
<td>{service.price}€</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
</f:for>
|
||||
</table>
|
||||
</f:section>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
+1
-2
@@ -1,11 +1,10 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<f:render partial="Pricetable" section="Main" arguments="{_all}"/>
|
||||
<f:render partial="Pricetable" arguments="{_all}"/>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user