mirror of https://github.com/jeelabs/esp-link.git
KatAst
9 years ago
parent
ff5a74b20a
commit
896693b5b2
@ -0,0 +1,124 @@ |
||||
<div id="main"> |
||||
<div class="header"> |
||||
<h1>WiFi Soft-AP Configuration</h1> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="pure-g"> |
||||
<div class="pure-u-1 pure-u-md-1-2"> |
||||
<div class="card"> |
||||
<h1>Soft-AP State</h1> |
||||
<div id="wifi-spinner" class="spinner spinner-small"> |
||||
</div> |
||||
<table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody> |
||||
<tr><td>WiFi mode</td><td id="wifi-mode"></td></tr> |
||||
<tr><td>Soft-AP SSID</td><td id="wifi-apssid"></td></tr> |
||||
<tr><td>Soft-AP Password</td><td id="wifi-appass"></td></tr> |
||||
<tr><td>Soft-AP Channel</td><td id="wifi-apchan"></td></tr> |
||||
<tr><td>Soft-AP Max Conn</td><td id="wifi-apmaxc"></td></tr> |
||||
<tr><td>Soft-AP Hidden</td><td id="wifi-aphidd"></td></tr> |
||||
<tr><td>Soft-AP Beacon Int</td><td id="wifi-apbeac"></td></tr> |
||||
<tr><td>Soft-AP Auth Mode</td><td id="wifi-apauth"></td></tr> |
||||
<tr><td>Soft-AP MAC</td><td id="wifi-apmac"></td></tr> |
||||
<tr><td colspan="2" id="wifi-apwarn"></td></tr> |
||||
</tbody> </table> |
||||
</div><!-- card--> |
||||
</div><!-- pure-u-1 --> |
||||
<div class="pure-u-1 pure-u-md-1-2"> |
||||
|
||||
<div class="card"> |
||||
<h1>Soft-AP Settings</h1> |
||||
<div id="AP_Settings-spinner" class="spinner spinner-small"></div> |
||||
|
||||
<form action="#" id="AP_Settings-form" class="pure-form" hidden> |
||||
<!-- <input type="text" id="conn_check" name="ap_connex" value="0" hidden>--> |
||||
<legend>Soft-AP main settings, use with care!</legend> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<label>Soft-AP SSID</label> |
||||
<input type="text" name="ap_ssid" /> |
||||
<div class="popup">Change the name of your AP!</div> |
||||
</div> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<label>Soft-AP Password</label> |
||||
<input type="text" name="ap_password" /> |
||||
<div class="popup">Password must be at least 8 chars long!</div> |
||||
</div> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<legend>Soft-AP Advanced Settings</legend> |
||||
</div> |
||||
|
||||
<div class="form-horizontal"> |
||||
<label for="AP_Settings-ron" style="margin-right:1em"> |
||||
<input type="radio" name="ap" value="on" id="AP_Settings-ron"/> |
||||
Show </label> |
||||
<label for="AP_Settings-roff" style="margin-right:1em"> |
||||
<input type="radio" name="ap" value="off" id="AP_Settings-roff"/> |
||||
Hide </label> |
||||
</div> |
||||
|
||||
<div id="AP_Settings-off" class="pure-form-stacked"></div> |
||||
<div id="AP_Settings-on" class="pure-form-stacked"> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<label>Soft-AP Max Connections</label> |
||||
<input type="text" name="ap_maxconn" /> |
||||
<div class="popup">Max 4 ( default 4 )</div> |
||||
</div> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<label>Soft-AP Beacon Interval</label> |
||||
<input type="text" name="ap_beacon" /> |
||||
<div class="popup">Between 100 - 60000 ms ( default 100ms )</div> |
||||
</div> |
||||
|
||||
<div class="pure-form-stacked"> |
||||
<label>Soft-AP Auth Mode</label> |
||||
<select name="ap_authmode" href="#"> |
||||
<option value="0">OPEN</option> |
||||
<option value="1">WEP</option> |
||||
<option value="2">WPA_PSK</option> |
||||
<option value="3">WPA2_PSK</option> |
||||
<option value="4">WPA_WPA2_PSK</option> |
||||
</select> |
||||
<div class="popup">Default WPA_WPA2_PSK</div> |
||||
</div> |
||||
|
||||
<div class="form-horizontal"> |
||||
<label><input type="checkbox" name="ap_hidden" />Soft-AP SSID hidden</label> |
||||
<div class="popup">Check this box to hide you Soft-AP SSID ( default Not Hidden )</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<button id="AP_Settings-button" type="submit" class="pure-button button-primary"> |
||||
Change Soft-AP settings! |
||||
</button> |
||||
|
||||
</form> |
||||
</div> |
||||
</div><!-- pure-u-1 --> |
||||
</div><!-- pure-g --> |
||||
</div><!-- content --> |
||||
</div><!-- main --> |
||||
</div><!-- layout --> |
||||
|
||||
<script type="text/javascript"> |
||||
</script> |
||||
<script src="wifiAp.js"></script> |
||||
<script type="text/javascript"> |
||||
onLoad(function() { |
||||
// Show info about AP |
||||
getWifiInfo(); |
||||
// Fetch actual settings |
||||
fetchApSettings(); |
||||
// Hide advanced settings |
||||
undoApAdvanced(); |
||||
bnd($("#AP_Settings-ron"), "click", doApAdvanced); |
||||
bnd($("#AP_Settings-roff"), "click", undoApAdvanced); |
||||
bnd($("#AP_Settings-form"), "submit", changeApSettings); |
||||
}); |
||||
</script> |
||||
</body></html> |
||||
@ -0,0 +1,98 @@ |
||||
var specials = []; |
||||
specials["ap_ssid"] = "SSID name"; |
||||
specials["ap_password"] = "PASSWORD"; |
||||
specials["ap_maxconn"] = "Max Connections number"; |
||||
specials["ap_beacon"] = "Beacon Interval"; |
||||
|
||||
function changeWifiMode(m) { |
||||
blockScan = 1; |
||||
hideWarning(); |
||||
ajaxSpin("POST", "setmode?mode=" + m, function(resp) { |
||||
showNotification("Mode changed"); |
||||
window.setTimeout(getWifiInfo, 100); |
||||
blockScan = 0; |
||||
}, function(s, st) { |
||||
showWarning("Error changing mode: " + st); |
||||
window.setTimeout(getWifiInfo, 100); |
||||
blockScan = 0; |
||||
}); |
||||
} |
||||
|
||||
function changeApSettings(e) { |
||||
e.preventDefault(); |
||||
var url = "/wifi/apchange?100=1"; |
||||
var i, inputs = document.querySelectorAll("#" + e.target.id + " input,select"); |
||||
for (i = 0; i < inputs.length; i++) { |
||||
if (inputs[i].type == "checkbox") { |
||||
var val = (inputs[i].checked) ? 1 : 0; |
||||
url += "&" + inputs[i].name + "=" + val; |
||||
} |
||||
else{ |
||||
var clean = inputs[i].value.replace(/[^\w]/gi, ""); |
||||
var comp = clean.localeCompare(inputs[i].value); |
||||
if ( comp != 0 ){ |
||||
showWarning("Invalid characters in " + specials[inputs[i].name]); |
||||
return; |
||||
}
|
||||
url += "&" + inputs[i].name + "=" + clean;
|
||||
} |
||||
}; |
||||
|
||||
hideWarning(); |
||||
var n = e.target.id.replace("-form", ""); |
||||
var cb = $("#" + n + "-button"); |
||||
addClass(cb, "pure-button-disabled"); |
||||
ajaxSpin("POST", url, function (resp) { |
||||
showNotification(n + " updated"); |
||||
removeClass(cb, "pure-button-disabled"); |
||||
window.setTimeout(getWifiInfo, 100); |
||||
}, function (s, st) { |
||||
showWarning(st); |
||||
removeClass(cb, "pure-button-disabled"); |
||||
window.setTimeout(fetchApSettings, 2000); |
||||
}); |
||||
} |
||||
|
||||
function displayApSettings(data) { |
||||
Object.keys(data).forEach(function (v) { |
||||
el = $("#" + v); |
||||
if (el != null) { |
||||
if (el.nodeName === "INPUT") el.value = data[v]; |
||||
else el.innerHTML = data[v]; |
||||
return; |
||||
} |
||||
|
||||
el = document.querySelector('input[name="' + v + '"]'); |
||||
if (el == null) |
||||
el = document.querySelector('select[name="' + v + '"]'); |
||||
|
||||
if (el != null) { |
||||
if (el.type == "checkbox") { |
||||
el.checked = data[v] == "enabled"; |
||||
} else el.value = data[v]; |
||||
} |
||||
}); |
||||
|
||||
$("#AP_Settings-spinner").setAttribute("hidden", "");
|
||||
$("#AP_Settings-form").removeAttribute("hidden"); |
||||
showWarning("Don't modify SOFTAP parameters with active connections"); |
||||
window.setTimeout(hideWarning(), 2000); |
||||
} |
||||
|
||||
function fetchApSettings() { |
||||
ajaxJson("GET", "/wifi/apinfo", displayApSettings, function () { |
||||
window.setTimeout(fetchApSettings, 1000); |
||||
}); |
||||
} |
||||
|
||||
function doApAdvanced() { |
||||
$('#AP_Settings-on').removeAttribute('hidden'); |
||||
$("#AP_Settings-off").setAttribute("hidden", ""); |
||||
$("#AP_Settings-roff").removeAttribute("checked"); |
||||
} |
||||
|
||||
function undoApAdvanced(){ |
||||
$("#AP_Settings-on").setAttribute("hidden", ""); |
||||
$("#AP_Settings-off").removeAttribute("hidden"); |
||||
$("#AP_Settings-roff").setAttribute("checked", ""); |
||||
} |
||||
Loading…
Reference in new issue