442 lines
10 KiB
HTML
Executable File
442 lines
10 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<!-- © MiroZ 2024 -->
|
|
<script type = "text/javascript">
|
|
var ws = null;
|
|
function OpenSocket()
|
|
{
|
|
ws = new WebSocket('ws://172.68.4.1/provision');
|
|
ws.onopen = function()
|
|
{
|
|
console.info('onopen');
|
|
StartWifiScan();
|
|
}
|
|
ws.onclose = function()
|
|
{
|
|
console.info('onclose');
|
|
OpenSocket();
|
|
}
|
|
ws.onerror = function(error)
|
|
{
|
|
console.error(error);
|
|
}
|
|
ws.onmessage = function(evt_data)
|
|
{
|
|
console.log('Message', evt_data.data);
|
|
|
|
var rcv = evt_data.data.split("|");
|
|
var cmd = rcv[0].split(":");
|
|
|
|
console.log('cmd', cmd);
|
|
|
|
switch(cmd[1])
|
|
{
|
|
case "scan_wifi":
|
|
var table = document.getElementById("wifi_table");
|
|
while(table.rows.length > 1)
|
|
table.deleteRow(1);
|
|
|
|
var num = rcv[1].split(":")[1];
|
|
for(var n=0; n<num; n++)
|
|
{
|
|
var ssid = rcv[2+n].split(",");
|
|
var row = table.insertRow(n + 1);
|
|
row.insertCell(0).innerHTML="<a href=\"javascript:onSelectWifi('"+ ssid[0] +"')\">" + ssid[0] + "</a>"
|
|
row.insertCell(1).innerHTML = ssid[1] == 1 ? "secured" : "open";
|
|
row.insertCell(2).innerHTML = ssid[2];
|
|
}
|
|
hideAll();
|
|
showWifiTable(true);
|
|
showWifiCred(true);
|
|
break;
|
|
|
|
case "ok":
|
|
onSetupOk();
|
|
break;
|
|
|
|
case "fail":
|
|
onSetupError();
|
|
break;
|
|
}
|
|
|
|
|
|
/*var msg = JSON.parse(evt_data.data);
|
|
switch(msg.type)
|
|
{
|
|
case "wifi_scan":
|
|
var table = document.getElementById("wifi_table");
|
|
while(table.rows.length>1)
|
|
table.deleteRow(1);
|
|
|
|
for(var n=0; n<msg.data.length; n++)
|
|
{
|
|
var row = table.insertRow(n+1);
|
|
row.insertCell(0).innerHTML="<a href=\"javascript:onSelectWifi('"+ msg.data[n][0] +"')\">"+msg.data[n][0]+"</a>"
|
|
row.insertCell(1).innerHTML = msg.data[n][1] == 1 ? "secured" : "open";
|
|
row.insertCell(2).innerHTML = msg.data[n][2];
|
|
}
|
|
|
|
hideAll();
|
|
showWifiTable(true);
|
|
showWifiCred(true);
|
|
showWTailgating(true);
|
|
break;
|
|
|
|
case "error":
|
|
var code = msg.code;
|
|
if(code == 0)
|
|
onSetupOk();
|
|
else
|
|
onSetupError();
|
|
default:
|
|
break;
|
|
|
|
}
|
|
*/
|
|
}
|
|
}
|
|
function CloseSocket()
|
|
{
|
|
ws.close();
|
|
ws = null;
|
|
}
|
|
function hideAll()
|
|
{
|
|
showMsgOk(false);
|
|
showMsgError(false);
|
|
showWaitWifiScan(false);
|
|
showWaitVerifyConnection(false);
|
|
showWifiTable(false);
|
|
showWifiCred(false);
|
|
showWTailgating(false);
|
|
}
|
|
function OnLoad()
|
|
{
|
|
hideAll();
|
|
showWaitWifiScan(true);
|
|
OpenSocket();
|
|
}
|
|
function onSetupOk()
|
|
{
|
|
hideAll();
|
|
showMsgOk(true);
|
|
|
|
// setTimeout(function(){
|
|
// exit();
|
|
// }, 2000);
|
|
|
|
|
|
}
|
|
function onSetupError()
|
|
{
|
|
hideAll();
|
|
showMsgError(true);
|
|
//StartWifiScan();
|
|
}
|
|
function StartWifiScan()
|
|
{
|
|
ws.send("command:scan_wifi");
|
|
}
|
|
|
|
// show/hide elements
|
|
function showMsgOk(show){
|
|
document.getElementById("msg_ok").style.display = show ? "block" : "none";
|
|
}
|
|
function showMsgError(show){
|
|
document.getElementById("msg_error").style.display = show ? "block" : "none";
|
|
}
|
|
function showWaitWifiScan(show){
|
|
document.getElementById("wait_scan").style.display = show ? "block" : "none";
|
|
}
|
|
function showWaitVerifyConnection(show){
|
|
document.getElementById("wait_verify").style.display = show ? "block" : "none";
|
|
}
|
|
function showWifiTable(show){
|
|
document.getElementById("wifi_list").style.display = show ? "block" : "none";
|
|
}
|
|
function showWifiCred(show){
|
|
document.getElementById("wifi_cred").style.display = show ? "block" : "none";
|
|
}
|
|
function showWTailgating(show){
|
|
document.getElementById("wifi_tail").style.display = show ? "block" : "none";
|
|
}
|
|
function onSelectWifi(wifi)
|
|
{
|
|
console.log("Selected wifi:" + wifi);
|
|
document.getElementById("ssid_txt").value = wifi;
|
|
}
|
|
function onUseWifi()
|
|
{
|
|
var ssid = document.getElementById("ssid_txt").value;
|
|
var pwd = document.getElementById("pwd_txt").value;
|
|
|
|
hideAll();
|
|
showWaitVerifyConnection(true);
|
|
|
|
var v = "command:verify_wifi|ssid:"+ssid+"|pwd:"+pwd;
|
|
ws.send(v);
|
|
}
|
|
function onTailgating()
|
|
{
|
|
ws.onclose = function()
|
|
{
|
|
}
|
|
|
|
var v = {command:"tailgate"};
|
|
ws.send(JSON.stringify(v));
|
|
}
|
|
function onButton1()
|
|
{
|
|
hideAll();
|
|
showWifiTable(true);
|
|
showWifiCred(true);
|
|
showWTailgating(true);
|
|
|
|
var table = document.getElementById("wifi_table");
|
|
|
|
while(table.rows.length>1)
|
|
table.deleteRow(1);
|
|
|
|
for(var n=0; n<obj.data.length; n++)
|
|
{
|
|
var row = table.insertRow(n+1);
|
|
row.insertCell(0).innerHTML="<a href=\"javascript:onSelectWifi('"+ obj.data[n][0] +"')\">"+obj.data[n][0]+"</a>"
|
|
row.insertCell(1).innerHTML = obj.data[n][1] == 1 ? "secured" : "open";
|
|
row.insertCell(2).innerHTML = obj.data[n][2];
|
|
}
|
|
}
|
|
function onButton2()
|
|
{
|
|
onSetupOk();
|
|
}
|
|
</script>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta charset="utf-8">
|
|
<title>Untitled Document</title>
|
|
|
|
<style type="text/css">
|
|
|
|
.loader {
|
|
display: inline-block;
|
|
border: 8px solid #f3f3f3;
|
|
border-radius: 50%;
|
|
border-top: 8px solid #3498db;
|
|
width: 40px;
|
|
height: 40px;
|
|
-webkit-animation: spin 2s linear infinite; /* Safari */
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
/* Safari */
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
a:link {
|
|
color: #8C8C8C;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
a:visited {
|
|
color: #8C8C8C;
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
}
|
|
|
|
body {
|
|
background-color: #39466B;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
width: 380px;
|
|
}
|
|
|
|
table a:link {
|
|
color: #666;
|
|
font-weight: bold;
|
|
text-decoration:none;
|
|
}
|
|
table a:visited {
|
|
color: #999999;
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
}
|
|
|
|
table a:active,
|
|
table a:hover {
|
|
color: #bd5a35;
|
|
text-decoration:underline;
|
|
}
|
|
table {
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
color:#666;
|
|
font-size:16px;
|
|
text-shadow: 1px 1px 0px #fff;
|
|
background:#eaebec;
|
|
margin:0px;
|
|
border:#ccc 1px solid;
|
|
|
|
-moz-border-radius:3px;
|
|
-webkit-border-radius:3px;
|
|
border-radius:3px;
|
|
|
|
-moz-box-shadow: 0 1px 2px #d1d1d1;
|
|
-webkit-box-shadow: 0 1px 2px #d1d1d1;
|
|
box-shadow: 0 1px 2px #d1d1d1;
|
|
}
|
|
table th {
|
|
padding:6px 25px 6px 25px;
|
|
border-top:1px solid #fafafa;
|
|
border-bottom:1px solid #e0e0e0;
|
|
|
|
background: #ededed;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
|
|
background: -moz-linear-gradient(top, #ededed, #ebebeb);
|
|
}
|
|
table th:first-child {
|
|
text-align: left;
|
|
padding-left:20px;
|
|
}
|
|
table tr:first-child th:first-child {
|
|
-moz-border-radius-topleft:3px;
|
|
-webkit-border-top-left-radius:3px;
|
|
border-top-left-radius:3px;
|
|
text-align: center;
|
|
}
|
|
table tr:first-child th:last-child {
|
|
-moz-border-radius-topright: 3px;
|
|
-webkit-border-top-right-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
table tr {
|
|
text-align: center;
|
|
padding-left:20px;
|
|
}
|
|
table td:first-child {
|
|
text-align: center;
|
|
padding-left:20px;
|
|
border-left: 0;
|
|
}
|
|
table td {
|
|
padding:8px 25px 8px 25px;
|
|
border-top: 1px solid #ffffff;
|
|
border-bottom:1px solid #e0e0e0;
|
|
border-left: 1px solid #e0e0e0;
|
|
|
|
background: #fafafa;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
|
|
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
|
|
}
|
|
table tr.even td {
|
|
background: #f6f6f6;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
|
|
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
|
|
}
|
|
table tr:last-child td {
|
|
border-bottom:0;
|
|
}
|
|
table tr:last-child td:first-child {
|
|
-moz-border-radius-bottomleft:3px;
|
|
-webkit-border-bottom-left-radius:3px;
|
|
border-bottom-left-radius:3px;
|
|
}
|
|
table tr:last-child td:last-child {
|
|
-moz-border-radius-bottomright:3px;
|
|
-webkit-border-bottom-right-radius:3px;
|
|
border-bottom-right-radius:3px;
|
|
}
|
|
|
|
body h1, h2, h3, p{
|
|
color: #FFFFFF;
|
|
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
|
|
text-shadow: 2px 2px 2px #000000;
|
|
}
|
|
input {
|
|
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
|
|
font-size: large;
|
|
}
|
|
.button {
|
|
background-color: #4885B7;
|
|
border: none;
|
|
color: white;
|
|
padding-top: 8px;
|
|
padding-right: 16px;
|
|
padding-left: 16px;
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
|
|
margin-top: 4px;
|
|
margin-right: 2px;
|
|
margin-left: 2px;
|
|
margin-bottom: 4px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="OnLoad()">
|
|
<div class="send" id="send" style="display: none;">
|
|
<input type="button" onClick="onButton1()" name="button3" id="button1" value="Button1">
|
|
<input type="button" onClick="onButton2()" name="button4" id="button2" value="Button2">
|
|
</div>
|
|
<h2>Timmah's special WiFi configuration and stuff</h2>
|
|
<p><img src="logo.png" alt=""/><br>
|
|
|
|
</p>
|
|
<div id="msg_ok">
|
|
<h3>Timmah has ben successfully configured and it is ready for normal use.<br>You can now close this window.</h3>
|
|
</div>
|
|
<div id="msg_error">
|
|
<h3>Timmah was not able to connect to selected WiFi. Please check the spelling and password.</h3>
|
|
</div>
|
|
<div id="wait_scan">
|
|
<h3>Please wait, scanning local WiFi...</h3>
|
|
<div class="loader"></div>
|
|
</div>
|
|
<div id="wait_verify">
|
|
<h3>Please wait, verifying connection...</h3>
|
|
<div class="loader"></div>
|
|
</div>
|
|
|
|
<div id="wifi_list">
|
|
<table width="100%" align="center" cellspacing='0' id="wifi_table">
|
|
<thead>
|
|
<tr>
|
|
<th width="60%">WiFi name</th>
|
|
<th width="30%">Security</th>
|
|
<th width="10%">Signal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<p><a href="javascript:StartWifiScan()">Refresh</a></p>
|
|
</div>
|
|
<br>
|
|
|
|
<div id="wifi_cred">
|
|
<p>Your WiFi:
|
|
<input id="ssid_txt" type="text">
|
|
</p>
|
|
<p>Password:
|
|
<input type="password" id="pwd_txt" placeholder="password">
|
|
</p>
|
|
<button class="button" onClick="onUseWifi()">Connect</button>
|
|
</div>
|
|
<div id="wifi_tail">
|
|
<p>-or-</p>
|
|
<button class="button" onClick="onTailgating()">Tailgating</button>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|