[TASK] #3 Fix overflow icon - redesign application
This commit is contained in:
parent
ca991a705b
commit
e04904a329
31
dist/main.js
vendored
31
dist/main.js
vendored
File diff suppressed because one or more lines are too long
1320
package-lock.json
generated
1320
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="statusBox">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<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
|
||||
:id="'vueOwnButtonStyle'"
|
||||
aria-label="Post message"
|
||||
class="button"
|
||||
@click.native="handleClick"
|
||||
:loading="isLoading"
|
||||
:styled="false"
|
||||
>⛟</VueLoadingButton> <br>
|
||||
<b-button v-on:click="handleClick()" size="sm">
|
||||
⛟ <b-spinner v-if="isLoading" small></b-spinner>
|
||||
</b-button>
|
||||
<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>
|
||||
@ -1,43 +1,55 @@
|
||||
<template>
|
||||
<div id="statusBoxContainer">
|
||||
<div>
|
||||
<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-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>
|
||||
|
||||
</div>
|
||||
<!-- Hover icon section -->
|
||||
<div id="info" class="info" title="test">
|
||||
ⓘ
|
||||
<div id="info_box" class="info_box">
|
||||
<!-- <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="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>
|
||||
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>
|
||||
|
||||
<button v-on:click="executeSpecificBoxes(checkedBoxes)">Run selected</button>
|
||||
<div style="display: inline-block;">
|
||||
<div id="selectionDiv">
|
||||
<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') {
|
||||
document.getElementById("tableId_"+tableId).className = 'table table-striped active';
|
||||
if (settedClasses == 'xtr-table xtr-table-striped') {
|
||||
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) {
|
||||
tableIds.forEach(tableId => {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0 10 0 10;
|
||||
}
|
||||
</style>
|
||||
122
src/assets/styles/main.scss
Normal file
122
src/assets/styles/main.scss
Normal file
@ -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); }
|
||||
}
|
||||
13
src/main.js
13
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',
|
||||
|
||||
@ -7,7 +7,8 @@ module.exports = {
|
||||
rules: [
|
||||
{ test: /\.js$/, use: 'babel-loader' },
|
||||
{ test: /\.vue$/, use: 'vue-loader' },
|
||||
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
|
||||
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
|
||||
{ test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user