diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js index ed3fc484..9a5533ef 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js @@ -25,6 +25,7 @@ import faq from './components/faq' import osmMap from './components/osm-map' import productDetail from './components/product-detail' import daytripDateSelect from './components/daytrip-date-select' +import searchBar from './components/search-bar' // Executed on document ready document.addEventListener('DOMContentLoaded', () => { @@ -50,6 +51,7 @@ document.addEventListener('DOMContentLoaded', () => { Alpine.data('osmMap', osmMap) Alpine.data('productDetail', productDetail) Alpine.data('daytripDateSelect', daytripDateSelect) + Alpine.data('searchBar', searchBar) Alpine.start() Glightbox({ diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js new file mode 100644 index 00000000..79e5673a --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js @@ -0,0 +1,150 @@ +import axios from 'axios' +import flatpickr from 'flatpickr' +import { German } from 'flatpickr/dist/l10n/de' + +export default props => ({ + picker: null, + optionsUri: props.optionsUri, + resetUri: props.resetUri, + searchParams: props.initialSearchParams, + filterOptions: props.initialFilterOptions, + datePresets: props.datePresets, + show: null, + destinationName: 'beliebig', + conceptSelected: false, + destinationSelected: false, + dateRangeSelected: { from: null, to: null }, + dateRangeLabel: null, + init() { + this.$watch('dateRangeSelected', () => { + let dateRangeLabel = '' + if (null === this.dateRangeSelected.from && null === this.dateRangeSelected.to) { + this.searchParams.dateFrom = null + this.searchParams.dateTo = null + } else { + let dateFrom = flatpickr.formatDate(this.dateRangeSelected.from, 'd.m.Y') + let dateTo = flatpickr.formatDate(this.dateRangeSelected.to, 'd.m.Y') + dateRangeLabel = `${dateFrom} - ${dateTo}` + this.searchParams.dateFrom = dateFrom + this.searchParams.dateTo = dateTo + } + this.dateRangeLabel = dateRangeLabel + this.loadOptions() + }) + }, + loadOptions() { + const data = { 'tx_epproducts_ajax[searchParams]': this.searchParams } + axios({ + url: this.optionsUri, + method: 'post', + data + }).then(response => { + this.applyOptions(response.data) + this.show = null + }) + }, + 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 + } + }, + updateSearchParam(param, value) { + this.searchParams[param] = value + 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 + this.show = null + }) + }, + selectDateRangePreset(preset) { + let dateFrom = new Date(preset.dateFrom) + let dateTo = new Date(preset.dateTo) + this.dateRangeSelected = { from: dateFrom, to: dateTo } + this.picker.setDate([ dateFrom, dateTo ]) + }, + resetDateRange () { + this.dateRangeSelected = { from: null, to: null } + this.picker.clear() + this.picker.jumpToDate() + }, + initDatePicker() { + this.picker = flatpickr(this.$refs.picker, { + mode: 'range', + dateFormat: 'd.m.Y', + locale: German, + inline: true, + onChange: selectedDates => { + if (selectedDates.length === 2) { + this.dateRangeSelected = { from: selectedDates[0], to: selectedDates[1] } + } + } + }) + if (this.filterOptions.minDate && this.filterOptions.maxDate) { + this.picker.set('minDate', new Date(this.filterOptions.minDate)) + this.picker.set('maxDate', new Date(this.filterOptions.maxDate)) + } + }, + priceRangeLabel() { + if (this.searchParams.priceRange === 0) { + return 'beliebig' + } + let range = this.filterOptions.priceRanges[this.searchParams.priceRange] + return this.formatPriceRange(range) + }, + formatPriceRange(range) { + let min = range[0]; + let max = range[1]; + if (min === 1) { + return 'bis ' + max + ' €' + } + if (max === 999) { + return 'ab ' + min + ' €' + } + return min + ' - ' + max + ' €' + }, + selectDestination(uid, name, type) { + this.destinationName = name + this.destinationSelected = true + this.conceptSelected = false + this.searchParams.destinationUid = uid + this.searchParams.destinationType = type + this.loadOptions() + }, + selectConcept(uid, name) { + this.destinationName = name + this.destinationSelected = false + this.conceptSelected = true + this.searchParams.destinationUid = uid + this.searchParams.destinationType = 'concept' + this.loadOptions() + }, + resetDestinationSelect() { + this.destinationName = 'beliebig' + this.destinationSelected = false + this.conceptSelected = false + this.resetDestination() + }, +}) diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss index aa1e9c85..ad979be6 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss @@ -1,3 +1,7 @@ +.flatpickr-calendar { + box-shadow: none; +} + .daterange { padding-bottom: 16px; } diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html index a3a3000b..afbc9a89 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html @@ -5,75 +5,182 @@ -