[TASK] #3 Fix overflow icon - redesign application

package.json

@@ -22,9 +22,13 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.17",
     "axios": "^0.19.0",
-    "vue-loading-button": "^0.2.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "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"
   }
 }

src/StatusBox.vue

@@ -1,7 +1,7 @@
 <template>
 <div id="statusBox">
-  <div class="row">
+  <div>
-		<div class="col-4">
+		<div>
 			<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,18 +11,14 @@
 			</select>
 			
 			<input v-model="target" placeholder="Enter Ip or Domain">
-			<VueLoadingButton 
+			<b-button v-on:click="handleClick()" size="sm">
-			:id="'vueOwnButtonStyle'"
+				⛟ <b-spinner v-if="isLoading" small></b-spinner>
-			aria-label="Post message"
+			</b-button>
-			class="button"
+			<br>
-			@click.native="handleClick"
-			:loading="isLoading"
-			:styled="false"
-			>⛟</VueLoadingButton> <br>
 			
 			<span class="small">{{infoString}}</span>
 			<div>
-				<table :id="'tableId_'+boxNumber" class="table table-striped">
+				<table :id="'tableId_'+boxNumber" class="xtr-table xtr-table-striped">
 					<thead>
 						<tr>
 							<td>IP</td>
@@ -55,11 +51,9 @@
 import axios from 'axios';
 import XtrServer from './ModelObjects/XtrServer.js';
 import XtrData from './ModelObjects/XtrData.js';
-import VueLoadingButton from 'vue-loading-button';
 
 export default {
 	components: {
-		VueLoadingButton
 	},
 	props: {
 		serverlist: Array,
@@ -290,76 +284,4 @@ 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); }
-	}
-
-	button#vueOwnButtonStyle {
-		font-family: inherit;
-		font-size: 0.9rem;
-		line-height: 1.15;
-		margin: 0;
-		overflow: visible;
-		text-transform: none;
-		-webkit-appearance: button;
-	}
-	
 </style>

src/StatusBoxContainer.vue

@@ -1,43 +1,55 @@
 <template>
 <div id="statusBoxContainer">
 	<div>
-		<button v-on:click="resetSession()">Reset whole session</button>
+		<b-navbar type="light" variant="secondary">
-		<button v-on:click="refreshServerlist()">Refresh Serverlist</button>
+			<b-navbar-nav>
-		<button v-on:click="addTraceBox()">Add new TraceBox</button>
+				<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>
 
-	</div>
+				<!-- <b-nav-item-dropdown text="Session Reports" left>
-	<!-- Hover icon section -->
+					<b-dropdown-item>Requests</b-dropdown-item>
-		<div id="info" class="info" title="test">
+					<b-dropdown-item>Times etc.</b-dropdown-item>
-			ⓘ
+				</b-nav-item-dropdown> -->
-			<div id="info_box" class="info_box">
+			</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="xtr.pl">Download XTR client</a> now. Readme included in source code!<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="xtrd.pl">Download XTRd</a>. Readme 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">
-		<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">
@@ -144,21 +156,24 @@ export default {
 			this.resetData();
 			sessionStorage.clear();
 			document.querySelectorAll('[id^=tableId_]').forEach(element => {
-				element.className = 'table table-striped';
+				element.className = 'xtr-table xtr-table-striped';
 			});
 		},
 		setActive: function setActive(tableId) {
 			var settedClasses = document.getElementById("tableId_"+tableId).className;
-			if (settedClasses == 'table table-striped') {
+			if (settedClasses == 'xtr-table xtr-table-striped') {
-				document.getElementById("tableId_"+tableId).className = 'table table-striped active';
+				document.getElementById("tableId_"+tableId).className = 'xtr-table xtr-table-striped active';
 			} else {
-				document.getElementById("tableId_"+tableId).className = 'table table-striped';
+				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;
@@ -210,37 +225,10 @@ export default {
 </script>
 
 <style scoped>
-  	h4 {
-		text-align: center;
-	}
 	.grid-container {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 		grid-gap: 5px;
-		padding: 5px;
+		margin: 0 10 0 10;
-	}
-
-	.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

@@ -0,0 +1,122 @@
+@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;
+}
+
+
+// .btn-sm, .btn-group-sm > .btn {
+//     padding: 0.25rem 0.5rem;
+//     font-size: 1rem;
+//     line-height: 1.2;
+// }
+
+span.small {
+    font-size: 75%;
+    line-height: 1.2;
+}
+
+// section {
+//     // margin: 0px 10px 0px 10px ;
+// }
+
+// #vueOwnButtonStyle {
+//     font-size: x-small;
+//     line-height: 1.3;
+//     border-radius: 0.2rem;
+//     cursor: pointer;
+//     padding: 4px 10.5px 4px 10;
+
+//     // background-color: coral;
+//     // border-radius: 3px;
+
+//     // color: white;
+//     // border: solid 1px transparent;
+    
+
+//     span {
+
+//     }
+// }
+
+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,5 +1,18 @@
 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,6 +8,7 @@ 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: [