reorderd code
This commit is contained in:
parent
8626a47e2e
commit
931c142e16
18
conf/init.json
Normal file
18
conf/init.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
@ -1,12 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "Dashboard",
|
||||
"to": "/",
|
||||
"icon": "fa-home"
|
||||
},
|
||||
{
|
||||
"name": "Userlist",
|
||||
"to": "/userlist",
|
||||
"icon": "fa-news"
|
||||
}
|
||||
]
|
@ -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
35
src/app.vue
Normal 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>
|
@ -21,11 +21,15 @@ export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: [ ]
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
default: [ ]
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
@ -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>
|
@ -41,7 +41,6 @@ export default {
|
||||
methods: {
|
||||
add() {
|
||||
this.rows.push({'prop1': 'test'});
|
||||
this.$store.commit('increment');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
36
src/main.js
36
src/main.js
@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
Loading…
Reference in New Issue
Block a user