xtr-improved-frontend/src/StatusBoxContainer.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>