From c03a14c519d081b4b75ce2a93f3f96996a712cbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sat, 21 Aug 2021 17:02:02 +0200
Subject: [PATCH] WIP Migrate to stimulus.js and tailwind

---
 .../Resources/Private/Assets/js/_app.js       |   8 +-
 .../Assets/js/components/contact-form.js      |  35 ----
 .../js/controllers/collapse_controller.js     |   1 +
 .../Assets/scss/components/_datepicker.scss   |  52 +-----
 .../Private/Templates/Searchbar/Index.html    | 149 ++++++++++--------
 5 files changed, 88 insertions(+), 157 deletions(-)
 delete mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/contact-form.js

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 f30efe33..61b970af 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
@@ -8,13 +8,7 @@ require('picturefill')
 import smoothscroll from 'smoothscroll-polyfill'
 smoothscroll.polyfill()
 
-// Alpine stuff
-import Alpine from 'alpinejs'
-import contactForm from './components/contact-form'
-
-Alpine.data('contactForm', contactForm)
-Alpine.start()
-
+// Add pacode to external links
 document.addEventListener('DOMContentLoaded', () => {
     const configElement = document.getElementById('appconfig')
     if (null === configElement) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/contact-form.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/contact-form.js
deleted file mode 100644
index d1efe892..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/contact-form.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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()
-    }
-})
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
index d2228be0..dffd4f28 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
@@ -53,6 +53,7 @@ export default class extends Controller {
 
     collapsedValueChanged() {
         this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
+        this.containerTarget.scrollTop = 0
         if (this.hasIconTarget) {
             this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false)
         }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
index a27d3183..7abc8b1f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
@@ -1,5 +1,9 @@
 @import "~flatpickr/dist/flatpickr.css";
 
+.flatpickr-input {
+    @apply hidden;
+}
+
 .flatpickr-calendar {
     box-shadow: none;
 
@@ -8,54 +12,6 @@
     }
 }
 
