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

Implement global store, refactor session handling

Browse Source
This commit is contained in:
Björn Fromme
2018-12-19 22:30:00 +01:00
parent 3158004818
commit 138bb84ab6
18 changed files with 101 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+8 -37
View File
@@ -2,7 +2,6 @@
// Import dependencies
import Vue from 'vue'
import VueSession from 'vue-session'
import $ from 'jquery'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
@@ -40,17 +39,18 @@ const sliderPrevArrow = '<button class="slider-pagination__arrow slider-paginati
const sliderNextArrow = '<button class="slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>';
const sliderDot = '<button class="slider-pagination__dot" data-role="none" role="button" tabindex="0" />';
// Enable session handling
Vue.use(VueSession, { persist: true });
// Define date filter for vue templates
Vue.filter('date', (value) => {
return dayjs(value).format('DD.MM.YYYY');
});
// Store
import store from './_store';
// Initialize vue app
new Vue({
el: '#app',
store,
components: {
SearchBar,
SearchBox,
@@ -70,7 +70,6 @@ new Vue({
},
data () {
return {
config: {},
maxWindowWidth: 991,
lastScrollPosition: 0,
scrollTopVisible: false,
@@ -78,20 +77,10 @@ new Vue({
navbarLocked: false,
searchbarFixed: false,
mobileMode: false,
backgroundImageMode: 'mobile',
watchlist: []
}
},
computed: {
watchlistCount () {
return this.watchlist.length;
backgroundImageMode: 'mobile'
}
},
methods: {
parseConfig () {
const configElement = document.getElementById('appconfig');
this.config = JSON.parse(configElement.innerHTML);
},
setMobileMode () {
this.mobileMode = $window.outerWidth() < this.maxWindowWidth;
},
@@ -334,7 +323,7 @@ new Vue({
});
},
appendPaCode () {
const paCode = this.config.paCode;
const paCode = this.$store.state.config.paCode;
if (!paCode) {
return;
}
@@ -356,7 +345,8 @@ new Vue({
}
},
created () {
this.parseConfig();
this.$store.commit('initConfig');
this.$store.commit('initWatchlist');
EventBus.$on('ajaxContentLoaded', () => {
Vue.nextTick(() => {
this.initContentsliders();
@@ -373,25 +363,6 @@ new Vue({
EventBus.$on('scrollTo', (anchorId, offset) => {
this.scrollTo(anchorId, offset);
});
EventBus.$on('watchlistToggle', uid => {
let list = this.watchlist;
let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) {
list.push(uid)
} else {
list.splice(watchlistIndex, 1)
}
this.watchlist = list;
this.$session.set('watchlist', this.watchlist);
});
if (!this.$session.exists()) {
this.$session.start();
}
if (!this.$session.has('watchlist')) {
this.$session.set('watchlist', []);
}
this.watchlist = this.$session.get('watchlist');
},
mounted () {
Vue.nextTick(() => {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js → web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
+65 -21
View File
@@ -2,16 +2,11 @@ import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import AddressStore from './stores/address'
import CrmDataStore from './stores/crmdata'
import TeamerStore from './stores/teamer'
import EventsStore from './stores/events'
import NewsletterStore from './stores/newsletter'
const configElement = document.getElementById('appconfig');
const config = JSON.parse(configElement.innerHTML);
axios.defaults.baseURL = config.myEpApiBaseUrl;
import AddressStore from './myep/stores/address'
import CrmDataStore from './myep/stores/crmdata'
import TeamerStore from './myep/stores/teamer'
import EventsStore from './myep/stores/events'
import NewsletterStore from './myep/stores/newsletter'
Vue.use(Vuex);
@@ -24,12 +19,14 @@ export default new Vuex.Store({
newsletter: NewsletterStore
},
state: {
config: config,
config: {},
watchlist: [],
watchlistId: null,
loading: false,
authToken: sessionStorage.getItem('token'),
loggedIn: !!sessionStorage.getItem('token'),
isTeamer: JSON.parse(sessionStorage.getItem('teamerId')) !== null,
teamerId: JSON.parse(sessionStorage.getItem('teamerId')),
isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
memberId: JSON.parse(sessionStorage.getItem('memberId')),
countries: [],
abilities: [],
timeFrames: [],
@@ -40,6 +37,40 @@ export default new Vuex.Store({
}
},
mutations: {
initConfig (state) {
const configElement = document.getElementById('appconfig');
state.config = JSON.parse(configElement.innerHTML);
axios.defaults.baseURL = state.config.myEpApiBaseUrl;
},
initWatchlist (state, list = null) {
if (list) {
sessionStorage.setItem('watchlist', JSON.stringify(list.items));
sessionStorage.setItem('watchlistId', JSON.stringify(list.id));
} else if (!sessionStorage.getItem('watchlist')) {
sessionStorage.setItem('watchlist', JSON.stringify([]));
sessionStorage.setItem('watchlistId', JSON.stringify(null));
}
state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
state.watchlistId = JSON.parse(sessionStorage.getItem('watchlistId'));
},
watchlistToggle (state, uid) {
let list = state.watchlist;
let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) {
list.push(uid)
} else {
list.splice(watchlistIndex, 1)
}
state.watchlist = list;
sessionStorage.setItem('watchlist', JSON.stringify(list));
if (state.watchlistId) {
axios({
url: '/api/watchlists/' + state.watchlistId,
data: state.watchlist,
method: 'put'
});
}
},
loginSuccess (state, token) {
state.loggedIn = true;
state.authToken = token;
@@ -54,16 +85,20 @@ export default new Vuex.Store({
state.teamerId = null;
state.authToken = null;
sessionStorage.removeItem('token');
sessionStorage.removeItem('teamerId');
sessionStorage.removeItem('isTeamer');
sessionStorage.removeItem('memberId');
},
alert (state, payload) {
state.message.text = payload.message;
state.message.class = payload.class;
},
isTeamer (state, teamerId) {
isTeamer (state) {
state.isTeamer = true;
state.teamerId = teamerId;
sessionStorage.setItem('teamerId', teamerId);
sessionStorage.setItem('isTeamer', JSON.stringify(true));
},
setMember (state, memberId) {
state.memberId = memberId;
sessionStorage.setItem('memberId', memberId);
},
loadingBegin (state) {
state.loading = true;
@@ -98,9 +133,13 @@ export default new Vuex.Store({
method: 'post',
withCredentials: true
}).then((response) => {
let teamerId = parseInt(response.data.teamer_id);
if (teamerId > 0) {
commit('isTeamer', teamerId);
let memberId = parseInt(response.data.member_id);
commit('setMember', memberId);
if (response.data.watchlist) {
commit('initWatchlist', response.data.watchlist);
}
if (response.data.is_teamer) {
commit('isTeamer');
}
commit('loginSuccess', response.data.token);
commit('loadingFinish');
@@ -164,6 +203,12 @@ export default new Vuex.Store({
}
},
getters: {
watchlistCount: state => {
return state.watchlist.length;
},
onWatchlist: (state) => (uid) => {
return state.watchlist.indexOf(uid) !== -1;
},
authToken: state => {
return state.authToken;
},
@@ -175,4 +220,3 @@ export default new Vuex.Store({
}
}
});
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
+2 -2
View File
@@ -31,8 +31,8 @@
}
},
created () {
if (this.$session.has('filterSettings')) {
this.filterSettings = this.$session.get('filterSettings')
if (sessionStorage.getItem('filterSettings')) {
this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
+5 -11
View File
@@ -72,12 +72,6 @@
return {}
}
},
watchlist: {
type: Array,
default () {
return []
}
},
daytrip: {
type: Number,
default: 0
@@ -188,12 +182,12 @@
}
},
created () {
if (this.$session.has('filterSettings')) {
this.filterSettings = this.$session.get('filterSettings')
if (sessionStorage.getItem('filterSettings')) {
this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
}
if (this.$session.has('referringPage')) {
this.referringPage = this.$session.get('referringPage');
this.$session.remove('referringPage');
if (sessionStorage.getItem('referringPage')) {
this.referringPage = JSON.parse(sessionStorage.getItem('referringPage'));
sessionStorage.removeItem('referringPage');
}
EventBus.$on('loadDatesTable', () => {
this.loadDatesView();
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue
+1 -1
View File
@@ -20,7 +20,7 @@
methods: {
storeReferringPage () {
if (this.referringPage.url && this.referringPage.label) {
this.$session.set('referringPage', this.referringPage)
sessionStorage.setItem('referringPage', JSON.stringify(this.referringPage))
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
+3 -9
View File
@@ -71,12 +71,6 @@
default () {
return {};
}
},
watchlist: {
type: Array,
default () {
return [];
}
}
},
computed: {
@@ -211,14 +205,14 @@
},
updateFilterSettings (settings) {
this.filterSettings = { ...this.filterSettings, ...settings };
this.$session.set('filterSettings', this.filterSettings);
sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
}
},
created () {
if (!$.isEmptyObject(this.initialFilterSettings)) {
this.updateFilterSettings(this.initialFilterSettings)
} else if (this.$session.has('filterSettings')) {
this.updateFilterSettings(this.$session.get('filterSettings'))
} else if (sessionStorage.getItem('filterSettings')) {
this.updateFilterSettings(JSON.parse(sessionStorage.getItem('filterSettings')))
}
},
mounted () {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+1 -7
View File
@@ -62,7 +62,7 @@
</referrer-link>
</div>
</div>
<watchlist-toggle :uid="item.key" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
<watchlist-toggle :uid="item.key" class="teaserbox-watchlist"></watchlist-toggle>
</div>
</template>
@@ -86,12 +86,6 @@
type: Object,
required: true
},
watchlist: {
type: Array,
default () {
return [];
}
},
referringPage: {
type: Object,
default () {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
+3 -8
View File
@@ -8,8 +8,7 @@
:key="item.key"
:item="item"
:section="section"
:referring-page="referringPage"
:watchlist="watchlist"></search-result-item>
:referring-page="referringPage"></search-result-item>
</div>
</template>
<div class="alert alert-info" v-if="total === 0">
@@ -40,12 +39,6 @@
type: String,
required: true
},
watchlist: {
type: Array,
default () {
return [];
}
},
referringPageUrl: {
type: String,
default: null
@@ -53,6 +46,7 @@
},
data () {
return {
watchlist: [],
teasers: {},
total: 0,
loading: false,
@@ -94,6 +88,7 @@
});
},
mounted () {
this.watchlist = this.$store.state.watchlist;
Vue.nextTick(() => {
this.loadList();
})
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+3 -6
View File
@@ -17,10 +17,6 @@
type: String,
required: true
},
watchlist: {
type: Array,
required: true
},
layout: {
type: String,
default: 'toggle'
@@ -28,12 +24,13 @@
},
methods: {
toggleWatchlist () {
EventBus.$emit('watchlistToggle', this.uid);
this.$store.commit('watchlistToggle', this.uid);
EventBus.$emit('watchlistToggle');
}
},
computed: {
onWatchlist () {
return this.watchlist.indexOf(this.uid) !== -1;
return this.$store.getters.onWatchlist(this.uid);
}
}
}
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+1 -1
View File
@@ -1,6 +1,6 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './_store';
import store from './../_store';
Vue.use(VueRouter);
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+1 -1
View File
@@ -43,7 +43,7 @@
</template>
<script>
import store from '../_store'
import store from '../../_store'
import router from '../_router'
import EventBus from '../../_bus'
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js
+2 -2
View File
@@ -14,7 +14,7 @@ export default {
}
});
return client.get('/api/teamers/' + rootState.teamerId)
return client.get('/api/teamers/' + rootState.memberId)
.then((response) => {
commit('loadingFinish', null, { root: true });
return response.data;
@@ -38,7 +38,7 @@ export default {
}
});
return client.put('/api/teamers/' + rootState.teamerId, data)
return client.put('/api/teamers/' + rootState.memberId, data)
.then(() => {
commit('loadingFinish', null, { root: true });
commit('alert', {
web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+2 -2
View File
@@ -1,9 +1,9 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="ep-contactnav">
<a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
v-show="watchlistCount > 0" v-cloak rel="nofollow">
v-show="$store.getters.watchlistCount > 0" v-cloak rel="nofollow">
<span class="fa fa-list" aria-hidden="true"></span>
<div>Merkliste ({{ watchlistCount }})</div>
<div>Merkliste ({{ $store.getters.watchlistCount }})</div>
</a>
<a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung" rel="nofollow">
<span class="fa fa-phone" aria-hidden="true"></span>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+1 -3
View File
@@ -18,7 +18,6 @@
argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
:hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
:fb-pixel-data="{ productUid: <f:format.raw>{product.busProId}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
:watchlist="watchlist"
:daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
inline-template>
<article>
@@ -78,8 +77,7 @@
</div>
<div class="col-xs-12">
<p>
<watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
layout="link"></watchlist-toggle>
<watchlist-toggle uid="{hotel.uid}:{product.uid}" layout="link"></watchlist-toggle>
</p>
</div>
</div>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
-1
View File
@@ -6,7 +6,6 @@
<f:section name="Main">
<hotel-list
:watchlist="watchlist"
referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
inline-template>
<article>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+1 -3
View File
@@ -13,7 +13,6 @@
referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
:date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
:watchlist="watchlist"
inline-template>
<div class="searchresult-wrapper">
<div class="pagehead pagehead--searchresult">
@@ -303,8 +302,7 @@
:key="item.key"
:item="item"
:section="section"
:referring-page="referringPage"
:watchlist="watchlist"></search-result-item>
:referring-page="referringPage"></search-result-item>
</div>
</template>
</div>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
+1 -2
View File
@@ -6,8 +6,7 @@
<f:section name="Main">
<watchlist :watchlist="watchlist"
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
<watchlist loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
watchlist-uri="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: settings.defaultAjaxUid)}"></watchlist>
</f:section>