Improved "SCAN" Interface

So...
When one scan button is pressed(when scan is running we can say) you can't press the other one or reload button, you have to wait until some "certain amount of time"(I was trying adjust the times I hope it's good enough I hope I didn't miss anything).
Also  when you press scan button it will disappear for "certain amount of time" and then appear after that specified time.
I make this because if you accidentally press the button two times, or both at the same time it would show error and etc.. and this way it won't allow you to press it how you shouldn't and it won't show any error, it's more friendly-user I would say.
For Linux Firefox I removed the weird white dot line box around text inside the buttons.
To-do:
Maybe some loading animation under button, like when button disappears there will be maybe three sliding dots
This commit is contained in:
Arisa
2019-04-19 15:58:59 +02:00
parent 4a23c770be
commit f0009ea875
3 changed files with 50 additions and 12 deletions

View File

@@ -128,11 +128,40 @@ function drawNames(){
getE("nTable").innerHTML = html;
}
var duts;
var elxtime;
function scan(type){
getE('RButton').disabled = true;
switch(type){
case 0:
getE('scanOne').disabled = true;
getE('scanZero').style.visibility = 'hidden';
elxtime = 2450;
break;
case 1:
getE('scanZero').disabled = true;
getE('scanOne').style.visibility = 'hidden';
elxtime = parseInt(getE("scanTime").value+"000") + 1500;
}
var cmdStr = "scan "
+ (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s")
+ " -ch "+getE("ch").options[getE("ch").selectedIndex].value;
getFile("run?cmd="+cmdStr);
duts = parseInt(type);
setTimeout(buttonFunc, elxtime)
}
function buttonFunc(){
switch (duts) {
case 0:
getE('scanZero').style.visibility = 'visible';
getE('scanOne').disabled = false;
break;
case 1:
getE('scanOne').style.visibility = 'visible';
getE('scanZero').disabled = false;
}
getE('RButton').disabled = false;
}
function load(){

View File

@@ -24,10 +24,10 @@
<div class="col-12">
<div id="error" class="hide"></div>
<h1 class="header" data-translate="scan">Scan</h1>
<button onclick="scan(0)">Scan APs</button>
<button onclick="scan(1)">Scan Stations</button>
<button onclick="load()" data-translate="reload" class="right">Reload</button>
<button id=scanZero onclick="scan(0)">Scan APs</button>
<button id=scanOne onclick="scan(1)">Scan Stations</button>
<button id=RButton onclick="load()" data-translate="reload" class="right">Reload</button>
</div>
</div>
<div class="row">
@@ -73,29 +73,29 @@
</span>
<span data-translate="info_disclaimer">In case of an unexpected error, please reload the site and look at the serial monitor for further debugging.</span>
</p>
<hr>
<h2><span>Access Points</span>: <span id="apNum"></span></h2>
<table id="apTable"></table>
<button onclick="selectAll(0,true)" data-translate="select_all">select all</button>
<button onclick="selectAll(0,false)" data-translate="deselect_all">deselect all</button>
<hr>
<h2><span>Stations</span>: <span id="stNum"></span></h2>
<table id="stTable"></table>
<button onclick="selectAll(1,true)" data-translate="select_all">select all</button>
<button onclick="selectAll(1,false)" data-translate="deselect_all">deselect all</button>
<hr>
<h2><span data-translate="devices">Saved Devices</span>: <span id="nNum"></span></h2>
<table id="nTable"></table>
<button onclick="selectAll(2,true)" data-translate="select_all">select all</button>
<button onclick="selectAll(2,false)" data-translate="deselect_all">deselect all</button>
<button onclick="add(2)" data-translate="new">new</button>
<div id="copyright">
<a href="https://github.com/spacehuhn/esp8266_deauther/wiki" target="_blank">Wiki</a> | <a href="https://github.com/spacehuhn/esp8266_deauther" target="_blank">GitHub</a><br>
<br>

View File

@@ -321,7 +321,16 @@ button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type=
button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
transform: scale(.93);
}
button:disabled:hover, input[type="submit"]:disabled:hover, input[type="reset"]:disabled:hover, input[type="button"]:disabled:hover {
background: white;
cursor: not-allowed;
opacity: 0.40;
filter: alpha(opacity=40);
transform: scale(1);
}
button::-moz-focus-inner {
border: 0;
}
/* Forms */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
height: 38px;