From c0822ee77bc99132e189228a9fdbf11f8e7054a1 Mon Sep 17 00:00:00 2001
From: Torsten Stauder <stauder@ts-cs.de>
Date: Tue, 9 Feb 2021 22:46:18 +0100
Subject: [PATCH] GUI: forum-tab added + tiny tweaks

---
 html/management.html | 26 +++++++++++++++++++-------
 src/HTMLmanagement.h | 27 +++++++++++++++++++--------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/html/management.html b/html/management.html
index 8a90ee1..e665d70 100644
--- a/html/management.html
+++ b/html/management.html
@@ -122,6 +122,7 @@
             %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>
+            <a class="nav-item nav-link" id="nav-forum-tab" data-toggle="tab" href="#nav-forum" role="tab" aria-controls="nav-forum" aria-selected="false"><i class="fas fa-comment"></i><span class=".d-sm-none .d-md-block"> Forum</span></a>
         </div>
     </nav>
 <br>
@@ -130,6 +131,7 @@
         <div class="container" id="wifiConfig">
             <form action="#wifiConfig" method="POST" onsubmit="wifiConfig('wifiConfig'); return false">
                 <div class="form-group col-md-12">
+                    <legend>WLAN-Einstellungen</legend>
                     <label for="ssid">WLAN-Name (SSID):</label>
                     <input type="text" class="form-control" id="ssid" placeholder="SSID" name="ssid" required>
                     <div class="invalid-feedback">
@@ -235,6 +237,7 @@
             </form>
             </fieldset>
         </div>
+        <br />
     </div>
     <div class="tab-pane fade" id="nav-mqtt" role="tabpanel" aria-labelledby="nav-mqtt-tab">
         <div class="container" id="mqttConfig">
@@ -242,6 +245,7 @@
             <form class="needs-validation" action="#mqttConfig" method="POST"
                   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%>
                     <label class="form-check-label" for="mqttEnable">
                         MQTT aktivieren
@@ -271,6 +275,7 @@
 
             <form action="#ftpConfig" method="POST" onsubmit="ftpSettings('ftpConfig'); return false">
                 <div class="form-group col-md-12">
+                    <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>
@@ -315,7 +320,7 @@
 <br>
                 <div class="form-group col-md-12">
                     <fieldset >
-                        <legend  class="w-auto">Neopixel (Helligkeit)</legend>
+                        <legend class="w-auto">Neopixel (Helligkeit)</legend>
                     <label for="initBrightness">Nach dem Einschalten:</label>
                         <div class="text-center">
                             <i class="far fa-sun fa-2x .icon-pos"></i>
@@ -383,22 +388,29 @@
                 </div>
             </form>
         </div>
+        <br />
     </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>
+        <div class="container" id="importNvs">
+            <legend>NVS-Importer</legend>
             <form action="/upload" enctype="multipart/form-data" method="POST">
                 <div class="form-group">
                     <label for="nvsUpload">Hier kann eine Backup-Datei importiert werden.</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">Absenden</button>
-                </div>
             </form>
         </div>
     </div>
+    <div class="tab-pane fade" id="nav-forum" role="tabpanel" aria-labelledby="nav-forum-tab">
+        <div class="container" id="forum">
+            <legend>Forum</legend>
+            <p>Du hast Probleme mit ESPuino oder bist an einem Erfahrungsaustausch interessiert?<br />
+                Dann schaue doch mal im <a href="https://forum.espuino.de" target="_blank">ESPuino-Forum</a> vorbei! Insbesondere gibt es dort auch einen<br />
+                <a href="https://forum.espuino.de/c/dokumentation/anleitungen/10" target="_blank">Bereich</a>, in dem reichlich Dokumentation hinterlegt ist. Wir freuen uns auf deinen Besuch!
+            </p>
+        </div>
+    </div>
 </div>
 <script type="text/javascript">
     var DEBUG = false;
