add some views and routes

This commit is contained in:
j3d1 2019-12-05 23:27:24 +01:00
parent c6c98d6aa0
commit 31c7272893
6 changed files with 50 additions and 13 deletions

View file

@ -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'])
}
};

View file

@ -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({

View file

@ -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(),
@ -61,3 +69,4 @@ const store = new Vuex.Store({
export default store;
store.dispatch('loadEvents');
store.dispatch('loadEventItems');

13
src/views/Boxes.vue Normal file
View file

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

13
src/views/Error.vue Normal file
View file

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

View file

@ -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>