Merge branch 'teamer'

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

@@ -14,10 +14,21 @@ const guard = (to, from, next) => {
     }
 };
 
+const guardTeamer = (to, from, next) => {
+    if (store.state.loading) {
+        next(false);
+    } else if (store.state.loggedIn && store.state.teamer) {
+        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'
+import Teamer from './components/Teamer.vue'
 
 export default new VueRouter({
     routes: [
@@ -51,6 +62,12 @@ export default new VueRouter({
             component: CrmData,
             beforeEnter: guard
         },
+        {
+            name: 'teamer',
+            path: '/teamer',
+            component: Teamer,
+            beforeEnter: guardTeamer
+        },
         {
             path: '*',
             redirect: { name: 'login' }

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

@@ -6,8 +6,6 @@ import EventBus from '../_bus'
 const configElement = document.getElementById('appconfig');
 const config = JSON.parse(configElement.innerHTML);
 
-axios.defaults.headers.common['Accept'] = 'application/json';
-axios.defaults.headers.put['Content-Type'] = 'application/json';
 axios.defaults.baseURL = config.myEpApiBaseUrl;
 
 const createAuthenticatingClient = () => {
@@ -25,7 +23,11 @@ export default new Vuex.Store({
         config: config,
         loading: false,
         loggedIn: !!sessionStorage.getItem('token'),
-        countries: []
+        teamer: !!sessionStorage.getItem('teamerId'),
+        countries: [],
+        abilities: [],
+        timeFrames: [],
+        jobProfiles: []
     },
     mutations: {
         loginSuccess (state) {
@@ -37,6 +39,9 @@ export default new Vuex.Store({
         logout (state) {
             state.loggedIn = false;
         },
+        isTeamer (state) {
+            state.teamer = true;
+        },
         loadingBegin (state) {
             state.loading = true;
         },
@@ -45,6 +50,15 @@ export default new Vuex.Store({
         },
         setCountries (state, countries) {
             state.countries = countries;
+        },
+        setAbilities (state, abilities) {
+            state.abilities = abilities;
+        },
+        setTimeFrames (state, timeFrames) {
+            state.timeFrames = timeFrames;
+        },
+        setJobProfiles (state, jobProfiles) {
+            state.jobProfiles = jobProfiles;
         }
     },
     actions: {
@@ -59,6 +73,10 @@ export default new Vuex.Store({
                 method: 'post'
             }).then((response) => {
                 sessionStorage.setItem('token', response.data.token);
+                sessionStorage.setItem('teamerId', response.data.teamer_id);
+                if (response.data.teamer_id) {
+                    commit('isTeamer');
+                }
                 commit('loginSuccess');
                 commit('loadingFinish');
             }).catch((error) => {
@@ -75,6 +93,7 @@ export default new Vuex.Store({
                 }
             }).then(() => {
                 sessionStorage.removeItem('token');
+                sessionStorage.removeItem('teamerId');
                 commit('logout');
             });
         },
@@ -93,12 +112,27 @@ export default new Vuex.Store({
                 throw error;
             });
         },
-        loadCountries ({ commit }) {
+        loadSelectableValues ({ commit }) {
             axios({
                 url: '/api/countries',
             }).then((response) => {
-                commit('setCountries', response.data);
+                commit('setCountries', response.data['hydra:member']);
-            })
+            });
+            axios({
+                url: '/api/teamer-abilities',
+            }).then((response) => {
+                commit('setAbilities', response.data['hydra:member']);
+            });
+            axios({
+                url: '/api/timeframes',
+            }).then((response) => {
+                commit('setTimeFrames', response.data['hydra:member']);
+            });
+            axios({
+                url: '/api/teamer-job-profiles',
+            }).then((response) => {
+                commit('setJobProfiles', response.data['hydra:member']);
+            });
         },
         loadAddress ({ commit }) {
             commit('loadingBegin');
@@ -108,7 +142,7 @@ export default new Vuex.Store({
             return client.get('/api/addresses')
                 .then((response) => {
                     commit('loadingFinish');
-                    return response.data[0];
+                    return response.data['hydra:member'][0];
                 }).catch((error) => {
                     commit('loadingFinish');
                     commit('logout');
@@ -140,7 +174,7 @@ export default new Vuex.Store({
             return client.get('/api/events')
                 .then((response) => {
                     commit('loadingFinish');
-                    return response.data;
+                    return response.data['hydra:member'];
                 }).catch((error) => {
                     commit('loadingFinish');
                     commit('logout');
@@ -156,7 +190,7 @@ export default new Vuex.Store({
             return client.get('/api/crm-selections')
                 .then((response) => {
                     commit('loadingFinish');
-                    return response.data[0];
+                    return response.data['hydra:member'][0];
                 }).catch((error) => {
                     commit('loadingFinish');
                     commit('logout');
@@ -178,11 +212,45 @@ export default new Vuex.Store({
                     EventBus.$emit('forcedLogout');
                     throw error;
                 });
+        },
+        loadTeamerData ({ commit }) {
+            commit('loadingBegin');
+
+            const client = createAuthenticatingClient();
+
+            return client.get('/api/teamers/' + sessionStorage.getItem('teamerId'))
+                .then((response) => {
+                    commit('loadingFinish');
+                    return response.data;
+                }).catch((error) => {
+                    commit('loadingFinish');
+                    commit('logout');
+                    EventBus.$emit('forcedLogout');
+                    throw error;
+                });
+        },
+        saveTeamerData ({ commit }, data) {
+            commit('loadingBegin');
+
+            const client = createAuthenticatingClient();
+
+            return client.put('/api/teamers/' + sessionStorage.getItem('teamerId'), data)
+                .then(() => {
+                    commit('loadingFinish');
+                }).catch((error) => {
+                    commit('loadingFinish');
+                    commit('logout');
+                    EventBus.$emit('forcedLogout');
+                    throw error;
+                });
         }
     },
     getters: {
         authToken () {
             return sessionStorage.getItem('token')
+        },
+        teamerId () {
+            return sessionStorage.getItem('teamerId')
         }
     }
 });

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

@@ -69,7 +69,8 @@
                             Land:
                         </label>
                         <select id="country" v-model="address.country" class="form-control">
-                            <option v-for="country in $store.state.countries" :value="country.code">{{ country.name }}</option>
+                            <option v-for="country in $store.state.countries"
+                                    :value="country['code']">{{ country['name'] }}</option>
                         </select>
                     </div>
                     <div class="form-group">

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

@@ -4,6 +4,7 @@
             <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>Reise-Historie</a></router-link>
             <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>Mein Profil</a></router-link>
+            <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" v-if="isTeamer"><a>Teamer</a></router-link>
             <li role="presentation"><a href="#" @click.prevent="logout()" v-if="isLoggedIn" class="button">Logout</a></li>
         </ul>
         <router-view></router-view>
@@ -30,6 +31,9 @@
             isLoggedIn () {
                 return this.$store.state.loggedIn;
             },
+            isTeamer () {
+                return this.$store.state.teamer;
+            },
             loaderUrl () {
                 return this.$store.state.config.loaderUrl;
             },
@@ -38,7 +42,7 @@
             }
         },
         created () {
-            this.$store.dispatch('loadCountries');
+            this.$store.dispatch('loadSelectableValues');
             EventBus.$on('forcedLogout', () => {
                 this.$router.push({ name: 'login' })
             });

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

@@ -0,0 +1,169 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+        <h1>Teamer</h1>
+        <div v-if="message" class="alert alert-dismissible" :class="messageClass">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            {{ message }}
+        </div>
+        <img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
+        <form @submit="saveTeamerData()" v-if="loaded">
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <div class="form-group">
+                        <label class="control-label">
+                            Fährst du Ski oder Board?
+                        </label>
+                        <div class="checkbox" v-for="ability of $store.state.abilities">
+                            <label>
+                                <input type="checkbox" class="form-control" v-model="teamerData.abilities"
+                                       :value="ability['@id']" />
+                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                                {{ ability['title'] }}
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label">
+                            Mögliche Jobprofile:
+                        </label>
+                        <div class="checkbox" v-for="jobProfile of $store.state.jobProfiles">
+                            <label>
+                                <input type="checkbox" class="form-control" v-model="teamerData.jobProfiles"
+                                       :value="jobProfile['@id']" />
+                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                                {{ jobProfile['title'] }}
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label">
+                            Sonstiges
+                        </label>
+                        <div class="checkbox">
+                            <label>
+                                <input type="checkbox" class="form-control" v-model="teamerData.wantsToLead"/>
+                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                                Ich möchte eine Fahrtenleitung übernehmen.
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="status" class="control-label">
+                            Status:
+                        </label>
+                        <select id="status" v-model="teamerData.seniority" class="form-control">
+                            <option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="jacketsize" class="control-label">
+                            Jackengröße:
+                        </label>
+                        <select id="jacketsize" v-model="teamerData.jacketSize" class="form-control">
+                            <option v-for="size of this.sizes" :value="size">{{ size }}</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="jacketsize" class="control-label">
+                            Wünsche:
+                        </label>
+                        <textarea class="xxlarge form-control" cols="30" rows="3" v-model="teamerData.notes"></textarea>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <h3>Verfügbarkeiten</h3>
+                    <div class="checkbox" v-for="timeFrame in $store.state.timeFrames">
+                        <label>
+                            <input type="checkbox" class="form-control" v-model="teamerData.availableTimeframes"
+                                   :value="timeFrame['@id']"/>
+                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                            {{ timeFrame | period }}
+                        </label>
+                    </div>
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox" class="form-control" v-model="teamerData.monthLong"/>
+                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                            Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="form-group">
+                        <button type="submit" class="button button--active" :disabled="loading">
+                            Speichern
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import EventBus from '../../_bus'
+    import dayjs from 'dayjs'
+    import 'dayjs/locale/de'
+
+    export default {
+        data () {
+            return {
+                loaded: false,
+                message: '',
+                messageClass: '',
+                sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ],
+                status: [
+                    { value: 'jr', label: 'Neuteamer' },
+                    { value: 'sr', label: 'Bestandsteamer' }
+                ],
+                teamerData () {
+                    return {}
+                }
+            }
+        },
+        methods: {
+            fetchTeamerData () {
+                this.$store.dispatch('loadTeamerData')
+                    .then((data) => {
+                        this.teamerData = data;
+                        this.loaded = true;
+                    })
+            },
+            saveTeamerData () {
+                this.$store.dispatch('saveTeamerData', this.teamerData)
+                    .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');
+                });
+            }
+        },
+        created () {
+            this.fetchTeamerData();
+        },
+        computed: {
+            loading () {
+                return this.$store.state.loading;
+            }
+        },
+        filters: {
+            period (timeFrame) {
+                const begin = dayjs(timeFrame.dateBegin);
+                const end = dayjs(timeFrame.dateEnd);
+                let label = begin.format('DD.MM.YYYY') + ' - ' + end.format('DD.MM.YYYY');
+                if (timeFrame.label) {
+                    label += ' (' + timeFrame.label + ')';
+                }
+                return label;
+            }
+        }
+    }
+</script>