Use data from main website

.gitignore

@@ -4,5 +4,4 @@ dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-static/*heute.json
-static/*morgen.json
+static/*mensa*.json

src/App.vue

@@ -3,9 +3,7 @@
     <h1>Essen in Göttingen</h1>
 
     <nav>
-      <router-link to="/zentralmensa/heute">Zentralmensa</router-link>
-      <router-link to="/turmmensa/heute">Mensa Am Turm</router-link>
-      <router-link to="/nordmensa/heute">Nordmensa</router-link>
+      <router-link v-for="mensa in mensen" :to="'/' + mensa.url + '/'">{{mensa.name | noBreak}}</router-link>
     </nav>
     <router-view></router-view>
 
@@ -18,17 +16,30 @@
 </template>
 
 <script>
+import Mensen from '@/lib/Mensen.js'
 export default {
   name: 'app',
   data () {
     return {
-      menu: {}
+      menu: {},
+      mensen: Mensen
+    }
+  },
+  filters: {
+    noBreak (value) {
+      return value.replace(/\s/g, '\u00a0')
+    }
+  },
+  computed: {
+    today () {
+      return '' + new Date().getDay()
     }
   }
 }
 </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;
@@ -43,4 +54,14 @@ export default {
 footer{
   margin: 1em 0;
 }
+nav>a{
+  margin: 0.3em;
+  wrap: no-wrap;
+}
+.router-link-active:before{
+  content: '>';
+}
+.router-link-active:after{
+  content: '<';
+}
 </style>

src/assets/links.css

@@ -0,0 +1,15 @@
+/* mrmrs.io/links */
+a {
+  transition: color .4s;
+  color: #265C83;
+}
+
+a:link,
+a:visited { color: #265C83; }
+a:hover   { color: #7FDBFF; }
+a:active  {
+  transition: color .3s;
+  color: #007BE6;
+}
+
+.link { text-decoration: none; }

src/components/Mensa.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="hello">
-    <router-link :to="'/' + $route.params.mensa + '/heute'">Heute</router-link>
-    <router-link :to="'/' + $route.params.mensa + '/morgen'">Morgen</router-link>
-    <router-link :to="'/' + $route.params.mensa + '/uebermorgen'">Übermorgen</router-link>
+    <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>
 </template>
@@ -12,11 +12,33 @@ export default {
   name: 'mensa',
   data () {
     return {
+      days: [1, 2, 3, 4, 5, 6],
+      dayOfWeek: {
+        1: 'Montag',
+        2: 'Dienstag',
+        3: 'Mittwoch',
+        4: 'Donnerstag',
+        5: 'Freitag',
+        6: 'Samstag'
+      }
     }
   },
-  created () {
+  watch: {
+    '$route': function () {
+      if (!this.$route.fullPath.endsWith('/')) {
+        this.$router.replace(this.$route.fullPath + '/')
+      }
+      if (!this.$route.params.tag) {
+        this.$router.push('' + new Date().getDay())
+      }
+    }
+  },
+  mounted () {
+    if (!this.$route.fullPath.endsWith('/')) {
+      this.$router.replace(this.$route.fullPath + '/')
+    }
     if (!this.$route.params.tag) {
-      this.$router.replace(`heute`)
+      this.$router.push('' + new Date().getDay())
     }
   }
 }

src/lib/Mensen.js

@@ -1,22 +1,22 @@
 export default {
   nordmensa: {
     name: 'Nordmensa',
-    url: name
+    url: 'nordmensa'
   },
   zentralmensa: {
     name: 'Zentralmensa',
-    url: name
+    url: 'zentralmensa'
   },
   turmmensa: {
     name: 'Mensa am Turm',
-    url: 'Mensa%20am%20Turm'
+    url: 'turmmensa'
   },
   mensaItalia: {
     name: 'Mensa Italia',
-    url: 'Mensa%20Italia'
+    url: 'mensaitalia'
   },
   bistroHAWK: {
     name: 'Bistro HAWK',
-    url: 'Bistro%20HAWK'
+    url: 'bistrohawk'
   }
 }