237 lines
6.5 KiB
Vue
237 lines
6.5 KiB
Vue
<template>
|
||
<div id="statusBoxContainer">
|
||
<div>
|
||
<b-navbar type="light" variant="secondary">
|
||
<b-navbar-nav>
|
||
<b-nav-item v-on:click="executeSpecificBoxes(checkedBoxes)">Run selected ┉</b-nav-item>
|
||
<b-nav-item-dropdown text="Session-Settings" left>
|
||
<b-dropdown-item v-on:click="resetSession()">↯ Reset whole session</b-dropdown-item>
|
||
<b-dropdown-item v-on:click="refreshServerlist()">↺ Refresh Serverlist</b-dropdown-item>
|
||
</b-nav-item-dropdown>
|
||
<b-nav-item v-on:click="executeAllBoxes()">Request for all boxes⏎</b-nav-item>
|
||
<b-nav-item v-on:click="addTraceBox()">Add new TraceBox ➕</b-nav-item>
|
||
|
||
<!-- <b-nav-item-dropdown text="Session Reports" left>
|
||
<b-dropdown-item>Requests</b-dropdown-item>
|
||
<b-dropdown-item>Times etc.</b-dropdown-item>
|
||
</b-nav-item-dropdown> -->
|
||
</b-navbar-nav>
|
||
<div>
|
||
<b-button v-b-modal.modal-tall>ⓘ</b-button>
|
||
<b-modal id="modal-tall" title="XTR - Info">
|
||
<p class="my-4">
|
||
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="https://git.xicon.eu/xicon/xtr">Download XTR client</a> now. Readme also included in source code!<br>
|
||
Want to run your own master server? <a href="https://git.xicon.eu/xicon/xtrd">Download XTRd</a>. Readme also included in source code!<br>
|
||
<br>
|
||
Questions?/Impress? -> <a href="mailto:rest@xicon.de">Friedrich Schrader</a>
|
||
<br>
|
||
Interested in the new and improved frontend? -> <a href="beta/">still in beta</a>
|
||
<br>
|
||
<br>
|
||
This product includes GeoLite2 ASN data created by MaxMind, available from <a href="http://www.maxmind.com">http://www.maxmind.com</a>.
|
||
</p>
|
||
</b-modal>
|
||
</div>
|
||
</b-navbar>
|
||
</div>
|
||
<div>
|
||
<div id="selectionDiv">
|
||
<input
|
||
@click="setActive(index)"
|
||
:id="index"
|
||
type="checkbox"
|
||
v-for="(traceBox, index) in traceBoxes"
|
||
v-model="checkedBoxes"
|
||
:value="index"
|
||
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-container">
|
||
<template v-for="(traceBox, index) in traceBoxes">
|
||
<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>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios';
|
||
import StatusBoxVue from './StatusBox.vue';
|
||
import XtrServer from './ModelObjects/XtrServer.js';
|
||
|
||
export default {
|
||
components: {
|
||
StatusBoxVue
|
||
},
|
||
data: function () {
|
||
return {
|
||
pendingParent: true,
|
||
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')) {
|
||
var sessionServerList = JSON.parse(sessionStorage.getItem('listOfServers'));
|
||
|
||
sessionServerList.forEach(elementObject => {
|
||
let xtrServer = new XtrServer();
|
||
xtrServer.initObjectByJson(elementObject);
|
||
|
||
this.listOfServers.push(xtrServer);
|
||
});
|
||
this.pendingParent = false;
|
||
} 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 = 'xtr-table xtr-table-striped';
|
||
});
|
||
},
|
||
setActive: function setActive(tableId) {
|
||
var settedClasses = document.getElementById("tableId_"+tableId).className;
|
||
if (settedClasses == 'xtr-table xtr-table-striped') {
|
||
document.getElementById("tableId_"+tableId).className = 'xtr-table xtr-table-striped active';
|
||
} else {
|
||
document.getElementById("tableId_"+tableId).className = 'xtr-table xtr-table-striped';
|
||
}
|
||
},
|
||
setActiveFromSession: function setActiveFromSession(tableIds) {
|
||
console.log(tableIds)
|
||
this.$nextTick(() => {
|
||
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);
|
||
},
|
||
|
||
refreshServerlist: function refreshServerlist() {
|
||
this.listOfServers = [];
|
||
this.getServer();
|
||
},
|
||
|
||
getServer: function getServerList() {
|
||
axios.get("http://xtr-master.xicon.eu/v3/server/list/online")
|
||
.then(response => {
|
||
response.data.forEach(elementArray => {
|
||
let xtrServer = new XtrServer();
|
||
xtrServer.initObjectByArray(elementArray);
|
||
this.listOfServers.push(xtrServer);
|
||
});
|
||
})
|
||
.catch(e => {
|
||
// console.log('error', e);
|
||
})
|
||
.finally(ee => {
|
||
this.pendingParent = false
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||
grid-gap: 5px;
|
||
margin: 0 10 0 10;
|
||
}
|
||
</style> |