[TASK] Add IDE folder to ignore

package.json

@@ -25,10 +25,6 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
-    "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.1.0",
-    "node-sass": "^4.13.0",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.1"
+    "vue-spinners-css": "^1.1.3"
   }
 }

src/StatusBox.vue

@@ -1,7 +1,7 @@
 <template>
 <div id="statusBox">
-  <div>
-		<div>
+  <div class="row">
+		<div class="col-4">
 			<select :ref="'serverSelectBox' + 1" v-if="pending === false" v-model="selectedServerData" id="serverSelectList">
 				<option v-for="(serverItem, index) in serverlist" 
 					v-bind:value="serverItem"
@@ -11,14 +11,15 @@
 			</select>
 			
 			<input v-model="target" placeholder="Enter Ip or Domain">
-			<b-button v-on:click="handleClick()" size="sm">
-				⛟ <b-spinner v-if="isLoading" small></b-spinner>
-			</b-button>
+			<button v-on:click="handleClick()">
+				⛟
+			</button>
+<RingLoader :size="10" :loading="isLoading" color="black"></RingLoader>
 			<br>
 			
 			<span class="small">{{infoString}}</span>
 			<div>
-				<table :id="'tableId_'+boxNumber" class="xtr-table xtr-table-striped">
+				<table :id="'tableId_'+boxNumber" class="table table-striped">
 					<thead>
 						<tr>
 							<td>IP</td>
@@ -51,9 +52,11 @@
 import axios from 'axios';
 import XtrServer from './ModelObjects/XtrServer.js';
 import XtrData from './ModelObjects/XtrData.js';
+import { RingLoader } from 'vue-spinners-css';
 
 export default {
 	components: {
+		RingLoader
 	},
 	props: {
 		serverlist: Array,
@@ -284,4 +287,65 @@ export default {
 </script>
 
 <style scoped>
+	input[type=range] {
+		width: 90%;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	span.small {
+		font-size: 75%;
+	}
+
+	table.active {
+		border: 3px solid #9ac5e3;
+	}
+
+	table {
+		border-collapse: collapse;
+		width: 90%;
+	}
+
+	td {
+		border:1px solid grey;
+		font-size: 9pt;
+	}
+
+	.traceroutes {
+		text-decoration: none;
+		display: inline-block;
+	}
+
+	.traceroutes:visited {
+		color: #000000;
+	}
+
+	.traceroutes:hover {
+		color: #880000;
+		transform: rotate(-30deg);
+	}
+
+	.traceroutes:active {
+		color: #bb0000;
+	}
+
+	.traceroutes_rotating {
+		display: inline-block;
+		text-decoration: none;
+		color: #bb0000;
+		animation: spin 2s linear infinite;
+	}
+
+	.odd {
+		background-color: #EEE;
+	}
+
+	@keyframes spin {
+		0% { transform: rotate(-30deg); }
+		25% { transform: rotate(0deg); }
+		50% { transform: rotate(30deg); } 
+		75% { transform: rotate(0deg); }
+		100% { transform: rotate(-30deg); }
+	}	
 </style>

src/StatusBoxContainer.vue

@@ -1,58 +1,46 @@
 <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>
+		<button v-on:click="resetSession()">Reset whole session</button>
+		<button v-on:click="refreshServerlist()">Refresh Serverlist</button>
+		<button v-on:click="addTraceBox()">Add new TraceBox</button>
 
-				<!-- <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">
+	</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="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> 
+				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>
 				<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">
+		
+		<button v-on:click="executeSpecificBoxes(checkedBoxes)">Run selected</button>
+		<div style="display: inline-block;">
 			<input 
-			@click="setActive(index)"
 				: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">
@@ -159,24 +147,24 @@ export default {
 			this.resetData();
 			sessionStorage.clear();
 			document.querySelectorAll('[id^=tableId_]').forEach(element => {
-				element.className = 'xtr-table xtr-table-striped';
+				element.className = 'table table-striped';
 			});
 		},
 		setActive: function setActive(tableId) {
+			this.$nextTick(() => {
 				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';
+				if (settedClasses == 'table table-striped') {
+					document.getElementById("tableId_"+tableId).className = 'table table-striped active';
 				} else {
-				document.getElementById("tableId_"+tableId).className = 'xtr-table xtr-table-striped';
+					document.getElementById("tableId_"+tableId).className = 'table table-striped';
 				}
+			});
+			
 		},
 		setActiveFromSession: function setActiveFromSession(tableIds) {
-			console.log(tableIds)
-			this.$nextTick(() => {
 			tableIds.forEach(tableId => {
 				this.setActive(tableId);
-			});		});
-			
+			});
 		},
 		executeAllBoxes: function () {
 			var boxesRefs = this.$refs.boxref;
@@ -228,10 +216,34 @@ tableIds.forEach(tableId => {
 </script>
 
 <style scoped>
+  	h4 {
+		text-align: center;
+	}
 	.grid-container {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 		grid-gap: 5px;
-		margin: 0 10 0 10;
+		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>

src/assets/styles/main.scss

@@ -1,92 +0,0 @@
-@import '~bootstrap';
-@import '~bootstrap-vue';
-
-:focus {
-    outline: none;
-}
-
-#selectionDiv {
-    margin: 10 10 5 30;
-}
-
-.navbar {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.0rem 0rem; 
-    font-weight: bold;
-}
-
-input[type=range] {
-    width: 90%;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-input[type=checkbox] {
-    font-size: xx-large;
-    margin: 2
-}
-
-select, input {
-    font-size: small;
-}
-
-span.small {
-    font-size: 75%;
-    line-height: 1.2;
-}
-
-table.active {
-    border: 3px solid #9ac5e3;
-}
-
-table {
-    border-collapse: collapse;
-    width: 90%;
-}
-
-td {
-    border:1px solid grey;
-    font-size: 9pt;
-}
-
-.traceroutes {
-    text-decoration: none;
-    display: inline-block;
-}
-
-.traceroutes:visited {
-    color: #000000;
-}
-
-.traceroutes:hover {
-    color: #880000;
-    transform: rotate(-30deg);
-}
-
-.traceroutes:active {
-    color: #bb0000;
-}
-
-.traceroutes_rotating {
-    display: inline-block;
-    text-decoration: none;
-    color: #bb0000;
-    animation: spin 2s linear infinite;
-}
-
-.odd {
-    background-color: #EEE;
-}
-
-@keyframes spin {
-    0% { transform: rotate(-30deg); }
-    25% { transform: rotate(0deg); }
-    50% { transform: rotate(30deg); } 
-    75% { transform: rotate(0deg); }
-    100% { transform: rotate(-30deg); }
-}

src/main.js

@@ -1,18 +1,5 @@
 import Vue from 'vue';
 import StatusBoxContainer from './StatusBoxContainer.vue';
-import BootstrapVue, { BButton, BModal, VBModal} from 'bootstrap-vue';
-import { NavbarPlugin } from 'bootstrap-vue';
-import { SpinnerPlugin } from 'bootstrap-vue';
-
-import './assets/styles/main.scss';
-
-Vue.component('b-button', BButton);
-Vue.component('b-modal', BModal);
-
-Vue.directive('b-modal', VBModal);
-
-Vue.use(NavbarPlugin);
-Vue.use(SpinnerPlugin);
 
 new Vue({
 	el: '#statusBoxContainer',

webpack.config.js

@@ -8,7 +8,6 @@ module.exports = {
       { test: /\.js$/, use: 'babel-loader' },
       { test: /\.vue$/, use: 'vue-loader' },
       { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
-      { test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }
     ]
   },
   plugins: [