|
|
<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"> <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> </div> <div> <span> <a href="https://www.netcup.de" target="_blank"><img src="/static/netcup-setA-234x60.png" width="234" height="60" alt="netcup.de" /></a> </span> </div> </footer> </div> </template>
<script> import Mensen from '@/lib/Mensen.js' export default { name: 'app', data () { return { menu: {}, mensen: Mensen, days: [1, 2, 3, 4, 5, 6], dayOfWeek: { 1: 'Montag', 2: 'Dienstag', 3: 'Mittwoch', 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-- }, nextDay () { this.when === 6 ? this.when = 1 : this.when++ } }, filters: { noBreak (value) { return value.replace(/\s/g, '\u00a0') } }, computed: { today () { return '' + new Date().getDay() } }, created () { this.where = window.localStorage.getItem('where') || 'zentralmensa' let vm = this document.onkeydown = (evt) => { evt = evt || window.event switch (evt.keyCode) { case 37: vm.previousDay() break case 39: vm.nextDay() break } } } } </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>
|