Browse Source

Use vuex state store

vuex
Schneider 5 years ago
parent
commit
9f0466822a
  1. 36
      src/App.vue
  2. 51
      src/components/Mensa.vue
  3. 61
      src/store/index.js

36
src/App.vue

@ -40,20 +40,10 @@ export default {
4: 'Donnerstag',
5: 'Freitag',
6: 'Samstag'
},
where: 'zentralmensa',
when: '' + (new Date().getDay() || 1)
}
}
},
watch: {
'where': 'updateRoute',
'when': 'updateRoute'
},
methods: {
updateRoute () {
this.$router.push(`/${this.where}/${this.when}`)
window.localStorage.setItem('where', this.where)
},
previousDay () {
this.when === 1 ? this.when = 6 : this.when--
},
@ -67,12 +57,30 @@ export default {
}
},
computed: {
today () {
return '' + new Date().getDay()
where: {
get () {
return this.$store.state.where
},
set (value) {
this.$store.dispatch('loadMeals', {
when: this.when,
where: value
})
}
},
when: {
get () {
return this.$store.state.when
},
set (value) {
this.$store.dispatch('loadMeals', {
when: value,
where: this.where
})
}
}
},
created () {
this.where = window.localStorage.getItem('where') || 'zentralmensa'
let vm = this
document.onkeydown = (evt) => {
evt = evt || window.event

51
src/components/Mensa.vue

@ -9,52 +9,15 @@
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'mensa',
data () {
return {
meals: [],
date: '',
days: [1, 2, 3, 4, 5, 6],
dayOfWeek: {
1: 'Montag',
2: 'Dienstag',
3: 'Mittwoch',
4: 'Donnerstag',
5: 'Freitag',
6: 'Samstag'
}
}
},
watch: {
'$route': function () {
if (!this.$route.fullPath.endsWith('/')) {
this.$router.replace(this.$route.fullPath + '/')
}
if (!this.$route.params.tag) {
let day = (new Date().getDay() || 1)
if (new Date().getHours() > 15) {
// show next day
++day
}
this.$router.push('' + day)
}
this.loadMeals()
}
},
methods: {
loadMeals () {
fetch(`/static/${this.$route.params.mensa}.${this.$route.params.tag}.json`)
.then(res => res.json())
.then(menu => {
this.meals = menu.meals
this.date = menu.date
})
}
},
created () {
this.$router.replace(`/zentralmensa/${new Date().getDay() || 1}`)
this.loadMeals()
computed:{
...mapGetters({
meals: 'getMeals',
date: 'getDate'
})
}
}
</script>

61
src/store/index.js

@ -5,9 +5,66 @@ Vue.use(Vuex)
const state = {
where: 'zentralmensa',
day: new Date().getDay() || 1
when: new Date().getDay() || 1,
meals: {},
date: ''
}
const mutations = {
updateWhere(state, where) {
state.where = where
},
updateWhen(state, when) {
state.when = when
},
updateMeals(state, meals) {
state.meals = meals
},
updateDate(state, date) {
state.date = date
}
}
const actions = {
/**
* Loads the meals of the desired day and mensa
* @param {Object} payload The payload for this action
* @param {string} payload.where The desired Mensa
* @param {number} payload.when The desired day
*/
loadMeals({ commit, state }, payload) {
commit('updateWhere', payload.where)
commit('updateWhen', payload.when)
fetch(`/static/${state.where}.${state.when}.json`)
.then(res => res.json())
.then(menu => {
commit('updateMeals', menu.meals)
commit('updateDate', menu.date)
})
}
}
const getters = {
getWhere(state) {
return state.where
},
getWhen(state) {
return state.when
},
getMeals(state) {
return state.meals
},
getDate(state) {
return state.date
}
}
export default new Vuex.Store({
state
state,
mutations,
actions,
getters
})
Loading…
Cancel
Save