From a2a50c9e76fafe1a05698a3f54c46eb655c52a29 Mon Sep 17 00:00:00 2001 From: David Carlos Date: Aug 08 2017 23:11:00 +0000 Subject: Initial structure of the kiskadee frontend. --- diff --git a/index.html b/index.html index df8b38d..111218a 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,10 @@ - - - - kiskadee_ui - - -
- - - + + + +
+ +
+ +
+ diff --git a/package.json b/package.json index c428e42..67a7f7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kiskadee_ui", - "version": "1.0.0", + "version": "0.0.1", "description": "A frontend to consume the kiskadee api.", "author": "David Carlos ", "private": true, @@ -14,27 +14,32 @@ }, "dependencies": { "vue": "^2.3.3", - "vue-router": "^2.6.0" + "vue-material": "^0.7.4", + "vue-router": "^2.6.0", + "vue-table-component": "^1.3.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^7.1.1", "babel-loader": "^7.1.1", + "babel-plugin-istanbul": "^4.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", + "chai": "^3.5.0", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", + "cross-env": "^5.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "eslint": "^3.19.0", + "eslint-config-standard": "^6.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^3.0.0", - "eslint-config-standard": "^6.2.1", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "eventsource-polyfill": "^0.9.6", @@ -44,8 +49,7 @@ "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", - "webpack-bundle-analyzer": "^2.2.1", - "cross-env": "^5.0.1", + "inject-loader": "^3.0.0", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", @@ -57,23 +61,22 @@ "karma-webpack": "^2.0.2", "lolex": "^1.5.2", "mocha": "^3.2.0", - "chai": "^3.5.0", - "sinon": "^2.1.0", - "sinon-chai": "^2.8.0", - "inject-loader": "^3.0.0", - "babel-plugin-istanbul": "^4.1.1", - "phantomjs-prebuilt": "^2.1.14", - "semver": "^5.3.0", - "shelljs": "^0.7.6", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", + "phantomjs-prebuilt": "^2.1.14", "rimraf": "^2.6.0", + "semver": "^5.3.0", + "shelljs": "^0.7.6", + "sinon": "^2.1.0", + "sinon-chai": "^2.8.0", "url-loader": "^0.5.8", "vue-loader": "^12.1.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.3.3", + "vuetable-2": "^1.6.5", "webpack": "^2.6.1", + "webpack-bundle-analyzer": "^2.2.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" diff --git a/src/App.vue b/src/App.vue index 97c2c84..e9bd7e8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,23 +1,31 @@ +import Vue from 'vue' +var VueMaterial = require('vue-material') +require('vue-material/dist/vue-material.css') +Vue.use(VueMaterial) - +export default({ + el: '#app' +}) + diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..c869f1c --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,56 @@ + + + + + + diff --git a/src/components/List.vue b/src/components/List.vue new file mode 100644 index 0000000..5b91765 --- /dev/null +++ b/src/components/List.vue @@ -0,0 +1,51 @@ + + + + + + + diff --git a/src/main.js b/src/main.js index ec10971..748dcac 100644 --- a/src/main.js +++ b/src/main.js @@ -2,14 +2,45 @@ // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' -import router from './router' +import Header from './components/Header' +import List from './components/List' -Vue.config.productionTip = false +import DataTables from 'vue-data-tables' +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-default/index.css' + +Vue.use(ElementUI) +Vue.use(DataTables) +var VueMaterial = require('vue-material') +Vue.use(VueMaterial) + +Vue.material.registerTheme('default', { + primary: { + color: 'teal', + hue: '500' + }, + accent: 'black', + warn: 'black', + background: 'black' +}) +Vue.config.productionTip = false /* eslint-disable no-new */ + new Vue({ el: '#app', - router, template: '', components: { App } }) + +new Vue({ + el: '#header', + template: '
', + components: { Header } +}) + +new Vue({ + el: '#list', + template: '', + components: { List } +})