phschoen
/
ESPuino
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Filebrowser: Replace Marios Filebrowser

master
grch101 4 years ago
committed by Torsten Stauder
parent
c2eb65594a
commit
9e177e806f
4 changed files with 62 additions and 307 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 158
      html/management.html
  2. 158
      src/HTMLmanagement.h
  3. 49
      src/main.cpp
  4. 4
      src/settings.h

158
html/management.html
View File

@ -117,7 +117,6 @@
<nav>
<div class="container nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-rfid-tab" data-toggle="tab" href="#nav-rfid" role="tab" aria-controls="nav-rfid" aria-selected="true"><i class="fas fa-dot-circle"></i> RFID</a>
<a class="nav-item nav-link" id="nav-files-tab" data-toggle="tab" href="#nav-files" role="tab" aria-controls="nav-files" aria-selected="false"><i class="fas fa-folder"></i> Dateien</a>
<a class="nav-item nav-link" id="nav-wifi-tab" data-toggle="tab" href="#nav-wifi" role="tab" aria-controls="nav-wifi" aria-selected="false"><i class="fas fa-wifi"></i><span class=".d-sm-none .d-md-block"> WLAN</span></a>
%SHOW_MQTT_TAB%
%SHOW_FTP_TAB%
@ -127,21 +126,6 @@
</nav>
<br>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="nav-files" role="tabpanel" aria-labelledby="nav-files-tab">
<div class="container" id="fileExplorer">
<div class="ui-widget">
<div class="filetree demo" id="explorerTree"></div>
<form id="explorerUploadForm" method="POST" enctype="multipart/form-data" action="/explorer" accept-charset="iso-8859-1">
<input id="explorerUploadedFiles" type="file" class="form-control-file" name="explorerUploadFiles" multiple> <input type="submit" class="btn btn-primary" id="submit" value="Hochladen">
</form>
<div>
<progress id="explorerUploadProgress" style="margin-top:10px" value="0" max="100"></progress> <span id="explorerUploadPercent"></span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-wifi" role="tabpanel" aria-labelledby="nav-wifi-tab">
<div class="container" id="wifiConfig">
<form action="#wifiConfig" method="POST" onsubmit="wifiConfig('wifiConfig'); return false">
@ -166,6 +150,22 @@
</div>
</div>
<div class="tab-pane fade show active" id="nav-rfid" role="tabpanel" aria-labelledby="nav-rfid-tab">
<div class="container" id="rfidModTags">
<fieldset>
<legend>Dateien</legend>
<div class="filetree-container">
<div id="filebrowser">
<div class="filetree demo" id="explorerTree"></div>
</div>
<div>
<form id="explorerUploadForm" method="POST" enctype="multipart/form-data" action="/explorer" accept-charset="iso-8859-1">
<input id="explorerUploadedFiles" type="file" class="form-control-file" name="explorerUploadFiles" multiple> <input type="submit" class="btn btn-primary" id="submit" value="Hochladen">
<progress id="explorerUploadProgress" value="0" max="100"></progress> <span id="explorerUploadPercent"></span>
</form>
</div>
</fieldset>
</div>
<div class="container" id="rfidMusicTags">
<fieldset>
<legend>RFID-Zuweisungen</legend>
@ -175,21 +175,7 @@
<input type="text" class="form-control" id="rfidIdMusic" maxlength="12" pattern="[0-9]{12}"
placeholder="%RFID_TAG_ID%" name="rfidIdMusic" required>
<label for="fileOrUrl">Datei, Verzeichnis oder URL (^ und # als Zeichen nicht erlaubt)</label>
<input type="text" class="form-control" id="fileOrUrl" maxlength="255" placeholder="z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3" pattern="^[^\^#]+$" name="fileOrUrl" required>
<div class="filetree-container">
<div id="filebrowser">
<div class="filetree demo" id="filetree"></div>
<div class="refreshAction">
<span id="refreshAction" data-toggle="tooltip" data-placement="top" title="Datei Liste aktualisieren."><i class="fas fa-sync fa-1x"></i> Dateiliste aktualisieren</span>
</div>
</div>
<div id="indexing-progress" class="indexing-progress overlay">
<div style="text-align: center; color:white; margin-top:2em;">
<div><i class="fas fa-sync fa-spin fa-2x"></i> <br><br> Der Prozess kann mehrere Minuten dauern...</div>
<div id="currentProcessedFile"></div>
</div>
</div>
</div>
<input type="text" class="form-control" id="fileOrUrl" maxlength="255" placeholder="z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3" name="fileOrUrl" required>
<label for="playMode">Abspielmodus</label>
<select class="form-control" id="playMode" name="playMode">
<option class="option-file" value="1">Einzelner Titel</option>
@ -837,93 +823,6 @@
} /* buildFileSystemTree */
/* File Explorer functions end */
function renderFileTree() {
var filesURI = "/files";
if (DEBUG) {
filesURI = "http://" + host + "/files";
}
$('#filetree').jstree({
'core': {
'check_callback': true,
'data': {
url: filesURI,
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('#j1_loading').hide();
$("#refreshAction").hide();
$('#filetree').html("<div class='clickForRefresh' ><i class='fas fa-sync fa-1x'><span id='#clickForRefresh' > Dateien suchen.</span></div>");
$('#filetree').on("click", function () {
refreshFileList();
});
toastr.error("Die Verzeichnis-Liste konnte nicht geladen werden.");
}
},
},
'types': {
'folder': {
'icon': "fa fa-folder"
},
'file': {
'icon': "fa fa-file"
},
'audio': {
'icon': "fa fa-file-audio"
},
'default': {
'icon': "fa fa-folder"
}
},
'plugins': ["themes", "types"]
}).bind('loaded.jstree', function (event, data) {
postRendering(event, data);
if ((data.instance._model.data['#']['children'].length == 0)) {
toastr.info("Der SD-Karten-Index muss erzeugt werden.");
}
}).bind('refresh.jstree', function (event, data) {
postRendering(event, data);
});
}
$('#filetree').on('select_node.jstree', function (e, data) {
$('input[name=fileOrUrl]').val(data.node.id);
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);
}
});
$('#refreshAction').on("click", function () {
refreshFileList();
$("#indexing-progress").show();
$("#refreshAction").hide();
});
$('#playMode').on("change", function () {
if (this.value == 8) {
$('#filebrowser').slideUp();
} else {
$('#filebrowser').slideDown();
}
});
function showFileIndexingState() {
$("#indexing-progress").show();
$("#refreshAction").hide();
}
function hideFileIndexingState() {
$("#indexing-progress").hide();
$("#refreshAction").show();
}
var socket = undefined;
var tm;
@ -966,17 +865,6 @@
if (socketMsg.pong == 'pong') {
pong();
}
} if ("refreshFileList" in socketMsg) {
hideFileIndexingState();
toastr.info("Die Dateiliste wurde neu erzeugt!");
$('#filetree').jstree(true).refresh();
}
if ("indexingState" in socketMsg) {
if(socketMsg.indexingState != null) {
$("#currentProcessedFile").text(socketMsg.indexingState);
console.log(socketMsg.indexingState);
}
}
};
}
@ -998,17 +886,6 @@
clearTimeout(tm);
}
function refreshFileList(clickedId) {
lastIdclicked = clickedId;
var myObj = {
"refreshFileList": true
};
var myJSON = JSON.stringify(myObj);
$("#refreshAction").hide();
socket.send(myJSON);
showFileIndexingState();
};
function genSettings(clickedId) {
lastIdclicked = clickedId;
var myObj = {
@ -1108,7 +985,6 @@
$(document).ready(function () {
connect();
renderFileTree();
buildFileSystemTree("/");
console.log(parseInt(document.getElementById('warningLowVoltage').value));

158
src/HTMLmanagement.h
View File

@ -117,7 +117,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<nav>\
<div class=\"container nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\
<a class=\"nav-item nav-link active\" id=\"nav-rfid-tab\" data-toggle=\"tab\" href=\"#nav-rfid\" role=\"tab\" aria-controls=\"nav-rfid\" aria-selected=\"true\"><i class=\"fas fa-dot-circle\"></i> RFID</a>\
<a class=\"nav-item nav-link\" id=\"nav-files-tab\" data-toggle=\"tab\" href=\"#nav-files\" role=\"tab\" aria-controls=\"nav-files\" aria-selected=\"false\"><i class=\"fas fa-folder\"></i> Dateien</a>\
<a class=\"nav-item nav-link\" id=\"nav-wifi-tab\" data-toggle=\"tab\" href=\"#nav-wifi\" role=\"tab\" aria-controls=\"nav-wifi\" aria-selected=\"false\"><i class=\"fas fa-wifi\"></i><span class=\".d-sm-none .d-md-block\"> WLAN</span></a>\
%SHOW_MQTT_TAB%\
%SHOW_FTP_TAB%\
@ -127,21 +126,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</nav>\
<br>\
<div class=\"tab-content\" id=\"nav-tabContent\">\
<div class=\"tab-pane fade\" id=\"nav-files\" role=\"tabpanel\" aria-labelledby=\"nav-files-tab\">\
<div class=\"container\" id=\"fileExplorer\">\
<div class=\"ui-widget\">\
<div class=\"filetree demo\" id=\"explorerTree\"></div>\
\
<form id=\"explorerUploadForm\" method=\"POST\" enctype=\"multipart/form-data\" action=\"/explorer\" accept-charset=\"iso-8859-1\">\
<input id=\"explorerUploadedFiles\" type=\"file\" class=\"form-control-file\" name=\"explorerUploadFiles\" multiple> <input type=\"submit\" class=\"btn btn-primary\" id=\"submit\" value=\"Hochladen\">\
</form>\
<div>\
<progress id=\"explorerUploadProgress\" style=\"margin-top:10px\" value=\"0\" max=\"100\"></progress> <span id=\"explorerUploadPercent\"></span>\
</div>\
\
</div>\
</div>\
</div>\
<div class=\"tab-pane fade\" id=\"nav-wifi\" role=\"tabpanel\" aria-labelledby=\"nav-wifi-tab\">\
<div class=\"container\" id=\"wifiConfig\">\
<form action=\"#wifiConfig\" method=\"POST\" onsubmit=\"wifiConfig('wifiConfig'); return false\">\
@ -166,6 +150,22 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</div>\
</div>\
<div class=\"tab-pane fade show active\" id=\"nav-rfid\" role=\"tabpanel\" aria-labelledby=\"nav-rfid-tab\">\
<div class=\"container\" id=\"rfidModTags\">\
<fieldset>\
<legend>Dateien</legend>\
<div class=\"filetree-container\">\
<div id=\"filebrowser\">\
<div class=\"filetree demo\" id=\"explorerTree\"></div>\
</div>\
<div>\
<form id=\"explorerUploadForm\" method=\"POST\" enctype=\"multipart/form-data\" action=\"/explorer\" accept-charset=\"iso-8859-1\">\
<input id=\"explorerUploadedFiles\" type=\"file\" class=\"form-control-file\" name=\"explorerUploadFiles\" multiple> <input type=\"submit\" class=\"btn btn-primary\" id=\"submit\" value=\"Hochladen\">\
<progress id=\"explorerUploadProgress\" value=\"0\" max=\"100\"></progress> <span id=\"explorerUploadPercent\"></span>\
</form>\
\
</div>\
</fieldset>\
</div>\
<div class=\"container\" id=\"rfidMusicTags\">\
<fieldset>\
<legend>RFID-Zuweisungen</legend>\
@ -175,21 +175,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
<label for=\"fileOrUrl\">Datei, Verzeichnis oder URL (^ und # als Zeichen nicht erlaubt)</label>\
<input type=\"text\" class=\"form-control\" id=\"fileOrUrl\" maxlength=\"255\" placeholder=\"z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3\" pattern=\"^[^\\^#]+$\" name=\"fileOrUrl\" required>\
<div class=\"filetree-container\">\
<div id=\"filebrowser\">\
<div class=\"filetree demo\" id=\"filetree\"></div>\
<div class=\"refreshAction\">\
<span id=\"refreshAction\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Datei Liste aktualisieren.\"><i class=\"fas fa-sync fa-1x\"></i> Dateiliste aktualisieren</span>\
</div>\
</div>\
<div id=\"indexing-progress\" class=\"indexing-progress overlay\">\
<div style=\"text-align: center; color:white; margin-top:2em;\">\
<div><i class=\"fas fa-sync fa-spin fa-2x\"></i> <br><br> Der Prozess kann mehrere Minuten dauern...</div>\
<div id=\"currentProcessedFile\"></div>\
</div>\
</div>\
</div>\
<input type=\"text\" class=\"form-control\" id=\"fileOrUrl\" maxlength=\"255\" placeholder=\"z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3\" name=\"fileOrUrl\" required>\
<label for=\"playMode\">Abspielmodus</label>\
<select class=\"form-control\" id=\"playMode\" name=\"playMode\">\
<option class=\"option-file\" value=\"1\">Einzelner Titel</option>\
@ -837,93 +823,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
} /* buildFileSystemTree */\
\
/* File Explorer functions end */\
function renderFileTree() {\
\
var filesURI = \"/files\";\
if (DEBUG) {\
filesURI = \"http://\" + host + \"/files\";\
}\
$('#filetree').jstree({\
'core': {\
'check_callback': true,\
'data': {\
url: filesURI,\
error: function (XMLHttpRequest, textStatus, errorThrown) {\
$('#j1_loading').hide();\
$(\"#refreshAction\").hide();\
$('#filetree').html(\"<div class='clickForRefresh' ><i class='fas fa-sync fa-1x'><span id='#clickForRefresh' > Dateien suchen.</span></div>\");\
$('#filetree').on(\"click\", function () {\
refreshFileList();\
});\
toastr.error(\"Die Verzeichnis-Liste konnte nicht geladen werden.\");\
}\
},\
\
},\
'types': {\
'folder': {\
'icon': \"fa fa-folder\"\
},\
'file': {\
'icon': \"fa fa-file\"\
},\
'audio': {\
'icon': \"fa fa-file-audio\"\
},\
'default': {\
'icon': \"fa fa-folder\"\
}\
},\
'plugins': [\"themes\", \"types\"]\
}).bind('loaded.jstree', function (event, data) {\
postRendering(event, data);\
if ((data.instance._model.data['#']['children'].length == 0)) {\
toastr.info(\"Der SD-Karten-Index muss erzeugt werden.\");\
}\
}).bind('refresh.jstree', function (event, data) {\
postRendering(event, data);\
});\
}\
\
$('#filetree').on('select_node.jstree', function (e, data) {\
$('input[name=fileOrUrl]').val(data.node.id);\
\
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);\
}\
});\
\
$('#refreshAction').on(\"click\", function () {\
refreshFileList();\
$(\"#indexing-progress\").show();\
$(\"#refreshAction\").hide();\
});\
\
$('#playMode').on(\"change\", function () {\
if (this.value == 8) {\
$('#filebrowser').slideUp();\
} else {\
$('#filebrowser').slideDown();\
}\
});\
\
function showFileIndexingState() {\
$(\"#indexing-progress\").show();\
$(\"#refreshAction\").hide();\
}\
\
function hideFileIndexingState() {\
$(\"#indexing-progress\").hide();\
$(\"#refreshAction\").show();\
}\
\
var socket = undefined;\
var tm;\
@ -966,17 +865,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
if (socketMsg.pong == 'pong') {\
pong();\
}\
} if (\"refreshFileList\" in socketMsg) {\
hideFileIndexingState();\
toastr.info(\"Die Dateiliste wurde neu erzeugt!\");\
$('#filetree').jstree(true).refresh();\
\
}\
if (\"indexingState\" in socketMsg) {\
if(socketMsg.indexingState != null) {\
$(\"#currentProcessedFile\").text(socketMsg.indexingState);\
console.log(socketMsg.indexingState);\
}\
}\
};\
}\
@ -997,17 +885,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
function pong() {\
clearTimeout(tm);\
}\
\
function refreshFileList(clickedId) {\
lastIdclicked = clickedId;\
var myObj = {\
\"refreshFileList\": true\
};\
var myJSON = JSON.stringify(myObj);\
$(\"#refreshAction\").hide();\
socket.send(myJSON);\
showFileIndexingState();\
};\
\
function genSettings(clickedId) {\
lastIdclicked = clickedId;\
@ -1108,7 +985,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
$(document).ready(function () {\
connect();\
renderFileTree();\
buildFileSystemTree(\"/\");\
\
console.log(parseInt(document.getElementById('warningLowVoltage').value));\

49
src/main.cpp
View File

@ -467,7 +467,7 @@ void IRAM_ATTR onTimer() {
}
}
#endif
/**
// Creates a new file on the SD-card.
void createFile(fs::FS &fs, const char * path, const char * message) {
snprintf(logBuf, serialLoglength, "%s: %s", (char *) FPSTR(writingFile), path);
@ -634,6 +634,7 @@ void fileHandlingTask(void *arguments) {
esp_task_wdt_reset();
vTaskDelete( NULL );
}
**/
#ifdef MEASURE_BATTERY_VOLTAGE
@ -3507,19 +3508,20 @@ bool processJsonRequest(char *_serialJson) {
} else if (doc.containsKey("ping")) {
sendWebsocketData(0, 20);
return false;
} else if (doc.containsKey("refreshFileList")) {
}
// } else if (doc.containsKey("refreshFileList")) {
//TODO: we need a semaphore or mutex here to prevent
// a call when the task is still running
xTaskCreate(
fileHandlingTask, /* Task function. */
"TaskTwo", /* String with name of task. */
10000, /* Stack size in bytes. */
NULL, /* Parameter passed as input of the task */
1, /* Priority of the task. */
NULL); /* Task handle. */
// //TODO: we need a semaphore or mutex here to prevent
// // a call when the task is still running
// xTaskCreate(
// fileHandlingTask, /* Task function. */
// "TaskTwo", /* String with name of task. */
// 10000, /* Stack size in bytes. */
// NULL, /* Parameter passed as input of the task */
// 1, /* Priority of the task. */
// NULL); /* Task handle. */
}
// }
return true;
}
@ -3539,11 +3541,12 @@ void sendWebsocketData(uint32_t client, uint8_t code) {
object["rfidId"] = currentRfidTagId;
} else if (code == 20) {
object["pong"] = "pong";
} else if (code == 30) {
object["refreshFileList"] = "ready";
} else if (code == 31) {
object["indexingState"] = fileNameBuf;
}
// } else if (code == 30) {
// object["refreshFileList"] = "ready";
// } else if (code == 31) {
// object["indexingState"] = fileNameBuf;
// }
//char jBuf[255];
@ -3682,9 +3685,9 @@ void webserverStart(void) {
});
// Filebrowser (json-precached)
wServer.on("/files", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(FSystem, DIRECTORY_INDEX_FILE, "application/json");
});
// wServer.on("/files", HTTP_GET, [](AsyncWebServerRequest *request) {
// request->send(FSystem, DIRECTORY_INDEX_FILE, "application/json");
// });
// Fileexplorer (realtime)
wServer.on("/explorer", HTTP_GET, explorerHandleListRequest);
@ -4624,10 +4627,10 @@ void setup() {
lastTimeActiveTimestamp = millis(); // initial set after boot
// Create empty index json-file when no file exists.
if (!fileExists(FSystem,DIRECTORY_INDEX_FILE)) {
createFile(FSystem,DIRECTORY_INDEX_FILE,"[]");
esp_deep_sleep_start();
}
// if (!fileExists(FSystem,DIRECTORY_INDEX_FILE)) {
// createFile(FSystem,DIRECTORY_INDEX_FILE,"[]");
// esp_deep_sleep_start();
// }
bootComplete = true;
snprintf(logBuf, serialLoglength, "%s: %u", (char *) FPSTR(freeHeapAfterSetup), ESP.getFreeHeap());

4
src/settings.h
View File

@ -85,8 +85,8 @@ static const char accessPointNetworkSSID[] PROGMEM = "Tonuino"; // Access-po
static const char backupFile[] PROGMEM = "/backup.txt"; // File is written every time a (new) RFID-assignment via GUI is done
// (webgui) File Browser
uint8_t FS_DEPTH = 5; // Max. recursion-depth of file tree
const char *DIRECTORY_INDEX_FILE = "/files.json"; // Filename of files.json index file
//uint8_t FS_DEPTH = 5; // Max. recursion-depth of file tree
//const char *DIRECTORY_INDEX_FILE = "/files.json"; // Filename of files.json index file
//#################### Settings for optional Modules##############################

Write Preview
Loading…
Cancel
Save