2019-11-20 22:45:03 +01:00
|
|
|
|
<template>
|
|
|
|
|
<div id="statusBoxContainer">
|
|
|
|
|
<div>
|
|
|
|
|
<button v-on:click="resetSession()">Reset whole session</button>
|
2019-12-05 23:48:29 +01:00
|
|
|
|
<button v-on:click="refreshServerlist()">Refresh Serverlist</button>
|
|
|
|
|
<button v-on:click="addTraceBox()">Add new TraceBox</button>
|
|
|
|
|
|
2019-11-20 22:45:03 +01:00
|
|
|
|
</div>
|
|
|
|
|
<!-- Hover icon section -->
|
|
|
|
|
<div id="info" class="info" title="test">
|
|
|
|
|
ⓘ
|
|
|
|
|
<div id="info_box" class="info_box">
|
|
|
|
|
This service is free for use by accepting the <a href="aup.txt">Acceptable Use Policy</a>.<br>
|
|
|
|
|
<br>
|
|
|
|
|
This is just an interface to to give a more GUI-ish
|
|
|
|
|
access to the self-registered XTR clients. No traceroute requests will be saved on this server. All request to the XTR clients
|
|
|
|
|
are handled by your browser.<br>
|
|
|
|
|
<br>
|
|
|
|
|
Want to add your server? <a href="xtr.pl">Download XTR client</a> now. Readme included in source code!<br>
|
|
|
|
|
Want to run your own master server? <a href="xtrd.pl">Download XTRd</a>. Readme included in source code!<br>
|
|
|
|
|
<br>
|
|
|
|
|
Questions?/Impress? -> <a href="mailto:rest@xicon.de">Friedrich Schrader</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
<button v-on:click="executeSpecificBoxes(checkedBoxes)">Run selected</button>
|
|
|
|
|
<div style="display: inline-block;">
|
|
|
|
|
<input
|
|
|
|
|
:id="index"
|
|
|
|
|
type="checkbox"
|
|
|
|
|
v-for="(traceBox, index) in traceBoxes"
|
|
|
|
|
v-model="checkedBoxes"
|
|
|
|
|
:value="index"
|
|
|
|
|
@click="setActive(index)"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
<button v-on:click="executeAllBoxes()">Request for all boxes</button>
|
|
|
|
|
|
|
|
|
|
<div class="grid-container">
|
|
|
|
|
<template v-for="(traceBox, index) in traceBoxes">
|
2019-12-05 23:48:29 +01:00
|
|
|
|
<component
|
|
|
|
|
:is="traceBox"
|
|
|
|
|
:ref="'boxref'"
|
|
|
|
|
:key="index"
|
|
|
|
|
v-bind:serverlist="listOfServers"
|
|
|
|
|
v-bind:initData="listOfServers[0]"
|
|
|
|
|
v-bind:pending="pendingParent"
|
|
|
|
|
v-bind:boxNumber="index">
|
|
|
|
|
</component>
|
2019-11-20 22:45:03 +01:00
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import StatusBoxVue from './StatusBox.vue';
|
2019-12-05 23:48:29 +01:00
|
|
|
|
import XtrServer from './ModelObjects/XtrServer.js';
|
2019-11-20 22:45:03 +01:00
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
StatusBoxVue
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
2019-12-05 23:48:29 +01:00
|
|
|
|
pendingParent: true,
|
2019-11-20 22:45:03 +01:00
|
|
|
|
listOfServers: [],
|
|
|
|
|
checkedBoxes: [],
|
|
|
|
|
traceBoxes: [
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
checkedBoxes : {
|
|
|
|
|
handler() {
|
|
|
|
|
sessionStorage.setItem('checkedBoxes', JSON.stringify(this.checkedBoxes));
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
|
|
|
|
|
} ,
|
|
|
|
|
listOfServers: {
|
|
|
|
|
handler() {
|
|
|
|
|
sessionStorage.setItem('listOfServers', JSON.stringify(this.listOfServers));
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
},
|
|
|
|
|
traceBoxes: {
|
|
|
|
|
handler() {
|
|
|
|
|
sessionStorage.setItem('traceBoxes', JSON.stringify(this.traceBoxes));
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
if (sessionStorage.getItem('listOfServers')) {
|
2019-12-05 23:48:29 +01:00
|
|
|
|
var sessionServerList = JSON.parse(sessionStorage.getItem('listOfServers'));
|
|
|
|
|
|
|
|
|
|
sessionServerList.forEach(elementObject => {
|
|
|
|
|
let xtrServer = new XtrServer();
|
|
|
|
|
xtrServer.initObjectByJson(elementObject);
|
|
|
|
|
|
|
|
|
|
this.listOfServers.push(xtrServer);
|
|
|
|
|
});
|
|
|
|
|
this.pendingParent = false;
|
2019-11-20 22:45:03 +01:00
|
|
|
|
} else {
|
|
|
|
|
this.getServer();
|
|
|
|
|
}
|
|
|
|
|
if (sessionStorage.getItem('traceBoxes')) {
|
|
|
|
|
this.traceBoxes = [];
|
|
|
|
|
JSON.parse(sessionStorage.getItem('traceBoxes')).forEach(element => {
|
|
|
|
|
this.traceBoxes.push(StatusBoxVue);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (sessionStorage.getItem('checkedBoxes')) this.checkedBoxes = JSON.parse(sessionStorage.getItem('checkedBoxes'));
|
|
|
|
|
|
|
|
|
|
this.setActiveFromSession(this.checkedBoxes);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
resetData: function () {
|
|
|
|
|
var boxesRefs = this.$refs.boxref;
|
|
|
|
|
|
|
|
|
|
boxesRefs.forEach(function(boxRef) {
|
|
|
|
|
boxRef.resetData();
|
|
|
|
|
});
|
|
|
|
|
this.checkedBoxes = [];
|
|
|
|
|
this.traceBoxes = [
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
StatusBoxVue,
|
|
|
|
|
];
|
|
|
|
|
},
|
|
|
|
|
resetSession: function resetSession() {
|
|
|
|
|
this.resetData();
|
|
|
|
|
sessionStorage.clear();
|
|
|
|
|
document.querySelectorAll('[id^=tableId_]').forEach(element => {
|
|
|
|
|
element.className = 'table table-striped';
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
setActive: function setActive(tableId) {
|
2019-12-08 21:19:41 +01:00
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
var settedClasses = document.getElementById("tableId_"+tableId).className;
|
|
|
|
|
if (settedClasses == 'table table-striped') {
|
|
|
|
|
document.getElementById("tableId_"+tableId).className = 'table table-striped active';
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("tableId_"+tableId).className = 'table table-striped';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2019-11-20 22:45:03 +01:00
|
|
|
|
},
|
|
|
|
|
setActiveFromSession: function setActiveFromSession(tableIds) {
|
|
|
|
|
tableIds.forEach(tableId => {
|
|
|
|
|
this.setActive(tableId);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
executeAllBoxes: function () {
|
|
|
|
|
var boxesRefs = this.$refs.boxref;
|
|
|
|
|
|
|
|
|
|
boxesRefs.forEach(function(boxRef) {
|
|
|
|
|
boxRef.traceRoute();
|
|
|
|
|
});
|
|
|
|
|
},
|
2019-12-05 23:48:29 +01:00
|
|
|
|
|
2019-11-20 22:45:03 +01:00
|
|
|
|
executeSpecificBoxes: function (choosedBoxes) {
|
|
|
|
|
var boxesRefs = this.$refs.boxref;
|
|
|
|
|
|
|
|
|
|
choosedBoxes.forEach(function(choosedBox) {
|
|
|
|
|
boxesRefs.forEach(function(boxRef) {
|
|
|
|
|
if(choosedBox == boxRef.boxNumber) {
|
|
|
|
|
boxRef.traceRoute();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
2019-12-05 23:48:29 +01:00
|
|
|
|
|
2019-11-20 22:45:03 +01:00
|
|
|
|
addTraceBox () {
|
|
|
|
|
this.traceBoxes.push(StatusBoxVue);
|
|
|
|
|
},
|
2019-12-05 23:48:29 +01:00
|
|
|
|
|
|
|
|
|
refreshServerlist: function refreshServerlist() {
|
|
|
|
|
this.listOfServers = [];
|
|
|
|
|
this.getServer();
|
|
|
|
|
},
|
|
|
|
|
|
2019-11-20 22:45:03 +01:00
|
|
|
|
getServer: function getServerList() {
|
|
|
|
|
axios.get("http://xtr-master.xicon.eu/v3/server/list/online")
|
|
|
|
|
.then(response => {
|
2019-12-05 23:48:29 +01:00
|
|
|
|
response.data.forEach(elementArray => {
|
|
|
|
|
let xtrServer = new XtrServer();
|
|
|
|
|
xtrServer.initObjectByArray(elementArray);
|
|
|
|
|
this.listOfServers.push(xtrServer);
|
|
|
|
|
});
|
2019-11-20 22:45:03 +01:00
|
|
|
|
})
|
|
|
|
|
.catch(e => {
|
2019-12-05 23:48:29 +01:00
|
|
|
|
// console.log('error', e);
|
2019-11-20 22:45:03 +01:00
|
|
|
|
})
|
2019-12-05 23:48:29 +01:00
|
|
|
|
.finally(ee => {
|
|
|
|
|
this.pendingParent = false
|
|
|
|
|
});
|
2019-11-20 22:45:03 +01:00
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
h4 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.grid-container {
|
|
|
|
|
display: grid;
|
2019-12-06 00:53:18 +01:00
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
2019-11-20 22:45:03 +01:00
|
|
|
|
grid-gap: 5px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-08 21:19:41 +01:00
|
|
|
|
.info {
|
2019-11-20 22:45:03 +01:00
|
|
|
|
display: block; position: absolute; right: 10px; top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-08 21:19:41 +01:00
|
|
|
|
.info:hover .info_box {
|
2019-11-20 22:45:03 +01:00
|
|
|
|
visibility: visible;
|
|
|
|
|
z-index: 4;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-08 21:19:41 +01:00
|
|
|
|
.info .info_box {
|
2019-11-20 22:45:03 +01:00
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
width: 502px;
|
|
|
|
|
border: solid 1px;
|
|
|
|
|
background-color: #999999;
|
|
|
|
|
font-size: 10pt;
|
|
|
|
|
}
|
|
|
|
|
</style>
|