Browse Source

Make logbuffer visible to Webgui, small fixes

master
Torsten Stauder 4 years ago
parent
commit
2042682d77
  1. 0
      html/accesspoint_DE.html
  2. 1
      html/management_DE.html
  3. 1
      html/management_EN.html
  4. 2
      processHtml.py
  5. 64
      src/HTMLaccesspoint.h
  6. 126
      src/HTMLaccesspoint_DE.h
  7. 1111
      src/HTMLmanagement.h
  8. 725
      src/HTMLmanagement_DE.h
  9. 1
      src/HTMLmanagement_EN.h
  10. 2
      src/Log.cpp
  11. 21
      src/Web.cpp

0
html/accesspoint.html → html/accesspoint_DE.html

1
html/management.html → html/management_DE.html

@ -136,6 +136,7 @@
</a>
<a class="reboot float-right nav-link" href="/restart"><i class="fas fa-redo"></i> Neustart</a>
<a class="reboot float-right nav-link" href="/shutdown"><i class="fas fa-power-off"></i> Ausschalten</a>
<a class="reboot float-right nav-link" href="/log"><i class="fas fa-book"></i> Log</a>
</div>
</nav>
<br/>

1
html/management_EN.html

@ -136,6 +136,7 @@
</a>
<a class="reboot float-right nav-link" href="/restart"><i class="fas fa-redo"></i> Restart</a>
<a class="reboot float-right nav-link" href="/shutdown"><i class="fas fa-power-off"></i> Shutdown</a>
<a class="reboot float-right nav-link" href="/log"><i class="fas fa-book"></i> Log</a>
</div>
</nav>
<br/>

2
processHtml.py

@ -18,7 +18,7 @@ def str2bool(v):
else:
raise argparse.ArgumentTypeError('Boolean value expected.')
HTML_FILES = ["management","management_EN", "accesspoint", "accesspoint_EN"]
HTML_FILES = ["management_DE","management_EN", "accesspoint_DE", "accesspoint_EN"]
class htmlHeaderProcessor(object):

64
src/HTMLaccesspoint.h

@ -1,64 +0,0 @@
static const char accesspoint_HTML[] PROGMEM = "<!DOCTYPE html>\
<html>\
<head>\
<title>WLAN-Einrichtung</title>\
<style>\
input {\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
background: #f1f1f1;\
border: 0;\
padding: 0 15px\
}\
input {\
\
}\
body {\
background: #007bff;\
font-family: sans-serif;\
font-size: 14px;\
color: #777\
}\
.box {\
background: #fff;\
max-width: 258px;\
margin: 75px auto;\
padding: 30px;\
border-radius: 5px;\
text-align: center\
}\
.btn {\
background: #3498db;\
color: #fff;\
cursor: pointer;\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
}\
.rebootmsg {\
display: none;\
}\
</style>\
</head>\
<body>\
<form id=\"settings\" action=\"/init\" class=\"box\" method=\"POST\">\
<h1>WLAN-Einrichtung</h1>\
<label for=\"ssid\">SSID:</label><br>\
<input type=\"text\" id=\"ssid\" name=\"ssid\" placeholder=\"SSID\" required><br>\
<label for=\"pwd\">Passwort:</label><br>\
<input type=\"password\" id=\"pwd\" name=\"pwd\" autocomplete=\"off\" required><br>\
<label for=\"hostname\">ESPuino-Name (Hostname):</label><br>\
<input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"espuino\" required><br><br>\
<input class=\"btn\" type=\"submit\" id=\"save-button\" value=\"Save\">\
</form>\
<form action=\"/restart\" class=\"box\">\
<h1>Fertig?</h1>\
<input class=\"btn\" type=\"submit\" id=\"restart-button\" value=\"Reboot\">\
</form>\
</body>\
</html>";

126
src/HTMLaccesspoint_DE.h

