From 3094e535f91879432e9cdc4219b8621c5e8c22e0 Mon Sep 17 00:00:00 2001
From: Torsten Stauder <stauder@ts-cs.de>
Date: Tue, 5 Jan 2021 23:22:23 +0100
Subject: [PATCH] #47: Only show FTP/MQTT in webgui if support was compiled

---
 html/management.html     |   6 +-
 html/management_EN.html  |   4 +-
 src/HTMLaccesspoint.h    | 121 +++--
 src/HTMLaccesspoint_EN.h |  72 ++-
 src/HTMLmanagement.h     |  22 +-
 src/HTMLmanagement_EN.h  | 978 ++++++++++++++++++++++++++-------------
 src/main.cpp             |  14 +
 7 files changed, 809 insertions(+), 408 deletions(-)

diff --git a/html/management.html b/html/management.html
index 851b0ee..ce1013c 100644
--- a/html/management.html
+++ b/html/management.html
@@ -118,8 +118,8 @@
         <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-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>
-            <a class="nav-item nav-link" id="nav-mqtt-tab" data-toggle="tab" href="#nav-mqtt" role="tab" aria-controls="nav-mqtt" aria-selected="false"><i class="fas fa-network-wired"></i> MQTT</a>
-            <a class="nav-item nav-link" id="nav-ftp-tab" data-toggle="tab" href="#nav-ftp" role="tab" aria-controls="nav-ftp" aria-selected="false"><i class="fas fa-folder"></i> FTP</a>
+            %SHOW_MQTT_TAB%
+            %SHOW_FTP_TAB%
             <a class="nav-item nav-link" id="nav-general-tab" data-toggle="tab" href="#nav-general" role="tab" aria-controls="nav-general" aria-selected="false"><i class="fas fa-sliders-h"></i> Allgemein</a>
             <a class="nav-item nav-link" id="nav-tools-tab" data-toggle="tab" href="#nav-tools" role="tab" aria-controls="nav-tools" aria-selected="false"><i class="fas fa-wrench"></i> Tools</a>
         </div>
@@ -344,7 +344,7 @@
                         <legend>Batterie</legend>
                     <div>Status über Neopixel anzeigen</div>
                         <br>
-                    <label for="warningLowVoltage">Unter dieser Spannung wird eine Warnung angezeit.
+                    <label for="warningLowVoltage">Unter dieser Spannung wird eine Warnung angezeigt.
                     </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="3.0" data-slider-max="5.0"  min="3.0" max="5.0" type="text" class="form-control" id="warningLowVoltage" name="warningLowVoltage"
diff --git a/html/management_EN.html b/html/management_EN.html
index a4c9d28..75ed02c 100644
--- a/html/management_EN.html
+++ b/html/management_EN.html
@@ -118,8 +118,8 @@
         <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-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"> WiFi</span></a>
-            <a class="nav-item nav-link" id="nav-mqtt-tab" data-toggle="tab" href="#nav-mqtt" role="tab" aria-controls="nav-mqtt" aria-selected="false"><i class="fas fa-network-wired"></i> MQTT</a>
-            <a class="nav-item nav-link" id="nav-ftp-tab" data-toggle="tab" href="#nav-ftp" role="tab" aria-controls="nav-ftp" aria-selected="false"><i class="fas fa-folder"></i> FTP</a>
+            %SHOW_MQTT_TAB%
+            %SHOW_FTP_TAB%
             <a class="nav-item nav-link" id="nav-general-tab" data-toggle="tab" href="#nav-general" role="tab" aria-controls="nav-general" aria-selected="false"><i class="fas fa-sliders-h"></i> General</a>
             <a class="nav-item nav-link" id="nav-tools-tab" data-toggle="tab" href="#nav-tools" role="tab" aria-controls="nav-tools" aria-selected="false"><i class="fas fa-wrench"></i> Tools</a>
         </div>
diff --git a/src/HTMLaccesspoint.h b/src/HTMLaccesspoint.h
index 8fe5b4a..b3a5b4e 100644
--- a/src/HTMLaccesspoint.h
+++ b/src/HTMLaccesspoint.h
@@ -1,65 +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 {\
+    <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>WiFi Configuration</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\">Tonuino-Name (Hostname):</label><br>\
-    <input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"Tonuino\" required><br><br>\
-    <input class=\"btn\" type=\"submit\" id=\"save-button\" value=\"Save\">\
-</form>\
-<form action=\"/restart\" class=\"box\">\
-    <h1>Ready to go?</h1>\
-    <input class=\"btn\" type=\"submit\" id=\"restart-button\" value=\"Reboot\">\
-</form>\
-\
-</body>\
+            }\
+            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\">Tonuino-Name (Hostname):</label><br>\
+            <input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"Tonuino\" 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>";
\ No newline at end of file
diff --git a/src/HTMLaccesspoint_EN.h b/src/HTMLaccesspoint_EN.h
index 5bab70e..3b91c1d 100644
--- a/src/HTMLaccesspoint_EN.h
+++ b/src/HTMLaccesspoint_EN.h
@@ -1,24 +1,64 @@
 static const char accesspoint_HTML[] PROGMEM = "<!DOCTYPE html>\
 <html>\
     <head>\
-        <title>Wifi-configuration</title>\
+        <title>WiFi-configuration</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 action=\"/init\" method=\"POST\">\
-            <fieldset>\
-                <legend>Basic wifi-setup</legend>\
-                <label for=\"ssid\">SSID:</label><br>\
-                <input type=\"text\" id=\"ssid\" name=\"ssid\" placeholder=\"SSID\" required><br>\
-                <label for=\"pwd\">Password:</label><br>\
-                <input type=\"password\" id=\"pwd\" name=\"pwd\" autocomplete=\"off\" required><br>\
-                <label for=\"hostname\">Tonuino-name (hostname):</label><br>\
-                <input type=\"text\" id=\"hostname\" name=\"hostname\" required><br><br>\
-                <input type=\"submit\" value=\"Submit\">\
-            </fieldset>\
+        <form id=\"settings\" action=\"/init\" class=\"box\" method=\"POST\">\
+            <h1>WiFi-configuration</h1>\
+            <label for=\"ssid\">SSID:</label><br>\
+            <input type=\"text\" id=\"ssid\" name=\"ssid\" placeholder=\"SSID\" required><br>\
+            <label for=\"pwd\">Password:</label><br>\
+            <input type=\"password\" id=\"pwd\" name=\"pwd\" autocomplete=\"off\" required><br>\
+            <label for=\"hostname\">Tonuino's name (hostname):</label><br>\
+            <input type=\"text\" id=\"hostname\" name=\"hostname\" placeholder=\"Tonuino\" required><br><br>\
+            <input class=\"btn\" type=\"submit\" id=\"save-button\" value=\"Save\">\
         </form>\
-        <form action=\"/restart\">\
-            <button type=\"submit\">Reboot</button>\
+        <form action=\"/restart\" class=\"box\">\
+            <h1>Ready to go?</h1>\
+            <input class=\"btn\" type=\"submit\" id=\"restart-button\" value=\"Reboot\">\
         </form>\
     </body>\
-</html>\
-";
\ No newline at end of file
+</html>";
\ No newline at end of file
diff --git a/src/HTMLmanagement.h b/src/HTMLmanagement.h
index b1e06ff..8569927 100644
--- a/src/HTMLmanagement.h
+++ b/src/HTMLmanagement.h
@@ -34,7 +34,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             width: 30px;\
             top: -5px;\
         }\
