diff --git a/html/management.html b/html/management.html index 909b15b..49fd34a 100644 --- a/html/management.html +++ b/html/management.html @@ -131,14 +131,14 @@
- +
- +
@@ -458,12 +458,12 @@ data.instance.rename_node(data.instance._model.data[key], lastFolder); }); } - - // File Explorer functions begin + + /* File Explorer functions begin*/ var lastSelectedNodePath = ""; - + $('#explorerTree').on('select_node.jstree', function (e, data) { - + $('input[name=fileOrUrl]').val(data.node.data.path); if (data.node.type == "folder") { @@ -486,7 +486,7 @@ if(!sel.length) { return false; } sel = sel[0]; var children = $("#explorerTree").jstree("get_children_dom",sel); - // refresh only, when there is no child -> possible not yet updated + /* refresh only, when there is no child -> possible not yet updated */ if(children.length < 1){ refreshNode(sel); } @@ -497,7 +497,7 @@ }); - + function doRest(path, callback, obj) { obj.url = path; obj.dataType = "json"; @@ -510,48 +510,48 @@ }; obj.error = function(jqXHR, textStatus, errorThrown) { console.log("AJAX error"); - //debugger; + /*debugger; */ }; jQuery.ajax(obj); - } // doRest - + } /* doRest */ + function getData(path, callback) { doRest(path, callback, { method : "GET" }); - } // getData - + } /* getData */ + function deleteData(path, callback, _data) { doRest(path, callback, { method : "DELETE", data: _data }); - } // deleteData - + } /* deleteData */ + function patchData(path, callback, _data) { doRest(path, callback, { method : "PATCH", data: _data }); - } // patchData + } /* patchData */ function postData(path, callback, _data) { doRest(path, callback, { method : "POST", data: _data }); - } // postData - - + } /* postData */ + + function putData(path, callback, _data) { doRest(path, callback, { method : "PUT", data: _data }); - } // putData - - - // File Upload + } /* putData */ + + + /* File Upload */ $('#explorerUploadForm').submit(function(e){ e.preventDefault(); console.log("Upload!"); @@ -566,12 +566,12 @@ if(selectedNode.data.directory){ path = selectedNode.data.path } else { - // remap sel to parent folder + /* remap sel to parent folder */ sel = ref.get_node(ref.get_parent(sel)); path = parentNode.data.path; console.log("Parent path: " + path); } - + $.ajax({ url: '/explorer?path=' + path, type: 'POST', @@ -604,19 +604,19 @@ console.log("Upload success!"); getData("/explorer?path=" + path, function(data) { - // We now have data! + /* We now have data! */ deleteChildrenNodes(sel); addFileDirectory(sel, data); ref.open_node(sel); - - + + }); - + } }); }); - - // File Delete + + /* File Delete */ function handleDeleteData(nodeId) { var ref = $('#explorerTree').jstree(true); var node = ref.get_node(nodeId); @@ -652,7 +652,7 @@ } return 0; } - + function createChild(nodeId, data) { var ref = $('#explorerTree').jstree(true); var node = ref.get_node(nodeId); @@ -664,11 +664,11 @@ directory: data.dir } } - + return child; - + } - + function deleteChildrenNodes(nodeId) { var ref = $('#explorerTree').jstree(true); var children = $("#explorerTree").jstree("get_children_dom",nodeId); @@ -676,30 +676,30 @@ { ref.delete_node(children[i].id); } - + } - + function refreshNode(nodeId) { - + var ref = $('#explorerTree').jstree(true); - + var node = ref.get_node(nodeId); getData("/explorer?path=" + node.data.path, function(data) { - // We now have data! + /* We now have data! */ deleteChildrenNodes(nodeId); addFileDirectory(nodeId, data); ref.open_node(nodeId); - + }); - - + + } - + function getType(data) { var type = ""; - + if(data.dir) { type = "folder"; } else if ((/\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC)$/i).test(data.name)) { @@ -707,24 +707,24 @@ } else { type = "file"; } - + return type; } - - + + function addFileDirectory(parent, data) { data.sort( fileNameSort ); var ref = $('#explorerTree').jstree(true); - + for (var i=0; i\ RFID\ + Dateien\ WLAN\ %SHOW_MQTT_TAB%\ %SHOW_FTP_TAB%\ @@ -126,6 +127,21 @@ static const char management_HTML[] PROGMEM = "\ \
\
\ +
\ +
\ +
\ +
\ +\ +
\ + \ +
\ +
\ + \ +
\ +\ +
\ +
\ +
\
\
\
\ @@ -443,6 +459,399 @@ static const char management_HTML[] PROGMEM = "\ });\ }\ \ + /* File Explorer functions begin*/\ + var lastSelectedNodePath = \"\";\ +\ + $('#explorerTree').on('select_node.jstree', function (e, data) {\ +\ + $('input[name=fileOrUrl]').val(data.node.data.path);\ +\ + if (data.node.type == \"folder\") {\ + $('.option-folder').show();\ + $('.option-file').hide();\ + $('#playMode option').removeAttr('selected').filter('[value=3]').attr('selected', true);\ + }\ +\ + if (data.node.type == \"audio\") {\ + $('.option-file').show();\ + $('.option-folder').hide();\ + $('#playMode option').removeAttr('selected').filter('[value=1]').attr('selected', true);\ + }\ +\ + if(lastSelectedNodePath != data.node.data.path) {\ + if (data.node.data.directory) {\ +\ + var ref = $('#explorerTree').jstree(true),\ + sel = ref.get_selected();\ + if(!sel.length) { return false; }\ + sel = sel[0];\ + var children = $(\"#explorerTree\").jstree(\"get_children_dom\",sel);\ + /* refresh only, when there is no child -> possible not yet updated */\ + if(children.length < 1){\ + refreshNode(sel);\ + }\ +\ + }\ + lastSelectedNodePath = data.node.data.path;\ + }\ +\ +\ + });\ +\ + function doRest(path, callback, obj) {\ + obj.url = path;\ + obj.dataType = \"json\";\ + obj.contentType= \"application/json;charset=iso-8859-1\",\ + obj.scriptCharset= \"iso-8859-1\",\ + obj.success = function(data, textStatus, jqXHR) {\ + if (callback) {\ + callback(data);\ + }\ + };\ + obj.error = function(jqXHR, textStatus, errorThrown) {\ + console.log(\"AJAX error\");\ + /*debugger; */\ + };\ + jQuery.ajax(obj);\ + } /* doRest */\ +\ + function getData(path, callback) {\ + doRest(path, callback, {\ + method : \"GET\"\ + });\ + } /* getData */\ +\ + function deleteData(path, callback, _data) {\ + doRest(path, callback, {\ + method : \"DELETE\",\ + data: _data\ + });\ + } /* deleteData */\ +\ + function patchData(path, callback, _data) {\ + doRest(path, callback, {\ + method : \"PATCH\",\ + data: _data\ + });\ + } /* patchData */\ +\ + function postData(path, callback, _data) {\ + doRest(path, callback, {\ + method : \"POST\",\ + data: _data\ + });\ + } /* postData */\ +\ +\ + function putData(path, callback, _data) {\ + doRest(path, callback, {\ + method : \"PUT\",\ + data: _data\ + });\ + } /* putData */\ +\ +\ + /* File Upload */\ + $('#explorerUploadForm').submit(function(e){\ + e.preventDefault();\ + console.log(\"Upload!\");\ + var data = new FormData(this);\ +\ + var ref = $('#explorerTree').jstree(true),\ + sel = ref.get_selected(),\ + path = \"/\";\ + if(!sel.length) { alert(\"Please select the upload location!\");return false; }\ + sel = sel[0];\ + selectedNode = ref.get_node(sel);\ + if(selectedNode.data.directory){\ + path = selectedNode.data.path\ + } else {\ + /* remap sel to parent folder */\ + sel = ref.get_node(ref.get_parent(sel));\ + path = parentNode.data.path;\ + console.log(\"Parent path: \" + path);\ + }\ +\ + $.ajax({\ + url: '/explorer?path=' + path,\ + type: 'POST',\ + data: data,\ + contentType: false,\ + processData:false,\ + xhr: function() {\ + var xhr = new window.XMLHttpRequest();\ +\ + xhr.upload.addEventListener(\"progress\", function(evt) {\ + if (evt.lengthComputable) {\ + var percentComplete = evt.loaded / evt.total;\ + percentComplete = parseInt(percentComplete * 100);\ + console.log(percentComplete);\ + document.getElementById(\"explorerUploadProgress\").value = percentComplete;\ + document.getElementById(\"explorerUploadPercent\").innerHTML = percentComplete + \"%\";\ +\ + if (percentComplete === 100) {\ +\ + }\ +\ + Sleep(1000);\ +\ + }\ + }, false);\ +\ + return xhr;\ + },\ + success: function(data, textStatus, jqXHR) {\ + console.log(\"Upload success!\");\ +\ + getData(\"/explorer?path=\" + path, function(data) {\ + /* We now have data! */\ + deleteChildrenNodes(sel);\ + addFileDirectory(sel, data);\ + ref.open_node(sel);\ +\ +\ + });\ +\ + }\ + });\ + });\ +\ + /* File Delete */\ + function handleDeleteData(nodeId) {\ + var ref = $('#explorerTree').jstree(true);\ + var node = ref.get_node(nodeId);\ + var children = $(\"#explorerTree\").jstree(\"get_children_dom\",nodeId);\ + console.log(children.length);\ + if(node.data.directory) {\ + if(children.length > 0) {\ + for(var i=0;i setTimeout(resolve, milliseconds));\ + }\ + function fileNameSort( a, b ) {\ + if ( a.dir && !b.dir ) {\ + return -1\ + }\ + if ( !a.dir && b.dir ) {\ + return 1\ + }\ + if ( a.name < b.name ){\ + return -1;\ + }\ + if ( a.name > b.name ){\ + return 1;\ + }\ + return 0;\ + }\ +\ + function createChild(nodeId, data) {\ + var ref = $('#explorerTree').jstree(true);\ + var node = ref.get_node(nodeId);\ + var child = {\ + text: data.name,\ + type: getType(data),\ + data: {\ + path: node.data.path + \"/\" + data.name,\ + directory: data.dir\ + }\ + }\ +\ + return child;\ +\ + }\ +\ + function deleteChildrenNodes(nodeId) {\ + var ref = $('#explorerTree').jstree(true);\ + var children = $(\"#explorerTree\").jstree(\"get_children_dom\",nodeId);\ + for(var i=0;isend(FSystem, "/index.html"); + request->send(FSystem, "/management.html", String(), false, templateProcessor); }); wServer.on("/upload", HTTP_POST, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", backupRecoveryWebsite); }, handleUpload); - + wServer.on("/restart", HTTP_GET, [] (AsyncWebServerRequest *request) { request->send_P(200, "text/html", restartWebsite); Serial.flush(); @@ -3837,7 +3837,7 @@ void explorerHandleDeleteRequest(AsyncWebServerRequest *request) { } } } else { - snprintf(logBuf, serialLoglength, "DELETE: Path %s does not exitst", asciiFilePath); + snprintf(logBuf, serialLoglength, "DELETE: Path %s does not exist", asciiFilePath); loggerNl(logBuf, LOGLEVEL_ERROR); } } else {