Remove obsolete js
This commit is contained in:
Björn Fromme
@@ -56,7 +56,7 @@ class AjaxCalendarController extends ActionController
|
|||||||
* @param string $month
|
* @param string $month
|
||||||
* @param int $months
|
* @param int $months
|
||||||
*/
|
*/
|
||||||
public function rangeAction(Hotel $hotel, $year = null, $month = null, $months = 6)
|
public function rangeAction(Hotel $hotel, $year = null, $month = null, $months = 1)
|
||||||
{
|
{
|
||||||
[ $begin, $end ] = DateUtility::getDateRange($year, $month, $months);
|
[ $begin, $end ] = DateUtility::getDateRange($year, $month, $months);
|
||||||
|
|
||||||
|
|||||||
@@ -29,6 +29,8 @@ import productDetail from './components/product-detail'
|
|||||||
import daytripDateSelect from './components/daytrip-date-select'
|
import daytripDateSelect from './components/daytrip-date-select'
|
||||||
import searchBar from './components/search-bar'
|
import searchBar from './components/search-bar'
|
||||||
import search from './components/search'
|
import search from './components/search'
|
||||||
|
import calendar from './components/calendar'
|
||||||
|
import contactForm from './components/contact-form'
|
||||||
|
|
||||||
import defaultFilterSettings from './_filtersettings'
|
import defaultFilterSettings from './_filtersettings'
|
||||||
import defaultFilterOptions from './_filteroptions'
|
import defaultFilterOptions from './_filteroptions'
|
||||||
@@ -63,6 +65,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
Alpine.data('daytripDateSelect', daytripDateSelect)
|
Alpine.data('daytripDateSelect', daytripDateSelect)
|
||||||
Alpine.data('searchBar', searchBar)
|
Alpine.data('searchBar', searchBar)
|
||||||
Alpine.data('search', search)
|
Alpine.data('search', search)
|
||||||
|
Alpine.data('calendar', calendar)
|
||||||
|
Alpine.data('contactForm', contactForm)
|
||||||
Alpine.start()
|
Alpine.start()
|
||||||
|
|
||||||
Glightbox({
|
Glightbox({
|
||||||
@@ -70,64 +74,3 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
slideEffect: 'fade',
|
slideEffect: 'fade',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
/// LEGACY CODE FROM HERE ///
|
|
||||||
|
|
||||||
// Import dependencies
|
|
||||||
// import Vue from 'vue'
|
|
||||||
// import $ from 'jquery'
|
|
||||||
// import dayjs from 'dayjs'
|
|
||||||
// import 'dayjs/locale/de'
|
|
||||||
|
|
||||||
// global.$ = global.jQuery = $;
|
|
||||||
|
|
||||||
// require('bootstrap-sass/assets/javascripts/bootstrap/dropdown')
|
|
||||||
// require('bootstrap-sass/assets/javascripts/bootstrap/modal')
|
|
||||||
// require('bootstrap-sass/assets/javascripts/bootstrap/transition')
|
|
||||||
|
|
||||||
// Import components
|
|
||||||
// import SearchBar from './components/SearchBar.vue'
|
|
||||||
// import SearchBox from './components/SearchBox.vue'
|
|
||||||
//import ProductDetail from './components/ProductDetail.vue'
|
|
||||||
// import Calendar from './components/Calendar.vue'
|
|
||||||
// import EventPricetable from './components/EventPriceTable.vue'
|
|
||||||
// import ContactForm from './components/ContactForm.vue'
|
|
||||||
// import Watchlist from './components/Watchlist.vue'
|
|
||||||
// import HotelList from './components/HotelList.vue'
|
|
||||||
|
|
||||||
// Define date filter for vue templates
|
|
||||||
// Vue.filter('date', (value) => {
|
|
||||||
// return dayjs(value).format('DD.MM.YY');
|
|
||||||
// });
|
|
||||||
|
|
||||||
// Store
|
|
||||||
// import store from './store';
|
|
||||||
|
|
||||||
// Initialize vue app
|
|
||||||
// new Vue({
|
|
||||||
// el: '#app',
|
|
||||||
// store,
|
|
||||||
// components: {
|
|
||||||
// SearchBar,
|
|
||||||
// //SearchBox,
|
|
||||||
// //SearchResult: () => import('./components/SearchResult.vue'),
|
|
||||||
// //ProductDetail,
|
|
||||||
// //Calendar,
|
|
||||||
// //EventPricetable,
|
|
||||||
// //ContactForm,
|
|
||||||
// //Watchlist,
|
|
||||||
// //HotelList,
|
|
||||||
// //MyEp: () => import('./myep/App.vue'),
|
|
||||||
// //GroupsPriceCalculator: () => import('./components/GroupsPriceCalculator.vue'),
|
|
||||||
// },
|
|
||||||
// data () {
|
|
||||||
// return {
|
|
||||||
// maxWindowWidth: 991,
|
|
||||||
// mobileMode: false,
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// created () {
|
|
||||||
// this.$store.dispatch('init');
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|||||||
-43
@@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="boardtypeselect">
|
|
||||||
<div class="checkbox" v-for="boardType of boardTypesOptions">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model.number="boardTypesSelected" :value="boardType.uid" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
{{ boardType.label }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
boardTypesSelected: this.boardTypes
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
boardTypesOptions: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
boardTypes: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', this.boardTypesSelected);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
boardTypes (value) {
|
|
||||||
this.boardTypesSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="busselect">
|
|
||||||
<template v-if="busAvailable">
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="busSelected" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
Busanreise
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
nicht verfügbar
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
busSelected: this.bus
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
bus: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
busAvailable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', this.busSelected);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
bus (value) {
|
|
||||||
this.busSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="row calendar" :class="{ 'calendar--single': isSingleCalendar }">
|
|
||||||
<div class="col-xs-12" v-if="showHeader">
|
|
||||||
<h2>Belegungskalender {{ hotelName }}</h2>
|
|
||||||
</div>
|
|
||||||
<div class="calendar__loading" v-show="loading">
|
|
||||||
<img :src="loaderUri" alt="Loading" title="Loading">
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<select class="form-control calendar__select" v-model="selectedMonth" @change="loadCalendar">
|
|
||||||
<option v-for="option in selectableMonths" :value="option" :key="option.format('YYYY')+option.format('M')">
|
|
||||||
{{ option.format('MMMM YYYY') }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Vue from 'vue'
|
|
||||||
import axios from 'axios'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import 'dayjs/locale/de'
|
|
||||||
dayjs.locale('de');
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
uri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
loaderUri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
argumentPrefix: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
hotelName: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
hotelUid: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
months: {
|
|
||||||
type: Number,
|
|
||||||
default: 6
|
|
||||||
},
|
|
||||||
step: {
|
|
||||||
type: Number,
|
|
||||||
default: 3
|
|
||||||
},
|
|
||||||
showHeader: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
startDate: dayjs().startOf('month'),
|
|
||||||
selectedMonth: dayjs().startOf('month'),
|
|
||||||
calendarHtml: '',
|
|
||||||
loading: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isSingleCalendar () {
|
|
||||||
return parseInt(this.months) === 1;
|
|
||||||
},
|
|
||||||
selectableMonths() {
|
|
||||||
const months = [];
|
|
||||||
let month = this.startDate.month();
|
|
||||||
let year = this.startDate.year();
|
|
||||||
for (let i = 1; i <= 20; i++) {
|
|
||||||
months.push(dayjs().set('year', year).set('month', month));
|
|
||||||
if (month < 12) {
|
|
||||||
month++;
|
|
||||||
} else {
|
|
||||||
month = 1;
|
|
||||||
year++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadCalendar () {
|
|
||||||
let query = {};
|
|
||||||
query[this.argumentPrefix + '[hotel]'] = this.hotelUid;
|
|
||||||
query[this.argumentPrefix + '[month]'] = this.selectedMonth.month() + 1;
|
|
||||||
query[this.argumentPrefix + '[year]'] = this.selectedMonth.year();
|
|
||||||
query[this.argumentPrefix + '[months]'] = this.months;
|
|
||||||
this.loading = true;
|
|
||||||
axios({
|
|
||||||
url: this.uri,
|
|
||||||
responseType: 'text',
|
|
||||||
params: query
|
|
||||||
}).then((response) => {
|
|
||||||
this.calendarHtml = response.data;
|
|
||||||
}).catch(() => {
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
this.loadCalendar();
|
|
||||||
this.selectedMonth = this.selectableMonths[0];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-13
@@ -1,13 +0,0 @@
|
|||||||
<template functional>
|
|
||||||
<div v-if="Object.keys(props.concepts).length > 1" class="hidden-xs conceptbtns">
|
|
||||||
<a v-for="concept of props.concepts"
|
|
||||||
:href="'#concept-' + concept.uid"
|
|
||||||
:class="'btn btn-warning ep-sidebar concept-' + concept.code"
|
|
||||||
:title="concept.name">{{ concept.name }}</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: [ 'concepts' ],
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-43
@@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="conceptselect">
|
|
||||||
<div class="checkbox" v-for="concept of conceptOptions">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="conceptsSelected" :value="concept.uid" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
nur {{ concept.name }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
conceptsSelected: this.concepts
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
conceptOptions: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
concepts: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', this.conceptsSelected);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
concepts (value) {
|
|
||||||
this.conceptsSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<script>
|
|
||||||
import $ from 'jquery'
|
|
||||||
import EventBus from '../_bus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
formErrors: {},
|
|
||||||
processing: false,
|
|
||||||
success: false,
|
|
||||||
error: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submitForm () {
|
|
||||||
let $form = $('#contactform');
|
|
||||||
this.processing = true;
|
|
||||||
$.ajax({
|
|
||||||
url: $form.attr('action'),
|
|
||||||
type: 'POST',
|
|
||||||
data: $form.serialize(),
|
|
||||||
dataType: 'json',
|
|
||||||
success: (response) => {
|
|
||||||
this.processing = false;
|
|
||||||
if (response.status === 'validation') {
|
|
||||||
this.formErrors = response.errors;
|
|
||||||
} else {
|
|
||||||
this.success = true;
|
|
||||||
}
|
|
||||||
EventBus.$emit('scrollTo', '#contactform');
|
|
||||||
},
|
|
||||||
error: () => {
|
|
||||||
this.processing = false;
|
|
||||||
this.error = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetForm () {
|
|
||||||
this.formErrors = {};
|
|
||||||
this.processing = false;
|
|
||||||
this.success = false;
|
|
||||||
this.error = false;
|
|
||||||
$('#contactform').trigger('reset');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-149
@@ -1,149 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<label v-if="showLabel">Zeitraum</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown" ref="dropdown">
|
|
||||||
<input type="text" class="form-control" placeholder="von... bis"
|
|
||||||
:value="selectedRange" @click="togglePanel"/>
|
|
||||||
<ul class="dropdown-menu daterange">
|
|
||||||
<li v-if="presets">
|
|
||||||
<div class="daterange__presets">
|
|
||||||
<template v-for="preset of presets">
|
|
||||||
<a class="daterange__preset" href="#"
|
|
||||||
@click.prevent="selectPreset(preset)">
|
|
||||||
<i class="fa fa-calendar"></i> <span>{{ preset.label }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="daterange__panel">
|
|
||||||
<input ref="field" type="hidden">
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="daterange__buttons">
|
|
||||||
<button class="daterange__button" @click.prevent="togglePanel">
|
|
||||||
<i class="fa fa-times"></i> schließen
|
|
||||||
</button>
|
|
||||||
<button class="daterange__button" @click.prevent="reset()">
|
|
||||||
<i class="fa fa-trash-o"></i> zurücksetzen
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Vue from 'vue'
|
|
||||||
import $ from 'jquery'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import 'dayjs/locale/de'
|
|
||||||
import flatpickr from 'flatpickr'
|
|
||||||
import { German } from 'flatpickr/dist/l10n/de'
|
|
||||||
import EventBus from '../_bus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
picker: null,
|
|
||||||
selectedFrom: this.from,
|
|
||||||
selectedTo: this.to
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
from: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
minDate: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
maxDate: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
presets: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
minDate (date) {
|
|
||||||
this.picker.set('minDate', new Date(date))
|
|
||||||
},
|
|
||||||
maxDate (date) {
|
|
||||||
this.picker.set('maxDate', new Date(date))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
this.picker = $(this.$refs.field).flatpickr({
|
|
||||||
mode: 'range',
|
|
||||||
dateFormat: 'd.m.Y',
|
|
||||||
locale: German,
|
|
||||||
inline: true,
|
|
||||||
onChange: (selectedDates) => {
|
|
||||||
if (selectedDates.length === 2) {
|
|
||||||
this.selectedFrom = selectedDates[0];
|
|
||||||
this.selectedTo = selectedDates[1];
|
|
||||||
this.togglePanel();
|
|
||||||
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (this.from && this.to) {
|
|
||||||
this.picker.setDate([ new Date(this.from), new Date(this.to) ]);
|
|
||||||
}
|
|
||||||
if (this.minDate && this.maxDate) {
|
|
||||||
this.picker.set('minDate', new Date(this.minDate));
|
|
||||||
this.picker.set('maxDate', new Date(this.maxDate));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
EventBus.$on('filterSettingsReset', () => {
|
|
||||||
this.reset();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
selectedRange () {
|
|
||||||
if (this.selectedFrom == null && this.selectedTo == null) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
return dayjs(this.selectedFrom).format('DD.MM.YYYY')
|
|
||||||
+ '-' + dayjs(this.selectedTo).format('DD.MM.YYYY');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
togglePanel () {
|
|
||||||
$(this.$refs.dropdown).toggleClass('open');
|
|
||||||
},
|
|
||||||
selectPreset (preset) {
|
|
||||||
this.selectedFrom = new Date(preset.dateFrom);
|
|
||||||
this.selectedTo = new Date(preset.dateTo);
|
|
||||||
this.picker.setDate([ this.selectedFrom, this.selectedTo ]);
|
|
||||||
this.togglePanel();
|
|
||||||
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
|
|
||||||
},
|
|
||||||
reset () {
|
|
||||||
this.selectedFrom = null;
|
|
||||||
this.selectedTo = null;
|
|
||||||
this.picker.clear();
|
|
||||||
this.picker.jumpToDate();
|
|
||||||
this.togglePanel();
|
|
||||||
this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-139
@@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="destinationselect" :class="{ 'loading': loading }">
|
|
||||||
<label v-if="showLabel" for="destination" class="destinationselect__label">Finde</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown" :class="{ open: opened }">
|
|
||||||
<input type="text" id="destination" class="form-control destinationselect__input"
|
|
||||||
v-model="destination"
|
|
||||||
@keyup="autocomplete"
|
|
||||||
@click="toggleOptions"
|
|
||||||
placeholder="Ort, Gebiet, Land...">
|
|
||||||
<ul ref="itemlist" class="dropdown-menu" aria-labelledby="destination" v-show="showAutocompleteOptions">
|
|
||||||
<template v-for="(section, type) of autocompleteOptions">
|
|
||||||
<template v-if="section.options.length">
|
|
||||||
<li class="dropdown-header destinationselect__group" :class="type">{{ section.label }}</li>
|
|
||||||
<li class="destinationselect__item" v-for="option of section.options">
|
|
||||||
<a href="#" @click.prevent="optionSelect(option, type)">{{ option.name }}</a>
|
|
||||||
</li>
|
|
||||||
<li role="separator" class="divider destinationselect__divider"></li>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import $ from 'jquery'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
ajaxUri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
argumentPrefix: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
initialFilterSettings: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
filterSettings: this.initialFilterSettings,
|
|
||||||
destination: '',
|
|
||||||
destinationUid: 0,
|
|
||||||
destinationType: '',
|
|
||||||
autocompleteOptions: {},
|
|
||||||
opened: false,
|
|
||||||
loading: false,
|
|
||||||
showAutocompleteOptions: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
autocomplete () {
|
|
||||||
if (this.destination.length === 0) {
|
|
||||||
this.showAutocompleteOptions = false;
|
|
||||||
this.autocompleteOptions = {};
|
|
||||||
this.$emit('reset');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.destination.length < 3) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.loading = true;
|
|
||||||
this.filterSettings.destinationName = this.destination;
|
|
||||||
let query = {};
|
|
||||||
query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
|
|
||||||
query[this.argumentPrefix + '[search]'] = this.destination;
|
|
||||||
axios({
|
|
||||||
url: this.ajaxUri,
|
|
||||||
method: 'post',
|
|
||||||
data: $.param(query)
|
|
||||||
}).then((response) => {
|
|
||||||
this.autocompleteOptions = response.data;
|
|
||||||
this.showAutocompleteOptions = this.hasOptions();
|
|
||||||
if (this.showAutocompleteOptions) {
|
|
||||||
this.openDropdown();
|
|
||||||
}
|
|
||||||
this.loading = false;
|
|
||||||
}).catch(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
toggleOptions () {
|
|
||||||
if (!this.hasOptions()) {
|
|
||||||
this.showAutocompleteOptions = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.opened = !this.opened;
|
|
||||||
},
|
|
||||||
hasOptions () {
|
|
||||||
let hasOptions = false;
|
|
||||||
$.each(this.autocompleteOptions, (type, data) => {
|
|
||||||
if (data.options.length > 0) {
|
|
||||||
hasOptions = true;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return hasOptions;
|
|
||||||
},
|
|
||||||
openDropdown () {
|
|
||||||
this.opened = true;
|
|
||||||
},
|
|
||||||
closeDropdown () {
|
|
||||||
this.opened = false;
|
|
||||||
},
|
|
||||||
optionSelect (option, type) {
|
|
||||||
this.destination = option.name;
|
|
||||||
this.filterSettings.destinationName = this.destination;
|
|
||||||
this.$emit('selected', { uid: option.uid, type: type, name: option.name });
|
|
||||||
this.closeDropdown();
|
|
||||||
},
|
|
||||||
onFilterSettingsChange (filterSettings) {
|
|
||||||
this.destination = filterSettings.destinationName;
|
|
||||||
this.autocompleteOptions = {};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'initialFilterSettings': {
|
|
||||||
deep: true,
|
|
||||||
handler: 'onFilterSettingsChange'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
if (this.initialFilterSettings.destinationName) {
|
|
||||||
this.destination = this.initialFilterSettings.destinationName;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-76
@@ -1,76 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="destinationselect">
|
|
||||||
<div class="destinationselect__section" v-for="(destination, uid) of selectableDestinations">
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model.number="countryUidsSelected" :value="uid" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
<strong>{{ destination.country.label }}</strong>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox" v-for="region of destination.regions">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model.number="regionUidsSelected" :value="region.uid" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
<span class="small">{{ region.label }}</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
computed: {
|
|
||||||
showRegions () {
|
|
||||||
return this.selectableRegions !== null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
countryUidsSelected: this.countryUids,
|
|
||||||
regionUidsSelected: this.regionUids
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
selectableDestinations: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
countryUids: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
regionUids: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', {
|
|
||||||
countryUids: this.countryUidsSelected,
|
|
||||||
regionUids: this.regionUidsSelected
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
countryUids (value) {
|
|
||||||
this.countryUidsSelected = value;
|
|
||||||
},
|
|
||||||
regionUids (value) {
|
|
||||||
this.regionUidsSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.destinationselect__section {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
-93
@@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="destinationselect">
|
|
||||||
<label v-if="showLabel" class="destinationselect__label">Reiseziel</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
||||||
aria-haspopup="true" aria-expanded="false">{{ destinationName }} <span class="glyphicon glyphicon-menu-down"></span></a>
|
|
||||||
<ul class="dropdown-menu destination-pulldown">
|
|
||||||
<li class="destination-pulldown__section"
|
|
||||||
v-if="destinationOptions && !conceptSelected"
|
|
||||||
v-for="destination of destinationOptions">
|
|
||||||
<div class="destination-pulldown__column">
|
|
||||||
<a href="#" @click.prevent="optionSelect(destination.country.uid, destination.country.label, 'country')">
|
|
||||||
<img class="destination-pulldown__flag" :src="destination.country.flag" alt="">
|
|
||||||
<strong>{{ destination.country.label }}</strong>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="destination-pulldown__column">
|
|
||||||
<ul class="plain-list">
|
|
||||||
<li v-for="region of destination.regions">
|
|
||||||
<a href="#" @click.prevent="optionSelect(region.uid, region.label, 'region')">{{ region.label }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="destination-pulldown__section" v-if="conceptOptions && !destinationSelected">
|
|
||||||
<div class="destination-pulldown__column"><strong>Konzept</strong></div>
|
|
||||||
<div class="destination-pulldown__column">
|
|
||||||
<ul class="plain-list">
|
|
||||||
<li v-for="concept of conceptOptions">
|
|
||||||
<a href="#" @click.prevent="conceptSelect(concept.uid, concept.name)">{{ concept.name }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="destination-pulldown__section" v-if="destinationSelected || conceptSelected">
|
|
||||||
<button class="destination-pulldown__reset"
|
|
||||||
@click.prevent="optionReset">
|
|
||||||
<i class="fa fa-trash-o"></i>
|
|
||||||
zurücksetzen
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
destinationOptions: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
conceptOptions: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
destinationName: 'beliebig',
|
|
||||||
destinationSelected: false,
|
|
||||||
conceptSelected: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
optionReset () {
|
|
||||||
this.destinationName = 'beliebig';
|
|
||||||
this.destinationSelected = false;
|
|
||||||
this.conceptSelected = false;
|
|
||||||
this.$emit('reset');
|
|
||||||
},
|
|
||||||
optionSelect (uid, name, type) {
|
|
||||||
this.destinationName = name;
|
|
||||||
this.destinationSelected = true;
|
|
||||||
this.conceptSelected = false;
|
|
||||||
this.$emit('selected', { uid: uid, type: type, name: name });
|
|
||||||
},
|
|
||||||
conceptSelect (uid, name) {
|
|
||||||
this.destinationName = name;
|
|
||||||
this.destinationSelected = false;
|
|
||||||
this.conceptSelected = true;
|
|
||||||
this.$emit('selected', { uid: uid, type: 'concept', name: name });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-94
@@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<h2>Buchungsoptionen</h2>
|
|
||||||
<div id="partnerselect" v-if="forcePartneridSelect" class="alert alert-info" :class="{ 'alert-danger': showAlert }">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<p>{{ label }}</p>
|
|
||||||
<select v-model="partnerId" @change="onPartnerSelect">
|
|
||||||
<option value="">Bitte auswählen...</option>
|
|
||||||
<template v-for="partner in partnerIds">
|
|
||||||
<option :value="partner.id">{{ partner.label }}</option>
|
|
||||||
</template>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ref="table">
|
|
||||||
<div class="ajax-content-wrapper" x-data="ajaxContent(uri)">
|
|
||||||
<div class="ajax-content" x-ref="container"></div>
|
|
||||||
<div x-ref="trigger">
|
|
||||||
<img :src="loaderUri" alt="Loading" title="Loading">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Vue from 'vue'
|
|
||||||
import $ from 'jquery'
|
|
||||||
import EventBus from '../_bus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
uri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
loaderUri: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
forcePartneridSelect: {
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
partnerIds: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
partnerId: '',
|
|
||||||
showAlert: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onPartnerSelect () {
|
|
||||||
if (this.partnerId) {
|
|
||||||
this.showAlert = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onBookingLinkClick (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!this.partnerId) {
|
|
||||||
this.showAlert = true;
|
|
||||||
EventBus.$emit('scrollTo', '#partnerselect');
|
|
||||||
} else {
|
|
||||||
this.showAlert = false;
|
|
||||||
let $link = $(e.target);
|
|
||||||
window.open($link.attr('href') + '&agenturcode=' + this.partnerId, '_blank');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
registerClickHandler () {
|
|
||||||
const handleClickEvent = this.onBookingLinkClick;
|
|
||||||
$(this.$refs.table).on('click', '.booking-link', function (e) {
|
|
||||||
handleClickEvent(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
if (this.forcePartneridSelect) {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
this.registerClickHandler();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
+21
-25
@@ -114,7 +114,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import $ from 'jquery';
|
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import 'dayjs/locale/de'
|
import 'dayjs/locale/de'
|
||||||
import 'flatpickr';
|
import 'flatpickr';
|
||||||
@@ -172,16 +171,16 @@
|
|||||||
},
|
},
|
||||||
formatOptionPriceType (option) {
|
formatOptionPriceType (option) {
|
||||||
if (2 === option.type) {
|
if (2 === option.type) {
|
||||||
return ' ('+this.formatCurrency(option.price)+' pro Person)';
|
return ` (${this.formatCurrency(option.price)} pro Person)`
|
||||||
}
|
}
|
||||||
if (3 === option.type) {
|
if (3 === option.type) {
|
||||||
return ' ('+this.formatCurrency(option.price)+' pro Nacht)';
|
return ` (${this.formatCurrency(option.price)} pro Nacht)`
|
||||||
}
|
}
|
||||||
if (4 === option.type) {
|
if (4 === option.type) {
|
||||||
return ' ('+this.formatCurrency(option.price)+' pro Person und Nacht)';
|
return ` (${this.formatCurrency(option.price)} pro Person und Nacht)`
|
||||||
}
|
}
|
||||||
|
|
||||||
return ' ('+this.formatCurrency(option.price)+')';
|
return ` (${this.formatCurrency(option.price)})`
|
||||||
},
|
},
|
||||||
initSelectableRanges () {
|
initSelectableRanges () {
|
||||||
let enabledDates = [];
|
let enabledDates = [];
|
||||||
@@ -218,32 +217,29 @@
|
|||||||
for (let option of this.selectedOptions) {
|
for (let option of this.selectedOptions) {
|
||||||
options.push(option.uid);
|
options.push(option.uid);
|
||||||
}
|
}
|
||||||
let formData = {
|
let formData = new FormData()
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][name]': this.name,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][name]', this.name)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][email]': this.email,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][email]', this.email)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][phone]': this.phone,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][phone]', this.phone)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][remarks]': this.remarks,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][remarks]', this.remarks)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][dateFrom]', this.selectedFrom.format('DD.MM.YYYY'))
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][dateTo]': this.selectedTo.format('DD.MM.YYYY'),
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][dateTo]', this.selectedTo.format('DD.MM.YYYY'))
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][pax]': this.selectedPax,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][pax]', this.selectedPax)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][board]': this.selectedBoard ? this.selectedBoard.uid : null,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][board]', this.selectedBoard ? this.selectedBoard.uid : null)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][options]': options,
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][options]', options)
|
||||||
'tx_epproducts_ajax[groupsPriceInquiry][summary]': this.priceSummary
|
formData.set('tx_epproducts_ajax[groupsPriceInquiry][summary]', this.priceSummary)
|
||||||
};
|
|
||||||
this.processing = true;
|
this.processing = true;
|
||||||
this.submitted = false;
|
this.submitted = false;
|
||||||
axios({
|
axios.post(this.endpoint, formData)
|
||||||
url: this.endpoint,
|
.then(response => {
|
||||||
method: 'POST',
|
|
||||||
data: $.param(formData)
|
|
||||||
}).then(response => {
|
|
||||||
if ('validation' === response.data.status) {
|
if ('validation' === response.data.status) {
|
||||||
this.formErrors = response.data.errors;
|
this.formErrors = response.data.errors;
|
||||||
} else {
|
} else {
|
||||||
this.submitted = true;
|
this.submitted = true;
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
})
|
||||||
}).finally(() => {
|
.catch(error => {})
|
||||||
|
.finally(() => {
|
||||||
this.processing = false;
|
this.processing = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -334,7 +330,7 @@
|
|||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
Vue.nextTick(() => {
|
Vue.nextTick(() => {
|
||||||
this.picker = $(this.$refs.picker).flatpickr({
|
this.picker = flatpickr(this.$refs.picker, {
|
||||||
mode: 'range',
|
mode: 'range',
|
||||||
dateFormat: 'd.m.Y',
|
dateFormat: 'd.m.Y',
|
||||||
locale: German,
|
locale: German,
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
<script>
|
|
||||||
import defaultFilterSettings from '../_filtersettings'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
referringPageUrl: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
referringPage: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
filterSettings: defaultFilterSettings
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
if (sessionStorage.getItem('filterSettings')) {
|
|
||||||
this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-50
@@ -1,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hoteltypeselect">
|
|
||||||
<div class="checkbox" v-for="hotelTypesOption of hotelTypesOptions">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model.number="hotelTypesSelected" :value="hotelTypesOption" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
{{ hotelTypesLabels[hotelTypesOption] }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
hotelTypesLabels: {
|
|
||||||
1: 'Ferienwohnung',
|
|
||||||
2: 'Sportclub',
|
|
||||||
3: 'Appartment',
|
|
||||||
4: 'Gästehaus',
|
|
||||||
5: 'Pension'
|
|
||||||
},
|
|
||||||
hotelTypesSelected: this.hotelTypes
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
hotelTypesOptions: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
hotelTypes: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', this.hotelTypesSelected);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
hotelTypes (value) {
|
|
||||||
this.hotelTypesSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form-group">
|
|
||||||
<label v-if="showLabel">Dauer</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
||||||
aria-haspopup="true" aria-expanded="false">
|
|
||||||
{{ selectedOption }} <span class="glyphicon glyphicon-menu-down"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu nights">
|
|
||||||
<li><a href="#" @click.prevent="optionReset">beliebig</a></li>
|
|
||||||
<li v-for="nightsOption of nightsOptions">
|
|
||||||
<a href="#" @click.prevent="optionSelect(nightsOption)">
|
|
||||||
{{ durationTypes[nightsOption] }} Übernachtungen
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
durationTypes: {
|
|
||||||
4: '1 - 4',
|
|
||||||
5: '5 oder mehr'
|
|
||||||
},
|
|
||||||
nightsSelected: this.nights
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
nightsOptions: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
nights: {
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
selectedOption () {
|
|
||||||
if (this.nightsSelected == 0) {
|
|
||||||
return 'beliebig';
|
|
||||||
}
|
|
||||||
return this.durationTypes[this.nightsSelected] + ' ÜN';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
optionReset () {
|
|
||||||
this.nightsSelected = 0;
|
|
||||||
this.$emit('selected', 0);
|
|
||||||
},
|
|
||||||
optionSelect (value) {
|
|
||||||
this.nightsSelected = value;
|
|
||||||
this.$emit('selected', value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
nights (value) {
|
|
||||||
this.nightsSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form-group">
|
|
||||||
<label v-if="showLabel">Personen</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
||||||
aria-haspopup="true" aria-expanded="false">
|
|
||||||
{{ pax }} <span class="glyphicon glyphicon-menu-down"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu pax">
|
|
||||||
<li v-for="paxOption of paxOptions">
|
|
||||||
<a href="#" @click.prevent="optionSelect(paxOption)">{{ paxOption }}</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="groupsUri"><a :href="groupsUri">> 20</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
paxSelected: this.pax
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
paxOptions: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
pax: {
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
groupsUri: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
optionSelect (value) {
|
|
||||||
this.paxSelected = value;
|
|
||||||
this.$emit('selected', value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
pax (value) {
|
|
||||||
this.paxSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-78
@@ -1,78 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form-group">
|
|
||||||
<label v-if="showLabel">Preis</label>
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
||||||
aria-haspopup="true" aria-expanded="false">
|
|
||||||
{{ rangeLabel }} <span class="glyphicon glyphicon-menu-down"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu price-range">
|
|
||||||
<li><a href="#" @click.prevent="optionReset()">beliebig</a></li>
|
|
||||||
<li v-for="(range, index) in rangeOptions">
|
|
||||||
<a href="#" @click.prevent="optionSelect(index)">{{ formatRange(range) }} €</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
rangeSelected: this.range
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
rangeOptions: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
range: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
rangeLabel () {
|
|
||||||
if (this.rangeSelected === 0 || $.isEmptyObject(this.rangeOptions)) {
|
|
||||||
return 'beliebig';
|
|
||||||
}
|
|
||||||
let range = this.rangeOptions[this.rangeSelected];
|
|
||||||
return this.formatRange(range);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
formatRange (range) {
|
|
||||||
let min = range[0];
|
|
||||||
let max = range[1];
|
|
||||||
if (min === 1) {
|
|
||||||
return 'bis ' + max;
|
|
||||||
}
|
|
||||||
if (max === 999) {
|
|
||||||
return 'ab ' + min;
|
|
||||||
}
|
|
||||||
return min + ' - ' + max;
|
|
||||||
},
|
|
||||||
optionReset () {
|
|
||||||
this.rangeSelected = 0;
|
|
||||||
this.$emit('selected', 0);
|
|
||||||
},
|
|
||||||
optionSelect (value) {
|
|
||||||
this.rangeSelected = parseInt(value);
|
|
||||||
this.$emit('selected', parseInt(value));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
range (value) {
|
|
||||||
this.rangeSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-51
@@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="roomtypeselect">
|
|
||||||
<div class="checkbox" v-for="roomTypesOption of roomTypesOptions">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model.number="roomTypesSelected" :value="roomTypesOption" @change="notifySelected">
|
|
||||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
|
||||||
{{ roomTypesLabels[roomTypesOption] }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
roomTypesLabels: {
|
|
||||||
1: 'EZ',
|
|
||||||
2: 'DZ / 2er',
|
|
||||||
3: '3er',
|
|
||||||
4: '4er',
|
|
||||||
5: 'ab 5 Pers.',
|
|
||||||
6: 'mit anderen'
|
|
||||||
},
|
|
||||||
roomTypesSelected: this.roomTypes
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
roomTypesOptions: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
roomTypes: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifySelected () {
|
|
||||||
this.$emit('selected', this.roomTypesSelected);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
roomTypes (value) {
|
|
||||||
this.roomTypesSelected = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
<script>
|
|
||||||
import axios from 'axios'
|
|
||||||
import DaterangeSelect from './DaterangeSelect.vue'
|
|
||||||
import DestinationSelect from './DestinationSelect.vue'
|
|
||||||
import PaxSelect from './PaxSelect.vue'
|
|
||||||
import PriceRangeSelect from './PriceRangeSelect.vue'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import 'dayjs/locale/de'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
DaterangeSelect,
|
|
||||||
DestinationSelect,
|
|
||||||
PaxSelect,
|
|
||||||
PriceRangeSelect
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
searchParams: this.initialSearchParams,
|
|
||||||
filterOptions: this.initialFilterOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: [ 'initialFilterOptions', 'initialSearchParams', 'optionsUri', 'resetUri', 'argumentPrefix', 'datePresets' ],
|
|
||||||
methods: {
|
|
||||||
loadOptions () {
|
|
||||||
const query = {};
|
|
||||||
query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
|
|
||||||
axios({
|
|
||||||
url: this.optionsUri,
|
|
||||||
method: 'post',
|
|
||||||
data: $.param(query)
|
|
||||||
}).then((response) => {
|
|
||||||
this.applyOptions(response.data);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
applyOptions (json) {
|
|
||||||
this.filterOptions.totalResults = json.totalResults;
|
|
||||||
const filterOptions = json.filterOptions;
|
|
||||||
this.filterOptions.priceRanges = filterOptions.priceRanges;
|
|
||||||
this.filterOptions.pax = filterOptions.pax;
|
|
||||||
this.filterOptions.destinations = filterOptions.destinations;
|
|
||||||
if (filterOptions.dateFrom !== null) {
|
|
||||||
this.filterOptions.selectableRangeFrom = filterOptions.dateFrom;
|
|
||||||
}
|
|
||||||
if (filterOptions.dateTo !== null) {
|
|
||||||
this.filterOptions.selectableRangeTo = filterOptions.dateTo;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateDateRange (range) {
|
|
||||||
this.searchParams.dateFrom = range.from ? dayjs(range.from).format('YYYY-MM-DD') : null;
|
|
||||||
this.searchParams.dateTo = range.to ? dayjs(range.to).format('YYYY-MM-DD') : null;
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
updatePax (pax) {
|
|
||||||
this.searchParams.pax = pax;
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
updatePriceRange (range) {
|
|
||||||
this.searchParams.priceRange = range;
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
updateDestination (destination) {
|
|
||||||
if (destination.type === 'concept') {
|
|
||||||
this.searchParams.conceptUid = destination.uid;
|
|
||||||
} else {
|
|
||||||
this.searchParams.destinationUid = destination.uid;
|
|
||||||
this.searchParams.destinationType = destination.type;
|
|
||||||
}
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
resetDestination () {
|
|
||||||
axios({
|
|
||||||
url: this.resetUri,
|
|
||||||
method: 'post'
|
|
||||||
}).then((response) => {
|
|
||||||
this.applyOptions(response.data);
|
|
||||||
this.searchParams = response.data.searchParams;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
<script>
|
|
||||||
import $ from 'jquery'
|
|
||||||
import axios from 'axios'
|
|
||||||
import DestinationSelect from './DestinationSelect.vue'
|
|
||||||
import PriceRangeSelect from './PriceRangeSelect.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
DestinationSelect,
|
|
||||||
PriceRangeSelect
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
searchParams: this.initialSearchParams,
|
|
||||||
filterOptions: this.initialFilterOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: [ 'initialFilterOptions', 'initialSearchParams', 'optionsUri', 'resetUri', 'argumentPrefix', 'datePresets' ],
|
|
||||||
methods: {
|
|
||||||
loadOptions () {
|
|
||||||
const query = {};
|
|
||||||
query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
|
|
||||||
axios({
|
|
||||||
url: this.optionsUri,
|
|
||||||
method: 'post',
|
|
||||||
data: $.param(query)
|
|
||||||
}).then((response) => {
|
|
||||||
this.applyOptions(response.data);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
applyOptions (json) {
|
|
||||||
this.filterOptions.totalResults = json.totalResults;
|
|
||||||
const filterOptions = json.filterOptions;
|
|
||||||
this.filterOptions.nights = filterOptions.nights;
|
|
||||||
this.filterOptions.destinations = filterOptions.destinations;
|
|
||||||
if (filterOptions.dateFrom !== null) {
|
|
||||||
this.filterOptions.selectableRangeFrom = filterOptions.dateFrom;
|
|
||||||
}
|
|
||||||
if (filterOptions.dateTo !== null) {
|
|
||||||
this.filterOptions.selectableRangeTo = filterOptions.dateTo;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateOptions () {
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
updatePriceRange (range) {
|
|
||||||
this.searchParams.priceRange = range;
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
updateDestination (destination) {
|
|
||||||
if (destination.type === 'concept') {
|
|
||||||
this.searchParams.conceptUid = destination.uid;
|
|
||||||
} else {
|
|
||||||
this.searchParams.destinationUid = destination.uid;
|
|
||||||
this.searchParams.destinationType = destination.type;
|
|
||||||
}
|
|
||||||
this.loadOptions();
|
|
||||||
},
|
|
||||||
resetDestination () {
|
|
||||||
axios({
|
|
||||||
url: this.resetUri,
|
|
||||||
method: 'post'
|
|
||||||
}).then((response) => {
|
|
||||||
this.applyOptions(response.data);
|
|
||||||
this.searchParams = response.data.searchParams;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
-214
@@ -1,214 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Vue from 'vue';
|
|
||||||
import $ from 'jquery'
|
|
||||||
import axios from 'axios'
|
|
||||||
import EventBus from '../_bus'
|
|
||||||
import DaterangeSelect from './DaterangeSelect.vue'
|
|
||||||
import DestinationCheckboxes from './DestinationCheckboxes.vue'
|
|
||||||
import DestinationAutocomplete from './DestinationAutocomplete.vue'
|
|
||||||
import ConceptSelect from './ConceptSelect.vue'
|
|
||||||
import ConceptButtons from './ConceptButtons.vue'
|
|
||||||
import PaxSelect from './PaxSelect.vue'
|
|
||||||
import PriceRangeSelect from './PriceRangeSelect.vue'
|
|
||||||
import HotelTypesSelect from './HotelTypesSelect.vue'
|
|
||||||
import BoardTypesSelect from './BoardTypesSelect.vue'
|
|
||||||
import RoomTypesSelect from './RoomTypesSelect.vue'
|
|
||||||
import BusSelect from './BusSelect.vue'
|
|
||||||
import SearchResultItem from './SearchResultItem.vue'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import 'dayjs/locale/de'
|
|
||||||
|
|
||||||
import defaultFilterSettings from '../_filtersettings'
|
|
||||||
import defaultFilterOptions from '../_filteroptions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
DaterangeSelect,
|
|
||||||
DestinationCheckboxes,
|
|
||||||
DestinationAutocomplete,
|
|
||||||
ConceptSelect,
|
|
||||||
ConceptButtons,
|
|
||||||
PaxSelect,
|
|
||||||
PriceRangeSelect,
|
|
||||||
HotelTypesSelect,
|
|
||||||
BoardTypesSelect,
|
|
||||||
RoomTypesSelect,
|
|
||||||
BusSelect,
|
|
||||||
SearchResultItem
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
resultData: {},
|
|
||||||
resultMeta: null,
|
|
||||||
filterSettings: defaultFilterSettings,
|
|
||||||
referringPageUri: null,
|
|
||||||
filterOptions: defaultFilterOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
resultsUri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
initialFilterSettings: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
argumentPrefix: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
datePresets: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
showRegions () {
|
|
||||||
return this.filterOptions.regions.length > 0;
|
|
||||||
},
|
|
||||||
resultInfo () {
|
|
||||||
let info = '';
|
|
||||||
if (this.loading) {
|
|
||||||
info = 'Suchergebnis wird geladen...';
|
|
||||||
}
|
|
||||||
if (this.resultMeta) {
|
|
||||||
info = 'Deine Suche ';
|
|
||||||
if (!this.resultMeta.organic) {
|
|
||||||
info += 'ergab leider keine genauen Treffer. Bitte benutze die Filter.';
|
|
||||||
return info;
|
|
||||||
}
|
|
||||||
if (this.resultMeta.destinationName) {
|
|
||||||
info += 'nach <b>' + this.resultMeta.destinationName + '</b> ';
|
|
||||||
}
|
|
||||||
if (this.resultMeta.dateRange) {
|
|
||||||
info += '<b>' + this.resultMeta.dateRange + '</b> ';
|
|
||||||
}
|
|
||||||
info += 'ergab ' + this.resultMeta.total + ' Treffer';
|
|
||||||
}
|
|
||||||
return info;
|
|
||||||
},
|
|
||||||
filterCount () {
|
|
||||||
let count = 0;
|
|
||||||
if (this.filterSettings.destinationUid) count++;
|
|
||||||
if (this.filterSettings.destinationName) count++;
|
|
||||||
if (this.filterSettings.countryUids.length > 0) count++;
|
|
||||||
if (this.filterSettings.regionUids.length > 0) count++;
|
|
||||||
if (this.filterSettings.cityUids.length > 0) count++;
|
|
||||||
if (this.filterSettings.conceptUids.length > 0) count++;
|
|
||||||
if (this.filterSettings.hotelTypes.length > 0) count++;
|
|
||||||
if (this.filterSettings.boardTypes.length > 0) count++;
|
|
||||||
if (this.filterSettings.roomTypes.length > 0) count++;
|
|
||||||
if (this.filterSettings.dateFrom !== null) count++;
|
|
||||||
if (this.filterSettings.dateTo !== null) count++;
|
|
||||||
if (this.filterSettings.priceRange > 0) count++;
|
|
||||||
if (this.filterSettings.bus) count++;
|
|
||||||
if (this.filterSettings.pax > 2) count++;
|
|
||||||
return count;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadResults () {
|
|
||||||
let query = {};
|
|
||||||
query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
|
|
||||||
this.loading = true;
|
|
||||||
this.resultMeta = null;
|
|
||||||
axios({
|
|
||||||
url: this.resultsUri,
|
|
||||||
method: 'post',
|
|
||||||
data: $.param(query)
|
|
||||||
}).then(response => {
|
|
||||||
this.resultData = response.data.data;
|
|
||||||
this.filterOptions = response.data.filterOptions;
|
|
||||||
this.referringPageUri = response.data.referringPageUri;
|
|
||||||
this.resultMeta = response.data.meta;
|
|
||||||
this.loading = false;
|
|
||||||
EventBus.$emit('ajaxContentLoaded');
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetFilterSettings () {
|
|
||||||
this.updateFilterSettings(defaultFilterSettings);
|
|
||||||
EventBus.$emit('filterSettingsReset');
|
|
||||||
},
|
|
||||||
updateDestination (destination) {
|
|
||||||
this.updateFilterSettings({
|
|
||||||
destinationUid: destination.uid,
|
|
||||||
destinationType: destination.type,
|
|
||||||
destinationName: destination.name
|
|
||||||
});
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateDestinations (destinations) {
|
|
||||||
this.updateFilterSettings({
|
|
||||||
countryUids: destinations.countryUids,
|
|
||||||
regionUids: destinations.regionUids
|
|
||||||
});
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateConcepts (conceptUids) {
|
|
||||||
this.updateFilterSettings({ conceptUids: conceptUids });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateDateRange (range) {
|
|
||||||
const dateFrom = (range.from !== null) ? dayjs(range.from).format('YYYY-MM-DD') : null;
|
|
||||||
const dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
|
|
||||||
this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateDateSelectMobile () {
|
|
||||||
let dateFrom = this.filterSettings.dateFrom;
|
|
||||||
let dateTo = this.filterSettings.dateTo;
|
|
||||||
if (dateFrom === '') {
|
|
||||||
dateFrom = null;
|
|
||||||
}
|
|
||||||
if (dateTo === '') {
|
|
||||||
dateTo = null;
|
|
||||||
}
|
|
||||||
this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updatePriceRange (range) {
|
|
||||||
this.updateFilterSettings({ priceRange: range });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updatePax (pax) {
|
|
||||||
this.updateFilterSettings({ pax: pax });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateHotelTypes (hotelTypes) {
|
|
||||||
this.updateFilterSettings({ hotelTypes: hotelTypes });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateBoardTypes (boardTypes) {
|
|
||||||
this.updateFilterSettings({ boardTypes: boardTypes });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateRoomTypes (roomTypes) {
|
|
||||||
this.updateFilterSettings({ roomTypes: roomTypes });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateBus (bus) {
|
|
||||||
this.updateFilterSettings({ bus: bus });
|
|
||||||
this.loadResults();
|
|
||||||
},
|
|
||||||
updateFilterSettings (settings) {
|
|
||||||
this.filterSettings = { ...this.filterSettings, ...settings };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
if (!$.isEmptyObject(this.initialFilterSettings)) {
|
|
||||||
this.updateFilterSettings(this.initialFilterSettings)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
this.loadResults();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
-134
@@ -1,134 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
|
|
||||||
<div class="teaserbox__image">
|
|
||||||
<img class="teaserbox__flag" :src="item.country.flag" :alt="item.country.name"/>
|
|
||||||
<a :href="url" rel="nofollow" title="Details & Buchen">
|
|
||||||
<picture class="searchresult-item__image">
|
|
||||||
<source media="(min-width: 1201px)" :data-srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
|
|
||||||
<source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
|
|
||||||
<source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
|
|
||||||
<img class="scale lazyload" :data-src="item.hotel.images.resized.s[0].url"
|
|
||||||
:title="item.hotel.images.resized.s[0].title"
|
|
||||||
:alt="item.hotel.images.resized.s[0].alt">
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
<div class="concept-badge" :id="section.concept.code"
|
|
||||||
:class=" 'concept-badge--' + section.concept.code">{{ section.concept.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="teaserbox__main">
|
|
||||||
<div class="teaserbox__header">
|
|
||||||
<span class="searchresult-item__headline">
|
|
||||||
{{ item.region.name }}
|
|
||||||
<strong v-if="section.concept.code === 'evt'"><br>{{ item.product.name }}</strong>
|
|
||||||
</span>
|
|
||||||
<span class="searchresult-item__subline">{{ item.hotel.name }}</span>
|
|
||||||
<span class="searchresult-item__category" v-if="item.hotel.category">Kategorie {{ item.hotel.category }}</span>
|
|
||||||
</div>
|
|
||||||
<ul class="check-list searchresult-item__checklist">
|
|
||||||
<li v-if="item.hotel.fact">{{ item.hotel.fact }}</li>
|
|
||||||
<li v-if="item.product.fact">{{ item.product.fact }}</li>
|
|
||||||
<template v-if="item.region.feature">
|
|
||||||
<li>{{ item.region.feature }}</li>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<li v-if="item.region.fact">{{ item.region.fact }}</li>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
<ul class="check-list check-list--inverted searchresult-item__featurelist">
|
|
||||||
<li>Skipass</li>
|
|
||||||
<li v-if="item.board">{{ item.board }}</li>
|
|
||||||
<li v-if="item.product.feature">{{ item.product.feature }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="teaserbox__aside">
|
|
||||||
<div class="teaserbox__aside__top">
|
|
||||||
<span class="searchresult-item__label">{{ item.dates.length > 1 ? 'Zeitraum' : 'Termin' }}</span>
|
|
||||||
<span class="searchresult-item__daterange">{{ dateRange }}</span>
|
|
||||||
<a :href="url" rel="nofollow" title="Details & Buchen"
|
|
||||||
v-if="item.dates.length && !item.daytrip">
|
|
||||||
<span class="searchresult-item__daterange">
|
|
||||||
<i class="fa fa-arrow-circle-right"></i> {{ item.dates.length }} Termin{{ item.dates.length > 1 ? 'e' : '' }}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<hr>
|
|
||||||
<span class="searchresult-item__label">{{ item.daytrip ? 'Tageweise buchbar' : nightsOptions }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="teaserbox__aside__bottom">
|
|
||||||
<span class="searchresult-item__price">ab {{ item.minPrice }} €</span>
|
|
||||||
<a :href="url" class="button button--full searchresult-item__button"
|
|
||||||
rel="nofollow" title="Details">
|
|
||||||
Details<template v-if="!item.hideBookingButton"> & Buchen</template>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="#" x-data="watchlistToggle(item.key))" x-bind="trigger">
|
|
||||||
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
|
|
||||||
<i class="fa fa-plus-circle" x-bind:class="icon"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import 'dayjs/locale/de'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
item: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
section: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
referringPageUri: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
url () {
|
|
||||||
let url = this.item.detailPageUri;
|
|
||||||
if (this.referringPageUri) {
|
|
||||||
url += '?ref=' + this.referringPageUri;
|
|
||||||
}
|
|
||||||
return url;
|
|
||||||
},
|
|
||||||
nightsOptions () {
|
|
||||||
const nights = this.item.nights;
|
|
||||||
if (nights === null) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
nights.sort();
|
|
||||||
const optionsCount = nights.length;
|
|
||||||
const lastOption = nights.pop();
|
|
||||||
let output = '';
|
|
||||||
if (optionsCount > 2) {
|
|
||||||
output += nights.join(',') + ' oder ' + lastOption;
|
|
||||||
} else if (optionsCount === 2) {
|
|
||||||
output += nights.shift() + ' oder ' + lastOption;
|
|
||||||
} else {
|
|
||||||
output = lastOption;
|
|
||||||
}
|
|
||||||
output += lastOption > 1 ? ' Nächte' : ' Nacht';
|
|
||||||
return output;
|
|
||||||
},
|
|
||||||
dateRange () {
|
|
||||||
const dateFrom = this.item.minDateStart;
|
|
||||||
const dateTo = this.item.maxDateEnd;
|
|
||||||
if (dateFrom === null && dateTo === null) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
if (dateFrom !== null && dateTo === null) {
|
|
||||||
return 'ab ' + dayjs(dateFrom).format('DD.MM.YYYY');
|
|
||||||
}
|
|
||||||
if (dateFrom === null && dateTo !== null) {
|
|
||||||
return '- ' + dayjs(dateTo).format('DD.MM.YYYY');
|
|
||||||
}
|
|
||||||
return dayjs(dateFrom).format('DD.MM.YYYY') + ' - ' + dayjs(dateTo).format('DD.MM.YYYY');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="watchlist">
|
|
||||||
<template v-for="section in teasers">
|
|
||||||
<h2 class="headline headline--secondary headline--underlined">{{ section.concept.name }}</h2>
|
|
||||||
<div class="searchresult-section" :class="'searchresult-section--' + section.concept.code">
|
|
||||||
<search-result-item
|
|
||||||
v-for="item in section.items"
|
|
||||||
:key="item.key"
|
|
||||||
:item="item"
|
|
||||||
:section="section"
|
|
||||||
:referring-page="referringPage"></search-result-item>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="alert alert-info" v-if="total === 0">
|
|
||||||
Deine Merkliste ist aktuell leer...
|
|
||||||
</div>
|
|
||||||
<div v-show="loading" class="loader">
|
|
||||||
<img :src="loaderUri" alt="Loading...">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Vue from 'vue'
|
|
||||||
import axios from 'axios'
|
|
||||||
import EventBus from '../_bus'
|
|
||||||
import SearchResultItem from './SearchResultItem.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
SearchResultItem
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
watchlistUri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
loaderUri: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
referringPageUrl: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
teasers: {},
|
|
||||||
total: 0,
|
|
||||||
loading: false,
|
|
||||||
referringPage: {
|
|
||||||
url: this.referringPageUrl,
|
|
||||||
label: 'zurück zur Merkliste'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadList () {
|
|
||||||
if (this.watchlist.length === 0) {
|
|
||||||
this.teasers = {};
|
|
||||||
this.total = 0;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let query = {};
|
|
||||||
query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
|
|
||||||
this.loading = true;
|
|
||||||
axios({
|
|
||||||
url: this.watchlistUri,
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
data: $.param(query),
|
|
||||||
method: 'post'
|
|
||||||
}).then((response) => {
|
|
||||||
this.teasers = response.data.data;
|
|
||||||
this.total = response.data.total;
|
|
||||||
this.loading = false;
|
|
||||||
EventBus.$emit('ajaxContentLoaded');
|
|
||||||
}).catch(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
watchlist() {
|
|
||||||
const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
|
|
||||||
return initialList ? initialList : []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
EventBus.$on('oggle', () => {
|
|
||||||
this.loadList();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
this.loadList();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
+3
-3
@@ -7,13 +7,13 @@ export default uri => ({
|
|||||||
loading: false,
|
loading: false,
|
||||||
init() {
|
init() {
|
||||||
window.addEventListener('scroll', debounce(() => {
|
window.addEventListener('scroll', debounce(() => {
|
||||||
|
if (true === this.loaded) {
|
||||||
|
return
|
||||||
|
}
|
||||||
this.load()
|
this.load()
|
||||||
}, 250))
|
}, 250))
|
||||||
},
|
},
|
||||||
load() {
|
load() {
|
||||||
if (true === this.loaded) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (false === this.inViewport()) {
|
if (false === this.inViewport()) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default uri => ({
|
||||||
|
loading: false,
|
||||||
|
selectedIndex: null,
|
||||||
|
selectableMonths: [],
|
||||||
|
calendarWrapper: null,
|
||||||
|
init() {
|
||||||
|
this.calendarWrapper = this.$refs.calendarWrapper
|
||||||
|
let months = []
|
||||||
|
let today = new Date()
|
||||||
|
let year = today.getFullYear()
|
||||||
|
let month = today.getMonth()
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
months.push(new Date(year, month, 1))
|
||||||
|
if (month < 12) {
|
||||||
|
month++
|
||||||
|
} else {
|
||||||
|
month = 1
|
||||||
|
year++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.selectableMonths = months
|
||||||
|
this.selectedIndex = 0
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
load() {
|
||||||
|
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(),
|
||||||
|
})
|
||||||
|
axios.post(uri, data)
|
||||||
|
.then(response => (
|
||||||
|
this.calendarWrapper.innerHTML = response.data
|
||||||
|
))
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default () => ({
|
||||||
|
formErrors: {},
|
||||||
|
processing: false,
|
||||||
|
success: false,
|
||||||
|
error: false,
|
||||||
|
submit() {
|
||||||
|
this.processing = true
|
||||||
|
const form = this.$refs.form
|
||||||
|
const data = new FormData(form)
|
||||||
|
axios.post(form.action, data)
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.status === 'validation') {
|
||||||
|
this.formErrors = response.data.errors
|
||||||
|
} else {
|
||||||
|
this.success = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.error = true
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.processing = false
|
||||||
|
this.$el.scrollIntoView({behavior: 'smooth'})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.formErrors = {}
|
||||||
|
this.processing = false
|
||||||
|
this.success = false
|
||||||
|
this.error = false
|
||||||
|
this.$refs.form.reset()
|
||||||
|
}
|
||||||
|
})
|
||||||
+18
-9
@@ -1,20 +1,29 @@
|
|||||||
<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:f="http://typo3.org/ns/fluid/ViewHelpers"
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
|
|
||||||
|
|
||||||
<f:layout name="Default"/>
|
<f:layout name="Default"/>
|
||||||
|
|
||||||
<f:section name="Main">
|
<f:section name="Main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<calendar
|
<div class="row calendar calandar--single"
|
||||||
uri="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: data.tx_eptheme_context_hotel}', format: 'html')}"
|
x-data='calendar("<f:format.raw>{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: data.tx_eptheme_context_hotel}', format: 'html')}</f:format.raw>")'>
|
||||||
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
|
<div class="col-xs-12">
|
||||||
hotel-uid="{hotel.0.data.uid}"
|
<h2>Belegungskalender {hotel.0.data.name}</h2>
|
||||||
hotel-name="{hotel.0.data.name}"
|
</div>
|
||||||
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax', extensionName: 'epproducts')}"
|
<div class="col-xs-12">
|
||||||
></calendar>
|
<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="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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
|
|||||||
@@ -5,66 +5,65 @@
|
|||||||
<f:layout name="Form/Default"/>
|
<f:layout name="Form/Default"/>
|
||||||
|
|
||||||
<f:section name="Main">
|
<f:section name="Main">
|
||||||
<contact-form inline-template>
|
<div class="relative" x-data="contactForm">
|
||||||
<div class="relative">
|
|
||||||
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
||||||
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
||||||
pageUid="{settings.defaultAjaxUid}"
|
pageUid="{settings.defaultAjaxUid}"
|
||||||
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
|
additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': 'submit'}">
|
||||||
<f:form.hidden property="pageUrl"/>
|
<f:form.hidden property="pageUrl"/>
|
||||||
<label class="block mb-4 hidden">
|
<label class="block mb-4 hidden">
|
||||||
<span class="text-gray-700">Betreff*</span>
|
<span class="text-gray-700">Betreff*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="subject"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="subject"/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
|
||||||
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.name" v-html="formErrors.name"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.name" x-html="formErrors.name"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
|
||||||
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
|
||||||
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
||||||
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
|
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.gender" x-html="formErrors.gender"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.company }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.company">
|
||||||
<span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
|
<span x-bind:class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="company"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="company"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.company" v-html="formErrors.company"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.company" x-html="formErrors.company"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
|
||||||
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.email" v-html="formErrors.email"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.email" x-html="formErrors.email"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
|
||||||
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.phone" x-html="formErrors.phone"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.period }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.period">
|
||||||
<span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
|
<span x-bind:class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.period" v-html="formErrors.period"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.period" x-html="formErrors.period"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.duration }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.duration">
|
||||||
<span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
|
<span x-bind:class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.duration" v-html="formErrors.duration"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.duration" x-html="formErrors.duration"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.pax }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.pax">
|
||||||
<span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
|
<span x-bind:class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="pax" placeholder="ab 25 Personen"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="pax" placeholder="ab 25 Personen"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.pax" v-html="formErrors.pax"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.pax" x-html="formErrors.pax"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.age }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.age">
|
||||||
<span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
|
<span x-bind:class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="age"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="age"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.age" v-html="formErrors.age"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.age" x-html="formErrors.age"></div>
|
||||||
</label>
|
</label>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<label class="inline-flex items-center">
|
<label class="inline-flex items-center">
|
||||||
@@ -72,13 +71,13 @@
|
|||||||
<span class="ml-2">Kinder (ja/nein)</span>
|
<span class="ml-2">Kinder (ja/nein)</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
|
||||||
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
||||||
<f:form.textarea class="form-textarea mt-1 block w-full"
|
<f:form.textarea class="form-textarea mt-1 block w-full"
|
||||||
property="inquiry"
|
property="inquiry"
|
||||||
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
||||||
cols="30" rows="5"/>
|
cols="30" rows="5"/>
|
||||||
<div class="text-red-500 mt-2" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
<div class="text-red-500 mt-2" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
|
||||||
</label>
|
</label>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
||||||
@@ -89,20 +88,19 @@
|
|||||||
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
||||||
</div>
|
</div>
|
||||||
</f:form>
|
</f:form>
|
||||||
<div class="form__overlay" v-show="processing">
|
<div class="form__overlay" x-show="processing">
|
||||||
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
|
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
|
||||||
</div>
|
</div>
|
||||||
<div class="form__success" v-show="success">
|
<div class="form__success" x-show="success">
|
||||||
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
|
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
|
||||||
setzen.</p>
|
setzen.</p>
|
||||||
<p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
|
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="form__overlay" v-show="error">
|
<div class="form__overlay" x-show="error">
|
||||||
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
|
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
|
||||||
<p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
|
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</contact-form>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,49 +5,48 @@
|
|||||||
<f:layout name="Form/Default"/>
|
<f:layout name="Form/Default"/>
|
||||||
|
|
||||||
<f:section name="Main">
|
<f:section name="Main">
|
||||||
<contact-form inline-template>
|
<div class="form form--border" x-data="contactForm">
|
||||||
<div class="form form--border">
|
|
||||||
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
<f:form id="contactform" object="{contactForm}" name="contactForm"
|
||||||
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
|
||||||
pageUid="{settings.defaultAjaxUid}"
|
pageUid="{settings.defaultAjaxUid}"
|
||||||
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
|
additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': 'submit'}">
|
||||||
<f:form.hidden property="pageUrl"/>
|
<f:form.hidden property="pageUrl"/>
|
||||||
<label class="block mb-4 hidden">
|
<label class="block mb-4 hidden">
|
||||||
<span class="text-gray-700">Betreff*</span>
|
<span class="text-gray-700">Betreff*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="subject"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="subject"/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
|
||||||
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
|
||||||
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
|
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
|
||||||
<div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
|
<div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
|
||||||
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="name"/>
|
||||||
<div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
|
<div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
|
||||||
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
|
||||||
<div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
|
<div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
|
||||||
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="email"/>
|
||||||
<div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
|
<div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
|
||||||
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
|
||||||
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
|
||||||
<div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
|
<div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
|
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
|
||||||
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
|
||||||
<f:form.textarea class="form-textarea mt-1 block w-full"
|
<f:form.textarea class="form-textarea mt-1 block w-full"
|
||||||
property="inquiry"
|
property="inquiry"
|
||||||
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
|
||||||
cols="30" rows="5"/>
|
cols="30" rows="5"/>
|
||||||
<div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
|
<div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
|
||||||
</label>
|
</label>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
|
||||||
@@ -58,20 +57,19 @@
|
|||||||
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
<button type="submit" class="button button-warning">Jetzt anfragen</button>
|
||||||
</div>
|
</div>
|
||||||
</f:form>
|
</f:form>
|
||||||
<div class="form__overlay" v-show="processing">
|
<div class="form__overlay" x-show="processing">
|
||||||
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
|
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
|
||||||
</div>
|
</div>
|
||||||
<div class="form__success" v-show="success">
|
<div class="form__success" x-show="success">
|
||||||
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
|
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
|
||||||
setzen.</p>
|
setzen.</p>
|
||||||
<p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
|
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="form__success" v-show="error">
|
<div class="form__success" x-show="error">
|
||||||
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
|
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
|
||||||
<p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
|
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</contact-form>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,13 +7,13 @@
|
|||||||
<f:layout name="Default"/>
|
<f:layout name="Default"/>
|
||||||
|
|
||||||
<f:section name="Main">
|
<f:section name="Main">
|
||||||
<event-pricetable
|
<div class="ajax-content-wrapper"
|
||||||
uri="{ep:uri.ajax(extensionName: 'epproducts', action: 'eventPricetable', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: productUid}', format: 'html')}"
|
x-data="ajaxContent('{ep:uri.ajax(extensionName: 'epproducts', action: 'eventPricetable', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: productUid}', format: 'html')}')">
|
||||||
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
|
<div class="ajax-content" x-ref="container"></div>
|
||||||
:force-partnerid-select="{settings.forcePartnerIdSelect}"
|
<div x-ref="trigger">
|
||||||
:partner-ids='{settings.partnerIds -> v:format.json.encode()}'
|
<img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
|
||||||
label="{settings.partnerIdSelectLabel}"
|
</div>
|
||||||
></event-pricetable>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -581,24 +581,27 @@
|
|||||||
<f:if condition="{hotel.groupsPriceConfigs}">
|
<f:if condition="{hotel.groupsPriceConfigs}">
|
||||||
<a class="button button--full"
|
<a class="button button--full"
|
||||||
data-glightbox
|
data-glightbox
|
||||||
|
data-gallery="groups-calculator"
|
||||||
href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||||
Preisberechnung
|
Preisberechnung
|
||||||
</a>
|
</a>
|
||||||
</f:if>
|
</f:if>
|
||||||
<div class="ep-sidebar ep-facts">
|
<div class="ep-sidebar ep-facts relative">
|
||||||
<p><strong>Belegungskalender</strong></p>
|
<p><strong>Belegungskalender</strong></p>
|
||||||
<f:comment><!--
|
<div class="row calendar calandar--single"
|
||||||
<calendar
|
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>")'>
|
||||||
uri="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel}', format: 'html')}"
|
<div class="col-xs-12">
|
||||||
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
|
<select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load">
|
||||||
hotel-uid="{product.calendarHotel.uid}"
|
<template x-for="(month, index) in selectableMonths">
|
||||||
hotel-name="{product.calendarHotel.name}"
|
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
|
||||||
:months="1"
|
</template>
|
||||||
:show-header="false"
|
</select>
|
||||||
:step="1"
|
</div>
|
||||||
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax', extensionName: 'epproducts')}"
|
<div class="calendar__inner" x-cloak x-ref="calendarWrapper"></div>
|
||||||
></calendar>
|
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white" x-show="loading">
|
||||||
--></f:comment>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<f:if condition="{hotel.groupsPriceConfigs}">
|
<f:if condition="{hotel.groupsPriceConfigs}">
|
||||||
<f:else>
|
<f:else>
|
||||||
|
|||||||
+3
-1
@@ -9,11 +9,13 @@ Encore
|
|||||||
.addEntry('snowzone', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/snowzone.js')
|
.addEntry('snowzone', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/snowzone.js')
|
||||||
.addEntry('unichamp', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
|
.addEntry('unichamp', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
|
||||||
.addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
|
.addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
|
||||||
|
.addExternals({
|
||||||
|
jquery: 'jQuery',
|
||||||
|
})
|
||||||
.splitEntryChunks()
|
.splitEntryChunks()
|
||||||
.enableSingleRuntimeChunk()
|
.enableSingleRuntimeChunk()
|
||||||
.enableSassLoader()
|
.enableSassLoader()
|
||||||
.enableVueLoader()
|
.enableVueLoader()
|
||||||
.autoProvidejQuery()
|
|
||||||
.enableVersioning()
|
.enableVersioning()
|
||||||
.enableSourceMaps(!Encore.isProduction())
|
.enableSourceMaps(!Encore.isProduction())
|
||||||
.cleanupOutputBeforeBuild()
|
.cleanupOutputBeforeBuild()
|
||||||
|
|||||||
Reference in New Issue
Block a user