-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathselect.tpl
98 lines (96 loc) · 4.47 KB
/
select.tpl
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
{% args req, content %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="description" content="Select WiFi network">
<meta name="author" content="Jonas Scharpf aka brainelectronics">
<title>Select WiFi</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="toast.js"></script>
<!--
<link href="style.css" rel="stylesheet">
<link href="list-groups.css" rel="stylesheet">
-->
<style type="text/css">
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:gray;color:#fff;opacity:1;transition:.5s;visibility:visible}
.overlay.hidden{opacity:0;visibility:hidden}
.loader{position:absolute;left:50%;top:50%;z-index:1;width:120px;height:120px;margin:-76px 0 0 -76px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}
}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
</style>
<style type="text/css">
.list-group{width:auto;max-width:460px;margin:4rem auto}
.form-check-input:checked+.form-checked-content{opacity:.5}
.form-check-input-placeholder{pointer-events:none;border-style:dashed}[contenteditable]:focus{outline:0}
.list-group-checkable{display:grid;gap:.5rem;border:0}
.list-group-checkable .list-group-item{cursor:pointer;border-radius:.5rem}
.list-group-item-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}
.list-group-item-check:hover+.list-group-item{background-color:var(--bs-light)}
.list-group-item-check:checked+.list-group-item{color:#fff;background-color:var(--bs-blue)}
.list-group-item-check:disabled+.list-group-item,.list-group-item-check[disabled]+.list-group-item{pointer-events:none;filter:none;opacity:.5}
</style>
<style type="text/css">
body {padding:50px 80px;}
</style>
</head>
<body>
<div id="overlay" class="overlay">
<div id="loader" class="loader"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<h4>Select a WiFi network</h4>
<div class="list-group list-group-checkable">
<form action="save_wifi_config" method="post" id="save_wifi_config_form">
<div name="wifi_network" id="wifi_network">
{{ content }}
</div>
<input type="text" class="w-100" name="ssid" id="ssid" placeholder="Custom Network Name">
<br>
<input type="password" class="w-100" name="password" id="password" placeholder="Passwort" onkeydown="if(event.keyCode==13)document.getElementById('save').click()"/>
<div class="list-group">
<button type="submit" id="save" value="Save" class="btn btn-lg btn-primary list-group-item active">Submit</button>
<form>
<input type="button" class="btn btn-lg btn-warning list-group-item" onclick="window.location.href = '/';" value="Go Back"/>
</form>
</div>
</form>
</div>
</div>
</div>
<div id="alert_container" style="position: fixed;z-index: 9999;top: 20px;right: 20px;"></div>
<script>
var selected_bssid = 0;
window.onload = function(e) {
setTimeout(showPage, 1000);
setTimeout(get_new_networks, 100);
setInterval(get_new_networks, 10000);
};
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
document.getElementById("overlay").style.display = "none";
};
document.getElementById("save_wifi_config_form").onsubmit = function(e) {
createToast('alert-success', 'Success!', 'Network saved', 5000);
return true;
};
function remember_selected_element(cb) {selected_bssid = cb.id;}
function get_new_networks() {
var xmlhttp = new XMLHttpRequest();
var url = "render_network_inputs";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var content = this.responseText;
document.getElementById("wifi_network").innerHTML = content;
if (selected_bssid) {document.getElementById(selected_bssid).checked = true;}
}
};
xmlhttp.open("GET", url);
xmlhttp.send();
}
</script>
</body>
</html>