Use single component architecture

Mensa and day are passed as two params to a single component

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 static/*mensa*.json
+static/*bistro*.json

src/App.vue

@@ -2,15 +2,22 @@
   <div id="app">
     <h1>Essen in Göttingen</h1>
 
-    <nav>
-      <router-link v-for="mensa in mensen" :to="'/' + mensa.url + '/'">{{mensa.name | noBreak}}</router-link>
-    </nav>
+    Wo? <select v-model="where" @click="updateRoute">
+      <option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option>
+    </select>
+
+    Wann? <select v-model="when" @click="updateRoute">
+      <option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option>
+    </select>
     <router-view></router-view>
 
     <footer>
       <hr>
-      Developed by <a href="https://webschneider.org">webschneider.org</a>
-      &copy; {{ new Date().getFullYear() }}
+      <span>
+        Developed by <a href="https://webschneider.org">webschneider.org</a>
+        &copy; {{ new Date().getFullYear() }}
+      </span>
+      <span><a href="https://webschneider.org/impress">Impressum</a></span>
     </footer>
   </div>
 </template>
@@ -22,7 +29,23 @@ export default {
   data () {
     return {
       menu: {},
-      mensen: Mensen
+      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()
+    }
+  },
+  methods: {
+    updateRoute () {
+      this.$router.push(`/${this.where}/${this.when}`)
     }
   },
   filters: {

src/components/Mensa.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="hello">
-    <nav>
-      <router-link v-for="day in days" :to="'/' + $route.params.mensa + '/' + day" :key="day">{{dayOfWeek[day]}}</router-link>
-    </nav>
-    <router-view></router-view>
+      <div class="meal" v-for="meal in meals">
+        <h3>{{meal.category}}</h3>
+        <p>{{meal.title}}</p>
+      </div>
   </div>
 </template>
 
@@ -12,6 +12,7 @@ export default {
   name: 'mensa',
   data () {
     return {
+      meals: [],
       days: [1, 2, 3, 4, 5, 6],
       dayOfWeek: {
         1: 'Montag',
@@ -31,17 +32,33 @@ export default {
       if (!this.$route.params.tag) {
         this.$router.push('' + new Date().getDay())
       }
+      this.loadMeals()
     }
   },
-  mounted () {
-    if (!this.$route.fullPath.endsWith('/')) {
-      this.$router.replace(this.$route.fullPath + '/')
-    }
-    if (!this.$route.params.tag) {
-      this.$router.push('' + new Date().getDay())
+  methods: {
+    loadMeals () {
+      fetch(`/static/${this.$route.params.mensa}.${this.$route.params.tag}.json`)
+      .then(res => res.json())
+      .then(menu => { this.meals = menu.meals })
     }
+  },
+  created () {
+    this.$router.replace(`/zentralmensa/${new Date().getDay()}`)
+    this.loadMeals()
   }
 }
 </script>
+<style>
+.meal{
+  margin: 2em 0;
+}
+
+.meal>h3{
+  margin-bottom:0em;
+}
+
+.meal>p{
+  margin-top: 0.4em;
+}
 
-<style></style>
+</style>

src/lib/Mensen.js

@@ -1,8 +1,4 @@
 export default {
-  nordmensa: {
-    name: 'Nordmensa',
-    url: 'nordmensa'
-  },
   zentralmensa: {
     name: 'Zentralmensa',
     url: 'zentralmensa'
@@ -11,6 +7,10 @@ export default {
     name: 'Mensa am Turm',
     url: 'turmmensa'
   },
+  nordmensa: {
+    name: 'Nordmensa',
+    url: 'nordmensa'
+  },
   mensaItalia: {
     name: 'Mensa Italia',
     url: 'mensaitalia'

src/router/index.js

@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Hello from '@/components/Hello'
 import Mensa from '@/components/Mensa'
-import Tag from '@/components/Tag'
 
 Vue.use(Router)
 
@@ -11,18 +9,12 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Hello',
-      component: Hello
+      name: 'Mensa',
+      component: Mensa
     },
     {
-      path: '/:mensa',
-      name: 'Mensa',
-      component: Mensa,
-      props: {name: 'info'},
-      children: [{
-        path: ':tag',
-        component: Tag
-      }]
+      path: '/:mensa/:tag',
+      component: Mensa
     }
   ]
 })