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'));
$eventsRangeEnd = $range->getEnd()->add(new \DateInterval('P1D'));
$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'));
$yearEnd = null;
@@ -49,6 +49,7 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
{
$optionsResolver = new OptionsResolver();
$optionsResolver->setRequired(['hotel']);
$optionsResolver->setDefined(['hotelUid']);
$optionsResolver->setAllowedTypes('hotel', Hotel::class);
$resolvedOptions = $optionsResolver->resolve($options);
@@ -61,13 +62,24 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
$qb
->select('status as status', 'date as date', 'min_price as minPrice', 'pax', 'available')
->from('tx_epproducts_domain_model_contingent')
->where('hotel_code = :hotelCode')
->andWhere('date >= :dateFrom')
->setParameter('hotelCode', $hotelCode)
->setParameter('dateFrom', $begin->format('Y-m-d'))
->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) {
$qb
->andWhere('date <= :dateTo')
@@ -179,5 +191,5 @@ class ContingentRepository extends AbstractRepository implements ProviderInterfa
return $qb->execute()->fetchAllAssociative();
}
}
@@ -78,7 +78,7 @@ class ContingentViewHelper extends AbstractViewHelper
}
$now = new \DateTime('now');
if ($now > $day->getBegin()) {
$class = [ 'text-muted' ];
$class = [ 'text-gray-400' ];
return static::getHtml($class, $day->format('d'));
}
$contingents = $events->find($day);
@@ -132,20 +132,20 @@ class ContingentViewHelper extends AbstractViewHelper
*/
protected static function getTransientLabelClasses($levelFrom, $levelTo = null)
{
$classes = [ 'label' ];
$classes = [ 'block p-1 leading-none text-sm text-white' ];
if ($levelFrom === static::LEVEL_RED) {
$class = 'label-danger';
$class = 'full';
} elseif ($levelFrom === static::LEVEL_YELLOW) {
$class = 'label-warning';
$class = 'partial';
} else {
$class = 'label-success';
$class = 'free';
}
if ($levelTo === static::LEVEL_RED) {
$class .= '-danger';
$class .= '-to-full';
} elseif ($levelTo === static::LEVEL_YELLOW) {
$class .= '-warning';
$class .= '-to-partial';
} elseif ($levelTo !== null) {
$class .= '-success';
$class .= '-to-free';
}
$classes[] = $class;
return $classes;
@@ -162,7 +162,7 @@ class ContingentViewHelper extends AbstractViewHelper
if ($percentage <= 20 || $status === Contingent::STATUS_BLOCKED) {
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_GREEN;
@@ -78,7 +78,7 @@ plugin.tx_eptheme {
# cat=eptheme/400/100; type=string; label=Phone number general
phoneNumberLink = +492212722760
# 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
businessHoursDays = Montag - Freitag
# cat=eptheme/400/130; type=string; label=Business hours time
@@ -1,6 +1,6 @@
import axios from 'axios'
export default uri => ({
export default props => ({
loading: false,
selectedIndex: null,
selectableMonths: [],
@@ -28,10 +28,11 @@ export default uri => ({
this.loading = true
let selectedMonth = this.selectableMonths[this.selectedIndex]
let data = new URLSearchParams({
'tx_epproducts_ajax[month]': selectedMonth.getMonth(),
'tx_epproducts_ajax[year]': selectedMonth.getYear(),
'tx_epproducts_ajax[hotel]': props.hotel,
'tx_epproducts_ajax[month]': selectedMonth.getMonth() + 1,
'tx_epproducts_ajax[year]': selectedMonth.getFullYear(),
})
axios.post(uri, data)
axios.post(props.url, data)
.then(response => (
this.calendarWrapper.innerHTML = response.data
))
@@ -1,59 +1,44 @@
.calendar {
@apply relative;
&--single {
@apply mb-16;
}
.label-success,
.free {
@apply bg-green-500;
}
.calendar__month {
&--single {
@apply text-lg;
}
.label-warning,
.partial {
@apply bg-yellow-300;
}
.calendar__select {
@apply mb-8 outline-none focus:outline-none;
.label-danger,
.full {
@apply bg-red-500;
}
.calendar__loading {
@apply absolute top-0 left-0 inset-0 w-full h-full z-10 bg-overlay-white;
img {
@apply absolute top-1/2 left-1/2 -translate-xy-1/2;
}
}
.calendar__days {
table {
@apply mb-0;
}
}
.label-success-danger {
.label-success-danger,
.free-to-full {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
}
.label-success-warning {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
.label-success-warning,
.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%);
}
.label-warning-success {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
.label-warning-success,
.partial-to-free {
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.green.500') 50%);
}
.label-danger-warning {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
.label-danger-warning,
.full-to-partial {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.yellow.300') 50%);
}
.label-warning-danger {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
.label-warning-danger,
.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;
@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 {
@apply text-white;
transform: translateX(calc(-100% + theme('spacing.8')));
@@ -27,7 +27,7 @@
{settings.phoneNumber}
</div>
</a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
<a href="{settings.whatsAppNumberLink}"
class="contact-bar__item"
title="Whatsapp"
target="_blank"
@@ -36,7 +36,7 @@
<use href="#icon-whatsapp"></use>
</svg>
<div class="contact-bar__label">
{settings.whatsApp} als Kontakt speichern
{settings.whatsApp}
</div>
</a>
<a href="{settings.facebookUrl}"
@@ -73,8 +73,8 @@
</div>
</a>
<f:if condition="{settings.englishPageUid}">
<f:link.typolink parameter="{settings.englishPageUid}" title="English" class="bg-yellow english">
<svg class="w-6 h-6">
<f:link.typolink parameter="{settings.englishPageUid}" title="English" class="contact-bar__item">
<svg class="contact-bar__icon">
<use href="#icon-flag-gb"></use>
</svg>
<div class="contact-bar__label">
@@ -83,8 +83,8 @@
</f:link.typolink>
</f:if>
<f:if condition="{settings.germanPageUid}">
<f:link.typolink parameter="{settings.germanPageUid}" title="English" class="bg-yellow german">
<svg class="w-6 h-6">
<f:link.typolink parameter="{settings.germanPageUid}" title="English" class="contact-bar__item">
<svg class="contact-bar__icon">
<use href="#icon-flag-de"></use>
</svg>
<div class="contact-bar__label">
@@ -1,12 +1,16 @@
<f:if condition="{officetip}">
<div class="ep-sidebar ep-quote">
<div class="row">
<div class="col-xs-4">
<p><strong>Officetipp</strong></p>
<div class="bg-gray-200 p-4">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3">
<span class="block font-bold">
Officetipp
</span>
</div>
<div class="col-span-1">
<f:if condition="{officetip.author.image}">
<f:then>
<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}">
</f:then>
<f:else>
@@ -14,9 +18,11 @@
</f:else>
</f:if>
</div>
<div class="col-xs-8">
<p>{officetip.text -> f:format.nl2br()}</p>
<strong>{officetip.author.name}</strong>
<div class="col-span-2">
<span class="block mb-4">
{officetip.text -> f:format.nl2br()}
</span>
<span class="block font-bold">{officetip.author.name}</span>
</div>
</div>
</div>
@@ -17,23 +17,29 @@
<f:section name="Year">
<f:for each="{year}" as="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="calendar__days">
<table class="table table-bordered">
<div class="w-full{f:if(condition: '{months} > 1', then: ' md:w-1/2 lg:w-1/3')}">
<table class="min-w-full border border-gray-400 border-collapse mb-0">
<thead>
<tr>
<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>
</tr>
<f:for each="{month}" as="week">
<tr>
<f:for each="{week}" as="day">
<td><ep:calendar.contingent day="{day}" month="{month}" events="{events}"/></td>
</f:for>
</tr>
</f:for>
</table>
</div>
</thead>
<tbody>
<f:for each="{month}" as="week">
<tr>
<f:for each="{week}" as="day">
<td class="px-1 py-2 border border-gray-300 text-center">
<ep:calendar.contingent day="{day}" month="{month}" events="{events}"/>
</td>
</f:for>
</tr>
</f:for>
</tbody>
</table>
</div>
</ep:calendar.includes>
</f:for>
@@ -18,11 +18,7 @@
</a>
</div>
</f:if>
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
</div>
</div>
<f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()}
@@ -5,12 +5,9 @@
<f:section name="Main">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<iframe class="passwordform" scrolling="no" frameborder="none"
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 class="w-1/2 md:w-full">
<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>
</f:section>
@@ -593,18 +593,26 @@
Preisberechnung
</a>
</f:if>
<div class="ep-sidebar ep-facts relative">
<p><strong>Belegungskalender</strong></p>
<div class="row calendar calandar--single"
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>")'>
<div class="col-xs-12">
<select class="form-control calendar__select" 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>
<div class="calendar__inner" x-cloak x-ref="calendarWrapper"></div>
<div class="bg-gray-200 p-4 relative mb-8">
<span class="block font-bold mb-2">
Belegungskalender
</span>
<div x-data='calendar({
<f:format.raw>
url: "{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}",
hotel: {hotel.uid}
</f:format.raw>
})'>
<select class="w-full border-gray-400 focus:border-gray-400"
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">
<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>