@ -1,64 +1,64 @@
static const char accesspoint_HTML[] PROGMEM = "<!DOCTYPE html>\
<html>\
<head>\
<title>WLAN-Einrichtung</title>\
<style>\
input {\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
background: #f1f1f1;\
border: 0;\
padding: 0 15px\
}\
input {\
\
}\
body {\
background: #007bff;\
font-family: sans-serif;\
font-size: 14px;\
color: #777\
}\
.box {\
background: #fff;\
max-width: 258px;\
margin: 75px auto;\
padding: 30px;\
border-radius: 5px;\
text-align: center\
}\
.btn {\
background: #3498db;\
color: #fff;\
cursor: pointer;\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
}\
.rebootmsg {\
display: none;\
}\
</style>\
</head>\
<body>\
<form id=\"settings\" action=\"/init\" class=\"box\" method=\"POST\">\
<h1>WLAN-Einrichtung</h1>\
<label for=\"ssid\">SSID:</label><br>\
<input type=\"text\" id=\"ssid\" name=\"ssid\" placeholder=\"SSID\" required><br>\
<label for=\"pwd\">Passwort:</label><br>\
<input type=\"password\" id=\"pwd\" name=\"pwd\" autocomplete=\"off\" required><br>\
<label for=\"hostname\">ESPuino-Name (Hostname):</label><br>\
<input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"espuino\" required><br><br>\
<input class=\"btn\" type=\"submit\" id=\"save-button\" value=\"Save\">\
</form>\
<form action=\"/restart\" class=\"box\">\
<h1>Fertig?</h1>\
<input class=\"btn\" type=\"submit\" id=\"restart-button\" value=\"Reboot\">\
</form>\
</body>\
</html>";
<html>\
<head>\
<title>WLAN-Einrichtung</title>\
<style>\
input {\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
background: #f1f1f1;\
border: 0;\
padding: 0 15px\
}\
input {\
\
}\
body {\
background: #007bff;\
font-family: sans-serif;\
font-size: 14px;\
color: #777\
}\
.box {\
background: #fff;\
max-width: 258px;\
margin: 75px auto;\
padding: 30px;\
border-radius: 5px;\
text-align: center\
}\
.btn {\
background: #3498db;\
color: #fff;\
cursor: pointer;\
width: 90%%;\
height: 44px;\
border-radius: 4px;\
margin: 10px auto;\
font-size: 15px;\
}\
.rebootmsg {\
display: none;\
}\
</style>\
</head>\
<body>\
<form id=\"settings\" action=\"/init\" class=\"box\" method=\"POST\">\
<h1>WLAN-Einrichtung</h1>\
<label for=\"ssid\">SSID:</label><br>\
<input type=\"text\" id=\"ssid\" name=\"ssid\" placeholder=\"SSID\" required><br>\
<label for=\"pwd\">Passwort:</label><br>\
<input type=\"password\" id=\"pwd\" name=\"pwd\" autocomplete=\"off\" required><br>\
<label for=\"hostname\">ESPuino-Name (Hostname):</label><br>\
<input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"espuino\" required><br><br>\
<input class=\"btn\" type=\"submit\" id=\"save-button\" value=\"Save\">\
</form>\
<form action=\"/restart\" class=\"box\">\
<h1>Fertig?</h1>\
<input class=\"btn\" type=\"submit\" id=\"restart-button\" value=\"Reboot\">\
</form>\
</body>\
</html>";

1111
src/HTMLmanagement.h
File diff suppressed because it is too large
View File

725
src/HTMLmanagement_DE.h

