diff --git a/package-lock.json b/package-lock.json
index dd129b5..d4a4cfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7491,6 +7491,11 @@
"vue-style-loader": "^4.1.0"
}
},
+ "vue-loading-button": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/vue-loading-button/-/vue-loading-button-0.2.0.tgz",
+ "integrity": "sha512-HjlNzS2deIaXGr7cZU/J/SiaZfA6OvJC+vzujTohUCs0cF+6G9p4SfTquT4watDFl5m3yO4OBEaxhE99JQLBNA=="
+ },
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index 4c48652..c224d2d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"axios": "^0.19.0",
+ "vue-loading-button": "^0.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
diff --git a/src/StatusBox.vue b/src/StatusBox.vue
index e3b0c9c..696e912 100644
--- a/src/StatusBox.vue
+++ b/src/StatusBox.vue
@@ -11,7 +11,16 @@
-
+
+ ⛟
+
{{infoString}}
@@ -48,8 +57,12 @@
import axios from 'axios';
import XtrServer from './ModelObjects/XtrServer.js';
import XtrData from './ModelObjects/XtrData.js';
+import VueLoadingButton from 'vue-loading-button';
export default {
+ components: {
+ VueLoadingButton
+ },
props: {
serverlist: Array,
pending: Boolean,
@@ -58,13 +71,16 @@ export default {
},
data : function () {
return {
+ isLoading: false,
executionTime: 'Not execute yet',
selectedServerData: this.initData,
tick: '',
target: 'luan.xicon.eu',
tableData : [ ],
tableDataHistory: [],
- tableDataHistoryObject: []
+ tableDataHistoryObject: [],
+ jobCount: 0,
+ jobList: []
}
},
watch: {
@@ -173,6 +189,10 @@ export default {
}
},
+ handleClick: function handleClick() {
+ this.traceRoute();
+ },
+
setLastExecutionTime : function setLastExecutionTime() {
var day = new Date();
this.executionTime = day.toISOString()
@@ -180,6 +200,9 @@ export default {
},
traceRoute : function traceRoute() {
+ this.isLoading = true;
+ let jobId = this.getJobCount;
+ this.jobList.push(jobId);
// e.g. http://199.247.22.146:12111/v3/client/request/8.8.8.8
axios.get("http://" + this.selectedServerData.getIpPortAsString() + "/v3/client/request/" + this.target)
.then(response => {
@@ -194,10 +217,25 @@ export default {
})
.catch(e => {
this.executionTime = 'Check request'
- })
+ }).finally(ee => {
+ var position = this.jobList.indexOf(jobId);
+
+ if(~position) {
+ this.jobList.splice(position, 1);
+ }
+ if(this.jobList.length < 1) {
+ this.jobCount = 0;
+ this.isLoading = false;
+ }
+ });
},
+ getJobCount : function getJobCount() {
+ this.jobCount += 1;
+ return this.jobCount;
+ },
+
resetData : function resetData() {
this.executionTime = 'Not execute yet';
this.target = 'luan.xicon.eu';
@@ -300,4 +338,20 @@ export default {
75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); }
}
+
+ button#vueOwnButtonStyle {
+ font-family: inherit;
+ font-size: 0.9rem;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
+ text-transform: none;
+ -webkit-appearance: button;
+ }
+
+ .spinner > span {
+ width: 0.7rem !important;
+ height: 0.7rem !important;
+ }
+
\ No newline at end of file