@@ -1000,4 +1012,4 @@
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/HTMLmanagement.h b/src/HTMLmanagement.h
index 4b86249..b6e44cb 100644
--- a/src/HTMLmanagement.h
+++ b/src/HTMLmanagement.h
@@ -122,6 +122,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             %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>\
+            <a class=\"nav-item nav-link\" id=\"nav-forum-tab\" data-toggle=\"tab\" href=\"#nav-forum\" role=\"tab\" aria-controls=\"nav-forum\" aria-selected=\"false\"><i class=\"fas fa-comment\"></i><span class=\".d-sm-none .d-md-block\"> Forum</span></a>\
         </div>\
     </nav>\
 <br>\
@@ -130,6 +131,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
         <div class=\"container\" id=\"wifiConfig\">\
             <form action=\"#wifiConfig\" method=\"POST\" onsubmit=\"wifiConfig('wifiConfig'); return false\">\
                 <div class=\"form-group col-md-12\">\
+                    <legend>WLAN-Einstellungen</legend>\
                     <label for=\"ssid\">WLAN-Name (SSID):</label>\
                     <input type=\"text\" class=\"form-control\" id=\"ssid\" placeholder=\"SSID\" name=\"ssid\" required>\
                     <div class=\"invalid-feedback\">\
@@ -235,6 +237,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             </form>\
             </fieldset>\
         </div>\
+        <br />\
     </div>\
     <div class=\"tab-pane fade\" id=\"nav-mqtt\" role=\"tabpanel\" aria-labelledby=\"nav-mqtt-tab\">\
         <div class=\"container\" id=\"mqttConfig\">\
@@ -242,6 +245,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             <form class=\"needs-validation\" action=\"#mqttConfig\" method=\"POST\"\
                   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%>\
                     <label class=\"form-check-label\" for=\"mqttEnable\">\
                         MQTT aktivieren\
@@ -271,6 +275,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 \
             <form action=\"#ftpConfig\" method=\"POST\" onsubmit=\"ftpSettings('ftpConfig'); return false\">\
                 <div class=\"form-group col-md-12\">\
+                    <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>\
@@ -315,7 +320,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 <br>\
                 <div class=\"form-group col-md-12\">\
                     <fieldset >\
-                        <legend  class=\"w-auto\">Neopixel (Helligkeit)</legend>\
+                        <legend class=\"w-auto\">Neopixel (Helligkeit)</legend>\
                     <label for=\"initBrightness\">Nach dem Einschalten:</label>\
                         <div class=\"text-center\">\
                             <i class=\"far fa-sun fa-2x .icon-pos\"></i>\
@@ -383,22 +388,29 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                 </div>\
             </form>\
         </div>\
+        <br />\
     </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>\
+        <div class=\"container\" id=\"importNvs\">\
+            <legend>NVS-Importer</legend>\
             <form action=\"/upload\" enctype=\"multipart/form-data\" method=\"POST\">\
                 <div class=\"form-group\">\
                     <label for=\"nvsUpload\">Hier kann eine Backup-Datei importiert werden.</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\">Absenden</button>\
-                </div>\
             </form>\
         </div>\
     </div>\
+    <div class=\"tab-pane fade\" id=\"nav-forum\" role=\"tabpanel\" aria-labelledby=\"nav-forum-tab\">\
+        <div class=\"container\" id=\"forum\">\
+            <legend>Forum</legend>\
+            <p>Du hast Probleme mit ESPuino oder bist an einem Erfahrungsaustausch interessiert?<br />\
+                Dann schaue doch mal im <a href=\"https://forum.espuino.de\" target=\"_blank\">ESPuino-Forum</a> vorbei! Insbesondere gibt es dort auch einen<br />\
+                <a href=\"https://forum.espuino.de/c/dokumentation/anleitungen/10\" target=\"_blank\">Bereich</a>, in dem reichlich Dokumentation hinterlegt ist. Wir freuen uns auf deinen Besuch!\
+            </p>\
+        </div>\
+    </div>\
 </div>\
 <script type=\"text/javascript\">\
     var DEBUG = false;\
@@ -1000,5 +1012,4 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
     });\
 </script>\
 </body>\
-</html>\
-";
\ No newline at end of file
+</html>";
\ No newline at end of file