Add button loading spinner

This commit is contained in:
XiCoN-Luan- 2019-12-06 20:02:01 +01:00
parent ba7d94695e
commit 63c69f7e96
3 changed files with 63 additions and 3 deletions

5
package-lock.json generated
View File

@ -7491,6 +7491,11 @@
"vue-style-loader": "^4.1.0" "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": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

View File

@ -22,6 +22,7 @@
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"axios": "^0.19.0", "axios": "^0.19.0",
"vue-loading-button": "^0.2.0",
"webpack": "^4.41.2", "webpack": "^4.41.2",
"webpack-cli": "^3.3.10", "webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0" "webpack-dev-server": "^3.9.0"

View File

@ -11,7 +11,16 @@
</select> </select>
<input v-model="target" placeholder="Enter Ip or Domain"> <input v-model="target" placeholder="Enter Ip or Domain">
<button v-on:click="traceRoute()"></button> <br> <!-- <button v-on:click="traceRoute()"></button> -->
<VueLoadingButton
:id="'vueOwnButtonStyle'"
aria-label="Post message"
class="button"
@click.native="handleClick"
:loading="isLoading"
:styled="false"
></VueLoadingButton> <br>
<!-- <span class="small">{{executionTime}}</span> --> <!-- <span class="small">{{executionTime}}</span> -->
<span class="small">{{infoString}}</span> <span class="small">{{infoString}}</span>
<div> <div>
@ -48,8 +57,12 @@
import axios from 'axios'; import axios from 'axios';
import XtrServer from './ModelObjects/XtrServer.js'; import XtrServer from './ModelObjects/XtrServer.js';
import XtrData from './ModelObjects/XtrData.js'; import XtrData from './ModelObjects/XtrData.js';
import VueLoadingButton from 'vue-loading-button';
export default { export default {
components: {
VueLoadingButton
},
props: { props: {
serverlist: Array, serverlist: Array,
pending: Boolean, pending: Boolean,
@ -58,13 +71,16 @@ export default {
}, },
data : function () { data : function () {
return { return {
isLoading: false,
executionTime: 'Not execute yet', executionTime: 'Not execute yet',
selectedServerData: this.initData, selectedServerData: this.initData,
tick: '', tick: '',
target: 'luan.xicon.eu', target: 'luan.xicon.eu',
tableData : [ ], tableData : [ ],
tableDataHistory: [], tableDataHistory: [],
tableDataHistoryObject: [] tableDataHistoryObject: [],
jobCount: 0,
jobList: []
} }
}, },
watch: { watch: {
@ -173,6 +189,10 @@ export default {
} }
}, },
handleClick: function handleClick() {
this.traceRoute();
},
setLastExecutionTime : function setLastExecutionTime() { setLastExecutionTime : function setLastExecutionTime() {
var day = new Date(); var day = new Date();
this.executionTime = day.toISOString() this.executionTime = day.toISOString()
@ -180,6 +200,9 @@ export default {
}, },
traceRoute : function traceRoute() { 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 // 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) axios.get("http://" + this.selectedServerData.getIpPortAsString() + "/v3/client/request/" + this.target)
.then(response => { .then(response => {
@ -194,10 +217,25 @@ export default {
}) })
.catch(e => { .catch(e => {
this.executionTime = 'Check request' 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() { resetData : function resetData() {
this.executionTime = 'Not execute yet'; this.executionTime = 'Not execute yet';
this.target = 'luan.xicon.eu'; this.target = 'luan.xicon.eu';
@ -300,4 +338,20 @@ export default {
75% { transform: rotate(0deg); } 75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); } 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;
}
</style> </style>