add some views and routes

src/components/Navbar.vue

@@ -39,11 +39,11 @@
                 <li class="nav-item dropdown">
                     <button class="btn nav-link dropdown-toggle" type="button" id="dropdownMenuButton"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        {{ views[0].title }}
+                        {{getActiveView}}
                     </button>
                     <ul class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
-                        <li class="" v-for="(link, index) in views" v-bind:key="index">
+                        <li class="" v-for="(link, index) in views" v-bind:key="index" :class="{ active: link.path === getActiveView }">
-                            <a class="nav-link text-nowrap" :href="link.path">{{ link.title }}</a>
+                            <a class="nav-link text-nowrap" href="#" @click="changeView(link)">{{ link.title }}</a>
                         </li>
                     </ul>
                 </li>
@@ -65,8 +65,8 @@ export default {
   name: 'Navbar',
   data: () => ({
     views: [
-      {'title':'items','path':'/items/'},
+      {'title':'items','path':'items'},
-      {'title':'boxes','path':'/boxes/'},
+      {'title':'boxes','path':'boxes'},
       {'title':'mass-edit','path':'/#'},
     ],
     links: [
@@ -79,10 +79,10 @@ export default {
   }),
   computed: {
     ...mapState(['events', 'activeEvent', 'layout']),
-      ...mapGetters(['getEventSlug']),
+    ...mapGetters(['getEventSlug', 'getActiveView']),
   },
   methods: {
-    ...mapActions(['changeEvent']),
+    ...mapActions(['changeEvent', 'changeView']),
     ...mapMutations(['setLayout'])
   }
 };

src/router.js

@@ -1,4 +1,6 @@
 import Items from './views/Items';
+import Boxes from './views/Boxes';
+import Error from './views/Error';
 import VueRouter from 'vue-router';
 import Vue from 'vue';
 
@@ -7,7 +9,10 @@ import Vue from 'vue';
 Vue.use(VueRouter);
 
 const routes = [
-  { path: '/:event', component: Items},
+  { path: '/', redirect: '/items/36C3' },
+  { path: '/boxes/:event', component: Boxes},
+  { path: '/items/:event', component: Items},
+  { path: '*', component: Error},
 ];
 
 const router = new VueRouter({

src/store/index.js

@@ -14,9 +14,11 @@ const store = new Vuex.Store({
     events: Array,
     layout: 'cards',
     loadedItems: Array,
+    currentview: 'items',
   },
   getters: {
     getEventSlug: state => state.route.params.event,
+    getActiveView: state => state.currentview,
   },
   mutations: {
     replaceEvents(state, events) {
@@ -25,7 +27,10 @@ const store = new Vuex.Store({
       //  state.activeEvent = _.reverse(events)[0];
     },
     changeEvent(state, event) {
-      router.push({path: `/${event.slug}`});
+      router.push({path: `/${state.currentview}/${event.slug}`});
+    },
+    changeView(state, link) {
+      router.push({path: `/${link.path}/${state.route.params.event}`});
     },
     replaceLoadedItems(state, newItems) {
       state.loadedItems = newItems;
@@ -46,6 +51,9 @@ const store = new Vuex.Store({
       commit('changeEvent', eventName);
       dispatch('loadEventItems', eventName);
     },
+    changeView({ commit }, link) {
+      commit('changeView', link);
+    },
     async loadEventItems({ commit, state }) {
       const resp = await axios.get(`https://c3lf.de/api/1/${state.route.params.event}/items`,  {
         auth: getAuth(),
@@ -60,4 +68,5 @@ const store = new Vuex.Store({
 
 export default store;
 
-store.dispatch('loadEvents');
+store.dispatch('loadEvents');
+store.dispatch('loadEventItems');

src/views/Boxes.vue

@@ -0,0 +1,13 @@
+<template>
+    <p>boxes</p>
+</template>
+
+<script>
+export default {
+  name: 'Boxes',
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/Error.vue

@@ -0,0 +1,13 @@
+<template>
+    <p>Error</p>
+</template>
+
+<script>
+export default {
+  name: 'Boxes',
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/Items.vue

@@ -36,9 +36,6 @@ import { mapState } from 'vuex';
 export default {
   name: 'Items',
   components: { Table, Cards },
-  created() {
-    console.log(this.$route.params.event);
-  },
   computed: mapState(['loadedItems', 'layout']),
 };
 </script>