Fix event pricetable rendering empty

This commit is contained in:
Björn Fromme
2022-04-12 09:09:08 +02:00
parent 48a2ad1a2f
commit 4747e27cab
2 changed files with 152 additions and 127 deletions
@@ -1,139 +1,165 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Main"> <f:if condition="{pricetable -> f:count()} == 0">
<f:if condition="{pricetable -> f:count()} == 0"> <f:then>
<f:then> <f:render partial="NotBookable" arguments="{_all}"/>
<f:render partial="NotBookable" arguments="{_all}"/> </f:then>
</f:then> <f:else>
<f:else> <div class="w-full max-w-full overflow-x-scroll"
<div class="w-full max-w-full overflow-x-scroll"> data-controller="pricetable"
<table class="min-w-full border border-gray-200 border-collapse mb-8"> data-pricetable-show-all-rows-value="true">
<thead> <table class="min-w-full border border-gray-200 border-collapse mb-8">
<tr> <thead>
<th class="text-left"> <tr>
Zimmertyp <th class="text-left">
</th> Zimmertyp
<th class="text-left"> </th>
Preis/Pers. <th class="text-left">
</th> Preis/Pers.
<th class="text-left"> </th>
inkl. <th class="text-left">
</th> inkl.
<th></th> </th>
<th class="hidden lg:table-cell"></th> <th></th>
</tr> <th class="hidden lg:table-cell"></th>
</thead> </tr>
<tbody> </thead>
<f:for each="{pricetable}" as="row" iteration="iteration"> <tbody>
<tr class="even:bg-gray-50"> <f:for each="{pricetable}" as="row" iteration="iteration">
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap"> <tr class="even:bg-gray-50">
{row.roomName} <td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
<div class="lg:hidden"> {row.roomName}
<f:if condition="{row.roomAvailable}"> <div class="lg:hidden">
<f:then> <f:if condition="{row.available}">
<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:then> <f:then>
{row.roomPrice} € <a href="{row.bookingUrl}">
Jetzt buchen <i class="fa fa-angle-right"></i>
</a>
</f:then> </f:then>
<f:else> <f:else>
<s>{row.roomPrice} €</s> <span>ausgebucht</span>
</f:else> </f:else>
</f:if> </f:if>
</td> </div>
<td class="px-2 py-1 border border-gray-200"> </td>
<f:if condition="{row.dateBusIncluded}"> <td class="px-2 py-1 border border-gray-200">
<span data-cooltipz-dir="top" aria-label="Busfahrt inklusive" role="tooltip"> <f:if condition="{row.available}">
<i class="fa fa-bus"></i> <f:then>
</span> {row.minPrice} €
</f:if> </f:then>
<f:if condition="{row.dateSkipassIncluded}"> <f:else>
<span data-cooltipz-dir="top" aria-label="Skipass inklusive" role="tooltip"> <s>{row.minPrice} €</s>
<i class="fa fa-tag"></i> </f:else>
</span> </f:if>
</f:if> </td>
</td> <td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-gray-200"> <f:if condition="{row.busIncluded}">
<f:if condition="{row.roomOptionalServices}"> <span data-cooltipz-dir="top"
<f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/> aria-label="Busfahrt"
</f:if> role="tooltip"
</td> data-pricetable-target="busIcon"
<td class="hidden lg:table-cell px-2 py-1 border border-gray-200"> data-bus-included="{row.busIncluded}"
<f:if condition="{row.roomAvailable}"> data-bus-price="{row.busPrice}">
<f:then> <svg class="w-4 h-4 md:w-5 md:h-5">
<a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
</f:then> </svg>
<f:else> </span>
<span class="label label-default">ausgebucht</span> </f:if>
</f:else> <f:if condition="{row.skipassIncluded}">
</f:if> <span data-cooltipz-dir="top"
</td> aria-label="Skipass"
</tr> role="tooltip">
</f:for> <svg class="w-4 h-4 md:w-5 md:h-5">
</tbody> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
</table> </svg>
</div> </span>
</f:else> </f:if>
</f:if> </td>
</f:section> <td class="px-2 py-1 border border-gray-200">
<f:if condition="{row.optionalServices} && {row.available}">
<f:section name="Modal"> <button type="button"
<a href="#" data-toggle="modal" data-target="#optservices{index}"><i class="fa fa-plus-circle"></i></a> data-action="pricetable#openModal"
<div class="modal fade" id="optservices{index}" role="dialog"> data-type="options"
<div class="modal-dialog"> data-uid="{row.roomUid}"
<div class="modal-content"> data-cooltipz-dir="top"
<div class="modal-header"> aria-label="Alle Zusatzleistungen anzeigen"
<button type="button" role="tooltip">
class="close" <svg class="w-4 h-4 md:w-5 md:h-5">
data-dismiss="modal"> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"></use>
<span>&times;</span> </svg>
</button> </button>
<h5 class="modal-title">Optionale Zusatzleistungen</h5> </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>
<div class="modal-body"> </f:for>
<div class="table-responsive">
<f:render section="OptionalServices" arguments="{services: services}"/>
</div>
</div>
</div>
</div> </div>
</div> </div>
</f:section> </div>
<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>
</html> </html>
@@ -1,11 +1,10 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" <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"> data-namespace-typo3-fluid="true">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<f:render partial="Pricetable" section="Main" arguments="{_all}"/> <f:render partial="Pricetable" arguments="{_all}"/>
</f:section> </f:section>
</html> </html>