WIP Debootstrapify

This commit is contained in:
Björn Fromme
2021-08-04 16:12:37 +02:00
parent 8772df6be1
commit acbc178819
13 changed files with 120 additions and 109 deletions
@@ -71,7 +71,7 @@ class AjaxCalendarController extends ActionController
$eventsRangeBegin = $range->getBegin()->sub(new \DateInterval('P1D')); $eventsRangeBegin = $range->getBegin()->sub(new \DateInterval('P1D'));
$eventsRangeEnd = $range->getEnd()->add(new \DateInterval('P1D')); $eventsRangeEnd = $range->getEnd()->add(new \DateInterval('P1D'));
$eventsRange = new Range($eventsRangeBegin, $eventsRangeEnd); $eventsRange = new Range($eventsRangeBegin, $eventsRangeEnd);
$events = $factory->getEvents($eventsRange, [ 'hotel' => $hotel ]); $events = $factory->getEvents($eventsRange, [ 'hotel' => $hotel, 'hotelUid' => $hotel->getUid() ]);
$yearStart = $factory->getYear($range->getBegin()->format('Y')); $yearStart = $factory->getYear($range->getBegin()->format('Y'));
$yearEnd = null; $yearEnd = null;
@@ -49,6 +49,7 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
{ {
$optionsResolver = new OptionsResolver(); $optionsResolver = new OptionsResolver();
$optionsResolver->setRequired(['hotel']); $optionsResolver->setRequired(['hotel']);
$optionsResolver->setDefined(['hotelUid']);
$optionsResolver->setAllowedTypes('hotel', Hotel::class); $optionsResolver->setAllowedTypes('hotel', Hotel::class);
$resolvedOptions = $optionsResolver->resolve($options); $resolvedOptions = $optionsResolver->resolve($options);
@@ -61,13 +62,24 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
$qb $qb
->select('status as status', 'date as date', 'min_price as minPrice', 'pax', 'available') ->select('status as status', 'date as date', 'min_price as minPrice', 'pax', 'available')
->from('tx_epproducts_domain_model_contingent') ->from('tx_epproducts_domain_model_contingent')
->where('hotel_code = :hotelCode')
->andWhere('date >= :dateFrom') ->andWhere('date >= :dateFrom')
->setParameter('hotelCode', $hotelCode)
->setParameter('dateFrom', $begin->format('Y-m-d')) ->setParameter('dateFrom', $begin->format('Y-m-d'))
->orderBy('date') ->orderBy('date')
; ;
if (!empty($hotel->getCode())) {
$qb
->where('hotel_code = :hotelCode')
->setParameter('hotelCode', $hotelCode)
;
} else {
$hotelUid = $resolvedOptions['hotelUid'];
$qb
->where('hotel = :hotelUid')
->setParameter('hotelUid', $hotelUid)
;
}
if (null !== $end) { if (null !== $end) {
$qb $qb
->andWhere('date <= :dateTo') ->andWhere('date <= :dateTo')
@@ -179,5 +191,5 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
return $qb->execute()->fetchAllAssociative(); return $qb->execute()->fetchAllAssociative();
} }
} }
@@ -78,7 +78,7 @@ class ContingentViewHelper extends AbstractViewHelper
} }
$now = new \DateTime('now'); $now = new \DateTime('now');
if ($now > $day->getBegin()) { if ($now > $day->getBegin()) {
$class = [ 'text-muted' ]; $class = [ 'text-gray-400' ];
return static::getHtml($class, $day->format('d')); return static::getHtml($class, $day->format('d'));
} }
$contingents = $events->find($day); $contingents = $events->find($day);
@@ -132,20 +132,20 @@ class ContingentViewHelper extends AbstractViewHelper
*/ */
protected static function getTransientLabelClasses($levelFrom, $levelTo = null) protected static function getTransientLabelClasses($levelFrom, $levelTo = null)
{ {
$classes = [ 'label' ]; $classes = [ 'block p-1 leading-none text-sm text-white' ];
if ($levelFrom === static::LEVEL_RED) { if ($levelFrom === static::LEVEL_RED) {
$class = 'label-danger'; $class = 'full';
} elseif ($levelFrom === static::LEVEL_YELLOW) { } elseif ($levelFrom === static::LEVEL_YELLOW) {
$class = 'label-warning'; $class = 'partial';
} else { } else {
$class = 'label-success'; $class = 'free';
} }
if ($levelTo === static::LEVEL_RED) { if ($levelTo === static::LEVEL_RED) {
$class .= '-danger'; $class .= '-to-full';
} elseif ($levelTo === static::LEVEL_YELLOW) { } elseif ($levelTo === static::LEVEL_YELLOW) {
$class .= '-warning'; $class .= '-to-partial';
} elseif ($levelTo !== null) { } elseif ($levelTo !== null) {
$class .= '-success'; $class .= '-to-free';
} }
$classes[] = $class; $classes[] = $class;
return $classes; return $classes;
@@ -162,7 +162,7 @@ class ContingentViewHelper extends AbstractViewHelper
if ($percentage <= 20 || $status === Contingent::STATUS_BLOCKED) { if ($percentage <= 20 || $status === Contingent::STATUS_BLOCKED) {
return static::LEVEL_RED; return static::LEVEL_RED;
} }
if (($percentage > 20 && $percentage <= 80) || $status === Contingent::STATUS_ONREQUEST) { if ($percentage <= 80 || $status === Contingent::STATUS_ONREQUEST) {
return static::LEVEL_YELLOW; return static::LEVEL_YELLOW;
} }
return static::LEVEL_GREEN; return static::LEVEL_GREEN;
@@ -78,7 +78,7 @@ plugin.tx_eptheme {
# cat=eptheme/400/100; type=string; label=Phone number general # cat=eptheme/400/100; type=string; label=Phone number general
phoneNumberLink = +492212722760 phoneNumberLink = +492212722760
# cat=eptheme/400/110; type=string; label=Phone number WhatsApp # cat=eptheme/400/110; type=string; label=Phone number WhatsApp
whatsAppNumberLink = 492212722760 whatsAppNumberLink = https://wa.me/492212722760
# cat=eptheme/400/120; type=string; label=Business hours days # cat=eptheme/400/120; type=string; label=Business hours days
businessHoursDays = Montag - Freitag businessHoursDays = Montag - Freitag
# cat=eptheme/400/130; type=string; label=Business hours time # cat=eptheme/400/130; type=string; label=Business hours time
@@ -1,6 +1,6 @@
import axios from 'axios' import axios from 'axios'
export default uri => ({ export default props => ({
loading: false, loading: false,
selectedIndex: null, selectedIndex: null,
selectableMonths: [], selectableMonths: [],
@@ -28,10 +28,11 @@ export default uri => ({
this.loading = true this.loading = true
let selectedMonth = this.selectableMonths[this.selectedIndex] let selectedMonth = this.selectableMonths[this.selectedIndex]
let data = new URLSearchParams({ let data = new URLSearchParams({
'tx_epproducts_ajax[month]': selectedMonth.getMonth(), 'tx_epproducts_ajax[hotel]': props.hotel,
'tx_epproducts_ajax[year]': selectedMonth.getYear(), 'tx_epproducts_ajax[month]': selectedMonth.getMonth() + 1,
'tx_epproducts_ajax[year]': selectedMonth.getFullYear(),
}) })
axios.post(uri, data) axios.post(props.url, data)
.then(response => ( .then(response => (
this.calendarWrapper.innerHTML = response.data this.calendarWrapper.innerHTML = response.data
)) ))
@@ -1,59 +1,44 @@
.calendar { .label-success,
@apply relative; .free {
@apply bg-green-500;
&--single {
@apply mb-16;
}
} }
.calendar__month { .label-warning,
.partial {
&--single { @apply bg-yellow-300;
@apply text-lg;
}
} }
.calendar__select { .label-danger,
@apply mb-8 outline-none focus:outline-none; .full {
@apply bg-red-500;
} }
.calendar__loading { .label-success-danger,
@apply absolute top-0 left-0 inset-0 w-full h-full z-10 bg-overlay-white; .free-to-full {
img {
@apply absolute top-1/2 left-1/2 -translate-xy-1/2;
}
}
.calendar__days {
table {
@apply mb-0;
}
}
.label-success-danger {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%); background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
} }
.label-success-warning { .label-success-warning,
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%); .free-to-partial {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.yellow.300') 50%);
} }
.label-danger-success { .label-danger-success,
.full-to-free {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%); background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
} }
.label-warning-success { .label-warning-success,
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%); .partial-to-free {
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.green.500') 50%);
} }
.label-danger-warning { .label-danger-warning,
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%); .full-to-partial {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.yellow.300') 50%);
} }
.label-warning-danger { .label-warning-danger,
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%); .partial-to-full {
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.red.500') 50%);
} }
@@ -11,7 +11,7 @@
@apply flex-1 text-white py-2 bg-ep-primary; @apply flex-1 text-white py-2 bg-ep-primary;
@screen md { @screen md {
@apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md; @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white;
&:hover { &:hover {
@apply text-white; @apply text-white;
transform: translateX(calc(-100% + theme('spacing.8'))); transform: translateX(calc(-100% + theme('spacing.8')));
@@ -27,7 +27,7 @@
{settings.phoneNumber} {settings.phoneNumber}
</div> </div>
</a> </a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" <a href="{settings.whatsAppNumberLink}"
class="contact-bar__item" class="contact-bar__item"
title="Whatsapp" title="Whatsapp"
target="_blank" target="_blank"
@@ -36,7 +36,7 @@
<use href="#icon-whatsapp"></use> <use href="#icon-whatsapp"></use>
</svg> </svg>
<div class="contact-bar__label"> <div class="contact-bar__label">
{settings.whatsApp} als Kontakt speichern {settings.whatsApp}
</div> </div>
</a> </a>
<a href="{settings.facebookUrl}" <a href="{settings.facebookUrl}"
@@ -73,8 +73,8 @@
</div> </div>
</a> </a>
<f:if condition="{settings.englishPageUid}"> <f:if condition="{settings.englishPageUid}">
<f:link.typolink parameter="{settings.englishPageUid}" title="English" class="bg-yellow english"> <f:link.typolink parameter="{settings.englishPageUid}" title="English" class="contact-bar__item">
<svg class="w-6 h-6"> <svg class="contact-bar__icon">
<use href="#icon-flag-gb"></use> <use href="#icon-flag-gb"></use>
</svg> </svg>
<div class="contact-bar__label"> <div class="contact-bar__label">
@@ -83,8 +83,8 @@
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
<f:if condition="{settings.germanPageUid}"> <f:if condition="{settings.germanPageUid}">
<f:link.typolink parameter="{settings.germanPageUid}" title="English" class="bg-yellow german"> <f:link.typolink parameter="{settings.germanPageUid}" title="English" class="contact-bar__item">
<svg class="w-6 h-6"> <svg class="contact-bar__icon">
<use href="#icon-flag-de"></use> <use href="#icon-flag-de"></use>
</svg> </svg>
<div class="contact-bar__label"> <div class="contact-bar__label">
@@ -1,12 +1,16 @@
<f:if condition="{officetip}"> <f:if condition="{officetip}">
<div class="ep-sidebar ep-quote"> <div class="bg-gray-200 p-4">
<div class="row"> <div class="grid grid-cols-3 gap-4">
<div class="col-xs-4"> <div class="col-span-3">
<p><strong>Officetipp</strong></p> <span class="block font-bold">
Officetipp
</span>
</div>
<div class="col-span-1">
<f:if condition="{officetip.author.image}"> <f:if condition="{officetip.author.image}">
<f:then> <f:then>
<img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}" <img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}"
class="img-responsive lazyload" class="block w-full h-auto lazyload"
alt="{officetip.author.name}"> alt="{officetip.author.name}">
</f:then> </f:then>
<f:else> <f:else>
@@ -14,9 +18,11 @@
</f:else> </f:else>
</f:if> </f:if>
</div> </div>
<div class="col-xs-8"> <div class="col-span-2">
<p>{officetip.text -> f:format.nl2br()}</p> <span class="block mb-4">
<strong>{officetip.author.name}</strong> {officetip.text -> f:format.nl2br()}
</span>
<span class="block font-bold">{officetip.author.name}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -17,23 +17,29 @@
<f:section name="Year"> <f:section name="Year">
<f:for each="{year}" as="month"> <f:for each="{year}" as="month">
<ep:calendar.includes range="{range}" period="{month}"> <ep:calendar.includes range="{range}" period="{month}">
<div class="calendar__month col-xs-12{f:if(condition: '{months} > 1', then: ' col-md-6 col-lg-4')}"> <div class="w-full{f:if(condition: '{months} > 1', then: ' md:w-1/2 lg:w-1/3')}">
<div class="calendar__days"> <table class="min-w-full border border-gray-400 border-collapse mb-0">
<table class="table table-bordered"> <thead>
<tr> <tr>
<f:for each="{0: 'Mo', 1: 'Di', 2: 'Mi', 3: 'Do', 4: 'Fr', 5: 'Sa', 6: 'So'}" as="weekday"> <f:for each="{0: 'Mo', 1: 'Di', 2: 'Mi', 3: 'Do', 4: 'Fr', 5: 'Sa', 6: 'So'}" as="weekday">
<th>{weekday}</th> <th class="px-1 py-2 border border-gray-300 text-center">
{weekday}
</th>
</f:for> </f:for>
</tr> </tr>
<f:for each="{month}" as="week"> </thead>
<tr> <tbody>
<f:for each="{week}" as="day"> <f:for each="{month}" as="week">
<td><ep:calendar.contingent day="{day}" month="{month}" events="{events}"/></td> <tr>
</f:for> <f:for each="{week}" as="day">
</tr> <td class="px-1 py-2 border border-gray-300 text-center">
</f:for> <ep:calendar.contingent day="{day}" month="{month}" events="{events}"/>
</table> </td>
</div> </f:for>
</tr>
</f:for>
</tbody>
</table>
</div> </div>
</ep:calendar.includes> </ep:calendar.includes>
</f:for> </f:for>
@@ -18,11 +18,7 @@
</a> </a>
</div> </div>
</f:if> </f:if>
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
</div>
</div>
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2" data-rte-content> <div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()} {concept.description -> f:format.html()}
@@ -5,12 +5,9 @@
<f:section name="Main"> <f:section name="Main">
<div class="container"> <div class="container">
<div class="row"> <div class="w-1/2 md:w-full">
<div class="col-xs-12 col-md-6"> <iframe src="https://bpn.ep-reisen.de/buspronet/maske_konto_pw.php?db_passwort={bpnDbPassword}&amp;id={bpnId}&amp;templatezusatz=_base"
<iframe class="passwordform" scrolling="no" frameborder="none" width="100%" height="300"></iframe>
src="https://bpn.ep-reisen.de/buspronet/maske_konto_pw.php?db_passwort={bpnDbPassword}&amp;id={bpnId}&amp;templatezusatz=_base"
width="100%" height="300"></iframe>
</div>
</div> </div>
</div> </div>
</f:section> </f:section>
@@ -593,18 +593,26 @@
Preisberechnung Preisberechnung
</a> </a>
</f:if> </f:if>
<div class="ep-sidebar ep-facts relative"> <div class="bg-gray-200 p-4 relative mb-8">
<p><strong>Belegungskalender</strong></p> <span class="block font-bold mb-2">
<div class="row calendar calandar--single" Belegungskalender
x-data='calendar("<f:format.raw>{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: hotel}', format: 'html')}</f:format.raw>")'> </span>
<div class="col-xs-12"> <div x-data='calendar({
<select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load"> <f:format.raw>
<template x-for="(month, index) in selectableMonths"> url: "{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}",
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option> hotel: {hotel.uid}
</template> </f:format.raw>
</select> })'>
</div> <select class="w-full border-gray-400 focus:border-gray-400"
<div class="calendar__inner" x-cloak x-ref="calendarWrapper"></div> x-model="selectedIndex"
x-on:change="load">
<template x-for="(month, index) in selectableMonths">
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
</template>
</select>
<div class="mt-4"
x-ref="calendarWrapper"
x-cloak></div>
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white" x-show="loading"> <div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white" x-show="loading">
<f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/> <f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
</div> </div>