mirror of https://github.com/lumapu/ahoy.git
				
				
			
				 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