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

Initial commit

Browse Source
This commit is contained in:
Sebastian Frank 2017-08-24 11:16:07 +02:00
commit a3cf644fb4
No known key found for this signature in database
GPG Key ID: DC2BC5C506EBF6F3
14 changed files with 7858 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc Normal file
View File

@ -0,0 +1,8 @@
{
"parser": "babel-eslint",
"rules": {
},
"plugins": [
"html"
]
}

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
*~
/tags
/node_modules
/build

16
.gitlab-ci.yml Normal file
View File

@ -0,0 +1,16 @@
cache:
paths:
- node_modules/
stages:
- build
# - test
before_script:
- git submodule update --init
- npm install
building_ui:
stage: build
script:
- npm run build

12
conf/navigation.json Normal file
View File

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

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
<style>
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="vue-app">
<navigation src="conf/navigation.json"></navigation>
<transition name="component-fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
<script src="build/app.js"></script>
</body>
</html>

5
jsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"include": [
"./src/**/*"
]
}

7481
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

40
package.json Normal file
View File

@ -0,0 +1,40 @@
{
"name": "basispanel-ui",
"version": "0.1.0",
"description": "JS UI for Basispanel Server Management",
"main": "index.js",
"scripts": {
"serve": "WEBPACK_ENV=dev webpack-dev-server --inline --hot --open",
"dev": "WEBPACK_ENV=dev webpack --progress --colors --watch",
"build": "WEBPACK_ENV=production webpack --colors"
},
"author": "Sebastian Frank",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.5",
"eslint": "^4.5.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.0",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.4",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"axios": "^0.16.2",
"vue": "^2.4.2",
"vue-router": "^2.7.0",
"vuex": "^2.3.1"
},
"babel": {
"presets": [
"es2015"
]
}
}

15
src/components/dashboard.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="Dashboard">
Dashboard
</div>
</template>
<script>
export default {
name: "Dashboard",
data() {
return {
}
}
}
</script>

36
src/components/my-table.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="My-Table">
<table>
<tr>
<th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
</tr>
<tr v-for="(r, ri) in rows" :key="ri">
<td v-for="(c, ci) in columns" :key="ci">
<span v-if="c.prop">{{ r[c.prop] }}</span>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'My-Table',
props: {
columns: {
type: Array,
default: [ ]
},
rows: {
type: Array,
default: [ ]
}
},
data() {
return {
}
}
}
</script>

50
src/components/navigation.vue Normal file
View File

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

48
src/components/userlist.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="Userlist">
<h1>Userlist</h1>
<my-table :columns="columns" :rows="rows"></my-table>
<button @click="add()">add</button>
</div>
</template>
<script>
import MyTable from './my-table.vue';
export default {
name: "Userlist",
components: {
MyTable
},
data() {
return {
columns: [
{
heading: 'col1',
prop: 'prop1'
},
{
heading: 'col2',
prop: 'prop2'
},
{
heading: 'col3',
prop: 'prop3'
},
],
rows: [
{prop1: 'r1p1', prop2: 'r1p2', prop3: 'r1p3'},
{prop1: 'r2p1', prop2: 'r2p2', prop3: 'r2p3'},
{prop1: 'r3p1', prop2: 'r3p2', prop3: 'r3p3'},
{prop1: 'r4p1', prop2: 'r4p2', prop3: 'r4p3'},
]
}
},
methods: {
add() {
this.rows.push({'prop1': 'test'});
this.$store.commit('increment');
}
}
}
</script>

48
src/main.js Normal file
View File

@ -0,0 +1,48 @@
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Navigation from './components/navigation.vue';
import Dashboard from './components/dashboard.vue';
import Userlist from './components/userlist.vue';
Vue.use(Vuex);
Vue.use(VueRouter);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
const routes = [
{
path: '/',
component: Dashboard
},
{
path: '/userlist',
component: Userlist
}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#vue-app',
components: {
Navigation
},
store,
router,
data: {
}
});

71
webpack.config.js Normal file
View File

@ -0,0 +1,71 @@
var webpack = require('webpack');
var path = require('path');
// Naming and path settings
var appName = 'app';
var entryPoint = './src/main.js';
var exportPath = path.resolve(__dirname, './build');
// Enviroment flag
var plugins = [];
var env = process.env.WEBPACK_ENV;
// Differ settings based on production flag
if (env === 'production') {
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins.push(new UglifyJsPlugin({
minimize: true,
sourceMap: true
}
));
plugins.push(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}
));
appName = appName + '.js';
} else {
appName = appName + '.js';
}
// Main Settings config
module.exports = {
entry: entryPoint,
devtool: 'source-map',
output: {
path: exportPath,
publicPath: '/build',
filename: appName
},
module: {
loaders: [
{
test: /\.(vue|js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins
};