From 140eb95da4921c9dba19c7566abe103d95ad7a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 17 Apr 2020 13:52:26 +0200
Subject: [PATCH 1/3] Enable webpack polling

---
 package.json      | 2 +-
 webpack.config.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a989fa94..4147395d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "license": "WTFPL",
   "repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
   "scripts": {
-    "dev": "./node_modules/.bin/encore dev --watch",
+    "dev": "./node_modules/.bin/encore dev --watch --watch-poll",
     "build": "./node_modules/.bin/encore production"
   },
   "dependencies": {
diff --git a/webpack.config.js b/webpack.config.js
index 3e0c1fa7..915d1cd7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -60,7 +60,8 @@ Encore
         babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
     })
     .configureWatchOptions(function (options) {
-        options.poll = 250;
+        options.poll = 500;
+        options.ignored = /node_modules/;
     });
 
 const EpEventsConfig = Encore.getWebpackConfig();

From 64da0d2381e7598cfcfcf0e6416b1c3c1210d56a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 17 Apr 2020 13:52:49 +0200
Subject: [PATCH 2/3] Adjust domain in ddev environment

---
 config/sites/ep-reisen/config.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/sites/ep-reisen/config.yaml b/config/sites/ep-reisen/config.yaml
index 11d04ecb..40a3567c 100644
--- a/config/sites/ep-reisen/config.yaml
+++ b/config/sites/ep-reisen/config.yaml
@@ -1,7 +1,7 @@
 base: /
 baseVariants:
   -
-    base: 'https://eptypo3.ddev.site'
+    base: 'https://ep-reisen.ddev.site'
     condition: 'applicationContext == "Development"'
   -
     base: 'https://schnee-event.ddev.site'

From 3fbfaac86c40ecb1a9a383c83610d96ae1879cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 17 Apr 2020 13:53:12 +0200
Subject: [PATCH 3/3] Replace calendar browse buttons with dropdown

---
 .../Private/Assets/js/components/Calendar.vue | 55 ++++++++++---------
 .../Private/Assets/scss/remix/_calendar.scss  | 14 ++++-
 .../Private/Templates/AjaxCalendar/Range.html |  1 -
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
index bdc91a15..d72edf40 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
@@ -6,21 +6,14 @@
         <div class="calendar__loading" v-show="loading">
             <img :src="loaderUri" alt="Loading" title="Loading">
         </div>
-        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
-        <div class="calendar__buttons" v-cloak>
-            <div class="col-xs-6">
-                <a v-show="showPrev" @click.prevent="prev()" href="#"
-                   class="calendar__browse calendar__browse--prev btn btn-warning">
-                    <i class="fa fa-chevron-left"></i> früher
-                </a>
-            </div>
-            <div class="col-xs-6 text-right">
-                <a @click.prevent="next()" href="#"
-                   class="calendar__browse calendar__browse--next btn btn-warning">
-                    später <i class="fa fa-chevron-right"></i>
-                </a>
-            </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>
@@ -28,6 +21,7 @@
     import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    dayjs.locale('de');
 
     export default {
         props: {
@@ -65,8 +59,8 @@
         },
         data () {
             return {
-                showPrev: false,
                 startDate: dayjs().startOf('month'),
+                selectedMonth: dayjs().startOf('month'),
                 calendarHtml: '',
                 loading: false
             }
@@ -74,40 +68,47 @@
         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 <= 12; 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.startDate.month() + 1;
-                query[this.argumentPrefix + '[year]'] = this.startDate.year();
+                query[this.argumentPrefix + '[month]'] = this.selectedMonth.month() + 1;
+                query[this.argumentPrefix + '[year]'] = this.selectedMonth.year();
                 query[this.argumentPrefix + '[months]'] = this.months;
                 this.loading = true;
-                this.showPrev = this.startDate.isAfter(dayjs());
                 axios({
                     url: this.uri,
                     responseType: 'text',
                     params: query
                 }).then((response) => {
                     this.calendarHtml = response.data;
-                    this.loading = false;
                 }).catch(() => {
+                }).finally(() => {
                     this.loading = false;
                 });
-            },
-            next () {
-                this.startDate = this.startDate.add(this.step, 'month');
-                this.loadCalendar();
-            },
-            prev () {
-                this.startDate = this.startDate.subtract(this.step, 'month');
-                this.loadCalendar();
             }
         },
         mounted () {
             Vue.nextTick(() => {
                 this.loadCalendar();
+                this.selectedMonth = this.selectableMonths[0];
             });
         }
     }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
index 26302041..6f9a81b3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
@@ -16,6 +16,14 @@
   }
 }
 
+.calendar__select {
+    margin-bottom: 20px;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+}
+
 .calendar__loading {
   position: absolute;
   @include size(100%);
@@ -33,7 +41,11 @@
 }
 
 .calendar__days {
-  min-height: 275px;
+
+  table {
+      margin-bottom: 0;
+  }
+
 }
 
 .label-success-danger {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
index a1ff061d..f9063135 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
@@ -18,7 +18,6 @@
         <f:for each="{year}" as="month">
             <ep:calendar.includes range="{range}" period="{month}">
                 <div class="calendar__month col-xs-12{f:if(condition: '{months} > 1', then: ' col-md-6 col-lg-4')}">
-                    <h3 class="calendar__month{f:if(condition: '{months} == 1', then: ' calendar__month--single')}">{month.begin -> f:format.date(format: '%B')} {month.begin -> f:format.date(format: '%Y')}</h3>
                     <div class="calendar__days">
                         <table class="table table-bordered">
                             <tr>