mirror of
https://github.com/IoTManagerProject/IoTManager.git
synced 2026-03-26 22:22:16 +03:00
Merge branch 'stable' into beta
This commit is contained in:
Dmitry Borisenko
658
data/edit.htm
Normal file
658
data/edit.htm
Normal file
@@ -0,0 +1,658 @@
|
||||
<!--This is the plain html source of the hex encoded Editor-Page embedded in SPIFFSEditor.cpp -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>FS Editor</title>
|
||||
<style type="text/css" media="screen">
|
||||
.cm {
|
||||
z-index: 300;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
border: 1px solid #444;
|
||||
background-color: #F5F5F5;
|
||||
display: none;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cm ul {
|
||||
list-style: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cm li {
|
||||
position: relative;
|
||||
min-width: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm span {
|
||||
color: #444;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.cm li:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.cm li:hover span {
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.tvu ul,
|
||||
.tvu li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tvu input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tvu {
|
||||
font: normal 12px Verdana, Arial, Sans-serif;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
color: #444;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.tvu span {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 0 0 18px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADoSURBVBgZBcExblNBGAbA2ceegTRBuIKOgiihSZNTcC5LUHAihNJR0kGKCDcYJY6D3/77MdOinTvzAgCw8ysThIvn/VojIyMjIyPP+bS1sUQIV2s95pBDDvmbP/mdkft83tpYguZq5Jh/OeaYh+yzy8hTHvNlaxNNczm+la9OTlar1UdA/+C2A4trRCnD3jS8BB1obq2Gk6GU6QbQAS4BUaYSQAf4bhhKKTFdAzrAOwAxEUAH+KEM01SY3gM6wBsEAQB0gJ+maZoC3gI6iPYaAIBJsiRmHU0AALOeFC3aK2cWAACUXe7+AwO0lc9eTHYTAAAAAElFTkSuQmCC') no-repeat;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.tvu span:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.tvu {
|
||||
-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes webkit-adjacent-element-selector-bugfix {
|
||||
from {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#uploader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 28px;
|
||||
line-height: 24px;
|
||||
padding-left: 10px;
|
||||
background-color: #444;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
#tree {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 160px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#editor,
|
||||
#preview {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 160px;
|
||||
border-left: 1px solid #EEE;
|
||||
}
|
||||
|
||||
#preview {
|
||||
background-color: #EEE;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#loader {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: 40%;
|
||||
}
|
||||
|
||||
.loader {
|
||||
z-index: 10000;
|
||||
border: 8px solid #b5b5b5;
|
||||
/* Grey */
|
||||
border-top: 8px solid #3498db;
|
||||
/* Blue */
|
||||
border-bottom: 8px solid #3498db;
|
||||
/* Blue */
|
||||
border-radius: 50%;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
animation: spin 2s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
if (typeof XMLHttpRequest === "undefined") {
|
||||
XMLHttpRequest = function () {
|
||||
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) { }
|
||||
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) { }
|
||||
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
|
||||
throw new Error("This browser does not support XMLHttpRequest.");
|
||||
};
|
||||
}
|
||||
|
||||
function ge(a) {
|
||||
return document.getElementById(a);
|
||||
}
|
||||
function ce(a) {
|
||||
return document.createElement(a);
|
||||
}
|
||||
|
||||
function sortByKey(array, key) {
|
||||
return array.sort(function (a, b) {
|
||||
var x = a[key]; var y = b[key];
|
||||
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var QueuedRequester = function () {
|
||||
this.queue = [];
|
||||
this.running = false;
|
||||
this.xmlhttp = null;
|
||||
}
|
||||
QueuedRequester.prototype = {
|
||||
_request: function (req) {
|
||||
this.running = true;
|
||||
if (!req instanceof Object) return;
|
||||
var that = this;
|
||||
|
||||
function ajaxCb(x, d) {
|
||||
return function () {
|
||||
if (x.readyState == 4) {
|
||||
ge("loader").style.display = "none";
|
||||
d.callback(x.status, x.responseText);
|
||||
if (that.queue.length === 0) that.running = false;
|
||||
if (that.running) that._request(that.queue.shift());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ge("loader").style.display = "block";
|
||||
|
||||
var p = "";
|
||||
if (req.params instanceof FormData) {
|
||||
p = req.params;
|
||||
} else if (req.params instanceof Object) {
|
||||
for (var key in req.params) {
|
||||
if (p === "")
|
||||
p += (req.method === "GET") ? "?" : "";
|
||||
else
|
||||
p += "&";
|
||||
p += encodeURIComponent(key) + "=" + encodeURIComponent(req.params[key]);
|
||||
};
|
||||
}
|
||||
|
||||
this.xmlhttp = new XMLHttpRequest();
|
||||
this.xmlhttp.onreadystatechange = ajaxCb(this.xmlhttp, req);
|
||||
if (req.method === "GET") {
|
||||
this.xmlhttp.open(req.method, req.url + p, true);
|
||||
this.xmlhttp.send();
|
||||
} else {
|
||||
this.xmlhttp.open(req.method, req.url, true);
|
||||
if (p instanceof String)
|
||||
this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
this.xmlhttp.send(p);
|
||||
}
|
||||
},
|
||||
stop: function () {
|
||||
if (this.running) this.running = false;
|
||||
if (this.xmlhttp && this.xmlhttp.readyState < 4) {
|
||||
this.xmlhttp.abort();
|
||||
}
|
||||
},
|
||||
add: function (method, url, params, callback) {
|
||||
this.queue.push({ url: url, method: method, params: params, callback: callback });
|
||||
if (!this.running) {
|
||||
this._request(this.queue.shift());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var requests = new QueuedRequester();
|
||||
|
||||
function createFileUploader(element, tree, editor) {
|
||||
var xmlHttp;
|
||||
|
||||
var refresh = ce("button");
|
||||
refresh.innerHTML = 'Refresh List';
|
||||
ge(element).appendChild(refresh);
|
||||
|
||||
var input = ce("input");
|
||||
input.type = "file";
|
||||
input.multiple = false;
|
||||
input.name = "data";
|
||||
input.id = "upload-select";
|
||||
ge(element).appendChild(input);
|
||||
|
||||
var path = ce("input");
|
||||
path.id = "upload-path";
|
||||
path.type = "text";
|
||||
path.name = "path";
|
||||
path.defaultValue = "/";
|
||||
ge(element).appendChild(path);
|
||||
|
||||
var button = ce("button");
|
||||
button.innerHTML = 'Upload';
|
||||
ge(element).appendChild(button);
|
||||
|
||||
var mkfile = ce("button");
|
||||
mkfile.innerHTML = 'Create';
|
||||
ge(element).appendChild(mkfile);
|
||||
|
||||
var filename = ce("input");
|
||||
filename.id = "editor-filename";
|
||||
filename.type = "text";
|
||||
filename.disabled = true;
|
||||
filename.size = 20;
|
||||
ge(element).appendChild(filename);
|
||||
|
||||
var savefile = ce("button");
|
||||
savefile.innerHTML = ' Save ';
|
||||
ge(element).appendChild(savefile);
|
||||
|
||||
function httpPostProcessRequest(status, responseText) {
|
||||
if (status != 200)
|
||||
alert("ERROR[" + status + "]: " + responseText);
|
||||
else
|
||||
tree.refreshPath(path.value);
|
||||
}
|
||||
function createPath(p) {
|
||||
var formData = new FormData();
|
||||
formData.append("path", p);
|
||||
requests.add("PUT", "/edit", formData, httpPostProcessRequest);
|
||||
}
|
||||
|
||||
mkfile.onclick = function (e) {
|
||||
createPath(path.value);
|
||||
editor.loadUrl(path.value);
|
||||
path.value = "/";
|
||||
};
|
||||
|
||||
savefile.onclick = function (e) {
|
||||
editor.execCommand('saveCommand');
|
||||
};
|
||||
|
||||
refresh.onclick = function (e) {
|
||||
tree.refreshPath(path.value);
|
||||
};
|
||||
|
||||
button.onclick = function (e) {
|
||||
if (input.files.length === 0) {
|
||||
return;
|
||||
}
|
||||
var formData = new FormData();
|
||||
formData.append("data", input.files[0], path.value);
|
||||
requests.add("POST", "/edit", formData, httpPostProcessRequest);
|
||||
var uploadPath = ge("upload-path");
|
||||
uploadPath.value = "/";
|
||||
var uploadSelect = ge("upload-select");
|
||||
uploadSelect.value = "";
|
||||
};
|
||||
input.onchange = function (e) {
|
||||
if (input.files.length === 0) return;
|
||||
var filename = input.files[0].name;
|
||||
var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
|
||||
var name = /(.*)\.[^.]+$/.exec(filename)[1];
|
||||
if (typeof name !== undefined) {
|
||||
filename = name;
|
||||
}
|
||||
path.value = "/" + filename + "." + ext;
|
||||
};
|
||||
}
|
||||
|
||||
function createTree(element, editor) {
|
||||
var preview = ge("preview");
|
||||
var treeRoot = ce("div");
|
||||
treeRoot.className = "tvu";
|
||||
ge(element).appendChild(treeRoot);
|
||||
|
||||
function loadDownload(path) {
|
||||
ge('download-frame').src = "/edit?download=" + path;
|
||||
}
|
||||
|
||||
function loadPreview(path) {
|
||||
var edfname = ge("editor-filename");
|
||||
edfname.value = path;
|
||||
ge("editor").style.display = "none";
|
||||
preview.style.display = "block";
|
||||
preview.innerHTML = '<img src="/edit?edit=' + path + '&_cb=' + Date.now() + '" style="max-width:100%; max-height:100%; margin:auto; display:block;" />';
|
||||
}
|
||||
|
||||
function fillFileMenu(el, path) {
|
||||
var list = ce("ul");
|
||||
el.appendChild(list);
|
||||
var action = ce("li");
|
||||
list.appendChild(action);
|
||||
if (isImageFile(path)) {
|
||||
action.innerHTML = "<span>Preview</span>";
|
||||
action.onclick = function (e) {
|
||||
loadPreview(path);
|
||||
if (document.body.getElementsByClassName('cm').length > 0) document.body.removeChild(el);
|
||||
};
|
||||
} else if (isTextFile(path)) {
|
||||
action.innerHTML = "<span>Edit</span>";
|
||||
action.onclick = function (e) {
|
||||
editor.loadUrl(path);
|
||||
if (document.body.getElementsByClassName('cm').length > 0) document.body.removeChild(el);
|
||||
};
|
||||
}
|
||||
var download = ce("li");
|
||||
list.appendChild(download);
|
||||
download.innerHTML = "<span>Download</span>";
|
||||
download.onclick = function (e) {
|
||||
loadDownload(path);
|
||||
if (document.body.getElementsByClassName('cm').length > 0) document.body.removeChild(el);
|
||||
};
|
||||
var delFile = ce("li");
|
||||
list.appendChild(delFile);
|
||||
delFile.innerHTML = "<span>Delete</span>";
|
||||
delFile.onclick = function (e) {
|
||||
httpDelete(path);
|
||||
if (document.body.getElementsByClassName('cm').length > 0) document.body.removeChild(el);
|
||||
};
|
||||
}
|
||||
|
||||
function showContextMenu(event, path, isfile) {
|
||||
var divContext = ce("div");
|
||||
var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
|
||||
var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
|
||||
var left = event.clientX + scrollLeft;
|
||||
var top = event.clientY + scrollTop;
|
||||
divContext.className = 'cm';
|
||||
divContext.style.display = 'block';
|
||||
divContext.style.left = left + 'px';
|
||||
divContext.style.top = top + 'px';
|
||||
fillFileMenu(divContext, path);
|
||||
document.body.appendChild(divContext);
|
||||
var width = divContext.offsetWidth;
|
||||
var height = divContext.offsetHeight;
|
||||
divContext.onmouseout = function (e) {
|
||||
if (e.clientX < left || e.clientX > (left + width) || e.clientY < top || e.clientY > (top + height)) {
|
||||
if (document.body.getElementsByClassName('cm').length > 0) document.body.removeChild(divContext);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createTreeLeaf(path, name, size) {
|
||||
var leaf = ce("li");
|
||||
leaf.id = name;
|
||||
var label = ce("span");
|
||||
label.innerHTML = name;
|
||||
leaf.appendChild(label);
|
||||
leaf.onclick = function (e) {
|
||||
if (isTextFile(leaf.id.toLowerCase())) {
|
||||
editor.loadUrl(leaf.id);
|
||||
} else if (isImageFile(leaf.id.toLowerCase())) {
|
||||
loadPreview(leaf.id);
|
||||
}
|
||||
};
|
||||
leaf.oncontextmenu = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
showContextMenu(e, leaf.id, true);
|
||||
};
|
||||
return leaf;
|
||||
}
|
||||
|
||||
function addList(parent, path, items) {
|
||||
sortByKey(items, 'name');
|
||||
var list = ce("ul");
|
||||
parent.appendChild(list);
|
||||
var ll = items.length;
|
||||
for (var i = 0; i < ll; i++) {
|
||||
if (items[i].type === "file")
|
||||
list.appendChild(createTreeLeaf(path, items[i].name, items[i].size));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function isTextFile(path) {
|
||||
var ext = /(?:\.([^.]+))?$/.exec(path)[1];
|
||||
if (typeof ext !== undefined) {
|
||||
switch (ext) {
|
||||
case "cnv":
|
||||
case "txt":
|
||||
case "htm":
|
||||
case "html":
|
||||
case "js":
|
||||
case "css":
|
||||
case "xml":
|
||||
case "json":
|
||||
case "conf":
|
||||
case "ini":
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isImageFile(path) {
|
||||
var ext = /(?:\.([^.]+))?$/.exec(path)[1];
|
||||
if (typeof ext !== undefined) {
|
||||
switch (ext) {
|
||||
case "png":
|
||||
case "jpg":
|
||||
case "jpeg":
|
||||
case "gif":
|
||||
case "bmp":
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
this.refreshPath = function (path) {
|
||||
treeRoot.removeChild(treeRoot.childNodes[0]);
|
||||
httpGet(treeRoot, "/");
|
||||
};
|
||||
|
||||
function delCb(path) {
|
||||
return function (status, responseText) {
|
||||
if (status != 200) {
|
||||
alert("ERROR[" + status + "]: " + responseText);
|
||||
} else {
|
||||
treeRoot.removeChild(treeRoot.childNodes[0]);
|
||||
httpGet(treeRoot, "/");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function httpDelete(filename) {
|
||||
var formData = new FormData();
|
||||
formData.append("path", filename);
|
||||
requests.add("DELETE", "/edit", formData, delCb(filename));
|
||||
}
|
||||
|
||||
function getCb(parent, path) {
|
||||
return function (status, responseText) {
|
||||
if (status == 200)
|
||||
addList(parent, path, JSON.parse(responseText));
|
||||
}
|
||||
}
|
||||
|
||||
function httpGet(parent, path) {
|
||||
requests.add("GET", "/edit", { list: path }, getCb(parent, path));
|
||||
}
|
||||
|
||||
httpGet(treeRoot, "/");
|
||||
return this;
|
||||
}
|
||||
|
||||
function createEditor(element, file, lang, theme, type) {
|
||||
function getLangFromFilename(filename) {
|
||||
var lang = "plain";
|
||||
var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
|
||||
if (typeof ext !== undefined) {
|
||||
switch (ext) {
|
||||
case "cnv": lang = "plain"; break;
|
||||
case "txt": lang = "plain"; break;
|
||||
case "hex": lang = "plain"; break;
|
||||
case "conf": lang = "plain"; break;
|
||||
case "htm": lang = "html"; break;
|
||||
case "js": lang = "javascript"; break;
|
||||
case "css":
|
||||
case "scss":
|
||||
case "php":
|
||||
case "html":
|
||||
case "json":
|
||||
case "xml":
|
||||
case "ini": lang = ext;
|
||||
}
|
||||
}
|
||||
return lang;
|
||||
}
|
||||
|
||||
if (typeof file === "undefined") file = "/index.html";
|
||||
|
||||
if (typeof lang === "undefined") {
|
||||
lang = getLangFromFilename(file);
|
||||
}
|
||||
|
||||
if (typeof theme === "undefined") theme = "textmate";
|
||||
|
||||
if (typeof type === "undefined") {
|
||||
type = "text/" + lang;
|
||||
if (lang === "c_cpp") type = "text/plain";
|
||||
}
|
||||
|
||||
var editor = ace.edit(element);
|
||||
function httpPostProcessRequest(status, responseText) {
|
||||
if (status != 200) alert("ERROR[" + status + "]: " + responseText);
|
||||
}
|
||||
function httpPost(filename, data, type) {
|
||||
var formData = new FormData();
|
||||
formData.append("data", new Blob([data], { type: type }), filename);
|
||||
requests.add("POST", "/edit", formData, httpPostProcessRequest);
|
||||
}
|
||||
function httpGetProcessRequest(status, responseText) {
|
||||
ge("preview").style.display = "none";
|
||||
ge("editor").style.display = "block";
|
||||
if (status == 200)
|
||||
editor.setValue(responseText);
|
||||
else
|
||||
editor.setValue("");
|
||||
editor.clearSelection();
|
||||
}
|
||||
function httpGet(theUrl) {
|
||||
requests.add("GET", "/edit", { edit: theUrl }, httpGetProcessRequest);
|
||||
}
|
||||
|
||||
if (lang !== "plain") editor.getSession().setMode("ace/mode/" + lang);
|
||||
editor.setTheme("ace/theme/" + theme);
|
||||
editor.$blockScrolling = Infinity;
|
||||
editor.getSession().setUseSoftTabs(true);
|
||||
editor.getSession().setTabSize(2);
|
||||
editor.setHighlightActiveLine(true);
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.commands.addCommand({
|
||||
name: 'saveCommand',
|
||||
bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
|
||||
exec: function (editor) {
|
||||
httpPost(file, editor.getValue() + "", type);
|
||||
},
|
||||
readOnly: false
|
||||
});
|
||||
editor.commands.addCommand({
|
||||
name: 'undoCommand',
|
||||
bindKey: { win: 'Ctrl-Z', mac: 'Command-Z' },
|
||||
exec: function (editor) {
|
||||
editor.getSession().getUndoManager().undo(false);
|
||||
},
|
||||
readOnly: false
|
||||
});
|
||||
editor.commands.addCommand({
|
||||
name: 'redoCommand',
|
||||
bindKey: { win: 'Ctrl-Shift-Z', mac: 'Command-Shift-Z' },
|
||||
exec: function (editor) {
|
||||
editor.getSession().getUndoManager().redo(false);
|
||||
},
|
||||
readOnly: false
|
||||
});
|
||||
editor.loadUrl = function (filename) {
|
||||
var edfname = ge("editor-filename");
|
||||
edfname.value = filename;
|
||||
file = filename;
|
||||
lang = getLangFromFilename(file);
|
||||
type = "text/" + lang;
|
||||
if (lang !== "plain") editor.getSession().setMode("ace/mode/" + lang);
|
||||
httpGet(file);
|
||||
};
|
||||
return editor;
|
||||
}
|
||||
function onBodyLoad() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) { vars[key] = value; });
|
||||
var editor = createEditor("editor", vars.file, vars.lang, vars.theme);
|
||||
var tree = createTree("tree", editor);
|
||||
createFileUploader("uploader", tree, editor);
|
||||
if (typeof vars.file === "undefined") vars.file = "/dev_conf.txt";
|
||||
editor.loadUrl(vars.file);
|
||||
};
|
||||
</script>
|
||||
<script id='ace' src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
<script>
|
||||
if (typeof ace.edit == "undefined") {
|
||||
var script = document.createElement('script');
|
||||
script.src = "/ace.js";
|
||||
script.async = false;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="onBodyLoad();">
|
||||
<div id="loader" class="loader"></div>
|
||||
<div id="uploader"></div>
|
||||
<div id="tree"></div>
|
||||
<div id="editor"></div>
|
||||
<div id="preview" style="display:none;"></div>
|
||||
<iframe id=download-frame style='display:none;'></iframe>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
28
include/FSEditor.h
Normal file
28
include/FSEditor.h
Normal file
@@ -0,0 +1,28 @@
|
||||
#pragma once
|
||||
|
||||
#include <ESPAsyncWebServer.h>
|
||||
#include <FS.h>
|
||||
|
||||
#ifdef ESP8266
|
||||
#include <LittleFS.h>
|
||||
#endif
|
||||
|
||||
class FSEditor : public AsyncWebHandler {
|
||||
private:
|
||||
fs::FS _fs;
|
||||
String _username;
|
||||
String _password;
|
||||
bool _authenticated;
|
||||
uint32_t _startTime;
|
||||
|
||||
public:
|
||||
#ifdef ESP32
|
||||
FSEditor(const fs::FS& fs, const String& username = String(), const String& password = String());
|
||||
#else
|
||||
FSEditor(const String& username = String(), const String& password = String(), const fs::FS& fs = LittleFS);
|
||||
#endif
|
||||
virtual bool canHandle(AsyncWebServerRequest* request) override final;
|
||||
virtual void handleRequest(AsyncWebServerRequest* request) override final;
|
||||
virtual void handleUpload(AsyncWebServerRequest* request, const String& filename, size_t index, uint8_t* data, size_t len, bool final) override final;
|
||||
virtual bool isRequestHandlerTrivial() override final { return false; }
|
||||
};
|
||||
326
src/FSEditor.cpp
Normal file
326
src/FSEditor.cpp
Normal file
@@ -0,0 +1,326 @@
|
||||
#include "FSEditor.h"
|
||||
|
||||
#ifdef ESP32
|
||||
#include "LITTLEFS.h"
|
||||
#define LittleFS LITTLEFS
|
||||
#endif
|
||||
#ifdef ESP8266
|
||||
#include <LittleFS.h>
|
||||
#endif
|
||||
|
||||
#define FS_MAXLENGTH_FILEPATH 32
|
||||
|
||||
const char *excludeListFile = "/.exclude.files";
|
||||
|
||||
typedef struct ExcludeListS {
|
||||
char *item;
|
||||
ExcludeListS *next;
|
||||
} ExcludeList;
|
||||
|
||||
static ExcludeList *excludes = NULL;
|
||||
|
||||
static bool matchWild(const char *pattern, const char *testee) {
|
||||
const char *nxPat = NULL, *nxTst = NULL;
|
||||
|
||||
while (*testee) {
|
||||
if ((*pattern == '?') || (*pattern == *testee)) {
|
||||
pattern++;
|
||||
testee++;
|
||||
continue;
|
||||
}
|
||||
if (*pattern == '*') {
|
||||
nxPat = pattern++;
|
||||
nxTst = testee;
|
||||
continue;
|
||||
}
|
||||
if (nxPat) {
|
||||
pattern = nxPat + 1;
|
||||
testee = ++nxTst;
|
||||
continue;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
while (*pattern == '*') {
|
||||
pattern++;
|
||||
}
|
||||
return (*pattern == 0);
|
||||
}
|
||||
|
||||
static bool addExclude(const char *item) {
|
||||
size_t len = strlen(item);
|
||||
if (!len) {
|
||||
return false;
|
||||
}
|
||||
ExcludeList *e = (ExcludeList *)malloc(sizeof(ExcludeList));
|
||||
if (!e) {
|
||||
return false;
|
||||
}
|
||||
e->item = (char *)malloc(len + 1);
|
||||
if (!e->item) {
|
||||
free(e);
|
||||
return false;
|
||||
}
|
||||
memcpy(e->item, item, len + 1);
|
||||
e->next = excludes;
|
||||
excludes = e;
|
||||
return true;
|
||||
}
|
||||
|
||||
static void loadExcludeList(fs::FS &_fs, const char *filename) {
|
||||
static char linebuf[FS_MAXLENGTH_FILEPATH];
|
||||
fs::File excludeFile = _fs.open(filename, "r");
|
||||
if (!excludeFile) {
|
||||
return;
|
||||
}
|
||||
if (excludeFile.isDirectory()) {
|
||||
excludeFile.close();
|
||||
return;
|
||||
}
|
||||
if (excludeFile.size() > 0) {
|
||||
uint8_t idx;
|
||||
bool isOverflowed = false;
|
||||
while (excludeFile.available()) {
|
||||
linebuf[0] = '\0';
|
||||
idx = 0;
|
||||
int lastChar;
|
||||
do {
|
||||
lastChar = excludeFile.read();
|
||||
if (lastChar != '\r') {
|
||||
linebuf[idx++] = (char)lastChar;
|
||||
}
|
||||
} while ((lastChar >= 0) && (lastChar != '\n') && (idx < FS_MAXLENGTH_FILEPATH));
|
||||
|
||||
if (isOverflowed) {
|
||||
isOverflowed = (lastChar != '\n');
|
||||
continue;
|
||||
}
|
||||
isOverflowed = (idx >= FS_MAXLENGTH_FILEPATH);
|
||||
linebuf[idx - 1] = '\0';
|
||||
if (!addExclude(linebuf)) {
|
||||
excludeFile.close();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
excludeFile.close();
|
||||
}
|
||||
|
||||
static bool isExcluded(fs::FS &_fs, const char *filename) {
|
||||
if (excludes == NULL) {
|
||||
loadExcludeList(_fs, excludeListFile);
|
||||
}
|
||||
if (strcmp(excludeListFile, filename) == 0) return true;
|
||||
ExcludeList *e = excludes;
|
||||
while (e) {
|
||||
if (matchWild(e->item, filename)) {
|
||||
return true;
|
||||
}
|
||||
e = e->next;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// WEB HANDLER IMPLEMENTATION
|
||||
|
||||
#ifdef ESP32
|
||||
FSEditor::FSEditor(const fs::FS &fs, const String &username, const String &password)
|
||||
#else
|
||||
FSEditor::FSEditor(const String &username, const String &password, const fs::FS &fs)
|
||||
#endif
|
||||
: _fs(fs), _username(username), _password(password), _authenticated(false), _startTime(0) {
|
||||
}
|
||||
|
||||
bool FSEditor::canHandle(AsyncWebServerRequest *request) {
|
||||
if (request->url().equalsIgnoreCase("/edit")) {
|
||||
if (request->method() == HTTP_GET) {
|
||||
if (request->hasParam("list"))
|
||||
return true;
|
||||
if (request->hasParam("edit")) {
|
||||
request->_tempFile = _fs.open(request->arg("edit"), "r");
|
||||
if (!request->_tempFile) {
|
||||
return false;
|
||||
}
|
||||
if (request->_tempFile.isDirectory()) {
|
||||
request->_tempFile.close();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (request->hasParam("download")) {
|
||||
request->_tempFile = _fs.open(request->arg("download"), "r");
|
||||
if (!request->_tempFile) {
|
||||
return false;
|
||||
}
|
||||
if (request->_tempFile.isDirectory()) {
|
||||
request->_tempFile.close();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
request->addInterestingHeader("If-Modified-Since");
|
||||
return true;
|
||||
} else if (request->method() == HTTP_POST)
|
||||
return true;
|
||||
else if (request->method() == HTTP_DELETE)
|
||||
return true;
|
||||
else if (request->method() == HTTP_PUT)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
void FSEditor::handleRequest(AsyncWebServerRequest *request) {
|
||||
if (_username.length() && _password.length() && !request->authenticate(_username.c_str(), _password.c_str()))
|
||||
return request->requestAuthentication();
|
||||
|
||||
if (request->method() == HTTP_GET) {
|
||||
if (request->hasParam("list")) {
|
||||
String path = request->getParam("list")->value();
|
||||
#ifdef ESP32
|
||||
File dir = _fs.open(path);
|
||||
#else
|
||||
fs::Dir dir = _fs.openDir(path);
|
||||
#endif
|
||||
path = String();
|
||||
String output = "[";
|
||||
#ifdef ESP32
|
||||
File entry = dir.openNextFile();
|
||||
while (entry) {
|
||||
#else
|
||||
while (dir.next()) {
|
||||
fs::File entry = dir.openFile("r");
|
||||
#endif
|
||||
String fname = entry.fullName();
|
||||
if (fname.charAt(0) != '/') fname = "/" + fname;
|
||||
|
||||
if (isExcluded(_fs, fname.c_str())) {
|
||||
#ifdef ESP32
|
||||
entry = dir.openNextFile();
|
||||
#endif
|
||||
continue;
|
||||
}
|
||||
if (output != "[") output += ',';
|
||||
output += "{\"type\":\"";
|
||||
output += "file";
|
||||
output += "\",\"name\":\"";
|
||||
output += String(fname);
|
||||
output += "\",\"size\":";
|
||||
output += String(entry.size());
|
||||
output += "}";
|
||||
#ifdef ESP32
|
||||
entry = dir.openNextFile();
|
||||
#else
|
||||
entry.close();
|
||||
#endif
|
||||
}
|
||||
#ifdef ESP32
|
||||
dir.close();
|
||||
#endif
|
||||
output += "]";
|
||||
request->send(200, "application/json", output);
|
||||
output = String();
|
||||
} else if (request->hasParam("edit") || request->hasParam("download")) {
|
||||
request->send(request->_tempFile, request->_tempFile.fullName(), String(), request->hasParam("download"));
|
||||
} else {
|
||||
const char *buildTime = __DATE__ " " __TIME__ " GMT";
|
||||
if (request->header("If-Modified-Since").equals(buildTime)) {
|
||||
request->send(304);
|
||||
} else {
|
||||
AsyncWebServerResponse *response = request->beginResponse(LittleFS, "/edit.htm", "text/html");
|
||||
// response->addHeader("Content-Encoding", "gzip");
|
||||
response->addHeader("Last-Modified", buildTime);
|
||||
request->send(response);
|
||||
}
|
||||
}
|
||||
} else if (request->method() == HTTP_DELETE) {
|
||||
if (request->hasParam("path", true)) {
|
||||
if (!(_fs.remove(request->getParam("path", true)->value()))) {
|
||||
#ifdef ESP32
|
||||
_fs.rmdir(request->getParam("path", true)->value()); // try rmdir for littlefs
|
||||
#endif
|
||||
}
|
||||
|
||||
request->send(200, "", "DELETE: " + request->getParam("path", true)->value());
|
||||
} else
|
||||
request->send(404);
|
||||
} else if (request->method() == HTTP_POST) {
|
||||
if (request->hasParam("data", true, true) && _fs.exists(request->getParam("data", true, true)->value()))
|
||||
request->send(200, "", "UPLOADED: " + request->getParam("data", true, true)->value());
|
||||
|
||||
else if (request->hasParam("rawname", true) && request->hasParam("raw0", true)) {
|
||||
String rawnam = request->getParam("rawname", true)->value();
|
||||
|
||||
if (_fs.exists(rawnam)) _fs.remove(rawnam); // delete it to allow a mode
|
||||
|
||||
int k = 0;
|
||||
uint16_t i = 0;
|
||||
fs::File f = _fs.open(rawnam, "a");
|
||||
|
||||
while (request->hasParam("raw" + String(k), true)) { //raw0 .. raw1
|
||||
if (f) {
|
||||
i += f.print(request->getParam("raw" + String(k), true)->value());
|
||||
}
|
||||
k++;
|
||||
}
|
||||
f.close();
|
||||
request->send(200, "", "IPADWRITE: " + rawnam + ":" + String(i));
|
||||
|
||||
} else {
|
||||
request->send(500);
|
||||
}
|
||||
|
||||
} else if (request->method() == HTTP_PUT) {
|
||||
if (request->hasParam("path", true)) {
|
||||
String filename = request->getParam("path", true)->value();
|
||||
if (_fs.exists(filename)) {
|
||||
request->send(200);
|
||||
} else {
|
||||
/*******************************************************/
|
||||
#ifdef ESP32
|
||||
if (strchr(filename.c_str(), '/')) {
|
||||
// For file creation, silently make subdirs as needed. If any fail,
|
||||
// it will be caught by the real file open later on
|
||||
char *pathStr = strdup(filename.c_str());
|
||||
if (pathStr) {
|
||||
// Make dirs up to the final fnamepart
|
||||
char *ptr = strchr(pathStr, '/');
|
||||
while (ptr) {
|
||||
*ptr = 0;
|
||||
_fs.mkdir(pathStr);
|
||||
*ptr = '/';
|
||||
ptr = strchr(ptr + 1, '/');
|
||||
}
|
||||
}
|
||||
free(pathStr);
|
||||
}
|
||||
#endif
|
||||
/*******************************************************/
|
||||
fs::File f = _fs.open(filename, "w");
|
||||
if (f) {
|
||||
f.write((uint8_t)0x00);
|
||||
f.close();
|
||||
request->send(200, "", "CREATE: " + filename);
|
||||
} else {
|
||||
request->send(500);
|
||||
}
|
||||
}
|
||||
} else
|
||||
request->send(400);
|
||||
}
|
||||
}
|
||||
|
||||
void FSEditor::handleUpload(AsyncWebServerRequest *request, const String &filename, size_t index, uint8_t *data, size_t len, bool final) {
|
||||
if (!index) {
|
||||
if (!_username.length() || request->authenticate(_username.c_str(), _password.c_str())) {
|
||||
_authenticated = true;
|
||||
request->_tempFile = _fs.open(filename, "w");
|
||||
_startTime = millis();
|
||||
}
|
||||
}
|
||||
if (_authenticated && request->_tempFile) {
|
||||
if (len) {
|
||||
request->_tempFile.write(data, len);
|
||||
}
|
||||
if (final) {
|
||||
request->_tempFile.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
#include "Utils/FileUtils.h"
|
||||
#include "Utils/WebUtils.h"
|
||||
#include "FSEditor.h"
|
||||
|
||||
namespace HttpServer {
|
||||
|
||||
@@ -15,9 +16,9 @@ void init() {
|
||||
String login = jsonReadStr(configSetupJson, "weblogin");
|
||||
String pass = jsonReadStr(configSetupJson, "webpass");
|
||||
#ifdef ESP32
|
||||
server.addHandler(new SPIFFSEditor(LittleFS, login, pass));
|
||||
server.addHandler(new FSEditor(LittleFS, login, pass));
|
||||
#else
|
||||
server.addHandler(new SPIFFSEditor(login, pass));
|
||||
server.addHandler(new FSEditor(login, pass));
|
||||
#endif
|
||||
|
||||
server.serveStatic("/css/", LittleFS, "/css/").setCacheControl("max-age=600");
|
||||
|
||||
Reference in New Issue
Block a user