@ -45,7 +45,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
.icon-pos{\
top: 0.3em;\
position: relative;\
}\
}\
.reboot{\
color:white;\
}\
@ -131,11 +131,12 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"col-md-12\">\
<a class=\"float-left navbar-brand\">\
<img src=\"https://www.espuino.de/espuino/Espuino32.png\"\
width=\"35\" height=\"35\" class=\"d-inline-block align-top\" alt=\"\"/>\
width=\"35\" height=\"35\" class=\"d-inline-block align-top\" alt=\"\"/>\
ESPuino\
</a>\
<a class=\"reboot float-right nav-link\" href=\"/restart\"><i class=\"fas fa-redo\"></i> Neustart</a>\
<a class=\"reboot float-right nav-link\" href=\"/shutdown\"><i class=\"fas fa-power-off\"></i> Ausschalten</a>\
<a class=\"reboot float-right nav-link\" href=\"/log\"><i class=\"fas fa-book\"></i> Log</a>\
</div>\
</nav>\
<br/>\
@ -167,7 +168,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Passwort\" name=\"pwd\" required>\
<label for=\"hostname\">ESPuino-Name (Hostname):</label>\
<input type=\"text\" class=\"form-control\" id=\"hostname\" placeholder=\"espuino\" name=\"hostname\"\
value=\"%HOSTNAME%\" pattern=\"^[^-\\.]{2,32}\" required>\
value=\"%HOSTNAME%\" pattern=\"^[^-\\.]{2,32}\" required>\
</div>\
<br>\
<div class=\"text-center\">\
@ -212,12 +213,12 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"container\" id=\"filetreeContainer\">\
<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\">\
<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\">\
<div class=\"input-group\">\
<span class=\"form-control\" id=\"uploaded_file_text\"></span>\
<span class=\"input-group-btn\">\
@ -233,7 +234,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</div>\
</div>\
<br>\
</div>\
</div>\
</fieldset>\
</div>\
<div class=\"container\" id=\"rfidMusicTags\">\
@ -243,7 +244,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"form-group col-md-12\">\
<label for=\"rfidIdMusic\">RFID-Chip-Nummer (12-stellig)</label>\
<input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
<br>\
<ul class=\"nav nav-tabs\" id=\"SubTab\" role=\"tablist\">\
<li class=\"nav-item\">\
@ -309,7 +310,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"container\" id=\"mqttConfig\">\
\
<form class=\"needs-validation\" action=\"#mqttConfig\" method=\"POST\"\
onsubmit=\"mqttSettings('mqttConfig'); return false\">\
onsubmit=\"mqttSettings('mqttConfig'); return false\">\
<div class=\"form-check col-md-12\">\
<legend>MQTT-Einstellungen</legend>\
<input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"mqttEnable\" name=\"mqttEnable\" %MQTT_ENABLE%>\
@ -320,13 +321,13 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"form-group my-2 col-md-12\">\
<label for=\"mqttServer\">MQTT-Server</label>\
<input type=\"text\" class=\"form-control\" id=\"mqttServer\" minlength=\"7\" maxlength=\"%MQTT_SERVER_LENGTH%\"\
placeholder=\"z.B. 192.168.2.89\" name=\"mqttServer\" value=\"%MQTT_SERVER%\">\
placeholder=\"z.B. 192.168.2.89\" name=\"mqttServer\" value=\"%MQTT_SERVER%\">\
<label for=\"mqttUser\">MQTT-Benutzername (optional):</label>\
<input type=\"text\" class=\"form-control\" id=\"mqttUser\" maxlength=\"%MQTT_USER_LENGTH%\"\
placeholder=\"Benutzername\" name=\"mqttUser\" value=\"%MQTT_USER%\">\
placeholder=\"Benutzername\" name=\"mqttUser\" value=\"%MQTT_USER%\">\
<label for=\"mqttPwd\">MQTT-Passwort (optional):</label>\
<input type=\"password\" class=\"form-control\" id=\"mqttPwd\" maxlength=\"%MQTT_PWD_LENGTH%\"\
placeholder=\"Passwort\" name=\"mqttPwd\" value=\"%MQTT_PWD%\">\
placeholder=\"Passwort\" name=\"mqttPwd\" value=\"%MQTT_PWD%\">\
<label for=\"mqttPort\">MQTT-Port:</label>\
<input type=\"number\" class=\"form-control\" id=\"mqttPort\" min=\"1\" max=\"65535\"\
placeholder=\"Port\" name=\"mqttPort\" value=\"%MQTT_PORT%\" required>\
@ -347,10 +348,10 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<legend>FTP-Einstellungen</legend>\
<label for=\"ftpUser\">FTP-Benutzername:</label>\
<input type=\"text\" class=\"form-control\" id=\"ftpUser\" maxlength=\"%FTP_USER_LENGTH%\"\
placeholder=\"Benutzername\" name=\"ftpUser\" value=\"%FTP_USER%\" required>\
placeholder=\"Benutzername\" name=\"ftpUser\" value=\"%FTP_USER%\" required>\
<label for=\"pwd\">FTP-Passwort:</label>\
<input type=\"password\" class=\"form-control\" id=\"ftpPwd\" maxlength=\"%FTP_PWD_LENGTH%\" placeholder=\"Passwort\"\
name=\"ftpPwd\" value=\"%FTP_PWD%\" required>\
name=\"ftpPwd\" value=\"%FTP_PWD%\" required>\
</div>\
<br>\
<div class=\"text-center\">\
@ -375,14 +376,14 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<br>\
<label for=\"maxVolumeSpeaker\">Maximal (Lautsprecher)</label>\
<div class=\"text-center\">\
<i class=\"fas fa-volume-down fa-2x .icon-pos\"></i> <input data-provide=\"slider\" type=\"number\" data-slider-min=\"1\" data-slider-max=\"21\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolumeSpeaker\" name=\"maxVolumeSpeaker\"\
<i class=\"fas fa-volume-down fa-2x .icon-pos\"></i> <input data-provide=\"slider\" type=\"number\" data-slider-min=\"1\" data-slider-max=\"21\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolumeSpeaker\" name=\"maxVolumeSpeaker\"\
data-slider-value=\"%MAX_VOLUME_SPEAKER%\" value=\"%MAX_VOLUME_SPEAKER%\" required> <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>\
</div>\
<br>\
<label for=\"maxVolumeHeadphone\">Maximal (Kopfhörer)</label>\
<div class=\"text-center\">\
<i class=\"fas fa-volume-down fa-2x .icon-pos\"></i> <input data-provide=\"slider\" type=\"number\" data-slider-min=\"1\" data-slider-max=\"21\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolumeHeadphone\" name=\"maxVolumeHeadphone\"\
data-slider-value=\"%MAX_VOLUME_HEADPHONE%\" value=\"%MAX_VOLUME_HEADPHONE%\" required> <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>\
data-slider-value=\"%MAX_VOLUME_HEADPHONE%\" value=\"%MAX_VOLUME_HEADPHONE%\" required> <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>\
</div>\
</fieldset>\
</div>\
@ -394,7 +395,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<div class=\"text-center\">\
<i class=\"far fa-sun fa-2x .icon-pos\"></i>\
<input data-provide=\"slider\" type=\"number\" data-slider-min=\"0\" data-slider-max=\"255\" min=\"0\" max=\"255\" class=\"form-control\" id=\"initBrightness\" name=\"initBrightness\"\
data-slider-value=\"%INIT_LED_BRIGHTNESS%\" value=\"%INIT_LED_BRIGHTNESS%\" required><i class=\"fas fa-sun fa-2x .icon-pos\"></i>\
data-slider-value=\"%INIT_LED_BRIGHTNESS%\" value=\"%INIT_LED_BRIGHTNESS%\" required><i class=\"fas fa-sun fa-2x .icon-pos\"></i>\
</div>\
\
<label for=\"nightBrightness\">Im Nachtmodus</label>\
@ -410,7 +411,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
<label for=\"inactivityTime\">Inaktivität nach (in Minuten)</label>\
<div class=\"text-center\"><i class=\"fas fa-hourglass-start fa-2x .icon-pos\"></i> <input type=\"number\" data-provide=\"slider\" data-slider-min=\"0\" data-slider-max=\"30\" min=\"1\" max=\"120\" class=\"form-control\" id=\"inactivityTime\" name=\"inactivityTime\"\
data-slider-value=\"%MAX_INACTIVITY%\" value=\"%MAX_INACTIVITY%\" required><i class=\"fas fa-hourglass-end fa-2x .icon-pos\"></i></div>\
data-slider-value=\"%MAX_INACTIVITY%\" value=\"%MAX_INACTIVITY%\" required><i class=\"fas fa-hourglass-end fa-2x .icon-pos\"></i></div>\
</fieldset>\
</div>\
<br>\
@ -431,21 +432,21 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</label>\
<div class=\"text-center\">\
<i class=\"fas fa-battery-quarter fa-2x .icon-pos\"></i> <input data-provide=\"slider\" min=\"2.0\" data-slider-step=\"0.1\" data-slider-min=\"2.0\" data-slider-max=\"5.0\" max=\"5.0\" type=\"text\" class=\"form-control\" id=\"voltageIndicatorLow\" name=\"voltageIndicatorLow\"\
data-slider-value=\"%VOLTAGE_INDICATOR_LOW%\" value=\"%VOLTAGE_INDICATOR_LOW%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required> <i class=\"fas fa-battery-three-quarters fa-2x .icon-pos\" fa-2x .icon-pos></i>\
data-slider-value=\"%VOLTAGE_INDICATOR_LOW%\" value=\"%VOLTAGE_INDICATOR_LOW%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required> <i class=\"fas fa-battery-three-quarters fa-2x .icon-pos\" fa-2x .icon-pos></i>\
</div>\
<br>\
<label for=\"voltageIndicatorHigh\">Alle LEDs leuchten bei dieser Spannung</label>\
\
<div class=\"text-center\">\
<i class=\"fas fa-battery-quarter fa-2x .icon-pos\"></i><input data-provide=\"slider\" data-slider-step=\"0.1\" data-slider-min=\"2.0\" data-slider-max=\"5.0\" min=\"2.0\" max=\"5.0\" type=\"text\" class=\"form-control\" id=\"voltageIndicatorHigh\" name=\"voltageIndicatorHigh\"\
data-slider-value=\"%VOLTAGE_INDICATOR_HIGH%\" value=\"%VOLTAGE_INDICATOR_HIGH%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required> <i class=\"fas fa-battery-three-quarters fa-2x .icon-pos\" fa-2x .icon-pos></i>\
data-slider-value=\"%VOLTAGE_INDICATOR_HIGH%\" value=\"%VOLTAGE_INDICATOR_HIGH%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required> <i class=\"fas fa-battery-three-quarters fa-2x .icon-pos\" fa-2x .icon-pos></i>\
</div>\
\
<br>\
<label for=\"voltageCheckInterval\">Zeitabstand der Messung (in Minuten)</label>\
<div class=\"text-center\"><i class=\"fas fa-hourglass-start fa-2x .icon-pos\"></i>\
<input data-provide=\"slider\" data-slider-min=\"1\" data-slider-max=\"60\" type=\"number\" min=\"1\" max=\"60\" class=\"form-control\" id=\"voltageCheckInterval\"\
data-slider-value=\"%VOLTAGE_CHECK_INTERVAL%\" name=\"voltageCheckInterval\" value=\"%VOLTAGE_CHECK_INTERVAL%\" required><i class=\"fas fa-hourglass-end fa-2x .icon-pos\"></i>\
data-slider-value=\"%VOLTAGE_CHECK_INTERVAL%\" name=\"voltageCheckInterval\" value=\"%VOLTAGE_CHECK_INTERVAL%\" required><i class=\"fas fa-hourglass-end fa-2x .icon-pos\"></i>\
</div>\
\
</fieldset>\
@ -575,353 +576,353 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
}\
\
}\
lastSelectedNodePath = data.node.data.path;\
lastSelectedNodePath = data.node.data.path;\
}\
\
\
});\
\
function doRest(path, callback, obj) {\
obj.url = path;\
obj.dataType = \"json\";\
obj.contentType= \"application/json;charset=IBM437\",\
function doRest(path, callback, obj) {\
obj.url = path;\
obj.dataType = \"json\";\
obj.contentType= \"application/json;charset=IBM437\",\
obj.scriptCharset= \"IBM437\",\
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 (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; }\
if(!document.getElementById('uploaded_file').files.length > 0) { alert(\"Please select files to upload!\");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,\
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: 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);\
xhr.upload.addEventListener(\"progress\", function(evt) {\
if (evt.lengthComputable) {\
var percentComplete = evt.loaded / evt.total;\
percentComplete = parseInt(percentComplete * 100);\
console.log(percentComplete);\
var percent = percentComplete + '%';\
$(\"#explorerUploadProgress\").css('width', percent).text(percent);\
}\
}, false);\
}\
}, false);\
\
return xhr;\
},\
success: function(data, textStatus, jqXHR) {\
return xhr;\
},\
success: function(data, textStatus, jqXHR) {\
console.log(\"Upload success!\");\
$(\"#explorerUploadProgress\").text(\"Upload success!\");\
document.getElementById('uploaded_file').value = '';\
document.getElementById('uploaded_file_text').innerHTML = '';\
\
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);\
console.log(\"call delete request: \" + node.data.path);\
deleteData(\"/explorer?path=\" + node.data.path);\
}\
\
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 parentNodePath = node.data.path;\
/* In case of root node remove leading '/' to avoid '//' */\
if(parentNodePath == \"/\"){\
parentNodePath = \"\";\
}\
var child = {\
text: data.name,\
type: getType(data),\
data: {\
path: parentNodePath + \"/\" + 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;i<children.length;i++)\
{\
ref.delete_node(children[i].id);\
}\
\
}\
getData(\"/explorer?path=\" + path, function(data) {\
/* We now have data! */\
deleteChildrenNodes(sel);\
addFileDirectory(sel, data);\
ref.open_node(sel);\
\
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! */\
\
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)) {\
type = \"audio\";\
} else {\
type = \"file\";\
}\
\
return type;\
}\
\
\
function addFileDirectory(parent, data) {\
\
data.sort( fileNameSort );\
var ref = $('#explorerTree').jstree(true);\
\
for (var i=0; i<data.length; i++) {\
console.log(\"Create Node\");\
ref.create_node(parent, createChild(parent, data[i]));\
}\
} /* addFileDirectory */\
\
function buildFileSystemTree(path) {\
\
$('#explorerTree').jstree({\
\"core\" : {\
\"check_callback\" : true,\
'force_text' : true,\
\"themes\" : { \"stripes\" : true },\
'data' : { text: '/',\
state: {\
opened: true\
},\
type: 'folder',\
children: [],\
data: {\
path: '/',\
directory: true\
}}\
},\
'types': {\
'folder': {\
'icon': \"fa fa-folder\"\
},\
'file': {\
'icon': \"fa fa-file\"\
},\
'audio': {\
'icon': \"fa fa-file-audio\"\
},\
'default': {\
'icon': \"fa fa-folder\"\
}\
},\
plugins: [\"contextmenu\", \"themes\", \"types\"],\
contextmenu: {\
items: function(nodeId) {\
var ref = $('#explorerTree').jstree(true);\
var node = ref.get_node(nodeId);\
var items = {};\
\
\
if (node.data.directory) {\
items.createDir = {\
label: \"Neuer Ordner\",\
action: function(x) {\
var childNode = ref.create_node(nodeId, {text: \"Neuer Ordner\", type: \"folder\"});\
if(childNode) {\
ref.edit(childNode, null, function(childNode, status){\
putData(\"/explorer?path=\" + node.data.path + \"/\" + childNode.text);\
refreshNode(nodeId);\
});\
}\
}\
};\
}\
\
/* Play */\
items.play = {\
label: \"Abspielen\",\
action: function(x) {\
var playMode = node.data.directory?\"5\":\"1\";\
postData(\"/exploreraudio?path=\" + node.data.path + \"&playmode=\" + playMode);\
}\
};\
\
/* Refresh */\
items.refresh = {\
label: \"Aktualisieren\",\
action: function(x) {\
refreshNode(nodeId);\
}\
};\
\
/* Delete */\
items.delete = {\
label: \"Löschen\",\
action: function(x) {\
handleDeleteData(nodeId);\
refreshNode(ref.get_parent(nodeId));\
}\
};\
\
/* Rename */\
items.rename = {\
label: \"Umbenennen\",\
action: function(x) {\
var srcPath = node.data.path;\
ref.edit(nodeId, null, function(node, status){\
node.data.path = node.data.path.substring(0,node.data.path.lastIndexOf(\"/\")+1) + node.text;\
patchData(\"/explorer?srcpath=\" + srcPath + \"&dstpath=\" + node.data.path);\
refreshNode(ref.get_parent(nodeId));\
});\
}\
};\
\
return items;\
}\
}\
});\
\
if (path.length == 0) {\
return;\
}\
getData(\"/explorer?path=/\", function(data) {\
/* We now have data! */\
$('#explorerTree').jstree(true).settings.core.data.children = [];\
\
data.sort( fileNameSort );\
\
\
for (var i=0; i<data.length; i++) {\
var newChild = {\
text: data[i].name,\
type: getType(data[i]),\
data: {\
path: \"/\" + data[i].name,\
directory: data[i].dir\
},\
children: []\
};\
$('#explorerTree').jstree(true).settings.core.data.children.push(newChild);\
}\
\
$(\"#explorerTree\").jstree(true).refresh();\
\
\
});\
} /* buildFileSystemTree */\
});\
\
/* File Delete */\
function handleDeleteData(nodeId) {\
var ref = $('#explorerTree').jstree(true);\
var node = ref.get_node(nodeId);\
console.log(\"call delete request: \" + node.data.path);\
deleteData(\"/explorer?path=\" + node.data.path);\
}\
\
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 parentNodePath = node.data.path;\
/* In case of root node remove leading '/' to avoid '//' */\
if(parentNodePath == \"/\"){\
parentNodePath = \"\";\
}\
var child = {\
text: data.name,\
type: getType(data),\
data: {\
path: parentNodePath + \"/\" + 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;i<children.length;i++)\
{\
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! */\
\
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)) {\
type = \"audio\";\
} else {\
type = \"file\";\
}\
\
return type;\
}\
\
\
function addFileDirectory(parent, data) {\
\
data.sort( fileNameSort );\
var ref = $('#explorerTree').jstree(true);\
\
for (var i=0; i<data.length; i++) {\
console.log(\"Create Node\");\
ref.create_node(parent, createChild(parent, data[i]));\
}\
} /* addFileDirectory */\
\
function buildFileSystemTree(path) {\
\
$('#explorerTree').jstree({\
\"core\" : {\
\"check_callback\" : true,\
'force_text' : true,\
\"themes\" : { \"stripes\" : true },\
'data' : { text: '/',\
state: {\
opened: true\
},\
type: 'folder',\
children: [],\
data: {\
path: '/',\
directory: true\
}}\
},\
'types': {\
'folder': {\
'icon': \"fa fa-folder\"\
},\
'file': {\
'icon': \"fa fa-file\"\
},\
'audio': {\
'icon': \"fa fa-file-audio\"\
},\
'default': {\
'icon': \"fa fa-folder\"\
}\
},\
plugins: [\"contextmenu\", \"themes\", \"types\"],\
contextmenu: {\
items: function(nodeId) {\
var ref = $('#explorerTree').jstree(true);\
var node = ref.get_node(nodeId);\
var items = {};\
\
\
if (node.data.directory) {\
items.createDir = {\
label: \"Neuer Ordner\",\
action: function(x) {\
var childNode = ref.create_node(nodeId, {text: \"Neuer Ordner\", type: \"folder\"});\
if(childNode) {\
ref.edit(childNode, null, function(childNode, status){\
putData(\"/explorer?path=\" + node.data.path + \"/\" + childNode.text);\
refreshNode(nodeId);\
});\
}\
}\
};\
}\
\
/* Play */\
items.play = {\
label: \"Abspielen\",\
action: function(x) {\
var playMode = node.data.directory?\"5\":\"1\";\
postData(\"/exploreraudio?path=\" + node.data.path + \"&playmode=\" + playMode);\
}\
};\
\
/* Refresh */\
items.refresh = {\
label: \"Aktualisieren\",\
action: function(x) {\
refreshNode(nodeId);\
}\
};\
\
/* Delete */\
items.delete = {\
label: \"Löschen\",\
action: function(x) {\
handleDeleteData(nodeId);\
refreshNode(ref.get_parent(nodeId));\
}\
};\
\
/* Rename */\
items.rename = {\
label: \"Umbenennen\",\
action: function(x) {\
var srcPath = node.data.path;\
ref.edit(nodeId, null, function(node, status){\
node.data.path = node.data.path.substring(0,node.data.path.lastIndexOf(\"/\")+1) + node.text;\
patchData(\"/explorer?srcpath=\" + srcPath + \"&dstpath=\" + node.data.path);\
refreshNode(ref.get_parent(nodeId));\
});\
}\
};\
\
return items;\
}\
}\
});\
\
if (path.length == 0) {\
return;\
}\
getData(\"/explorer?path=/\", function(data) {\
/* We now have data! */\
$('#explorerTree').jstree(true).settings.core.data.children = [];\
\
data.sort( fileNameSort );\
\
\
for (var i=0; i<data.length; i++) {\
var newChild = {\
text: data[i].name,\
type: getType(data[i]),\
data: {\
path: \"/\" + data[i].name,\
directory: data[i].dir\
},\
children: []\
};\
$('#explorerTree').jstree(true).settings.core.data.children.push(newChild);\
}\
\
$(\"#explorerTree\").jstree(true).refresh();\
\
\
});\
} /* buildFileSystemTree */\
\
/* File Explorer functions end */\
\
@ -948,22 +949,22 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
};\
\
socket.onmessage = function(event) {\
console.log(event.data);\
var socketMsg = JSON.parse(event.data);\
if (socketMsg.rfidId != null) {\
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\
toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\
$(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
} if (\"status\" in socketMsg) {\
if (socketMsg.status == \"ok\") {\
toastr.success(\"Aktion erfolgreich ausgeführt.\" );\
}\
} if (\"pong\" in socketMsg) {\
if (socketMsg.pong == 'pong') {\
pong();\
}\
}\
};\
console.log(event.data);\
var socketMsg = JSON.parse(event.data);\
if (socketMsg.rfidId != null) {\
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\
toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\
$(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
} if (\"status\" in socketMsg) {\
if (socketMsg.status == \"ok\") {\
toastr.success(\"Aktion erfolgreich ausgeführt.\" );\
}\
} if (\"pong\" in socketMsg) {\
if (socketMsg.pong == 'pong') {\
pong();\
}\
}\
};\
}\
\
function ping() {\
@ -1098,7 +1099,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
$(document).ready(function () {\
connect();\
buildFileSystemTree(\"/\");\
buildFileSystemTree(\"/\");\
\
console.log(parseInt(document.getElementById('warningLowVoltage').value));\
$(function () {\
@ -1108,4 +1109,4 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
});\
</script>\
</body>\
</html>";
</html>";

1
src/HTMLmanagement_EN.h

@ -136,6 +136,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</a>\
<a class=\"reboot float-right nav-link\" href=\"/restart\"><i class=\"fas fa-redo\"></i> Restart</a>\
<a class=\"reboot float-right nav-link\" href=\"/shutdown\"><i class=\"fas fa-power-off\"></i> Shutdown</a>\
<a class=\"reboot float-right nav-link\" href=\"/log\"><i class=\"fas fa-book\"></i> Log</a>\
</div>\
</nav>\
<br/>\

2
src/Log.cpp

@ -6,7 +6,7 @@
// Serial-logging buffer
uint8_t Log_BufferLength = 200;
char *Log_Buffer = (char *) calloc(Log_BufferLength, sizeof(char)); // Buffer for all log-messages
char *Log_Buffer;
static LogRingBuffer Log_RingBuffer;

21
src/Web.cpp

@ -182,8 +182,7 @@ void webserverStart(void) {
}
// Used for substitution of some variables/templates of html-files. Is called by webserver's template-engine
String templateProcessor(const String &templ)
{
String templateProcessor(const String &templ) {
if (templ == "FTP_USER") {
return gPrefsSettings.getString("ftpuser", "-1");
} else if (templ == "FTP_PWD") {
@ -193,11 +192,11 @@ String templateProcessor(const String &templ)
} else if (templ == "FTP_PWD_LENGTH") {
return String(ftpPasswordLength - 1);
} else if (templ == "SHOW_FTP_TAB") { // Only show FTP-tab if FTP-support was compiled
#ifdef FTP_ENABLE
return (String) FPSTR(ftpTab);
#else
return String();
#endif
#ifdef FTP_ENABLE
return (String) FPSTR(ftpTab);
#else
return String();
#endif
} else if (templ == "INIT_LED_BRIGHTNESS") {
return String(gPrefsSettings.getUChar("iLedBrightness", 0));
} else if (templ == "NIGHT_LED_BRIGHTNESS") {
@ -223,10 +222,10 @@ String templateProcessor(const String &templ)
} else if (templ == "MQTT_SERVER") {
return gPrefsSettings.getString("mqttServer", "-1");
} else if (templ == "SHOW_MQTT_TAB") { // Only show MQTT-tab if MQTT-support was compiled
#ifdef MQTT_ENABLE
return (String) FPSTR(mqttTab);
#else
return String();
#ifdef MQTT_ENABLE
return (String) FPSTR(mqttTab);
#else
return String();
#endif
} else if (templ == "MQTT_ENABLE") {
if (Mqtt_IsEnabled()) {

Loading…
Cancel
Save