Speiseplan der Mensen der Georg-August-Universität Göttingen
https://mensa.schneider-hosting.de
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.2 KiB
147 lines
3.2 KiB
<template>
|
|
<div id="app">
|
|
<h1>Essen in Göttingen</h1>
|
|
|
|
Wo? <select v-model="where">
|
|
<option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option>
|
|
</select>
|
|
|
|
Wann? <select v-model="when" id="selWhen">
|
|
<option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option>
|
|
</select>
|
|
<router-view></router-view>
|
|
|
|
<footer>
|
|
<hr>
|
|
<div>
|
|
<span>
|
|
Developed by <a href="https://webschneider.org">webschneider.org</a>
|
|
© {{ new Date().getFullYear() }}
|
|
</span>
|
|
<span><a href="https://webschneider.org/impress">Impressum</a></span><br>
|
|
<span>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com">www.flaticon.com</a></span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Mensen from '@/lib/Mensen.js'
|
|
export default {
|
|
name: 'app',
|
|
data() {
|
|
return {
|
|
selWhen: {},
|
|
mensen: Mensen,
|
|
days: [1, 2, 3, 4, 5, 6],
|
|
dayOfWeek: {
|
|
1: 'Montag',
|
|
2: 'Dienstag',
|
|
3: 'Mittwoch',
|
|
4: 'Donnerstag',
|
|
5: 'Freitag',
|
|
6: 'Samstag'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
previousDay() {
|
|
this.when === 1 ? (this.when = 6) : this.when--
|
|
},
|
|
nextDay() {
|
|
this.when === 6 ? (this.when = 1) : this.when++
|
|
}
|
|
},
|
|
filters: {
|
|
noBreak(value) {
|
|
return value.replace(/\s/g, '\u00a0')
|
|
}
|
|
},
|
|
computed: {
|
|
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.$store.dispatch('loadMeals', {
|
|
when: this.when,
|
|
where: this.where
|
|
})
|
|
let vm = this
|
|
document.onkeydown = evt => {
|
|
evt = evt || window.event
|
|
switch (evt.keyCode) {
|
|
case 37:
|
|
if (vm.selWhen !== document.activeElement) {
|
|
// increment only if selection is not focused, avoid double execution
|
|
vm.previousDay()
|
|
}
|
|
break
|
|
case 39:
|
|
if (vm.selWhen !== document.activeElement) {
|
|
// increment only if selection is not focused, avoid double execution
|
|
vm.nextDay()
|
|
break
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.selWhen = document.getElementById('selWhen')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style src="./assets/base.css">
|
|
</style>
|
|
<style src="./assets/links.css">
|
|
</style>
|
|
<style>
|
|
#app {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
font-size: 16px;
|
|
max-width: 30em;
|
|
margin: 0 auto;
|
|
}
|
|
footer {
|
|
margin: 1em 0;
|
|
}
|
|
footer > div {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
nav > a {
|
|
margin: 0.3em;
|
|
wrap: no-wrap;
|
|
}
|
|
.router-link-active:before {
|
|
content: '>';
|
|
}
|
|
.router-link-active:after {
|
|
content: '<';
|
|
}
|
|
</style>
|