mirror of https://github.com/lumapu/ahoy.git
lumapu
1 year ago
9 changed files with 158 additions and 9 deletions
@ -0,0 +1,87 @@ |
|||||
|
<!doctype html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>Setup Wizard</title> |
||||
|
{#HTML_HEADER} |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="wrapper"> |
||||
|
<div class="container d-flex aic jc"> |
||||
|
<div id="con"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<script type="text/javascript"> |
||||
|
var v; |
||||
|
var found = false; |
||||
|
var c = document.getElementById("con"); |
||||
|
|
||||
|
function sect(e1, e2) { |
||||
|
return ml("div", {class: "row"}, [ |
||||
|
ml("div", {class: "col-12"}, ml("p", {}, e1)), |
||||
|
ml("div", {class: "col-12"}, e2) |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
function wifi() { |
||||
|
return ml("div", {}, [ |
||||
|
ml("div", {class: "row my-5"}, ml("div", {class: "col"}, ml("span", {class: "fs-1"}, "Welcome to AhoyDTU"))), |
||||
|
ml("div", {class: "row"}, ml("div", {class: "col"}, ml("span", {class: "fs-5"}, "Network Setup"))), |
||||
|
sect("Choose your WiFi Network", ml("select", {id: "net", onchange: () => {if(found) clearInterval(v)}}, ml("option", {value: "-1"}, "---"))), |
||||
|
sect("... or name it manually", ml("input", {id: "man", type: "text"})), |
||||
|
sect("WiFi Password", ml("input", {id: "pwd", type: "password"})), |
||||
|
ml("div", {class: "row my-4"}, ml("div", {class: "col a-r"}, ml("input", {type: "button", class:"btn", value: "next", onclick: () => {saveWifi()}}, null))), |
||||
|
ml("div", {class: "row mt-5"}, ml("div", {class: "col a-c"}, ml("a", {href: "http://192.168.4.1/"}, "stop wizard"))) |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
function checkWifi() { |
||||
|
c.replaceChildren( |
||||
|
ml("div", {class: "row my-5"}, ml("div", {class: "col"}, ml("span", {class: "fs-1"}, "Welcome to AhoyDTU"))), |
||||
|
ml("div", {class: "row"}, ml("div", {class: "col"}, ml("span", {class: "fs-5"}, "Test Connection"))), |
||||
|
sect("AhoyDTU is trying to connect to your WiFi", ml("span", {id: "state"}, "connecting ...")), |
||||
|
ml("div", {class: "row my-4"}, ml("div", {class: "col a-r"}, ml("input", {type: "button", class:"btn hide", id: "btn", value: "Finish", onclick: () => {redirect()}}, null))), |
||||
|
ml("div", {class: "row mt-5"}, ml("div", {class: "col a-c"}, ml("a", {href: "http://192.168.4.1/"}, "stop wizard"))) |
||||
|
) |
||||
|
v = setInterval(() => {getAjax('/api/setup/getip', printIp)}, 2500); |
||||
|
} |
||||
|
|
||||
|
function redirect() { |
||||
|
window.location.replace("http://192.168.4.1/") |
||||
|
} |
||||
|
|
||||
|
function printIp(obj) { |
||||
|
if("0.0.0.0" != obj["ip"]) { |
||||
|
clearInterval(v) |
||||
|
setHide("btn", false) |
||||
|
document.getElementById("state").innerHTML = "success, got following IP in your network: " + obj.ip |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function saveWifi() { |
||||
|
var ssid = document.getElementById("net").value; |
||||
|
if(-1 == ssid) |
||||
|
ssid = document.getElementById("man").value; |
||||
|
getAjax("/api/setup", ((o) => {if(!o.error) checkWifi()}), "POST", JSON.stringify({cmd: "save_wifi", ssid: ssid, pwd: document.getElementById("pwd").value})); |
||||
|
} |
||||
|
|
||||
|
function nets(obj) { |
||||
|
var e = document.getElementById("net"); |
||||
|
if(obj.networks.length > 0) { |
||||
|
var a = [] |
||||
|
a.push(ml("option", {value: -1}, obj.networks.length + " Network(s) found")) |
||||
|
for(n of obj.networks) { |
||||
|
a.push(ml("option", {value: n.ssid}, n.ssid + " (" + n.rssi + "dBm)")) |
||||
|
found = true; |
||||
|
} |
||||
|
e.replaceChildren(...a) |
||||
|
} |
||||
|
getAjax("/api/setup", ((o) => {}), "POST", JSON.stringify({cmd: "scan_wifi"})); |
||||
|
} |
||||
|
|
||||
|
getAjax("/api/setup", ((o) => {}), "POST", JSON.stringify({cmd: "scan_wifi"})); |
||||
|
c.append(wifi()) |
||||
|
|
||||
|
v = setInterval(() => {getAjax('/api/setup/networks', nets)}, 2500); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
Loading…
Reference in new issue