reorderd code

This commit is contained in:
Sebastian Frank 2017-08-24 13:23:03 +02:00
parent 8626a47e2e
commit 931c142e16
No known key found for this signature in database
GPG Key ID: DC2BC5C506EBF6F3
8 changed files with 93 additions and 65 deletions

18
conf/init.json Normal file
View File

@ -0,0 +1,18 @@
{
"baseURL": "https://cx20.basispanel.de/api/v1/",
"APItargets": {
"login": "login"
},
"navigation": [
{
"name": "Dashboard",
"to": "/",
"icon": "fa-home"
},
{
"name": "Userlist",
"to": "/userlist",
"icon": "fa-news"
}
]
}

View File

@ -1,12 +0,0 @@
[
{
"name": "Dashboard",
"to": "/",
"icon": "fa-home"
},
{
"name": "Userlist",
"to": "/userlist",
"icon": "fa-news"
}
]

View File

@ -14,10 +14,7 @@
</head>
<body>
<div id="vue-app">
<navigation src="conf/navigation.json"></navigation>
<transition name="component-fade" mode="out-in">
<router-view></router-view>
</transition>
<app :navigation-items="navItems"></app>
</div>
<script src="build/app.js"></script>
</body>

35
src/app.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="App">
<h1>MyApp</h1>
<navigation :items="navigationItems"></navigation>
<transition name="component-fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import Navigation from './components/navigation.vue';
export default {
name: "App",
components: {
Navigation
},
props: {
navigationItems: {
type: Array,
default() {
return [ ];
}
}
},
data() {
return {
}
},
created() {
}
}
</script>

View File

@ -21,11 +21,15 @@ export default {
props: {
columns: {
type: Array,
default: [ ]
default() {
return [ ];
}
},
rows: {
type: Array,
default: [ ]
default() {
return [ ];
}
}
},
data() {

View File

@ -1,7 +1,7 @@
<template>
<div class="Navigation">
<ul>
<li v-for="(e, i) in navItems" :key="i">
<li v-for="(e, i) in items" :key="i">
<router-link :to="e.to">{{ e.name }}</router-link>
</li>
</ul>
@ -9,42 +9,15 @@
</template>
<script>
import Axios from 'axios';
export default {
name: "Navigation",
props: [
'src',
'items'
],
data() {
return {
navItems: []
props: {
items: {
type: Array,
default() {
return [ ];
}
}
},
mounted() {
if (this.items) {
this.navItems = this.items;
return;
}
// only load if no items are given
Axios.get(this.src)
.then(results => {
if ( !Array.isArray(results.data) ) {
alert('invalid data in: ' + this.src);
return;
}
this.navItems = results.data;
})
.catch(error => {
alert('error loading ' + this.src + ': ' + error.message);
});
}
}
</script>
<style scoped>
.Navigation li a {
color: orange;
}
</style>
</script>

View File

@ -41,7 +41,6 @@ export default {
methods: {
add() {
this.rows.push({'prop1': 'test'});
this.$store.commit('increment');
}
}
}

View File

@ -1,23 +1,19 @@
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Navigation from './components/navigation.vue';
import Axios from 'axios';
import App from './app.vue';
import Dashboard from './components/dashboard.vue';
import Userlist from './components/userlist.vue';
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
@ -39,10 +35,28 @@ const router = new VueRouter({
new Vue({
el: '#vue-app',
components: {
Navigation
App
},
store,
router,
data: {
navItems: [ ]
},
router,
store,
created() {
// load init
Axios.get('conf/init.json')
.then(results => {
if ( !Array.isArray(results.data.navigation) ) {
alert('invalid data in: ' + this.src);
return;
}
// add routes
this.navItems = results.data.navigation;
})
.catch(error => {
alert('error loading ' + this.src + ': ' + error.message);
});
}
});