mirror of
https://github.com/wahyd4/next-dashboard-ui.git
synced 2026-08-08 21:02:54 +10:00
add support for db summary monitoring
This commit is contained in:
@@ -23,7 +23,7 @@ module.exports = {
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
port: 3000,
|
||||
autoOpenBrowser: true,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '',
|
||||
|
||||
Generated
+96
-49
@@ -44,7 +44,7 @@
|
||||
"@babel/code-frame": "7.0.0-beta.36",
|
||||
"@babel/types": "7.0.0-beta.36",
|
||||
"babylon": "7.0.0-beta.36",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"babylon": {
|
||||
@@ -68,7 +68,7 @@
|
||||
"debug": "3.1.0",
|
||||
"globals": "11.3.0",
|
||||
"invariant": "2.2.2",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"babylon": {
|
||||
@@ -101,7 +101,7 @@
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"to-fast-properties": "2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -501,7 +501,7 @@
|
||||
"integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"async-each": {
|
||||
@@ -555,13 +555,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.15.3",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.15.3.tgz",
|
||||
"integrity": "sha1-LJ1jiy4ZGgjqHWzJiOrda6W9wFM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
|
||||
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
|
||||
"requires": {
|
||||
"follow-redirects": "1.0.0"
|
||||
"follow-redirects": "1.4.1",
|
||||
"is-buffer": "1.1.6"
|
||||
}
|
||||
},
|
||||
"babel-code-frame": {
|
||||
@@ -609,7 +608,7 @@
|
||||
"convert-source-map": "1.5.1",
|
||||
"debug": "2.6.9",
|
||||
"json5": "0.5.1",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4",
|
||||
"path-is-absolute": "1.0.1",
|
||||
"private": "0.1.8",
|
||||
@@ -658,7 +657,7 @@
|
||||
"babel-types": "6.26.0",
|
||||
"detect-indent": "4.0.0",
|
||||
"jsesc": "1.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"source-map": "0.5.7",
|
||||
"trim-right": "1.0.1"
|
||||
},
|
||||
@@ -714,7 +713,7 @@
|
||||
"babel-helper-function-name": "6.24.1",
|
||||
"babel-runtime": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-helper-explode-assignable-expression": {
|
||||
@@ -791,7 +790,7 @@
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-helper-remap-async-to-generator": {
|
||||
@@ -994,7 +993,7 @@
|
||||
"babel-template": "6.26.0",
|
||||
"babel-traverse": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-plugin-transform-es2015-classes": {
|
||||
@@ -1332,7 +1331,7 @@
|
||||
"babel-runtime": "6.26.0",
|
||||
"core-js": "2.5.3",
|
||||
"home-or-tmp": "2.0.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"mkdirp": "0.5.1",
|
||||
"source-map-support": "0.4.18"
|
||||
}
|
||||
@@ -1363,7 +1362,7 @@
|
||||
"babel-traverse": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"babylon": "6.18.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-traverse": {
|
||||
@@ -1380,7 +1379,7 @@
|
||||
"debug": "2.6.9",
|
||||
"globals": "9.18.0",
|
||||
"invariant": "2.2.2",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-types": {
|
||||
@@ -1391,7 +1390,7 @@
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"to-fast-properties": "1.0.3"
|
||||
}
|
||||
},
|
||||
@@ -2391,7 +2390,7 @@
|
||||
"integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"combine-source-map": {
|
||||
@@ -2608,7 +2607,7 @@
|
||||
"globby": "7.1.1",
|
||||
"is-glob": "4.0.0",
|
||||
"loader-utils": "0.2.17",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4",
|
||||
"p-limit": "1.2.0",
|
||||
"pify": "3.0.0",
|
||||
@@ -3787,7 +3786,7 @@
|
||||
"js-yaml": "3.10.0",
|
||||
"json-stable-stringify-without-jsonify": "1.0.1",
|
||||
"levn": "0.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4",
|
||||
"mkdirp": "0.5.1",
|
||||
"natural-compare": "1.4.0",
|
||||
@@ -4589,13 +4588,21 @@
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.0.0.tgz",
|
||||
"integrity": "sha1-jjQpjL0uF28lTv/sdaHHjMhJ/Tc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
|
||||
"integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
|
||||
"requires": {
|
||||
"debug": "2.6.9"
|
||||
"debug": "3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"font-awesome": {
|
||||
@@ -5861,7 +5868,7 @@
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "7.1.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4"
|
||||
}
|
||||
},
|
||||
@@ -6071,7 +6078,7 @@
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"request": "2.83.0"
|
||||
}
|
||||
},
|
||||
@@ -6145,7 +6152,7 @@
|
||||
"bluebird": "3.5.1",
|
||||
"html-minifier": "3.5.8",
|
||||
"loader-utils": "0.2.17",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"pretty-error": "2.1.1",
|
||||
"toposort": "1.0.6"
|
||||
},
|
||||
@@ -6239,7 +6246,7 @@
|
||||
"requires": {
|
||||
"http-proxy": "1.16.2",
|
||||
"is-glob": "3.1.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"micromatch": "2.3.11"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -6435,7 +6442,7 @@
|
||||
"cli-width": "2.2.0",
|
||||
"external-editor": "2.1.0",
|
||||
"figures": "2.0.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"mute-stream": "0.0.7",
|
||||
"run-async": "2.3.0",
|
||||
"rx": "4.1.0",
|
||||
@@ -6594,8 +6601,7 @@
|
||||
"is-buffer": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
|
||||
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
|
||||
"dev": true
|
||||
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
|
||||
},
|
||||
"is-builtin-module": {
|
||||
"version": "1.0.0",
|
||||
@@ -7096,7 +7102,7 @@
|
||||
"graceful-fs": "4.1.11",
|
||||
"http-proxy": "1.16.2",
|
||||
"isbinaryfile": "3.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"log4js": "2.5.2",
|
||||
"mime": "1.4.1",
|
||||
"minimatch": "3.0.4",
|
||||
@@ -7153,7 +7159,7 @@
|
||||
"integrity": "sha1-0jyjSAG9qYY60xjju0vUBisTrNI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"phantomjs-prebuilt": "2.1.16"
|
||||
}
|
||||
},
|
||||
@@ -7311,7 +7317,7 @@
|
||||
"integrity": "sha512-CZc+m2xZm51J8qSwdODeiiNeqh8CYkKEq6Rw8IkE4i/4yqf2cJhjQPsA6BtAV970ePRNhwEOXhy2U5xc5Jwh9Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"webpack-sources": "1.1.0"
|
||||
}
|
||||
},
|
||||
@@ -7480,9 +7486,9 @@
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.4",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
|
||||
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
|
||||
"version": "4.17.5",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
|
||||
"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
|
||||
},
|
||||
"lodash._arraycopy": {
|
||||
"version": "3.0.0",
|
||||
@@ -7736,6 +7742,16 @@
|
||||
"streamroller": "0.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": {
|
||||
"version": "0.15.3",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.15.3.tgz",
|
||||
"integrity": "sha1-LJ1jiy4ZGgjqHWzJiOrda6W9wFM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.0.0"
|
||||
}
|
||||
},
|
||||
"circular-json": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.1.tgz",
|
||||
@@ -7750,6 +7766,28 @@
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.0.0.tgz",
|
||||
"integrity": "sha1-jjQpjL0uF28lTv/sdaHHjMhJ/Tc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "2.6.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -8033,7 +8071,7 @@
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"debug": {
|
||||
@@ -8524,8 +8562,7 @@
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
},
|
||||
"mute-stream": {
|
||||
"version": "0.0.7",
|
||||
@@ -12119,7 +12156,7 @@
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"extend": "3.0.1",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"request": "2.83.0",
|
||||
"when": "3.7.8"
|
||||
}
|
||||
@@ -12251,7 +12288,7 @@
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "7.1.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"scss-tokenizer": "0.2.3",
|
||||
"yargs": "7.1.0"
|
||||
},
|
||||
@@ -13048,7 +13085,7 @@
|
||||
"ajv": "5.5.2",
|
||||
"ajv-keywords": "2.1.1",
|
||||
"chalk": "2.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"slice-ansi": "1.0.0",
|
||||
"string-width": "2.1.1"
|
||||
}
|
||||
@@ -13637,6 +13674,16 @@
|
||||
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
|
||||
"dev": true
|
||||
},
|
||||
"vuetrend": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vuetrend/-/vuetrend-0.3.2.tgz",
|
||||
"integrity": "sha512-nXza0yeoynEdrdV8RKStHA0KykPyVXNHjcQOqxc+5rW5051V3RMrsI9ob1+kiJM8azoww6t6XiC/+AS7aiqEew=="
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
|
||||
"integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",
|
||||
@@ -13849,7 +13896,7 @@
|
||||
"express": "4.16.2",
|
||||
"filesize": "3.5.11",
|
||||
"gzip-size": "4.1.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"mkdirp": "0.5.1",
|
||||
"opener": "1.4.3",
|
||||
"ws": "4.0.0"
|
||||
@@ -13927,7 +13974,7 @@
|
||||
"integrity": "sha512-geQsZ86YkXOVOjvPC5yv3JSNnL6/X3Kzh935AQ/gJNEYXEfJDQFu/sdFuktS9OW2JcH/SJec8TGfRdrpHshH7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"webpack-sources": {
|
||||
|
||||
@@ -17,15 +17,19 @@
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"bootstrap": "4.0.0",
|
||||
"bootstrap-vue": "2.0.0-rc.1",
|
||||
"chart.js": "2.7.1",
|
||||
"flag-icon-css": "2.9.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"lodash": "^4.17.5",
|
||||
"simple-line-icons": "^2.4.1",
|
||||
"vue": "2.5.13",
|
||||
"vue-chartjs": "3.1.0",
|
||||
"vue-router": "3.0.1"
|
||||
"vue-router": "3.0.1",
|
||||
"vuetrend": "^0.3.2",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.2.5",
|
||||
|
||||
@@ -240,19 +240,6 @@ export default {
|
||||
icon: 'icon-star'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Download CoreUI',
|
||||
url: 'http://coreui.io/vue/',
|
||||
icon: 'icon-cloud-download',
|
||||
class: 'mt-auto',
|
||||
variant: 'success'
|
||||
},
|
||||
{
|
||||
name: 'Try CoreUI PRO',
|
||||
url: 'http://coreui.io/pro/vue/',
|
||||
icon: 'icon-layers',
|
||||
variant: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
|
||||
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
<span class="ml-auto">Copyright</span>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="social-box">
|
||||
<p>
|
||||
{{name}} / {{table}} <br>
|
||||
<span v-if="field !== ''">
|
||||
{{field}} = {{value}}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart :data="summaryPoints" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>{{latestCount}}</strong>
|
||||
<span>Total</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>Today</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import SocialBoxChart from '../views/dashboard/SocialBoxChartExample.vue'
|
||||
import {BASE_URL} from '../vuex.js'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
name: 'Database',
|
||||
components: {
|
||||
SocialBoxChart
|
||||
},
|
||||
computed: {
|
||||
latestCount () {
|
||||
if (this.points.length !== 0) {
|
||||
return this.points[0].count
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
summaryPoints () {
|
||||
return _.map(this.points, (item) => {
|
||||
return item.count
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
points: []
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'table',
|
||||
'name',
|
||||
'field',
|
||||
'value'
|
||||
],
|
||||
methods: {
|
||||
fetchDatabaseSummary () {
|
||||
axios.get(BASE_URL + `/dashboard/db/${this.name}`).then((response) => {
|
||||
this.points = response.data
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setInterval(() => {
|
||||
this.fetchDatabaseSummary()
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.social-box p {
|
||||
background: #4875b4;
|
||||
height: 80px;
|
||||
padding-top: 25px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<b-card class="card-accent-primary" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</template>
|
||||
@@ -4,13 +4,14 @@ import Vue from 'vue'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
import store from './vuex.js'
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store: store,
|
||||
template: '<App/>',
|
||||
components: {
|
||||
App
|
||||
|
||||
@@ -1,658 +1,41 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-primary">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-info">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-location-pin"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-warning">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-danger">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</b-col>
|
||||
<b-col sm="7" class="d-none d-md-block">
|
||||
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
||||
<b-button-toolbar class="float-right" aria-label="Toolbar with buttons group">
|
||||
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
|
||||
<b-form-radio class="mx-0" value="Day">Day</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Month">Month</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Year">Year</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</b-button-toolbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
<b-col sm="6" lg="3" v-for="item, index in dashboard.db.checks" :key="index">
|
||||
<database :table="item.table" :name="item.name" :field="item.field" :value="item.value"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<b-row>
|
||||
<b-col sm="12" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="34" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="78" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<b-badge pill variant="info"></b-badge> <small>New clients</small> <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<i class="icon-user"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="value">43%</span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user-female"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="value">37%</span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<i class="icon-globe"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-facebook"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-linkedin"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout>
|
||||
<small class="text-muted">CTR</small><br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="primary">
|
||||
<small class="text-muted">Bounce Rate</small><br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-0">
|
||||
<ul class="icons-list">
|
||||
<li>
|
||||
<i class="icon-screen-desktop bg-primary"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iMac 4k</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-info"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Samsung Galaxy Edge</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.224</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iPhone 6S</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.163</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Premium accounts</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>928</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-spotify bg-success"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Spotify Subscriptions</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>893</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cloud-download bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Ebook</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Downloads</div>
|
||||
<strong>121.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-camera bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Photos</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Uploaded</div>
|
||||
<strong>12.125</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<b-button size="sm" variant="link" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<br/>
|
||||
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
|
||||
<div slot="avatar" class="avatar" slot-scope="item">
|
||||
<img :src="item.value.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
||||
</div>
|
||||
<div slot="user" slot-scope="item">
|
||||
<div>{{item.value.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<span>
|
||||
<template v-if="item.value.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.value.registered}}
|
||||
</div>
|
||||
</div>
|
||||
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
|
||||
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
|
||||
<div slot="usage" slot-scope="item">
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>{{item.value.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.value.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||
</div>
|
||||
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
|
||||
<div slot="activity" slot-scope="item">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>{{item.value}}</strong>
|
||||
</div>
|
||||
</b-table>
|
||||
</b-card>
|
||||
<b-col sm="6" md="4">
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardLine1ChartExample from './dashboard/CardLine1ChartExample'
|
||||
import CardLine2ChartExample from './dashboard/CardLine2ChartExample'
|
||||
import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
|
||||
import CardBarChartExample from './dashboard/CardBarChartExample'
|
||||
import MainChartExample from './dashboard/MainChartExample'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import CalloutChartExample from './dashboard/CalloutChartExample'
|
||||
import { Callout } from '../components/'
|
||||
|
||||
import { Callout } from '../components/'
|
||||
import Database from '../dex/Database'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
Callout,
|
||||
CardLine1ChartExample,
|
||||
CardLine2ChartExample,
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample,
|
||||
CalloutChartExample
|
||||
Database
|
||||
},
|
||||
computed: mapGetters([
|
||||
'dashboard'
|
||||
]),
|
||||
data: function () {
|
||||
return {
|
||||
selected: 'Month',
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/1.jpg', status: 'success' },
|
||||
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'USA', flag: 'us' },
|
||||
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
|
||||
activity: '10 sec ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/2.jpg', status: 'danger' },
|
||||
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Brazil', flag: 'br' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
|
||||
activity: '5 minutes ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/3.jpg', status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'India', flag: 'in' },
|
||||
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
|
||||
activity: '1 hour ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/4.jpg', status: '' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'France', flag: 'fr' },
|
||||
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'PayPal', icon: 'fa fa-paypal' },
|
||||
activity: 'Last month'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/5.jpg', status: 'success' },
|
||||
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Spain', flag: 'es' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
|
||||
activity: 'Last week'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/6.jpg', status: 'danger' },
|
||||
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Poland', flag: 'pl' },
|
||||
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: {
|
||||
avatar: {
|
||||
label: '<i class="icon-people"></i>',
|
||||
class: 'text-center'
|
||||
},
|
||||
user: {
|
||||
label: 'User'
|
||||
},
|
||||
country: {
|
||||
label: 'Country',
|
||||
class: 'text-center'
|
||||
},
|
||||
usage: {
|
||||
label: 'Usage'
|
||||
},
|
||||
payment: {
|
||||
label: 'Payment method',
|
||||
class: 'text-center'
|
||||
},
|
||||
activity: {
|
||||
label: 'Activity'
|
||||
}
|
||||
}
|
||||
selected: 'Month'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
variant (value) {
|
||||
let $variant
|
||||
if (value <= 25) {
|
||||
$variant = 'info'
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$variant = 'success'
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$variant = 'warning'
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$variant = 'danger'
|
||||
}
|
||||
return $variant
|
||||
},
|
||||
flag (value) {
|
||||
return 'flag-icon flag-icon-' + value
|
||||
}
|
||||
methods: mapActions([
|
||||
'fetchDashboard'
|
||||
]),
|
||||
mounted () {
|
||||
this.fetchDashboard()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import axios from 'axios'
|
||||
import Vuex from 'vuex'
|
||||
import Vue from 'vue'
|
||||
export const BASE_URL = 'http://localhost:8080'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const mutations = {
|
||||
setDashboard: (state, dashboard) => {
|
||||
state.dashboard = dashboard
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
fetchDashboard: ({commit}) => {
|
||||
axios.get(BASE_URL + '/dashboard')
|
||||
.then(function (response) {
|
||||
commit('setDashboard', response.data)
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getters = {
|
||||
dashboard: (state) => state.dashboard
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
dashboard: {}
|
||||
},
|
||||
mutations: mutations,
|
||||
actions: actions,
|
||||
getters: getters
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -23,7 +23,7 @@ module.exports = {
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
port: 3000,
|
||||
autoOpenBrowser: true,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '',
|
||||
|
||||
Reference in New Issue
Block a user