-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_min.html
47 lines (47 loc) · 6.83 KB
/
index_min.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>body,html{margin:0;height:100%;overflow:hidden;overscroll-behavior:contain}#mainDiv{width:100%;height:100%;display:flex;align-items:center;background:linear-gradient(360deg,#068,#fff)}#backgroundCnvs{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1.2);z-index:1}#dataDiv{position:relative;border:1px solid #dfdfdf;background:linear-gradient(360deg,#ddd,#fff);width:330px;height:465px;margin:0 auto;z-index:2}.titleText{display:inline-block;margin:0 auto;padding-top:20px;padding-left:40px;font-family:Verdana,Geneva,sans-serif;font-size:11px;font-weight:700;color:#555}.titleText2{padding-left:0;font-size:18px;padding-top:150px}.titleText3{margin-top:60px;font-size:14px;padding-left:0;padding-bottom:24px}#refreshBtn{font-size:10px;font-weight:700;margin-left:55px;padding:2px;font-family:Verdana,Geneva,sans-serif;cursor:pointer}#refreshBtn:active{background-color:#999;color:#fff;border-radius:4px}#connectionList{height:300px;max-height:300px;background:#fff;border:1px solid #999;width:250px;margin:0 auto;overflow-y:auto;cursor:pointer}.connectionItem{border-bottom:1px solid #ccc;padding:2px;font-family:Verdana,Geneva,sans-serif;font-size:12px;color:#666;user-select:none}.selectedConnection{background-color:#abe5f9}#pwDiv{background:#fff;max-height:270px;width:250px;margin:0 auto;border:1px solid #999}.loadingRing{display:inline-block;width:100%;height:100%;margin:0 auto}.loadingRing:after{content:" ";display:block;width:64px;position:absolute;height:64px;top:40%;left:36%;border-radius:50%;border:6px solid #cef;border-color:#cef transparent #cef transparent;animation:loading-ring 1.2s linear infinite}@keyframes loading-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loadingDiv{background-color:#7777776b;width:100%;height:100%;position:absolute;top:0;left:0;z-index:100}.overlayDiv{display:none;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:8px;text-align:center;z-index:100}#connectedDiv{background-color:#fff}#errorDiv{background-color:rgba(105,105,105,.65)}#errorModal{width:100%;height:50%;top:25%;position:absolute;background:#f76060}#buttonsDiv{width:100%;padding-top:10px;margin:0 auto;text-align:center}#saveDiv{display:inline-block}#versionDiv{font-size:8px;font-family:"Lucida Console",Monaco,monospace;position:absolute;bottom:0;width:100%;text-align:center}#showHide{position:absolute;right:44px;padding-top:3px;font-family:Verdana,Geneva,sans-serif;font-size:9px;font-weight:700;background:#fff;cursor:pointer}input[type=button]{background-color:#666;border:1px solid #ccc;color:#fff;padding:8px 16px;text-decoration:none;margin:4px 2px;cursor:pointer;outline:0;border-radius:25px}input[type=button]:hover{background-color:#777}input[type=button]:active{background-color:#aaa;border-color:#4caf50}input[type=button]:disabled{background-color:#ccc;border-color:#ddd}input[type=password]{width:85%;background:0 0;border:transparent;outline:0}input[type=text]{width:85%;background:0 0;border:transparent;outline:0;font-family:Verdana,Geneva,sans-serif;font-size:12px}</style>
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
<html>
<head>
<title>PeggyConfig</title>
</head>
<body>
<div id=mainDiv>
<canvas id=backgroundCnvs></canvas>
<div id=dataDiv>
<div id=connectedDiv class=overlayDiv>
<span class="titleText titleText2">WiFi connected successfully!<br>Portal shutting down.</span>
</div>
<div id=errorDiv class=overlayDiv>
<div id=errorModal>
<span class="titleText titleText3">Invalid credentials.<br> Try again!</span>
<div>
<input id=connectBtn value=Close type=button onclick=showError(!1)>
</div>
</div>
</div>
<div id=loadingDiv>
<div class=loadingRing></div>
</div>
<div>
<label for=connList class=titleText>AVAILABLE NETWORKS</label>
<span id=refreshBtn onclick=initPage()>Refresh</span>
</div>
<div id=connectionList></div>
<label for=loginPw class=titleText>PASSWORD</label>
<div id=pwDiv>
<input id=loginPw type=password>
<span id=showHide onclick=showHidePw()>SHOW</span>
</div>
<div id=buttonsDiv>
<div id=saveDiv>
<input id=connectBtn value=Connect type=button onclick=connect()>
</div>
</div>
<div id=versionDiv>
<span id=versionNumber>Powered by PeggyConfig</span>
</div>
</div>
</div>
</body>
</html>
<script>var _availableWifi=[],_selectedWifi=void 0,_manualSSID=!1;function initPage(){showLoading(!0);try{sendGET("AvailableWifi",(function(e){""!=e?(_availableWifi=e.split(";"),createWifiList()):_manualSSID=!0,showLoading(!1)}))}catch{console.log("NO RESPONSE FROM MCU."),showLoading(!1)}}function showHidePw(){"SHOW"==document.getElementById("showHide").innerText?(document.getElementById("showHide").innerText="HIDE",document.getElementById("loginPw").type="text"):(document.getElementById("showHide").innerText="SHOW",document.getElementById("loginPw").type="password")}function showLoading(e){document.getElementById("loadingDiv").style.display=e?"block":"none"}function setError(e,n){n?(document.getElementById(e).style.outline=0,document.getElementById(e).style.borderColor="red",document.getElementById("dataDiv").style.boxShadow="0 0 12px 4px red"):(document.getElementById(e).style.outline="",document.getElementById(e).style.borderColor="",document.getElementById("dataDiv").style.boxShadow="")}function showConnected(){document.getElementById("connectedDiv").style.display="block",document.getElementById("dataDiv").style.boxShadow="0 0 12px 4px green"}function showError(e){document.getElementById("errorDiv").style.display=e?"block":"none"}function connect(){if(showLoading(!0),checkForm()){var e={SSID:_availableWifi[_selectedWifi],PASSWORD:document.getElementById("loginPw").value};sendPOST(JSON.stringify(e),(function(e){"True"==e?(showError(!1),showConnected()):showError(!0),showLoading(!1)}))}else showLoading(!1)}function checkForm(){var e=!0;return null==_selectedWifi?(setError("connectionList",!0),e=!1):setError("connectionList",!1),""==document.getElementById("loginPw").value?(setError("pwDiv",!0),e=!1):setError("pwDiv",!1),e}function sendPOST(e,n){var t=new XMLHttpRequest;t.open("POST","/dataIn",!0),t.setRequestHeader("Content-Type","application/octet-stream"),t.send(e),t.onload=function(){"function"==typeof n&&n(t.statusText)}}function sendGET(e,n){var t=new XMLHttpRequest;t.open("GET","/"+e),t.send(null),t.onload=function(){"function"==typeof n&&n(t.responseText)}}function createWifiList(){var e="";if(null!=_availableWifi){for(var n=0;n<_availableWifi.length;n++)if(""!=_availableWifi[n]){var t=_availableWifi[n];t.length>20&&(t=t.substring(0,17)+"..."),e+="<div class='connectionItem' id='conn"+n+"' onclick='selectWifiConnection("+n+")'>",e+="<div class='connectionName'>"+t+"</div>",e+="</div>"}document.getElementById("connectionList").innerHTML=e}}function selectWifiConnection(e){null!=_selectedWifi&&document.getElementById("conn"+_selectedWifi).classList.remove("selectedConnection");_selectedWifi=e,document.getElementById("conn"+_selectedWifi).classList.add("selectedConnection")}initPage()</script>