From d1cefa4131fba0d890e6298be9ed1caa244a01c5 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sat, 26 Aug 2023 11:41:23 +0200
Subject: [PATCH] fix template using new configuration

---
 static/main.css      | 14 ++++--------
 static/main.js       |  8 +++----
 views/page/home.html | 51 ++++++++++++++++++++++++++------------------
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/static/main.css b/static/main.css
index d61daa9..7fe1a89 100644
--- a/static/main.css
+++ b/static/main.css
@@ -58,7 +58,8 @@ a {
 }
 
 #pointer {
-    height: calc(100vh - 80px);
+    height: calc(100vh - 33px - 38px);
+    top: calc(33px + 38px);
     margin: auto;
     background: #ccc;
     position: absolute;
@@ -80,14 +81,6 @@ a {
     right: 0;
 }
 
-.fullscreen #scrollbar {
-    height: calc(100vh - 150px);
-}
-
-.fullscreen #pointer {
-    height: calc(100vh - 150px);
-}
-
 #pane-pointer .form-group {
     padding: 0;
     margin: 0;
@@ -97,7 +90,8 @@ a {
     margin-top: -42px;
     width: 100%;
     z-index: 110;
-    position: absolute;
+    position: fixed;
+    bottom: 0;
 }
 
 #pointer-buttons .btn {
diff --git a/static/main.js b/static/main.js
index 4ae6eac..04f26e9 100644
--- a/static/main.js
+++ b/static/main.js
@@ -257,11 +257,9 @@ var documentHashHandler = function() {
     var hash = window.location.hash;
 
     if (hash) {
-        $(hash).show();
-        $('a[href="' + hash + '"]').addClass('active');
+        $('a[href="' + hash + '"]').click();
     } else {
-        $('#pane-keyboard').show();
-        $('#nav a').first().addClass('active');
+        $('#nav > li:first-child a').click();
     }
 }
 
@@ -294,10 +292,10 @@ var addListeners = function() {
 }
 
 var bootstrap = function() {
-    documentHashHandler();
     shortcutsSpecialKeysOnChangeHandler();
     createWebSocketConnection();
     addListeners();
+    documentHashHandler();
 }
 
 $(function() {
diff --git a/views/page/home.html b/views/page/home.html
index eb39add..47b44b9 100644
--- a/views/page/home.html
+++ b/views/page/home.html
@@ -4,9 +4,9 @@
         <div class="row no-margin">
             <div class="col-12 no-padding">
                 <ul class="nav nav-pills nav-fill" id="nav">
-                    {{range $key, $values := .Config.Remote}}
+                    {{range $key, $tab := .Config.Remote}}
                         <li class="nav-item">
-                            <a class="nav-link no-radius" href="#{{$key}}">{{$key}}</a>
+                            <a class="nav-link no-radius" href="#tab-{{$key}}">{{$tab.Label}}</a>
                         </li>
                     {{end}}
                     <li class="nav-item">
@@ -18,9 +18,9 @@
     </div>
 
     <div class="container-fluid">
-        {{range $key, $values := .Config.Remote}}
-            <div id="{{$key}}" class="pane">
-                {{range $key2, $value := $values}}
+        {{range $key, $tab := .Config.Remote}}
+            <div id="tab-{{$key}}" class="pane">
+                {{range $key2, $value := $tab.Items}}
                     <div class="row" {{if eq $value.Type "mouse"}} id="pane-pointer"{{end}}>
                         {{if ne $value.Label ""}}
                             <div class="col-12">
@@ -121,12 +121,36 @@
                                 <button type="button" data-msg='{"type":"pointer","click":"left"}' class="btn btn-primary no-radius col-5">&nbsp;</button><button type="button no-margin" data-msg='{"type":"pointer","click":"middle"}' class="btn btn-secondary no-radius col-2">&nbsp;</button><button type="button no-margin" data-msg='{"type":"pointer","click":"right"}' class="btn btn-primary no-radius col-5">&nbsp;</button>
                             </div>
                         {{end}}
+
+                        {{if eq $value.Type "screenshot"}}
+                            <div class="col-12">
+                                <button type="button" data-msg='{"type":"screenshot","quality":"hq"}' class="btn btn-secondary">Screenshot HQ</button>
+                                <button type="button" data-msg='{"type":"screenshot","quality":"lq"}' class="btn btn-secondary">Screenshot LQ</button>
+                            </div>
+                        {{end}}
+
+                        {{if eq $value.Type "live_video"}}
+                            <div class="col-12">
+                                <button type="button" id="live-hq" class="btn btn-secondary">Live HQ</button>
+                                <button type="button" id="live-lq" class="btn btn-secondary">Live LQ</button>
+                                <div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
+                            </div>
+                        {{end}}
+
+                        {{if eq $value.Type "messages"}}
+                            <div class="col-12">
+                                {{range $key3, $item := $value.Items}}
+                                    <button type="button" data-msg='{{$item.Message}}' class="btn btn-secondary mb-1">{{$item.Label}}</button>
+                                {{end}}
+                            </div>
+                        {{end}}
+
+                        <div class="line col-12"></div>
                     </div>
                 {{end}}
             </div>
         {{end}}
 
-
         <div id="pane-i3" class="pane">
             <div class="row">
                 <div class="col-12">
@@ -150,20 +174,5 @@
                 </div>
             </div>
         </div>
-
-        <div class="row pane" id="pane-desktop">
-            <div class="col-12">
-                <p class="legend">Desktop</p>
-            </div>
-            <div class="col-12">
-                <button type="button" data-msg='{"type":"screenshot","quality":"hq"}' class="btn btn-sm btn-secondary">Screenshot HQ</button>
-                <button type="button" data-msg='{"type":"screenshot","quality":"lq"}' class="btn btn-sm btn-secondary">Screenshot LQ</button>
-                <button type="button" id="live-hq" class="btn btn-sm btn-secondary">Live HQ</button>
-                <button type="button" id="live-lq" class="btn btn-sm btn-secondary">Live LQ</button>
-                <div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
-            </div>
-            <div class="col-12">
-            </div>
-        </div>
     </div>
 {{end}}