|
|
<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> <v-touch v-on:swipeleft="nextDay" v-on:swiperight="previousDay" v-bind:swipe-options="{ direction: 'horizontal' }"> <router-view></router-view> </v-touch>
<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>
|