-     \
+\
         legend.scheduler-border {\
             width:inherit; /* Or auto */\
             padding:0 10px; /* To give a bit of padding on the left and right */\
@@ -118,8 +118,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
         <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-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>\
-            <a class=\"nav-item nav-link\" id=\"nav-mqtt-tab\" data-toggle=\"tab\" href=\"#nav-mqtt\" role=\"tab\" aria-controls=\"nav-mqtt\" aria-selected=\"false\"><i class=\"fas fa-network-wired\"></i> MQTT</a>\
-            <a class=\"nav-item nav-link\" id=\"nav-ftp-tab\" data-toggle=\"tab\" href=\"#nav-ftp\" role=\"tab\" aria-controls=\"nav-ftp\" aria-selected=\"false\"><i class=\"fas fa-folder\"></i> FTP</a>\
+            %SHOW_MQTT_TAB%\
+            %SHOW_FTP_TAB%\
             <a class=\"nav-item nav-link\" id=\"nav-general-tab\" data-toggle=\"tab\" href=\"#nav-general\" role=\"tab\" aria-controls=\"nav-general\" aria-selected=\"false\"><i class=\"fas fa-sliders-h\"></i> Allgemein</a>\
             <a class=\"nav-item nav-link\" id=\"nav-tools-tab\" data-toggle=\"tab\" href=\"#nav-tools\" role=\"tab\" aria-controls=\"nav-tools\" aria-selected=\"false\"><i class=\"fas fa-wrench\"></i> Tools</a>\
         </div>\
@@ -252,7 +252,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                     <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%\">\
-                    <label for=\"mqttPwd\">Passwort (optional):</label>\
+                    <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%\">\
                 </div>\
@@ -272,7 +272,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                     <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>\
-                    <label for=\"pwd\">Passwort:</label>\
+                    <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>\
                 </div>\
@@ -297,13 +297,13 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                     <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=\"initialVolume\" name=\"initialVolume\"\
                         data-slider-value=\"%INIT_VOLUME%\"  value=\"%INIT_VOLUME%\" required>  <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i></div>\
                         <br>\
-                    <label for=\"maxVolumeSpeaker\">Maximal Lautsprecher</label>\
+                    <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\"\
                         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>\
+                    <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>\
@@ -344,21 +344,21 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                         <legend>Batterie</legend>\
                     <div>Status über Neopixel anzeigen</div>\
                         <br>\
-                    <label for=\"warningLowVoltage\">Spannungsgrenze für Status Anzeige.\
+                    <label for=\"warningLowVoltage\">Unter dieser Spannung wird eine Warnung angezeigt.\
                     </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=\"3.0\" data-slider-max=\"5.0\"  min=\"3.0\" max=\"5.0\" type=\"text\" class=\"form-control\" id=\"warningLowVoltage\" name=\"warningLowVoltage\"\
                         data-slider-value=\"%WARNING_LOW_VOLTAGE%\" value=\"%WARNING_LOW_VOLTAGE%\" 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=\"voltageIndicatorLow\">Unterer Akkuspannungslevel\
+                    <label for=\"voltageIndicatorLow\">Eine LED leuchtet bei dieser Spannung\
                         </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>\
                         </div>\
                         <br>\
-                        <label for=\"voltageIndicatorHigh\">Oberer Akkuspannungslevel</label>\
+                        <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\"\
@@ -366,7 +366,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                         </div>\
 \
                         <br>\
-                    <label for=\"voltageCheckInterval\"> Interval der Messung (in Minuten)</label>\
+                    <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>\
diff --git a/src/HTMLmanagement_EN.h b/src/HTMLmanagement_EN.h
index 469e09a..2fe7933 100644
--- a/src/HTMLmanagement_EN.h
+++ b/src/HTMLmanagement_EN.h
@@ -1,287 +1,624 @@
 static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 <html lang=\"de\">\
-  <head>\
+<head>\
     <title>ESPuino-configuration</title>\
     <meta charset=\"utf-8\">\
     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
     <link rel=\"stylesheet\" href=\"https://ts-cs.de/tonuino/css/bootstrap.min.css\">\
+    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css\"/>\
+    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\"/>\
+    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css\"/>\
+    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css\" />\
     <script src=\"https://ts-cs.de/tonuino/js/jquery.min.js\"></script>\
+    <script src=\"https://code.jquery.com/ui/1.12.0/jquery-ui.min.js\"></script>\
     <script src=\"https://ts-cs.de/tonuino/js/popper.min.js\"></script>\
     <script src=\"https://ts-cs.de/tonuino/js/bootstrap.min.js\"></script>\
-  </head>\
-  <body>\
-    <nav class=\"navbar navbar-expand-sm bg-primary navbar-dark\">\
-      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\
-        <span class=\"navbar-toggler-icon\"></span>\
-      </button>\
-      <a class=\"navbar-brand\">\
-        <img src=\"https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/html/tonuino_logo.png\" width=\"30\" height=\"30\" class=\"d-inline-block align-top\" alt=\"\" />\
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js\"></script>\
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js\"></script>\
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js\"></script>\
+    <style type=\"text/css\">\
+        .filetree {\
+            border: 1px solid black;\
+            height: 200px;\
+            margin: 0em 0em 1em 0em;\
+            overflow-y: scroll;\
+        }\
+        .slider.slider-horizontal {\
+            width: 60%%;\
+            margin-left: 1em;\
+            margin-right: 1em;\
+\
+        }\
+        .slider-handle{\
+            height: 30px;\
+            width: 30px;\
+            top: -5px;\
+        }\
+\
+        legend.scheduler-border {\
+            width:inherit; /* Or auto */\
+            padding:0 10px; /* To give a bit of padding on the left and right */\
+            border-bottom:none;\
+        }\
+\
+        .icon-pos{\
+            top: 0.3em;\
+            position: relative;\
+         }\
+        .reboot{\
+            color:white;\
+        }\
+        .reboot:hover{\
+            color: orange;\
+        }\
+\
+        .fa-sync:hover {\
+            color: #666666;\
+        }\
+\
+        .clickForRefresh {\
+            text-align: center;\
+            color: gray;\
+            cursor: pointer;\
+            margin-top: 5em;\
+        }\
+\
+        .clickForRefresh:hover {\
+            color: darkgray;\
+        }\
+\
+        .filetree-container {\
+            position: relative;\
+        }\
+\
+        .indexing-progress {\
+            width: 100%%;\
+            height: 100%%;\
+            position: absolute;\
+            top: 0;\
+            left: 0;\
+            opacity: 0.7;\
+            display: none;\
+        }\
+\
+        .refreshAction{\
+            text-align: right;\
+            font-size: 0.8em;\
+        }\
+\
+        .refreshAction:hover{\
+            cursor: pointer;\
+            color: darkgray;\
+        }\
+\
+        .overlay {\
+            z-index: 9;\
+            opacity: 0.8;\
+            background: #1a1919;\
+            height: 200px;\
+            display: none;\
+            width: 100%%;\
+        }\
+    </style>\
+</head>\
+<body>\
+<nav class=\"navbar navbar-expand-sm bg-primary navbar-dark\">\
+    <div class=\"col-md-12\">\
+    <a class=\"float-left navbar-brand\">\
+        <img src=\"https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/html/tonuino_logo.png\"\
+             width=\"30\" height=\"30\" class=\"d-inline-block align-top\" alt=\"\"/>\
         Tonuino\
-      </a>\
-      <div class=\"collapse navbar-collapse\" id=\"collapsibleNavbar\">\
-        <ul class=\"navbar-nav mr-auto\">\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#wifiConfig\">Wifi</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#rfidMusicTags\">RFID-assignments</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#rfidModTags\">RFID-modifications</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#mqttConfig\">MQTT</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#ftpConfig\">FTP</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#generalConfig\">General</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"#importNvs\">NVS-importer</a>\
-          </li>\
-          <li class=\"nav-item\">\
-            <a class=\"nav-link\" href=\"/restart\" style=\"color: orange\">Reboot Tonuino</a>\
-          </li>\
-        </ul>\
-      </div>\
+    </a>\
+\
+    <a class=\"reboot float-right nav-link\" href=\"/restart\"><i class=\"fas fa-power-off\"></i> Neustart</a>\
+    </div>\
+</nav>\
+<br/>\
+    <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-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\"> WiFi</span></a>\
+            %SHOW_MQTT_TAB%\
+            %SHOW_FTP_TAB%\
+            <a class=\"nav-item nav-link\" id=\"nav-general-tab\" data-toggle=\"tab\" href=\"#nav-general\" role=\"tab\" aria-controls=\"nav-general\" aria-selected=\"false\"><i class=\"fas fa-sliders-h\"></i> General</a>\
+            <a class=\"nav-item nav-link\" id=\"nav-tools-tab\" data-toggle=\"tab\" href=\"#nav-tools\" role=\"tab\" aria-controls=\"nav-tools\" aria-selected=\"false\"><i class=\"fas fa-wrench\"></i> Tools</a>\
+        </div>\
     </nav>\
-    <br />\
-    <div class=\"container\" id=\"wifiConfig\">\
-      <h2>Wifi-configuration</h2>\
-      <form action=\"#wifiConfig\" method=\"POST\" onsubmit=\"wifiConfig('wifiConfig'); return false\">\
-        <div class=\"form-group col-md-6\">\
-          <label for=\"ssid\">Wifi-name (SSID):</label>\
-          <input type=\"text\" class=\"form-control\" id=\"ssid\" placeholder=\"SSID\" name=\"ssid\" required>\
-          <div class=\"invalid-feedback\">\
-            Please enter name of wifi (SSID).\
-          </div>\
-          <label for=\"pwd\">Password:</label>\
-          <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Passwort\" name=\"pwd\" required>\
-          <label for=\"hostname\">Tonuino-name (hostname):</label>\
-          <input type=\"text\" class=\"form-control\" id=\"hostname\" placeholder=\"tonuino\" name=\"hostname\" value=\"%HOSTNAME%\" pattern=\"^[^-\\.]{2,32}\" required>\
+<br>\
+<div class=\"tab-content\" id=\"nav-tabContent\">\
+    <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\">\
+                <div class=\"form-group col-md-12\">\
+                    <label for=\"ssid\">Wifi (SSID):</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"ssid\" placeholder=\"SSID\" name=\"ssid\" required>\
+                    <div class=\"invalid-feedback\">\
+                        Please enter WiFi's SSID.\
+                    </div>\
+                    <label for=\"pwd\">Password:</label>\
+                    <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Passwort\" name=\"pwd\" required>\
+                    <label for=\"hostname\">tonuino-name (Hostname):</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"hostname\" placeholder=\"tonuino\" name=\"hostname\"\
+                           value=\"%HOSTNAME%\" pattern=\"^[^-\\.]{2,32}\" required>\
+                </div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+        </div>\
+    </div>\
+    <div class=\"tab-pane fade show active\" id=\"nav-rfid\" role=\"tabpanel\" aria-labelledby=\"nav-rfid-tab\">\
+        <div class=\"container\" id=\"rfidMusicTags\">\
+            <fieldset>\
+                <legend>RFID-assignments</legend>\
+            <form action=\"#rfidMusicTags\" method=\"POST\" onsubmit=\"rfidAssign('rfidMusicTags'); return false\">\
+                <div class=\"form-group col-md-12\">\
+                    <label for=\"rfidIdMusic\">RFID-tag-ID (12-digits)</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\
+                           placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
+                    <label for=\"fileOrUrl\">File, directory or URL (^ and # not allowed as characters)</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=\"Refresh indexfile.\"><i class=\"fas fa-sync fa-1x\"></i> Refresh indexfile</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>  This could take while...</div>\
+                                <div id=\"currentProcessedFile\"></div>\
+                            </div>\
+                        </div>\
+                    </div>\
+                    <label for=\"playMode\">Playmode</label>\
+                    <select class=\"form-control\" id=\"playMode\" name=\"playMode\">\
+                        <option class=\"option-file\" value=\"1\">Single track</option>\
+                        <option class=\"option-file\" value=\"2\">Single track (loop)</option>\
+                        <option class=\"option-file-and-folder\" value=\"3\">Audiobook</option>\
+                        <option class=\"option-file-and-folder\" value=\"4\">Audiobook (loop)</option>\
+                        <option class=\"option-folder\" value=\"5\">All tracks of directory (alph. sorted)</option>\
+                        <option class=\"option-folder\" value=\"6\">All tracks of directory (random, loop)</option>\
+                        <option class=\"option-folder\" value=\"7\">All tracks of directory (alph. sorted, loop)</option>\
+                        <option class=\"option-folder\" value=\"9\">All tracks of directory (random)</option>\
+                        <option class=\"option-stream\" value=\"8\">Webstream</option>\
+                    </select>\
+                </div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+            </fieldset>\
+        </div>\
+\
+        <br>\
+        <br>\
+        <div class=\"container\" id=\"rfidModTags\">\
+            <fieldset>\
+                <legend>RFID-modifications</legend>\
+            <form class=\"needs-validation\" action=\"#rfidModTags\" method=\"POST\" onsubmit=\"rfidMods('rfidModTags'); return false\">\
+                <div class=\"form-group col-md-12\">\
+                    <label for=\"rfidIdMod\">RFID-tag-ID (12-digits)</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"rfidIdMod\" maxlength=\"12\" pattern=\"[0-9]{12}\"\
+                           placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMod\" required>\
+                    <div class=\"invalid-feedback\">\
+                        Please enter 12-digits-number.\
+                    </div>\
+                    <label for=\"modId\">Configuration</label>\
+                    <select class=\"form-control\" id=\"modId\" name=\"modId\">\
+                        <option value=\"100\">Keylock</option>\
+                        <option value=\"101\">Auto-sleep after 15 minutes</option>\
+                        <option value=\"102\">Auto-sleep after 30 minutes</option>\
+                        <option value=\"103\">Auto-sleep after 1 hour</option>\
+                        <option value=\"104\">Auto-sleep after 2 hours</option>\
+                        <option value=\"105\">Auto-sleep after after end of current track</option>\
+                        <option value=\"106\">Auto-sleep after after end of current playlist</option>\
+                        <option value=\"107\">Auto-sleep after after five tracks</option>\
+                        <option value=\"110\">Loop current playlist</option>\
+                        <option value=\"111\">Loop current track</option>\
+                        <option value=\"112\">Dimm LEDs (nightmode)</option>\
+                        <option value=\"130\">Enable/disable (toggle) WiFi</option>\
+                    </select>\
+                </div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+            </fieldset>\
         </div>\
-        <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-        <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-      </form>\
-      <div class=\"messages col-md-6 my-2\"></div>\
     </div>\
-    <div class=\"container my-5\" id=\"rfidMusicTags\">\
-        <h2>RFID-assignments</h2>\
-        <form action=\"#rfidMusicTags\" method=\"POST\" onsubmit=\"rfidAssign('rfidMusicTags'); return false\">\
-            <div class=\"form-group col-md-6\">\
-                <label for=\"rfidIdMusic\">RFID-chip-ID (12 digits)</label>\
-                <input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\" placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
-                <label for=\"fileOrUrl\">File, directory or URL (^ und # are not allowed)</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>\
-                <label for=\"playMode\">Playmode</label>\
-                <select class=\"form-control\" id=\"playMode\" name=\"playMode\">\
-                    <option value=\"1\">Single track</option>\
-                    <option value=\"2\">Single track (infinite loop)</option>\
-                    <option value=\"3\">Audiobook</option>\
-                    <option value=\"4\">Audiobook (infinite loop)</option>\
-                    <option value=\"5\">All tracks of directory (sorted)</option>\
-                    <option value=\"6\">All tracks of directory (random)</option>\
-                    <option value=\"7\">All tracks of directory (sorted, inf. loop)</option>\
-                    <option value=\"9\">All tracks of directory (random, inf. loop)</option>\
-                    <option value=\"8\">Webradio</option>\
-                </select>\
-            </div>\
-          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-          <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
+    <div class=\"tab-pane fade\" id=\"nav-mqtt\" role=\"tabpanel\" aria-labelledby=\"nav-mqtt-tab\">\
+        <div class=\"container\" id=\"mqttConfig\">\
+\
+            <form class=\"needs-validation\" action=\"#mqttConfig\" method=\"POST\"\
+                  onsubmit=\"mqttSettings('mqttConfig'); return false\">\
+                <div class=\"form-check col-md-12\">\
+                    <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"mqttEnable\" name=\"mqttEnable\" %MQTT_ENABLE%>\
+                    <label class=\"form-check-label\" for=\"mqttEnable\">\
+                        Enable MQTT\
+                    </label>\
+                </div>\
+                <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%\">\
+                    <label for=\"mqttUser\">MQTT-username (optional):</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"mqttUser\" maxlength=\"%MQTT_USER_LENGTH%\"\
+                           placeholder=\"Benutzername\" name=\"mqttUser\" value=\"%MQTT_USER%\">\
+                    <label for=\"mqttPwd\">MQTT-password (optional):</label>\
+                    <input type=\"password\" class=\"form-control\" id=\"mqttPwd\" maxlength=\"%MQTT_PWD_LENGTH%\"\
+                           placeholder=\"Passwort\" name=\"mqttPwd\" value=\"%MQTT_PWD%\">\
+                </div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+        </div>\
     </div>\
-    <div class=\"container my-5\" id=\"rfidModTags\">\
-        <h2>RFID-modifications</h2>\
-        <form class=\"needs-validation\" action=\"#rfidModTags\" method=\"POST\" onsubmit=\"rfidMods('rfidModTags'); return false\">\
-            <div class=\"form-group col-md-6\">\
-                <label for=\"rfidIdMod\">RFID-chip-ID (12 digits)</label>\
-                <input type=\"text\" class=\"form-control\" id=\"rfidIdMod\" maxlength=\"12\" pattern=\"[0-9]{12}\" placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMod\" required>\
-                <div class=\"invalid-feedback\">\
-                  Please enter a number with 12 digits.\
+    <div class=\"tab-pane fade\" id=\"nav-ftp\" role=\"tabpanel\" aria-labelledby=\"nav-ftp-tab\">\
+        <div class=\"container\" id=\"ftpConfig\">\
+\
+            <form action=\"#ftpConfig\" method=\"POST\" onsubmit=\"ftpSettings('ftpConfig'); return false\">\
+                <div class=\"form-group col-md-12\">\
+                    <label for=\"ftpUser\">FTP-username:</label>\
+                    <input type=\"text\" class=\"form-control\" id=\"ftpUser\" maxlength=\"%FTP_USER_LENGTH%\"\
+                           placeholder=\"Benutzername\" name=\"ftpUser\" value=\"%FTP_USER%\" required>\
+                    <label for=\"pwd\">FTP-password:</label>\
+                    <input type=\"password\" class=\"form-control\" id=\"ftpPwd\" maxlength=\"%FTP_PWD_LENGTH%\" placeholder=\"Passwort\"\
+                           name=\"ftpPwd\" value=\"%FTP_PWD%\" required>\
                 </div>\
-                <label for=\"modId\">Abspielmodus</label>\
-                <select class=\"form-control\" id=\"modId\" name=\"modId\">\
-                    <option value=\"100\">Lock keys</option>\
-                    <option value=\"101\">Sleep after 15 minutes</option>\
-                    <option value=\"102\">Sleep after 30 minutes</option>\
-                    <option value=\"103\">Sleep after 1 hour</option>\
-                    <option value=\"104\">Sleep after 1 hours</option>\
-                    <option value=\"105\">Sleep after end of track</option>\
-                    <option value=\"106\">Sleep after end of playlist</option>\
-                    <option value=\"107\">Sleep after five tracks</option>\
-                    <option value=\"110\">Repeat playlist (inf. loop)</option>\
-                    <option value=\"111\">Repeat track (inf. loop)</option>\
-                    <option value=\"112\">Dimm LEDs (nightmode)</option>\
-                    <option value=\"130\">Toggle WiFi-status</option>\
-                </select>\
-          </div>\
-          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-          <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+        </div>\
     </div>\
-    <div class=\"container my-5\" id=\"mqttConfig\">\
-        <h2>MQTT-configuration</h2>\
-        <form class=\"needs-validation\" action=\"#mqttConfig\" method=\"POST\" onsubmit=\"mqttSettings('mqttConfig'); return false\">\
-            <div class=\"form-check col-md-6\">\
-                <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"mqttEnable\" name=\"mqttEnable\" %MQTT_ENABLE%>\
-                <label class=\"form-check-label\" for=\"mqttEnable\">\
-                  Enable MQTT\
-                </label>\
-            </div>\
-            <div class=\"form-group my-2 col-md-6\">\
-                <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%\">\
-                <label for=\"mqttUser\">MQTT-username (optional):</label>\
-                <input type=\"text\" class=\"form-control\" id=\"mqttUser\" maxlength=\"%MQTT_USER_LENGTH%\" placeholder=\"Benutzername\" name=\"mqttUser\" value=\"%MQTT_USER%\">\
-                <label for=\"mqttPwd\">Password (optional):</label>\
-                <input type=\"password\" class=\"form-control\" id=\"mqttPwd\" maxlength=\"%MQTT_PWD_LENGTH%\" placeholder=\"Passwort\" name=\"mqttPwd\" value=\"%MQTT_PWD%\">\
-            </div>\
-          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-          <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
+\
+    <div class=\"tab-pane fade\" id=\"nav-general\" role=\"tabpanel\" aria-labelledby=\"nav-general-tab\">\
+        <div class=\"container\" id=\"generalConfig\">\
+\
+            <form action=\"#generalConfig\" method=\"POST\" onsubmit=\"genSettings('generalConfig'); return false\">\
+                    <div class=\"form-group col-md-12\">\
+                    <fieldset>\
+                            <legend class=\"w-auto\">Volume</legend>\
+                    <label for=\"initialVolume\">After power on</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=\"initialVolume\" name=\"initialVolume\"\
+                        data-slider-value=\"%INIT_VOLUME%\"  value=\"%INIT_VOLUME%\" required>  <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i></div>\
+                        <br>\
+                    <label for=\"maxVolumeSpeaker\">Maximum (speaker)</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\"\
+                        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\">Maximum (headphones)</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>\
+                        </div>\
+                </fieldset>\
+                </div>\
+<br>\
+                <div class=\"form-group col-md-12\">\
+                    <fieldset >\
+                        <legend  class=\"w-auto\">Neopixel (brightness)</legend>\
+                    <label for=\"initBrightness\">After power on:</label>\
+                        <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>\
+                        </div>\
+\
+                    <label for=\"nightBrightness\">In nightmode</label>\
+                        <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=\"nightBrightness\" name=\"nightBrightness\" data-slider-value=\"%NIGHT_LED_BRIGHTNESS%\" value=\"%NIGHT_LED_BRIGHTNESS%\" required><i class=\"fas fa-sun fa-2x .icon-pos\"></i>\
+                        </div>\
+                    </fieldset>\
+                </div>\
+<br>\
+                <div class=\"form-group col-md-12\">\
+                    <fieldset>\
+                        <legend>Deep Sleep</legend>\
+\
+                        <label for=\"inactivityTime\">Inactivity (minutes)</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>\
+                    </fieldset>\
+                </div>\
+<br>\
+\
+                <div class=\"form-group col-md-12\">\
+                    <fieldset>\
+                        <legend>Battery</legend>\
+                    <div>Status via Neopixel</div>\
+                        <br>\
+                    <label for=\"warningLowVoltage\">LED-warning will appear below this voltage.\
+                    </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=\"3.0\" data-slider-max=\"5.0\"  min=\"3.0\" max=\"5.0\" type=\"text\" class=\"form-control\" id=\"warningLowVoltage\" name=\"warningLowVoltage\"\
+                        data-slider-value=\"%WARNING_LOW_VOLTAGE%\" value=\"%WARNING_LOW_VOLTAGE%\" 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=\"voltageIndicatorLow\">One LED lights at this voltage\
+                        </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>\
+                        </div>\
+                        <br>\
+                        <label for=\"voltageIndicatorHigh\">All LEDs light at this voltage</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>\
+                        </div>\
+\
+                        <br>\
+                    <label for=\"voltageCheckInterval\">Interval of measurement (minutes)</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>\
+                    </div>\
+\
+                    </fieldset>\
+                </div>\
+<br>\
+                <div class=\"text-center\">\
+                <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+        </div>\
     </div>\
-    <div class=\"container\" id=\"ftpConfig\">\
-        <h2>FTP-configuration</h2>\
-        <form action=\"#ftpConfig\" method=\"POST\" onsubmit=\"ftpSettings('ftpConfig'); return false\">\
-          <div class=\"form-group col-md-6\">\
-            <label for=\"ftpUser\">FTP-username:</label>\
-            <input type=\"text\" class=\"form-control\" id=\"ftpUser\" maxlength=\"%FTP_USER_LENGTH%\" placeholder=\"Benutzername\" name=\"ftpUser\" value=\"%FTP_USER%\" required>\
-            <label for=\"pwd\">password:</label>\
-            <input type=\"password\" class=\"form-control\" id=\"ftpPwd\" maxlength=\"%FTP_PWD_LENGTH%\" placeholder=\"Passwort\" name=\"ftpPwd\" value=\"%FTP_PWD%\" required>\
-          </div>\
-          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-          <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
+    <div class=\"tab-pane fade\" id=\"nav-tools\" role=\"tabpanel\" aria-labelledby=\"nav-tools-tab\">\
+        <div class=\"container my-5\" id=\"importNvs\">\
+            <h2>NVS-Importer</h2>\
+            <form action=\"/upload\" enctype=\"multipart/form-data\" method=\"POST\">\
+                <div class=\"form-group\">\
+                    <label for=\"nvsUpload\">Select backup-file for import.</label>\
+                    <input type=\"file\" class=\"form-control-file\" id=\"nvsUpload\" name=\"nvsUpload\" accept=\".txt\">\
+                </div>\
+                <br>\
+                <div class=\"text-center\">\
+                <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
+                </div>\
+            </form>\
+        </div>\
     </div>\
-    <div class=\"container my-5\" id=\"generalConfig\">\
-        <h2>General configuration</h2>\
-        <form action=\"#generalConfig\" method=\"POST\" onsubmit=\"genSettings('generalConfig'); return false\">\
-            <div class=\"form-group col-md-6\">\
-                <label for=\"initialVolume\">Volume after start</label>\
-                <input type=\"number\" min=\"1\" max=\"21\" class=\"form-control\" id=\"initialVolume\" name=\"initialVolume\" value=\"%INIT_VOLUME%\" required>\
-                <label for=\"maxVolumeSpeaker\">Maximum volume (speaker)</label>\
-                <input type=\"number\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolumeSpeaker\" name=\"maxVolumeSpeaker\" value=\"%MAX_VOLUME_SPEAKER%\" required>\
-                <label for=\"maxVolumeHeadphone\">Maximum volume (headphone)</label>\
-                <input type=\"number\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolumeHeadphone\" name=\"maxVolumeHeadphone\" value=\"%MAX_VOLUME_HEADPHONE%\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-                <label for=\"initBrightness\">Neopixel-brightness after start</label>\
-                <input type=\"number\" min=\"0\" max=\"255\" class=\"form-control\" id=\"initBrightness\" name=\"initBrightness\" value=\"%INIT_LED_BRIGHTNESS%\" required>\
-                <label for=\"nightBrightness\">Neopixel-brightness in nightmode</label>\
-                <input type=\"number\" min=\"0\" max=\"255\" class=\"form-control\" id=\"nightBrightness\" name=\"nightBrightness\" value=\"%NIGHT_LED_BRIGHTNESS%\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-                <label for=\"inactivityTime\">Deepsleep after inactivity (minutes)</label>\
-                <input type=\"number\" min=\"1\" max=\"1440\" class=\"form-control\" id=\"inactivityTime\" name=\"inactivityTime\" value=\"%MAX_INACTIVITY%\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-              <label for=\"warningLowVoltage\">(Optional) Neopixel-warning will indicated below this battery-voltage (e.g. 3.4)</label>\
-              <input type=\"text\" class=\"form-control\" id=\"warningLowVoltage\" name=\"warningLowVoltage\" value=\"%WARNING_LOW_VOLTAGE%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-              <label for=\"voltageIndicatorLow\">(Optional) Lower voltage (battery) for Neopixel-visualisation (z.B. 3.1)</label>\
-              <input type=\"text\" class=\"form-control\" id=\"voltageIndicatorLow\" name=\"voltageIndicatorLow\" value=\"%VOLTAGE_INDICATOR_LOW%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-              <label for=\"voltageIndicatorHigh\">(Optional) Upper voltage (battery) for Neopixel-visualisation (z.B. 4.2)</label>\
-              <input type=\"text\" class=\"form-control\" id=\"voltageIndicatorHigh\" name=\"voltageIndicatorHigh\" value=\"%VOLTAGE_INDICATOR_HIGH%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required>\
-            </div>\
-            <div class=\"form-group col-md-6\">\
-              <label for=\"voltageCheckInterval\">(Optional) Interval of battery-measurement (minutes)</label>\
-              <input type=\"number\" min=\"1\" max=\"180\" class=\"form-control\" id=\"voltageCheckInterval\" name=\"voltageCheckInterval\" value=\"%VOLTAGE_CHECK_INTERVAL%\" required>\
-            </div>\
-          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
-          <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
-      </div>\
-      <div class=\"container my-5\" id=\"importNvs\">\
-        <h2>NVS-importer</h2>\
-        <form action=\"/upload\" enctype=\"multipart/form-data\" method=\"POST\">\
-          <div class=\"form-group\">\
-            <label for=\"nvsUpload\">Backup-files can be imported here.</label>\
-            <input type=\"file\" class=\"form-control-file\" id=\"nvsUpload\" name=\"nvsUpload\" accept=\".txt\">\
-          </div>\
-            <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\
-        </form>\
-        <div class=\"messages col-md-6 my-2\"></div>\
-      </div>\
-        <script>\
-          var lastIdclicked = '';\
-          var errorBox = '<div class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\">Error occured!<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button></div>';\
-          var okBox = '<div class=\"alert alert-success alert-dismissible fade show\" role=\"alert\">Action successful.<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button></div>';\
-\
-          var socket = new WebSocket(\"ws://%IPv4%/ws\");\
-\
-          function connect() {\
-            socket = new WebSocket(\"ws://%IPv4%/ws\");\
-          }\
+</div>\
+<script type=\"text/javascript\">\
+    var DEBUG = false;\
+    var lastIdclicked = '';\
+    var host = $(location).attr('hostname');\
 \
-          function ping() {\
-            var myObj = {\
-              \"ping\": {\
-                ping: 'ping'\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-            tm = setTimeout(function () {\
-              alert(\"Connection to tonuino is broken!\\nPlease refresh this website.\");\
-              }, 5000);\
-          }\
+    if (DEBUG) {\
+        host = \"192.168.178.114\";\
+    }\
 \
-          function pong() {\
-            clearTimeout(tm);\
-          }\
+    toastr.options = {\
+        \"closeButton\": false,\
+        \"debug\": false,\
+        \"newestOnTop\": false,\
+        \"progressBar\": false,\
+        \"positionClass\": \"toast-top-right\",\
+        \"preventDuplicates\": false,\
+        \"onclick\": null,\
+        \"showDuration\": \"300\",\
+        \"hideDuration\": \"1000\",\
+        \"timeOut\": \"5000\",\
+        \"extendedTimeOut\": \"1000\",\
+        \"showEasing\": \"swing\",\
+        \"hideEasing\": \"linear\",\
+        \"showMethod\": \"fadeIn\",\
+        \"hideMethod\": \"fadeOut\"\
+    };\
+\
+    function postRendering(event, data) {\
+        Object.keys(data.instance._model.data).forEach(function (key, index) {\
+\
+            var cur = data.instance.get_node(data.instance._model.data[key]);\
+            var lastFolder = cur['id'].split('/').filter(function (el) {\
+                return el.trim().length > 0;\
+            }).pop();\
+            if ((/\\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC)$/i).test(lastFolder)) {\
+                data.instance.set_type(data.instance._model.data[key], 'audio');\
+            } else {\
+                if (data.instance._model.data[key]['type'] == \"file\") {\
+                    data.instance.disable_node(data.instance._model.data[key]);\
+                }\
+            }\
+            data.instance.rename_node(data.instance._model.data[key], lastFolder);\
+        });\
+    }\
+\
+    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' > Refresh fileindex.</span></div>\");\
+                        $('#filetree').on(\"click\", function () {\
+                            refreshFileList();\
+                        });\
+                        toastr.error(\"Unable to fetch directory-list.\");\
+                    }\
+                },\
+\
+            },\
+            '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(\"SD-card-index needs to be refreshed.\");\
+            }\
+        }).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();\
+    }\
 \
-          socket.onopen = function () {\
+    function hideFileIndexingState() {\
+        $(\"#indexing-progress\").hide();\
+        $(\"#refreshAction\").show();\
+    }\
+\
+    var socket = undefined;\
+    var tm;\
+\
+    function connect() {\
+        socket = new WebSocket(\"ws://\" + host + \"/ws\");\
+\
+        socket.onopen = function () {\
             setInterval(ping, 15000);\
-          };\
+        };\
 \
-          socket.onclose = function(e) {\
+        socket.onclose = function (e) {\
             console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);\
-            setTimeout(function() {\
-              connect();\
+            socket = null;\
+            setTimeout(function () {\
+                connect();\
             }, 5000);\
-          };\
+        };\
 \
-          socket.onerror = function(err) {\
+        socket.onerror = function (err) {\
             console.error('Socket encountered error: ', err.message, 'Closing socket');\
-            socket.close();\
-          };\
+        };\
 \
-          socket.onmessage = function(event) {\
-            console.log(event.data);\
-            var socketMsg = JSON.parse(event.data);\
-            if (socketMsg.rfidId != null) {\
+        socket.onmessage = function(event) {\
+          console.log(event.data);\
+          var socketMsg = JSON.parse(event.data);\
+          if (socketMsg.rfidId != null) {\
               document.getElementById('rfidIdMod').value = socketMsg.rfidId;\
               document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\
-              $(\"#rfidIdMusic\").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500);\
-              $(\"#rfidIdMod\").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500);\
-\
-            } if (socketMsg.status != null) {\
-                if (socketMsg.status == 'ok') {\
-                  $(\"#\" + lastIdclicked).find('.messages').html(okBox);\
-                } else {\
-                  $(\"#\" + lastIdclicked).find('.messages').html(errorBox);\
-                }\
-            } if (socketMsg.pong != null) {\
-                if (socketMsg.pong == 'pong') {\
+              toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\
+\
+              $(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
+              $(\"#rfidIdMod\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
+\
+          } if (\"status\" in socketMsg) {\
+              if (socketMsg.status == \"ok\") {\
+                  toastr.success(\"Action completed successfully.\" );\
+              }\
+          } if (\"pong\" in socketMsg) {\
+              if (socketMsg.pong == 'pong') {\
                   pong();\
-                }\
+              }\
+          } if (\"refreshFileList\" in socketMsg) {\
+              hideFileIndexingState();\
+              toastr.info(\"SD-card-index has been refreshed!\");\
+              $('#filetree').jstree(true).refresh();\
+\
+          }\
+          if (\"indexingState\" in socketMsg) {\
+              if(socketMsg.indexingState != null) {\
+                  $(\"#currentProcessedFile\").text(socketMsg.indexingState);\
+                  console.log(socketMsg.indexingState);\
+              }\
+          }\
+      };\
+    }\
+\
+    function ping() {\
+        var myObj = {\
+            \"ping\": {\
+                ping: 'ping'\
             }\
-          };\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+        tm = setTimeout(function () {\
+            toastr.warning('Connection to Tonuino is broken. Please refresh.');\
+        }, 5000);\
+    }\
+\
+    function pong() {\
+        clearTimeout(tm);\
+    }\
 \
-          function genSettings(clickedId) {\
-            lastIdclicked = clickedId;\
-            var myObj = {\
-              \"general\": {\
+    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 = {\
+            \"general\": {\
                 iVol: document.getElementById('initialVolume').value,\
                 mVolSpeaker: document.getElementById('maxVolumeSpeaker').value,\
                 mVolHeadphone: document.getElementById('maxVolumeHeadphone').value,\
@@ -292,89 +629,100 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                 vIndLow: document.getElementById('voltageIndicatorLow').value,\
                 vIndHi: document.getElementById('voltageIndicatorHigh').value,\
                 vInt: document.getElementById('voltageCheckInterval').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
 \
-          function ftpSettings(clickedId) {\
-            lastIdclicked = clickedId;\
-            var myObj = {\
-              \"ftp\": {\
+    function ftpSettings(clickedId) {\
+        lastIdclicked = clickedId;\
+        var myObj = {\
+            \"ftp\": {\
                 ftpUser: document.getElementById('ftpUser').value,\
                 ftpPwd: document.getElementById('ftpPwd').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
-\
-          function mqttSettings(clickedId) {\
-            lastIdclicked = clickedId;\
-            var val;\
-            if (document.getElementById('mqttEnable').checked) {\
-              val = document.getElementById('mqttEnable').value;\
-            } else {\
-              val = 0;\
             }\
-            var myObj = {\
-              \"mqtt\": {\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
+\
+    function mqttSettings(clickedId) {\
+        lastIdclicked = clickedId;\
+        var val;\
+        if (document.getElementById('mqttEnable').checked) {\
+            val = document.getElementById('mqttEnable').value;\
+        } else {\
+            val = 0;\
+        }\
+        var myObj = {\
+            \"mqtt\": {\
                 mqttEnable: val,\
                 mqttServer: document.getElementById('mqttServer').value,\
                 mqttUser: document.getElementById('mqttUser').value,\
                 mqttPwd: document.getElementById('mqttPwd').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
 \
-          function rfidMods(clickedId) {\
-            lastIdclicked = clickedId;\
-            var myObj = {\
-              \"rfidMod\": {\
+    function rfidMods(clickedId) {\
+        lastIdclicked = clickedId;\
+        var myObj = {\
+            \"rfidMod\": {\
                 rfidIdMod: document.getElementById('rfidIdMod').value,\
                 modId: document.getElementById('modId').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
-\
-          function removeTrSlash(str) {\
-            if(str.substr(-1) === '/') {\
-              return str.substr(0, str.length - 1);\
             }\
-              return str;\
-          }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
 \
-          function rfidAssign(clickedId) {\
-            lastIdclicked = clickedId;\
-            var myObj = {\
-              \"rfidAssign\": {\
+    function removeTrSlash(str) {\
+        if (str.substr(-1) === '/') {\
+            return str.substr(0, str.length - 1);\
+        }\
+        return str;\
+    }\
+\
+    function rfidAssign(clickedId) {\
+        lastIdclicked = clickedId;\
+        var myObj = {\
+            \"rfidAssign\": {\
                 rfidIdMusic: document.getElementById('rfidIdMusic').value,\
                 fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value),\
                 playMode: document.getElementById('playMode').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
 \
-          function wifiConfig(clickedId) {\
-            lastIdclicked = clickedId;\
-            var myObj = {\
-              \"wifiConfig\": {\
+    function wifiConfig(clickedId) {\
+        lastIdclicked = clickedId;\
+        var myObj = {\
+            \"wifiConfig\": {\
                 ssid: document.getElementById('ssid').value,\
                 pwd: document.getElementById('pwd').value,\
                 hostname: document.getElementById('hostname').value\
-              }\
-            };\
-            var myJSON = JSON.stringify(myObj);\
-            socket.send(myJSON);\
-          }\
-        </script>\
-  </body>\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
+\
+    $(document).ready(function () {\
+        connect();\
+        renderFileTree();\
+\
+        console.log(parseInt(document.getElementById('warningLowVoltage').value));\
+        $(function () {\
+            $('[data-toggle=\"tooltip\"]').tooltip();\
+        });\
+\
+    });\
+</script>\
+</body>\
 </html>\
 ";
\ No newline at end of file
diff --git a/src/main.cpp b/src/main.cpp
index fdcf7f3..646d937 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -3217,6 +3217,8 @@ wl_status_t wifiManager(void) {
     return WiFi.status();
 }
 
+const char mqttTab[] PROGMEM = "<a class=\"nav-item nav-link\" id=\"nav-mqtt-tab\" data-toggle=\"tab\" href=\"#nav-mqtt\" role=\"tab\" aria-controls=\"nav-mqtt\" aria-selected=\"false\"><i class=\"fas fa-network-wired\"></i> MQTT</a>";
+const char ftpTab[] PROGMEM = "<a class=\"nav-item nav-link\" id=\"nav-ftp-tab\" data-toggle=\"tab\" href=\"#nav-ftp\" role=\"tab\" aria-controls=\"nav-ftp\" aria-selected=\"false\"><i class=\"fas fa-folder\"></i> FTP</a>";
 
 // Used for substitution of some variables/templates of html-files. Is called by webserver's template-engine
 String templateProcessor(const String& templ) {
@@ -3228,6 +3230,12 @@ String templateProcessor(const String& templ) {
         return String(ftpUserLength-1);
     } 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
     } else if (templ == "INIT_LED_BRIGHTNESS") {
         return String(prefsSettings.getUChar("iLedBrightness", 0));
     } else if (templ == "NIGHT_LED_BRIGHTNESS") {
@@ -3250,6 +3258,12 @@ String templateProcessor(const String& templ) {
         return String(prefsSettings.getUInt("vCheckIntv", voltageCheckInterval));
     } else if (templ == "MQTT_SERVER") {
         return prefsSettings.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();
+        #endif
     } else if (templ == "MQTT_ENABLE") {
         if (enableMqtt) {
             return String("checked=\"checked\"");