EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'teamer'

Browse Source
This commit is contained in:
Björn Fromme
2018-10-25 18:21:40 +02:00
parent adda1ce9d7 8069033383
commit f4b9760761
5 changed files with 270 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+17
View File
@@ -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
+77 -9
View File
@@ -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
+2 -1
View File
@@ -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
+5 -1
View File
@@ -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
+169
View File
@@ -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>