212 lines
5.2 KiB
Vue
212 lines
5.2 KiB
Vue
|
<template>
|
|||
|
<div id="statusBoxContainer">
|
|||
|
<div>
|
|||
|
<button v-on:click="resetSession()">Reset whole session</button>
|
|||
|
</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>
|
|||
|
<button v-on:click="addTraceBox()">Add new TraceBox</button>
|
|||
|
|
|||
|
<div class="grid-container">
|
|||
|
<template v-for="(traceBox, index) in traceBoxes">
|
|||
|
<component :is="traceBox" :ref="'boxref'" :key="index" v-bind:serverlist="listOfServers" v-bind:boxNumber="index"></component>
|
|||
|
</template>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import axios from 'axios';
|
|||
|
import StatusBoxVue from './StatusBox.vue';
|
|||
|
|
|||
|
export default {
|
|||
|
components: {
|
|||
|
StatusBoxVue
|
|||
|
},
|
|||
|
data: function () {
|
|||
|
return {
|
|||
|
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')) {
|
|||
|
this.listOfServers = JSON.parse(sessionStorage.getItem('listOfServers'));
|
|||
|
} 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) {
|
|||
|
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';
|
|||
|
}
|
|||
|
},
|
|||
|
setActiveFromSession: function setActiveFromSession(tableIds) {
|
|||
|
tableIds.forEach(tableId => {
|
|||
|
this.setActive(tableId);
|
|||
|
});
|
|||
|
},
|
|||
|
executeAllBoxes: function () {
|
|||
|
var boxesRefs = this.$refs.boxref;
|
|||
|
|
|||
|
boxesRefs.forEach(function(boxRef) {
|
|||
|
boxRef.traceRoute();
|
|||
|
});
|
|||
|
},
|
|||
|
executeSpecificBoxes: function (choosedBoxes) {
|
|||
|
var boxesRefs = this.$refs.boxref;
|
|||
|
|
|||
|
choosedBoxes.forEach(function(choosedBox) {
|
|||
|
boxesRefs.forEach(function(boxRef) {
|
|||
|
if(choosedBox == boxRef.boxNumber) {
|
|||
|
boxRef.traceRoute();
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
},
|
|||
|
addTraceBox () {
|
|||
|
this.traceBoxes.push(StatusBoxVue);
|
|||
|
},
|
|||
|
getServer: function getServerList() {
|
|||
|
axios.get("http://xtr-master.xicon.eu/v3/server/list/online")
|
|||
|
.then(response => {
|
|||
|
// JSON responses are automatically parsed.
|
|||
|
this.listOfServers = response.data;
|
|||
|
})
|
|||
|
.catch(e => {
|
|||
|
this.errors.push(e)
|
|||
|
})
|
|||
|
},
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style scoped>
|
|||
|
h4 {
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
.grid-container {
|
|||
|
display: grid;
|
|||
|
grid-template-columns: auto auto auto;
|
|||
|
grid-gap: 5px;
|
|||
|
padding: 5px;
|
|||
|
}
|
|||
|
|
|||
|
.info
|
|||
|
{
|
|||
|
display: block; position: absolute; right: 10px; top: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.info:hover .info_box
|
|||
|
{
|
|||
|
visibility: visible;
|
|||
|
z-index: 4;
|
|||
|
}
|
|||
|
|
|||
|
.info .info_box
|
|||
|
{
|
|||
|
display: block;
|
|||
|
position: absolute;
|
|||
|
right: 0px;
|
|||
|
top: 0px;
|
|||
|
visibility: hidden;
|
|||
|
width: 502px;
|
|||
|
border: solid 1px;
|
|||
|
background-color: #999999;
|
|||
|
font-size: 10pt;
|
|||
|
}
|
|||
|
</style>
|