panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

reorderd code

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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"
}
]
}

12
conf/navigation.json
View File

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

5
index.html
View File

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

8
src/components/my-table.vue
View File

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

43
src/components/navigation.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="Navigation"> <div class="Navigation">
<ul> <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> <router-link :to="e.to">{{ e.name }}</router-link>
</li> </li>
</ul> </ul>
@ -9,42 +9,15 @@
</template> </template>
<script> <script>
import Axios from 'axios';
export default { export default {
name: "Navigation", name: "Navigation",
props: [ props: {
'src', items: {
'items' type: Array,
], default() {
data() { return [ ];
return { }
navItems: []
} }
},
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> </script>
<style scoped>
.Navigation li a {
color: orange;
}
</style>

1
src/components/userlist.vue
View File

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

36
src/main.js
View File

@ -1,23 +1,19 @@
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import VueRouter from 'vue-router'; 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 Dashboard from './components/dashboard.vue';
import Userlist from './components/userlist.vue'; import Userlist from './components/userlist.vue';
Vue.use(Vuex);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
count: 0
}, },
mutations: { mutations: {
increment (state) {
state.count++
}
} }
}) })
@ -39,10 +35,28 @@ const router = new VueRouter({
new Vue({ new Vue({
el: '#vue-app', el: '#vue-app',
components: { components: {
Navigation App
}, },
store,
router,
data: { 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);
});
} }
}); });