From 31c7272893d92ab08f76d80a827a8a552356f0fb Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Thu, 5 Dec 2019 23:27:24 +0100
Subject: [PATCH] add some views and routes

---
 src/components/Navbar.vue | 14 +++++++-------
 src/router.js             |  7 ++++++-
 src/store/index.js        | 13 +++++++++++--
 src/views/Boxes.vue       | 13 +++++++++++++
 src/views/Error.vue       | 13 +++++++++++++
 src/views/Items.vue       |  3 ---
 6 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 src/views/Boxes.vue
 create mode 100644 src/views/Error.vue

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1766607..3d7c584 100644
--- a/src/components/Navbar.vue
+++ b/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">
-                            <a class="nav-link text-nowrap" :href="link.path">{{ link.title }}</a>
+                        <li class="" v-for="(link, index) in views" v-bind:key="index" :class="{ active: link.path === getActiveView }">
+                            <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':'boxes','path':'/boxes/'},
+      {'title':'items','path':'items'},
+      {'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'])
   }
 };
diff --git a/src/router.js b/src/router.js
index afea72d..9bed565 100644
--- a/src/router.js
+++ b/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({
diff --git a/src/store/index.js b/src/store/index.js
index 4a552a4..536063d 100644
--- a/src/store/index.js
+++ b/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');
\ No newline at end of file
+store.dispatch('loadEvents');
+store.dispatch('loadEventItems');
\ No newline at end of file
diff --git a/src/views/Boxes.vue b/src/views/Boxes.vue
new file mode 100644
index 0000000..8ca29d9
--- /dev/null
+++ b/src/views/Boxes.vue
@@ -0,0 +1,13 @@
+<template>
+    <p>boxes</p>
+</template>
+
+<script>
+export default {
+  name: 'Boxes',
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Error.vue b/src/views/Error.vue
new file mode 100644
index 0000000..4293516
--- /dev/null
+++ b/src/views/Error.vue
@@ -0,0 +1,13 @@
+<template>
+    <p>Error</p>
+</template>
+
+<script>
+export default {
+  name: 'Boxes',
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Items.vue b/src/views/Items.vue
index fea016c..cc90acf 100644
--- a/src/views/Items.vue
+++ b/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>