From 9aa819abf33cab7d75ab6b4d49c8c704b1dd54d1 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sat, 8 Jul 2023 11:31:23 -0400
Subject: [PATCH] Reorganize mesh module page

---
 gui/src/mesh-module.html | 91 ++++++++++++++++++++++++----------------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/gui/src/mesh-module.html b/gui/src/mesh-module.html
index 32c9df2f..9a039392 100644
--- a/gui/src/mesh-module.html
+++ b/gui/src/mesh-module.html
@@ -19,46 +19,39 @@
     <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- chart.js -->
 
-    <nav class="navbar fixed-top bg-light ms-2 me-2">
-      <div class="input-group">
-        <input
-          type="text"
-          class="form-control"
-          style="max-width: 6rem; text-transform: uppercase"
-          placeholder="DXcall"
-          pattern="[A-Z]*"
-          id="dxCallMesh"
-          maxlength="11"
-          aria-label="Input group"
-          aria-describedby="btnGroupAddon"
-        />
-        <button id="transmit_mesh_ping" type="button" class="btn btn-primary">
-          mesh ping
-        </button>
+    <nav>
+      <div class="nav nav-tabs" id="nav-tab" role="tablist">
+        <button class="nav-link active" id="nav-route-tab" data-bs-toggle="tab" data-bs-target="#nav-route" type="button" role="tab" aria-controls="nav-route" aria-selected="true">Routes</button>
+        <button class="nav-link" id="nav-signaling-tab" data-bs-toggle="tab" data-bs-target="#nav-signaling" type="button" role="tab" aria-controls="nav-signaling" aria-selected="false">Signaling</button>
+        <button class="nav-link" id="nav-actions-tab" data-bs-toggle="tab" data-bs-target="#nav-actions" type="button" role="tab" aria-controls="nav-actions" aria-selected="false">Actions</button>
       </div>
     </nav>
-
-    <div class="container-fluid h-100 mt-5">
-      <div class="tableFixHead h-50">
-        <table class="table table-hover">
-          <thead>
-            <tr>
-              <th scope="col">Timestamp</th>
-              <th scope="col">DXCall</th>
-              <th scope="col">Router</th>
-              <th scope="col">Hops</th>
-              <th scope="col">Score</th>
-              <th scope="col">SNR</th>
-            </tr>
-          </thead>
-          <tbody id="mesh-table">
-            <!-- ... -->
-          </tbody>
-        </table>
+    <div class="tab-content" id="nav-tabContent">
+      
+      <div class="tab-pane fade show active vw-100 vh-90 overflow-auto" id="nav-route" role="tabpanel" aria-labelledby="nav-route-tab">
+        <div class="container-fluid">
+          <div class="table-responsive overflow-auto" style="max-width: 99vw;max-height: 99vh;">
+        <table class="table table-hover table-sm">
+        <thead>
+          <tr>
+            <th scope="col">Timestamp</th>
+            <th scope="col">DXCall</th>
+            <th scope="col">Router</th>
+            <th scope="col">Hops</th>
+            <th scope="col">Score</th>
+            <th scope="col">SNR</th>
+          </tr>
+        </thead>
+        <tbody id="mesh-table">
+        </tbody>
+      </table>
+    </div>
       </div>
-
-      <div class="tableFixHead h-50">
-        <table class="table table-hover">
+      </div>
+      <div class="tab-pane fade" id="nav-signaling" role="tabpanel" aria-labelledby="nav-signaling-tab">
+        <div class="container-fluid">
+          <div class="table-responsive overflow-auto" style="max-width: 99vw;max-height: 99vh;">
+        <table class="table table-hover table-sm">
           <thead>
             <tr>
               <th scope="col">Timestamp</th>
@@ -73,6 +66,30 @@
           <tbody id="mesh-signalling-table"></tbody>
         </table>
       </div>
+      </div>
+      </div>
+      <div class="tab-pane fade" id="nav-actions" role="tabpanel" aria-labelledby="nav-actions-tab">
+        <div class="input-group mt-1">
+          <input
+            type="text"
+            class="form-control"
+            style="max-width: 6rem; text-transform: uppercase"
+            placeholder="DXcall"
+            pattern="[A-Z]*"
+            id="dxCallMesh"
+            maxlength="11"
+            aria-label="Input group"
+            aria-describedby="btnGroupAddon"
+          />
+          <button id="transmit_mesh_ping" type="button" class="btn btn-primary">
+            mesh ping
+          </button>
+        </div>
+      </div>
     </div>
+
+    
+    
+
   </body>
 </html>