Implement 'MyEP' application, basic functionality

web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php

@@ -121,7 +121,7 @@ class FilterSettings implements \JsonSerializable
     /**
      * @var int
      */
-    protected $pax = 1;
+    protected $pax = 0;
 
     /**
      * @var array

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -21,8 +21,6 @@ require('leaflet');
 import EventBus from './_bus'
 import SearchBar from './components/SearchBar.vue'
 import SearchBox from './components/SearchBox.vue'
-import SearchResult from './components/SearchResult.vue'
-import ProductDetail from './components/ProductDetail.vue'
 import AjaxContent from './components/AjaxContent.vue'
 import OsmMap from './components/OsmMap.vue'
 import Calendar from './components/Calendar.vue'
@@ -53,8 +51,8 @@ new Vue({
     components: {
         SearchBar,
         SearchBox,
-        SearchResult,
-        ProductDetail,
+        SearchResult: () => import('./components/SearchResult.vue'),
+        ProductDetail: () => import('./components/ProductDetail.vue'),
         AjaxContent,
         OsmMap,
         Calendar,
@@ -63,7 +61,8 @@ new Vue({
         WatchlistToggle,
         Watchlist,
         HotelList,
-        ReferrerLink
+        ReferrerLink,
+        MyEp: () => import('./myep/components/App.vue')
     },
     data () {
         return {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from './_store';
+
+Vue.use(VueRouter);
+
+const guard = (to, from, next) => {
+    if (store.getters.isLoggedIn) {
+        next();
+    } else {
+        next({ name: 'login' });
+    }
+};
+
+import Address from './components/Address.vue'
+import Events from './components/Events.vue'
+import Login from './components/Login.vue'
+import CrmData from './components/CrmData.vue'
+
+export default new VueRouter({
+    routes: [
+        {
+            name: 'login',
+            path: '/',
+            component: Login,
+            beforeEnter (from, to, next) {
+                if (!store.getters.isLoggedIn) {
+                    next();
+                } else {
+                    next({ name: 'address' });
+                }
+            }
+        },
+        {
+            name: 'address',
+            path: '/adressdaten',
+            component: Address,
+            beforeEnter: guard
+        },
+        {
+            name: 'events',
+            path: '/vorgaenge',
+            component: Events,
+            beforeEnter: guard
+        },
+        {
+            name: 'crm',
+            path: '/crm',
+            component: CrmData,
+            beforeEnter: guard
+        },
+        {
+            path: '*',
+            redirect: { name: 'login' }
+        }
+    ]
+});

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js

@@ -0,0 +1,86 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        config: {},
+        pending: false,
+        isLoggedIn: !!localStorage.getItem('token'),
+        countries: []
+    },
+    mutations: {
+        pending (state) {
+            state.pending = true;
+        },
+        loginSuccess (state) {
+            state.isLoggedIn = true;
+            state.pending = false;
+        },
+        loginFailure (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        logout (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        setCountries (state, countries) {
+            state.countries = countries;
+        },
+        initConfig (state, config) {
+            state.config = config;
+        }
+    },
+    actions: {
+        login({ commit }, credentials) {
+            commit('pending');
+            const formData = new FormData();
+            formData.append('_username', credentials.email);
+            formData.append('_password', credentials.password);
+            return axios({
+                url: '/api/login',
+                data: formData,
+                method: 'post'
+            }).then((response) => {
+                localStorage.setItem('token', response.data.token);
+                commit('loginSuccess');
+                return response.data.address_id;
+            }).catch((error) => {
+                commit('loginFailure');
+                throw error;
+            });
+        },
+        logout({ commit }) {
+            commit('pending');
+            return axios({
+                url: '/api/logout'
+            }).then(() => {
+                localStorage.removeItem('token');
+                commit('logout');
+            });
+        },
+        loadCountries ({ commit }) {
+            axios({
+                url: '/api/countries',
+            }).then((response) => {
+                commit('setCountries', response.data);
+                return response.data;
+            })
+        }
+    },
+    getters: {
+        isPending: state => {
+            return state.pending;
+        },
+        isLoggedIn: state => {
+            return state.isLoggedIn;
+        },
+        authToken () {
+            return localStorage.getItem('token')
+        }
+    }
+});
+

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+	    <h1>Adressdaten</h1>
+        <div v-if="message" class="alert" :class="messageClass">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-show="loading">
+        <form @submit.prevent="saveAddress()" v-show="!loading">
+            <div class="form-group">
+                <label for="salutation" class="control-label">
+                    Anrede:
+                </label>
+                <select id="salutation" v-model="address.salutation" class="form-control">
+                    <option value="">Bitte wählen...</option>
+                    <option value="Frau">Frau</option>
+                    <option value="Herr">Herr</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="title" class="control-label">
+                    Titel:
+                </label>
+                <input id="title" type="text" v-model="address.title" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="name" class="control-label">
+                    Name:
+                </label>
+                <input id="name" type="text" v-model="address.name" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="firstName" class="control-label">
+                    Vorname:
+                </label>
+                <input id="firstName" type="text" v-model="address.firstName" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="dateOfBirth" class="control-label">
+                    Geburtsdatum:
+                </label>
+                <input id="dateOfBirth" type="text" ref="picker" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="gender" class="control-label">
+                    Geschlecht:
+                </label>
+                <select id="gender" v-model="address.gender" class="form-control">
+                    <option value="W">weiblich</option>
+                    <option value="M">männlich</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="street" class="control-label">
+                    Straße:
+                </label>
+                <input id="street" type="text" v-model="address.street" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="zipCode" class="control-label">
+                    PLZ:
+                </label>
+                <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="city" class="control-label">
+                    Stadt:
+                </label>
+                <input id="city" type="text" v-model="address.city" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="country" class="control-label">
+                    Land:
+                </label>
+                <select id="country" v-model="address.country" class="form-control">
+                    <option v-for="country in countries" :value="country.code">{{ country.name }}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Speichern
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+	import $ from 'jquery'
+    import axios from 'axios'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            picker: null,
+                message: '',
+                messageClass: '',
+	            address: {}
+			}
+        },
+		created () {
+	        this.fetchAddress();
+        },
+        mounted () {
+            Vue.nextTick(() => {
+                this.picker = $(this.$refs.picker).flatpickr({
+                    dateFormat: 'd.m.Y',
+                    locale: German,
+                    onChange: (selectedDates) => {
+                        this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
+                    }
+                });
+            });
+        },
+        watch: {
+	        '$route': 'fetchAddress'
+        },
+        methods: {
+            fetchAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.address = response.data[0];
+                    this.picker.setDate(new Date(this.address.dateOfBirth), true);
+                    this.message = '';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            saveAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses/' + this.address.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.address
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                    this.messageClass = 'alert-success';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            }
+        },
+        computed: {
+	        loaderUrl () {
+	            return this.$store.state.config.loaderUrl;
+            },
+            countries () {
+                return this.$store.state.countries;
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue

@@ -0,0 +1,51 @@
+<template>
+    <div id="app">
+        <ul class="nav nav-tabs">
+            <router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link>
+            <router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Vorgänge</a></router-link>
+            <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>CRM</a></router-link>
+            <li role="presentation"><a href="#" @click.prevent="logout()" v-if="isLoggedIn">Logout</a></li>
+        </ul>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+    const configElement = document.getElementById('appconfig');
+    const config = JSON.parse(configElement.innerHTML);
+
+    import axios from 'axios';
+
+    axios.defaults.headers.common['Accept'] = 'application/json';
+    axios.defaults.headers.put['Content-Type'] = 'application/json';
+    axios.defaults.baseURL = config.myEpApiBaseUrl;
+
+    import store from '../_store'
+
+    store.commit('initConfig', config);
+
+    import router from '../_router'
+
+    export default {
+        store,
+        router,
+        methods: {
+            logout () {
+                this.$store.dispatch('logout').then(() => {
+                    this.$router.push({ name: 'login' })
+                });
+            }
+        },
+        computed: {
+            isLoggedIn () {
+                return this.$store.getters.isLoggedIn;
+            },
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        },
+        created () {
+            this.$store.dispatch('loadCountries');
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue

@@ -0,0 +1,98 @@
+<template>
+    <div id="myep-main">
+        <h1>CRM Merkmale</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <template v-if="!loading">
+            <h2>Selektionsmerkmale</h2>
+            <template v-for="selectionGroup in this.crmData.selectionGroups">
+                <h3>{{ selectionGroup.name}}</h3>
+                <div class="checkbox" v-for="selection in selectionGroup.selections">
+                    <label :class="{ 'disabled': selection.changeable }">
+                        <input type="checkbox" class="form-control" value="True" :checked="selection.value === 'True'" :disabled="selection.changeable === 'False'"/>
+                        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                        {{ selection.name }}
+                    </label>
+                </div>
+            </template>
+            <h2>CRM Aktionen</h2>
+            <div class="checkbox" v-for="action in this.crmData.actions">
+                <label>
+                    <input type="checkbox" class="form-control" value="True" :checked="action.value === 'True'"/>
+                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                    {{ action.name }}
+                </label>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import EventBus from '../../_bus'
+
+    export default {
+        data () {
+            return {
+                loading: false,
+                message: '',
+                crmData: []
+            }
+        },
+        created () {
+            this.fetchSelections();
+        },
+        watch: {
+            '$route': 'fetchSelections'
+        },
+        methods: {
+            fetchSelections () {
+                this.loading = true;
+                axios({
+                    url: '/api/crm-selections',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.crmData = response.data[0];
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            },
+            saveSelections () {
+                this.loading = false;
+                axios({
+                    url: '/api/crm-selections/' + this.crmData.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.crmData
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    label.disabled {
+        opacity: 0.5;
+    }
+</style>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue

@@ -0,0 +1,105 @@
+<template>
+    <div id="myep-main">
+        <h1>Vorgänge</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <div class="table-responsive" v-if="!loading">
+            <table class="table table-striped table-condensed">
+                <thead>
+                    <tr>
+                        <th>Buchungsdatum</th>
+                        <th>Reisedatum</th>
+                        <th>Reise</th>
+                        <th>Teilnehmer</th>
+                        <th>Preis</th>
+                        <th>Status</th>
+                        <th>Best./Rg.</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="event of events">
+                        <td>{{ formatBookingDate(event.buchungsdatum) }}</td>
+                        <td>{{ event.reisedatum | date }}</td>
+                        <td>{{ event.reise }}</td>
+                        <td>
+                            <ul>
+                                <li v-for="customer in event.customers">{{ customer.name }}, {{ customer.vorname }}</li>
+                            </ul>
+                        </td>
+                        <td>{{ event.preis }} EUR</td>
+                        <td>{{ status[event.status] }}</td>
+                        <td><a :href="$store.state.config.myEpApiBaseUrl + '/api/events/' + event.id + '/confirmation?token=' + $store.getters.authToken" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import dayjs from 'dayjs'
+    import 'dayjs/locale/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            status: {
+	                'F': 'Festbuchung',
+                    'S': 'Stornierung',
+                    'F/S': 'Festbuchung',
+                    'O': 'Option',
+                    'U': 'Umbuchung',
+                },
+                loading: false,
+	            message: '',
+	            events: []
+			}
+        },
+        created () {
+            this.fetchEvents();
+        },
+        watch: {
+            '$route': 'fetchEvents'
+        },
+        methods: {
+            fetchEvents () {
+                this.loading = true;
+                axios({
+                    url: '/api/events',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.events = response.data;
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            formatBookingDate (date) {
+                if (!date) {
+                    return '-';
+                }
+                return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr';
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    td, th {
+        text-align: left;
+        vertical-align: top;
+    }
+</style>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+        <h1>Login <img :src="loaderUrl" alt="" v-if="isPending"></h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <form @submit.prevent="login()">
+            <div class="form-group">
+                <label for="email" class="control-label">
+                    E-Mail
+                </label>
+                <input id="email" type="text" v-model="email" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="password" class="control-label">
+                    Passwort
+                </label>
+                <input id="password" type="password" v-model="password" class="form-control">
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Login
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            message: '',
+	            email: '',
+                password: ''
+            }
+        },
+        methods: {
+            login () {
+                if (!this.email || !this.password) {
+                    this.message = 'Bitte E-Mail und Passwort angeben';
+                    return;
+                }
+                this.$store.dispatch('login', {
+                    email: this.email,
+                    password: this.password
+                }).then(() => {
+                    this.$router.push({ name: 'address' });
+                }).catch(() => {
+                    this.message = 'Der Login ist fehlgeschlagen :('
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            },
+            isPending () {
+                return this.$store.getters.isPending;
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html

@@ -19,4 +19,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html

@@ -15,4 +15,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html

@@ -13,4 +13,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html

@@ -21,4 +21,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html

@@ -34,4 +34,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html

@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html

@@ -36,4 +36,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html

@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Config.html

@@ -0,0 +1,6 @@
+<script type="application/json" id="appconfig">
+    {
+        "loaderUrl": <f:format.raw>"{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif', absolute: 1)}"</f:format.raw>,
+        "myEpApiBaseUrl": "https://myep.burn.dpn"
+    }
+</script>