From 03ec42a5c5b2a7c1d65e21a49ed3031b1ee9560d Mon Sep 17 00:00:00 2001
From: Daniel Rieper <git@qdaniel.de>
Date: Mon, 15 Feb 2021 01:32:38 +0100
Subject: [PATCH] German UI

---
 html/management.html | 51 ++++++++++++++++++++++++++++++++++++++++++++
 src/HTMLmanagement.h | 51 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+)

diff --git a/html/management.html b/html/management.html
index e408a44..daee01a 100644
--- a/html/management.html
+++ b/html/management.html
@@ -138,6 +138,7 @@
 <br/>
     <nav>
         <div class="container nav nav-tabs" id="nav-tab" role="tablist">
+            <a class="nav-item nav-link" id="nav-control-tab" data-toggle="tab" href="#nav-control" role="tab" aria-controls="nav-control" aria-selected="false"><i class="fas fa-gamepad"></i><span class=".d-sm-none .d-md-block"> Control</span></a>
             <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>
             %SHOW_MQTT_TAB%
@@ -173,6 +174,37 @@
             </form>
         </div>
     </div>
+    <div class="tab-pane fade" id="nav-control" role="tabpanel" aria-labelledby="nav-control-tab">
+        <div class="container" id="navControl">         
+                <div class="form-group col-md-12">
+                    <legend>Steuerung</legend>
+                    <div class="buttons">
+                        <button type="button" class="btn btn-default btn-lg" onclick="sendControl(173)">
+                            <span class="fas fa-fast-backward"></span>
+                        </button>
+                        <button type="button" class="btn btn-default btn-lg" onclick="sendControl(171)">
+                            <span class="fas fa-backward"></span>
+                        </button>
+                        <button type="button" class="btn btn-default btn-lg" onclick="sendControl(170)">
+                            <i class="fas fa-pause"></i>
+                        </button>
+                        <button type="button" class="btn btn-default btn-lg" onclick="sendControl(172)">
+                            <span class="fas fa-forward"></span>
+                        </button>
+                        <button type="button" class="btn btn-default btn-lg" onclick="sendControl(174)">
+                            <span class="fas fa-fast-forward"></span>
+                        </button>
+                    </div>                   
+                </div>
+                <br>
+                <div class="form-group col-md-12">
+                    <legend>Lautst&auml;rke</legend>
+                        <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="setVolume"
+                            data-slider-value="%INIT_VOLUME%" value="%INIT_VOLUME%" onchange="sendVolume(this.value)">  <i class="fas fa-volume-up fa-2x .icon-pos"></i>              
+                </div>
+                <br/>
+        </div>
+    </div>
     <div class="tab-pane fade show active" id="nav-rfid" role="tabpanel" aria-labelledby="nav-rfid-tab">
         <div class="container" id="filetreeContainer">
             <fieldset>
@@ -255,6 +287,7 @@
                                 <option value="130">Aktiviere/deaktive WLAN</option>
                                 <option value="140">Aktiviere/deaktiviere Bluetooth</option>
                                 <option value="150">Aktiviere FTP</option>
+                                <option value="0">Lösche Zuordnung</option>
                             </select>
                         </div>
                     </div>
@@ -1032,6 +1065,24 @@
         var myJSON = JSON.stringify(myObj);
         socket.send(myJSON);
     }
+    function sendControl(cmd) {
+        var myObj = {
+            "controls": {
+                action: cmd
+            }
+        };
+        var myJSON = JSON.stringify(myObj);
+        socket.send(myJSON);
+    }
+    function sendVolume(vol) {
+        var myObj = {
+            "controls": {
+                set_volume: vol
+            }
+        };
+        var myJSON = JSON.stringify(myObj);
+        socket.send(myJSON);
+    }
 
     $(document).ready(function () {
         connect();
diff --git a/src/HTMLmanagement.h b/src/HTMLmanagement.h
index 1553ec6..8edfc3c 100644
--- a/src/HTMLmanagement.h
+++ b/src/HTMLmanagement.h
@@ -138,6 +138,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 <br/>\
     <nav>\
         <div class=\"container nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\
+            <a class=\"nav-item nav-link\" id=\"nav-control-tab\" data-toggle=\"tab\" href=\"#nav-control\" role=\"tab\" aria-controls=\"nav-control\" aria-selected=\"false\"><i class=\"fas fa-gamepad\"></i><span class=\".d-sm-none .d-md-block\"> Control</span></a>\
             <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>\
             %SHOW_MQTT_TAB%\
@@ -173,6 +174,37 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             </form>\
         </div>\
     </div>\
+    <div class=\"tab-pane fade\" id=\"nav-control\" role=\"tabpanel\" aria-labelledby=\"nav-control-tab\">\
+        <div class=\"container\" id=\"navControl\">         \
+                <div class=\"form-group col-md-12\">\
+                    <legend>Steuerung</legend>\
+                    <div class=\"buttons\">\
+                        <button type=\"button\" class=\"btn btn-default btn-lg\" onclick=\"sendControl(173)\">\
+                            <span class=\"fas fa-fast-backward\"></span>\
+                        </button>\
+                        <button type=\"button\" class=\"btn btn-default btn-lg\" onclick=\"sendControl(171)\">\
+                            <span class=\"fas fa-backward\"></span>\
+                        </button>\
+                        <button type=\"button\" class=\"btn btn-default btn-lg\" onclick=\"sendControl(170)\">\
+                            <i class=\"fas fa-pause\"></i>\
+                        </button>\
+                        <button type=\"button\" class=\"btn btn-default btn-lg\" onclick=\"sendControl(172)\">\
+                            <span class=\"fas fa-forward\"></span>\
+                        </button>\
+                        <button type=\"button\" class=\"btn btn-default btn-lg\" onclick=\"sendControl(174)\">\
+                            <span class=\"fas fa-fast-forward\"></span>\
+                        </button>\
+                    </div>                   \
+                </div>\
+                <br>\
+                <div class=\"form-group col-md-12\">\
+                    <legend>Lautst&auml;rke</legend>\
+                        <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=\"setVolume\"\
+                            data-slider-value=\"%INIT_VOLUME%\" value=\"%INIT_VOLUME%\" onchange=\"sendVolume(this.value)\">  <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>              \
+                </div>\
+                <br/>\
+        </div>\
+    </div>\
     <div class=\"tab-pane fade show active\" id=\"nav-rfid\" role=\"tabpanel\" aria-labelledby=\"nav-rfid-tab\">\
         <div class=\"container\" id=\"filetreeContainer\">\
             <fieldset>\
@@ -255,6 +287,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                                 <option value=\"130\">Aktiviere/deaktive WLAN</option>\
                                 <option value=\"140\">Aktiviere/deaktiviere Bluetooth</option>\
                                 <option value=\"150\">Aktiviere FTP</option>\
+                                <option value=\"0\">Lösche Zuordnung</option>\
                             </select>\
                         </div>\
                     </div>\
@@ -1032,6 +1065,24 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
         var myJSON = JSON.stringify(myObj);\
         socket.send(myJSON);\
     }\
+    function sendControl(cmd) {\
+        var myObj = {\
+            \"controls\": {\
+                action: cmd\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
+    function sendVolume(vol) {\
+        var myObj = {\
+            \"controls\": {\
+                set_volume: vol\
+            }\
+        };\
+        var myJSON = JSON.stringify(myObj);\
+        socket.send(myJSON);\
+    }\
 \
     $(document).ready(function () {\
         connect();\