-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebpages.h
158 lines (156 loc) · 5.55 KB
/
webpages.h
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<p>Main page</p>
<p>Firmware: %FIRMWARE%</p>
<p>Free Storage: <span id="freespiffs">%FREESPIFFS%</span> | Used Storage: <span id="usedspiffs">%USEDSPIFFS%</span> | Total Storage: <span id="totalspiffs">%TOTALSPIFFS%</span></p>
<p>
<button onclick="logoutButton()">Logout</button>
<button onclick="rebootButton()">Reboot</button>
<button onclick="listFilesButton()">List Files</button>
<button onclick="showUploadButtonFancy()">Upload File</button>
</p>
<p id="status"></p>
<p id="detailsheader"></p>
<p id="details"></p>
<script>
function logoutButton() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/logout", true);
xhr.send();
setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);
}
function rebootButton() {
document.getElementById("status").innerHTML = "Invoking Reboot ...";
var xhr = new XMLHttpRequest();
xhr.open("GET", "/reboot", true);
xhr.send();
window.open("/reboot","_self");
}
function listFilesButton() {
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", "/listfiles", false);
xmlhttp.send();
document.getElementById("detailsheader").innerHTML = "<h3>Files<h3>";
document.getElementById("details").innerHTML = xmlhttp.responseText;
}
function downloadDeleteButton(filename, action) {
var urltocall = "/file?name=" + filename + "&action=" + action;
xmlhttp=new XMLHttpRequest();
if (action == "delete") {
xmlhttp.open("GET", urltocall, false);
xmlhttp.send();
document.getElementById("status").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "/listfiles", false);
xmlhttp.send();
document.getElementById("details").innerHTML = xmlhttp.responseText;
}
if (action == "download") {
document.getElementById("status").innerHTML = "";
window.open(urltocall,"_blank");
}
}
function showUploadButtonFancy() {
document.getElementById("detailsheader").innerHTML = "<h3>Upload File<h3>"
document.getElementById("status").innerHTML = "";
var uploadform = "<form method = \"POST\" action = \"/\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"data\"/><input type=\"submit\" name=\"upload\" value=\"Upload\" title = \"Upload File\"></form>"
// document.getElementById("details").innerHTML = uploadform;
var uploadform =
"<form id=\"upload_form\" enctype=\"multipart/form-data\" method=\"post\">" +
"<input type=\"file\" name=\"file1\" id=\"file1\" onchange=\"uploadFile()\"><br>" +
"<progress id=\"progressBar\" value=\"0\" max=\"100\" style=\"width:300px;\"></progress>" +
"<h3 id=\"status\"></h3>" +
"<p id=\"loaded_n_total\"></p>" +
"</form>";
document.getElementById("details").innerHTML = uploadform;
}
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false); // doesnt appear to ever get called even upon success
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "/");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; // event.total doesnt show accurate total file size
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes";
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
if (percent >= 100) {
_("status").innerHTML = "Please wait, writing file to filesystem";
}
}
function completeHandler(event) {
_("status").innerHTML = "Upload Complete";
_("progressBar").value = 0;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", "/listfiles", false);
xmlhttp.send();
document.getElementById("status").innerHTML = "File Uploaded";
document.getElementById("detailsheader").innerHTML = "<h3>Files<h3>";
document.getElementById("details").innerHTML = xmlhttp.responseText;
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "inUpload Aborted";
}
</script>
</body>
</html>
)rawliteral";
const char logout_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<p><a href="/">Log Back In</a></p>
</body>
</html>
)rawliteral";
// reboot.html base upon https://gist.github.com/Joel-James/62d98e8cb3a1b6b05102
const char reboot_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h3>
Rebooting, returning to main page in <span id="countdown">30</span> seconds
</h3>
<script type="text/javascript">
var seconds = 20;
function countdown() {
seconds = seconds - 1;
if (seconds < 0) {
window.location = "/";
} else {
document.getElementById("countdown").innerHTML = seconds;
window.setTimeout("countdown()", 1000);
}
}
countdown();
</script>
</body>
</html>
)rawliteral";