-.daterange {
-    padding-bottom: 16px;
-}
-
-.daterange__panel {
-    padding: 8px 0;
-
-    .flatpickr-calendar {
-        margin: 0 auto;
-    }
-}
-
-.daterange__headline,
-.daterange__presets {
-    text-align: center;
-}
-
-.daterange__presets {
-    display: flex;
-    justify-content: space-between;
-}
-
-.daterange__preset {
-    display: block;
-    color: theme('colors.gray.800');
-
-    .fa {
-        display: block;
-    }
-}
-
-.daterange__buttons {
-    display: flex;
-    justify-content: space-between;
-}
-
-.daterange__button {
-    color: theme('colors.gray.800');
-    border: none;
-    background: none;
-    outline: none;
-    width: percentage(1/2);
-}
-
-.flatpickr-input:not(.datepicker--visible) {
-    display: none;
-}
-
 .flatpickr-calendar {
 
     &.inline {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index 23571550..2497cfd6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -24,6 +24,8 @@
                     <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
                     <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
                         <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
+
+                            <!-- Date range -->
                             <div class="flex-1"
                                  data-controller="collapse datepicker"
                             <f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
@@ -42,41 +44,49 @@
                                     value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
                                 </f:if>
                                 data-searchbar-target="dateRangeLabel"/>
-                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"
+                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
                                      data-action="click->collapse#toggle">
                                     <use href="#icon-calendar"></use>
                                 </svg>
-                                <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md"
+                                <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
                                      data-collapse-target="container">
-                                    <f:if condition="{settings.datePickerPresets}">
-                                        <div class="flex items-center justify-between pb-2">
-                                            <f:for each="{settings.datePickerPresets}" as="preset">
-                                                <button class="daterange__preset"
-                                                        data-preset='{preset -> f:format.json()}'
-                                                        data-action="datepicker#selectPreset">
+                                    <div class="flex justify-between divide-x divide-gray-200">
+                                        <div class="pr-2">
+                                            <input type="hidden"
+                                                   data-datepicker-target="field">
+                                        </div>
+                                        <div class="flex-1 flex flex-col justify-between pl-2">
+                                            <f:if condition="{settings.datePickerPresets}">
+                                                <div class="flex flex-col space-y-4">
+                                                    <f:for each="{settings.datePickerPresets}" as="preset">
+                                                        <button class="button button--small button--light w-full"
+                                                                data-preset='{preset -> f:format.json()}'
+                                                                data-action="datepicker#selectPreset">
                                                     <span>
                                                         {preset.label}
                                                     </span>
+                                                        </button>
+                                                    </f:for>
+                                                </div>
+                                            </f:if>
+                                            <div class="flex flex-col space-y-4">
+                                                <button class="button button--small button--light w-full"
+                                                        data-action="collapse#close">
+                                                    schließen
                                                 </button>
-                                            </f:for>
+                                                <button class="button button--small button--light w-full"
+                                                        data-action="datepicker#reset">
+                                                    zurücksetzen
+                                                </button>
+                                            </div>
                                         </div>
-                                    </f:if>
-                                    <input type="hidden"
-                                           data-datepicker-target="field">
-                                    <div class="flex items-center justify-between pt-2">
-                                        <button class="daterange__button focus:outline-none"
-                                                data-action="collapse#close">
-                                            schließen
-                                        </button>
-                                        <button class="daterange__button focus:outline-none"
-                                                data-action="datepicker#reset">
-                                            zurücksetzen
-                                        </button>
                                     </div>
                                 </div>
                             </div>
                         </div>
+                        <!-- /Date range -->
 
+                        <!-- Pax -->
                         <div class="w-24"
                              data-controller="collapse"
                              data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -87,10 +97,11 @@
                                        data-searchbar-target="paxLabel"
                                        value="{searchParams.pax}"
                                        class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
-                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
+                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
+                                     data-action="click->collapse#toggle">
                                     <use href="#icon-user-group"></use>
                                 </svg>
-                                <div class="hidden absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
+                                <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
                                      data-collapse-target="container">
                                     <ul class="m-0 p-0">
                                         <f:for each="{filterOptions.pax}" as="option">
@@ -110,7 +121,9 @@
                                 </div>
                             </div>
                         </div>
+                        <!-- /Pax -->
 
+                        <!-- Destination -->
                         <div class="flex-1"
                              data-controller="collapse"
                              data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -120,69 +133,68 @@
                                        data-action="click->collapse#toggle"
                                        data-searchbar-target="destinationLabel"
                                        class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
-                                       placeholder="Reiseziel"/>
-                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45">
+                                       placeholder="Reiseziel/Konzept"/>
+                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
+                                     data-action="click->collapse#toggle">
                                     <use href="#icon-airplane"></use>
                                 </svg>
-                                <div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll"
+                                <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
                                      data-collapse-target="container">
-                                    <f:for each="{filterOptions.destinations}" as="destination">
-                                        <div class="flex items-start justify-between">
-                                            <div class="w-1/2">
-                                                <button data-action="searchbar#setDestination"
+                                    <div class="grid grid-cols-5 gap-4">
+                                        <f:for each="{filterOptions.destinations}" as="destination">
+                                            <div class="col-span-3">
+                                                <button class="flex items-center space-x-2"
+                                                        data-action="searchbar#setDestination"
                                                         data-option-uid="{destination.country.uid}"
                                                         data-option-type="country"
                                                         data-option-label="{destination.country.label}">
                                                     <svg class="block w-8 h-6">
                                                         <use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
                                                     </svg>
-                                                    <strong>
+                                                    <span>
                                                         {destination.country.label}
-                                                    </strong>
+                                                    </span>
                                                 </button>
                                             </div>
-                                            <div class="w-1/2">
-                                                <ul class="plain-list mb-0">
-                                                    <f:for each="{destination.regions}" as="region">
-                                                        <li>
-                                                            <button data-action="searchbar#setDestination"
-                                                                    data-option-uid="{region.uid}"
-                                                                    data-option-type="region"
-                                                                    data-option-label="{region.label}">
-                                                                {region.label}
-                                                            </button>
-                                                        </li>
-                                                    </f:for>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </f:for>
-                                    <div class="flex items-start justify-between">
-                                        <div class="w-1/2">
-                                            <strong>Konzept</strong>
-                                        </div>
-                                        <div class="w-1/2">
-                                            <ul class="plain-list mb-0">
-                                                <f:for each="{filterOptions.concepts}" as="concept">
-                                                    <li>
-                                                        <button data-action="searchbar#setDestination"
-                                                                data-option-uid="{concept.uid}"
-                                                                data-option-type="concept"
-                                                                data-option-label="{concept.name}">
-                                                            {concept.name}
-                                                        </button>
-                                                    </li>
+                                            <div class="col-span-2">
+                                                <f:for each="{destination.regions}" as="region">
+                                                    <button data-action="searchbar#setDestination"
+                                                            data-option-uid="{region.uid}"
+                                                            data-option-type="region"
+                                                            data-option-label="{region.label}">
+                                                        {region.label}
+                                                    </button>
                                                 </f:for>
-                                            </ul>
+                                            </div>
+                                        </f:for>
+                                    </div>
+                                    <div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
+                                        <div class="col-span-3">
+                                            <strong>
+                                                Konzept
+                                            </strong>
+                                        </div>
+                                        <div class="col-span-2">
+                                            <f:for each="{filterOptions.concepts}" as="concept">
+                                                <button data-action="searchbar#setDestination"
+                                                        data-option-uid="{concept.uid}"
+                                                        data-option-type="concept"
+                                                        data-option-label="{concept.name}">
+                                                    {concept.name}
+                                                </button>
+                                            </f:for>
                                         </div>
                                     </div>
-                                    <button data-action="searchbar#resetDestination">
+                                    <button class="button button--small"
+                                            data-action="searchbar#resetDestination">
                                         zurücksetzen
                                     </button>
                                 </div>
                             </div>
                         </div>
+                        <!-- /Destination -->
 
+                        <!-- Price range -->
                         <div class="w-32"
                              data-controller="collapse"
                              data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -193,10 +205,11 @@
                                        data-searchbar-target="priceRangeLabel"
                                        class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
                                        placeholder="Preis"/>
-                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
+                                <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
+                                     data-action="click->collapse#toggle">
                                     <use href="#icon-euro"></use>
                                 </svg>
-                                <div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
+                                <div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
                                      data-collapse-target="container">
                                     <ul class="m-0 p-0">
                                         <li>
@@ -219,6 +232,8 @@
                                 </div>
                             </div>
                         </div>
+                        <!-- /Price range -->
+
                     </div>
                     <button type="submit" class="hidden sticky:block sticky:ml-4">
                         <svg class="w-8 h-8 text-white">