Fix and style daytrip select widget
This commit is contained in:
Björn Fromme
@@ -36,6 +36,7 @@ use EP\EpProducts\Service\DateService;
|
||||
use EP\EpProducts\Service\FilterService;
|
||||
use EP\EpProducts\Service\ResellerDataService;
|
||||
use EP\EpProducts\Traits\RequestArgumentTypeConversionTrait;
|
||||
use League\Period\Period;
|
||||
use TYPO3\CMS\Core\Utility\GeneralUtility;
|
||||
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
|
||||
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
|
||||
@@ -313,11 +314,19 @@ class AjaxTableController extends ActionController
|
||||
*/
|
||||
public function daytripRoomsAction(Hotel $hotel, Product $product, $dateFrom, $dateTo)
|
||||
{
|
||||
$template = $this->settings['bpnBookingUrlTemplateCode'];
|
||||
$rooms = $this
|
||||
->contingentDataService
|
||||
->getAvailableRooms($dateFrom, $dateTo, $hotel, $product, $template);
|
||||
$period = new Period($dateFrom, $dateTo);
|
||||
$nights = $period->getDateInterval()->format('%a');
|
||||
|
||||
if (2 > $nights) {
|
||||
$rooms = [];
|
||||
} else {
|
||||
$template = $this->settings['bpnBookingUrlTemplateCode'];
|
||||
$rooms = $this
|
||||
->contingentDataService
|
||||
->getAvailableRooms($dateFrom, $dateTo, $hotel, $product, $template);
|
||||
}
|
||||
|
||||
$this->view->assign('nights', $nights);
|
||||
$this->view->assign('rooms', $rooms);
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -5,7 +5,6 @@ import { useFetch } from '../mixins/use_fetch'
|
||||
export default class extends Controller {
|
||||
|
||||
static targets = [
|
||||
'headerLabel',
|
||||
'container',
|
||||
'loadingIndicator',
|
||||
'message',
|
||||
@@ -35,6 +34,7 @@ export default class extends Controller {
|
||||
this.loadingValue = true
|
||||
this.dateFromValue = e.detail.from
|
||||
this.dateToValue = e.detail.to
|
||||
this.containerTarget.innerHTML = ''
|
||||
let data = new FormData()
|
||||
data.set('tx_epproducts_ajax[hotel]', this.hotelUidValue)
|
||||
data.set('tx_epproducts_ajax[product]', this.productUidValue)
|
||||
|
||||
+34
-13
@@ -5,46 +5,67 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<table class="table table-striped pricetable">
|
||||
<f:if condition="{nights} < 3">
|
||||
<f:then>
|
||||
<p class="font-bold">
|
||||
Bitte mindestens 2 Nächte auswählen.
|
||||
</p>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:render section="Table" arguments="{_all}"/>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:section>>
|
||||
|
||||
<f:section name="Table">
|
||||
<table class="w-full mb-4 bg-gray-200 text-sm xl:text-base">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zimmerart</th>
|
||||
<th>Preis</th>
|
||||
<th>inkl.</th>
|
||||
<th></th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Zimmerart
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Preis
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
inkl.
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{rooms}" as="row" iteration="iteration">
|
||||
<tr>
|
||||
<td>
|
||||
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
{row.label}
|
||||
</td>
|
||||
<td class="whitespace-nowrap">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
ab {row.priceForSelection} €
|
||||
</td>
|
||||
<td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<span 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">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
<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="button button--light button--small hidden md:block"
|
||||
data-action="daytrip#openModal"
|
||||
data-type="services"
|
||||
data-uid="{iteration.cycle}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen"
|
||||
role="tooltip">
|
||||
Leistungen
|
||||
<svg class="w-4 h-4">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-info-circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<a class="button button--small bg-green-500 border-green-500"
|
||||
href="{row.bookingUrl}" target="_blank">
|
||||
Buchen
|
||||
|
||||
@@ -10,12 +10,17 @@
|
||||
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
|
||||
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
|
||||
<div class="container"
|
||||
<f:if condition="{product.daytrip}">
|
||||
<f:else>
|
||||
data-controller="product-details"
|
||||
data-action="tabs:selected->product-details#switchView"
|
||||
data-product-details-datestable-uri-value="{ep:uri.ajax(action: 'datestable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
||||
data-product-details-pricetable-uri-value="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
||||
data-product-details-travel-alert-uri-value="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}">
|
||||
data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}"
|
||||
</f:else>
|
||||
</f:if>
|
||||
>
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
|
||||
<div class="flex flex-col lg:flex-row-reverse lg:items-start"
|
||||
data-controller="tabs"
|
||||
@@ -256,23 +261,23 @@
|
||||
data-daytrip-product-uid-value="{product.uid}"
|
||||
data-daytrip-rooms-uri-value="{ep:uri.ajax(action: 'daytripRooms', controller: 'AjaxTable', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
||||
data-action="datepicker:range-select->daytrip#load">
|
||||
<div class="headerbar"
|
||||
data-daytrip-target="headerLabel"></div>
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
<div class="date-select">
|
||||
<div class="date-select__picker">
|
||||
<div class="daterange__panel"
|
||||
data-controller="datepicker"
|
||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
||||
data-datepicker-enabled-dates-value='{enabledDates -> f:format.json()}'>
|
||||
<input type="hidden"
|
||||
data-datepicker-target="field">
|
||||
</div>
|
||||
<div class="headerbar">
|
||||
Buchungsoptionen {product.name}
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:items-start">
|
||||
<div class="date-select">
|
||||
<div class="date-select__picker">
|
||||
<div class="daterange__panel"
|
||||
data-controller="datepicker"
|
||||
data-datepicker-inline-value="true"
|
||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
||||
data-datepicker-enabled-dates-value='{enabledDates -> f:format.json()}'>
|
||||
<input type="hidden"
|
||||
data-datepicker-target="field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
<div class="flex-1 md:pl-4">
|
||||
<div data-daytrip-target="container"></div>
|
||||
<div class="hidden flex items-center space-x-2"
|
||||
data-daytrip-target="loadingIndicator">
|
||||
|
||||
Reference in New Issue
Block a user