xtr-improved-frontend/src/StatusBoxContainer.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 &#9481;</b-nav-item>
				<b-nav-item-dropdown text="Session-Settings" left>
					<b-dropdown-item v-on:click="resetSession()">&#8623; Reset whole session</b-dropdown-item>
					<b-dropdown-item v-on:click="refreshServerlist()">&circlearrowleft; Refresh Serverlist</b-dropdown-item>
				</b-nav-item-dropdown>
				<b-nav-item v-on:click="executeAllBoxes()">Request for all boxes&#9166;</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>
					</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>