xicon/xtr-improved-frontend
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Restructure project tree

Browse Source
This commit is contained in:
JR
2019-11-20 22:45:03 +01:00
parent dd01ce39ce
commit d751edade8
11 changed files with 8465 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/StatusBox.vue Normal file
View File

@ -0,0 +1,205 @@
<template>
<div id="statusBox">
<div class="row">
<div class="col-4">
<select v-model="selectedIp" id="serverSelectList">
<option v-for="(serverItem, index) in serverlist"
v-bind:value="serverItem"
>
{{ serverItem[0] }}:{{ serverItem[1] }} (AS{{ serverItem[2] }})
</option>
</select>
<input v-model="target" placeholder="Enter Ip or Domain">
<a href="#" class="traceroutes" v-on:click="traceRoute()">⛟</a>
<span class="small">{{executionTime}}</span>
<div>
<span>History: {{ tableDataHistory.length }}</span>
<table :id="'tableId_'+boxNumber" class="table table-striped">
<thead>
<tr>
<td>IP</td>
<td>HOSTNAME</td>
<td>PING</td>
<td>AS</td>
</tr>
<tr v-for="tData in tabeleData">
<td>{{ tData[0] }}</td>
<td>{{ tData[1] }}</td>
<td>{{ tData[2] }}</td>
<td :title="tData[4]">{{ tData[3] }}</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
serverlist: Array,
boxNumber: Number
},
watch: {
tableDataHistory: {
handler() {
sessionStorage.setItem('tableDataHistory' + this.boxNumber, JSON.stringify(this.tableDataHistory));
}
},
executionTime: {
handler() {
sessionStorage.setItem('executionTime' + this.boxNumber, JSON.stringify(this.executionTime));
},
deep: true
},
selectedIp: {
handler() {
sessionStorage.setItem('selectedIp' + this.boxNumber, JSON.stringify(this.selectedIp));
},
deep: true
},
target : {
handler() {
sessionStorage.setItem('target' + this.boxNumber, JSON.stringify(this.target));
},
deep: true
},
tabeleData : {
handler() {
sessionStorage.setItem('tabeleData' + this.boxNumber, JSON.stringify(this.tabeleData));
},
deep: true
}
},
methods: {
setLastExecutionTime: function setLastExecutionTime() {
var day = new Date();
var hours = day.getHours();
var minutes = day.getMinutes() ;
var seconds = day.getSeconds();
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
this.executionTime = hours + ':' + minutes + ':' + seconds;
},
traceRoute: function traceRoute() {
// e.g. http://199.247.22.146:12111/v3/client/request/8.8.8.8
axios.get("http://"+ this.selectedIp[0] + ":" +this.selectedIp[1] + "/v3/client/request/" + this.target)
.then(response => {
// JSON responses are automatically parsed.
this.tabeleData = response.data;
this.setLastExecutionTime();
this.tableDataHistory.push(this.tabeleData);
})
.catch(e => {
this.executionTime = 'Check request'
})
},
resetData: function resetData() {
this.executionTime = 'Not execute yet',
this.selectedIp = ["199.247.22.146",12111,20473,1],
this.target = '8.8.8.8',
this.tabeleData = [ ],
this.tableDataHistory = [ ]
}
},
mounted() {
if (sessionStorage.getItem('executionTime'+ this.boxNumber)) this.executionTime = JSON.parse(sessionStorage.getItem('executionTime'+ this.boxNumber));
if (sessionStorage.getItem('selectedIp'+ this.boxNumber)) {
this.selectedIp = JSON.parse(sessionStorage.getItem('selectedIp'+ this.boxNumber));
} else {
this.selectedIp = ["199.247.22.146",12111,20473,1]; // Change from static to dynamic
}
if (sessionStorage.getItem('tableDataHistory'+ this.boxNumber)) this.tableDataHistory = JSON.parse(sessionStorage.getItem('tableDataHistory'+ this.boxNumber));
if (sessionStorage.getItem('target'+ this.boxNumber)) this.target = JSON.parse(sessionStorage.getItem('target'+ this.boxNumber));
if (sessionStorage.getItem('tabeleData'+ this.boxNumber)) this.tabeleData = JSON.parse(sessionStorage.getItem('tabeleData'+ this.boxNumber));
},
data: function () {
return {
executionTime: 'Not execute yet',
selectedIp: ["199.247.22.146",12111,20473,1],
target: '8.8.8.8',
tabeleData : [ ],
tableDataHistory: []
}
}
}
</script>
<style scoped>
span.small {
font-size: 75%;
}
table.active {
border: 3px solid #9ac5e3;
}
table {
border-collapse: collapse;
width: 90%;
}
td
{
border:1px solid grey;
font-size: 9pt;
}
.traceroutes
{
text-decoration: none;
display: inline-block;
}
.traceroutes:visited
{
color: #000000;
}
.traceroutes:hover
{
color: #880000;
transform: rotate(-30deg);
}
.traceroutes:active
{
color: #bb0000;
}
.traceroutes_rotating
{
display: inline-block;
text-decoration: none;
color: #bb0000;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(-30deg); }
25% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); }
}
</style>