From 758aee31d007b148a91f19f53b60877d7bc42165 Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Sat, 27 Apr 2024 22:24:36 +0200
Subject: [PATCH] adjusted sidebar

---
 freedata_gui/src/components/main.vue          | 321 ++----------------
 .../src/components/main_left_navbar.vue       | 108 ++++++
 .../src/components/main_main_screen.vue       |   2 +
 .../src/components/main_modem_healthcheck.vue |  27 --
 freedata_gui/src/components/mesh.vue          | 131 +++++++
 5 files changed, 262 insertions(+), 327 deletions(-)
 create mode 100644 freedata_gui/src/components/main_left_navbar.vue
 create mode 100644 freedata_gui/src/components/main_main_screen.vue
 delete mode 100644 freedata_gui/src/components/main_modem_healthcheck.vue
 create mode 100644 freedata_gui/src/components/mesh.vue

diff --git a/freedata_gui/src/components/main.vue b/freedata_gui/src/components/main.vue
index ab0a861c..4f6773e2 100644
--- a/freedata_gui/src/components/main.vue
+++ b/freedata_gui/src/components/main.vue
@@ -7,16 +7,21 @@ import main_modals from "./main_modals.vue";
 import main_top_navbar from "./main_top_navbar.vue";
 import settings_view from "./settings.vue";
 import main_footer_navbar from "./main_footer_navbar.vue";
-
+import main_left_navbar from "./main_left_navbar.vue";
+import mesh from "./mesh.vue";
 import chat from "./chat.vue";
-import main_modem_healthcheck from "./main_modem_healthcheck.vue";
 import Dynamic_components from "./dynamic_components.vue";
 
 import { getFreedataMessages } from "../js/api";
 import { getRemote } from "../store/settingsStore.js";
 import { loadAllData } from "../js/eventHandler";
+
+
+
 </script>
 
+
+
 <template>
   <!-------------------------------- INFO TOASTS ---------------->
   <div aria-live="polite" aria-atomic="true" class="position-relative z-3">
@@ -26,84 +31,26 @@ import { loadAllData } from "../js/eventHandler";
     ></div>
   </div>
 
+
+
+
   <div class="container-fluid">
     <div class="row">
-      <div class="col-1 p-0 bg-body-secondary border-end">
-        <div
-          class="d-flex flex-sm-column flex-row flex-nowrap align-items-center sticky-top"
-        >
-          <div
-            class="list-group bg-body-secondary"
-            id="main-list-tab"
-            role="tablist"
-            style="margin-top: 100px"
-            @click="loadAllData"
-          >
-            <main_modem_healthcheck />
 
-            <a
-              class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
-              id="list-grid-list"
-              data-bs-toggle="list"
-              href="#list-grid"
-              role="tab"
-              aria-controls="list-grid"
-              title="Grid"
-              ><i class="bi bi-grid h3"></i
-            ></a>
-
-            <a
-              class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
-              id="list-chat-list"
-              data-bs-toggle="list"
-              href="#list-chat"
-              role="tab"
-              aria-controls="list-chat"
-              title="Chat"
-              @click="getFreedataMessages"
-              ><i class="bi bi-chat-text h3"></i
-            ></a>
-
-            <a
-              class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
-              id="list-mesh-list"
-              data-bs-toggle="list"
-              href="#list-mesh"
-              role="tab"
-              aria-controls="list-mesh"
-              ><i class="bi bi-rocket h3"></i
-            ></a>
-
-            <a
-              class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
-              id="list-logger-list"
-              data-bs-toggle="list"
-              href="#list-logger"
-              role="tab"
-              aria-controls="list-logger"
-              ><i class="bi bi-activity h3"></i
-            ></a>
-            <a
-              class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
-              id="list-settings-list"
-              data-bs-toggle="list"
-              href="#list-settings"
-              role="tab"
-              aria-controls="list-settings"
-              title="Settings"
-              @click="loadAllData"
-              ><i class="bi bi-gear-wide-connected h3"></i
-            ></a>
+<!-- Collapsible Left Navbar -->
+<div class="col-auto p-0 bg-body-secondary border-end">
+        <div class="flex-shrink-0 p-3">
+          <div class="collapse collapse-horizontal show" id="collapseLeftNavbar">
+            <main_left_navbar />
           </div>
         </div>
       </div>
-      <div class="col-11 min-vh-100 m-0 p-0">
-        <!-- content -->
 
-        <!-- TODO: Remove the top navbar entirely if not needed
+
+      <div class="col min-vh-100 m-0 p-0">
+<!--
         <main_top_navbar />
-      -->
-
+-->
         <div class="tab-content" id="nav-tabContent-settings">
           <div
             class="tab-pane fade"
@@ -111,20 +58,7 @@ import { loadAllData } from "../js/eventHandler";
             role="tabpanel"
             aria-labelledby="list-home-list"
           >
-            <!-- TOP NAVBAR -->
-            <div
-              id="blurdiv"
-              style="
-                -webkit-filter: blur(0px);
-                filter: blur(0px);
-                height: 100vh;
-              "
-            >
-              <!--beginn of blur div -->
-              <!-------------------------------- MAIN AREA ---------------->
 
-              <!------------------------------------------------------------------------------------------>
-            </div>
           </div>
 
           <div
@@ -133,135 +67,9 @@ import { loadAllData } from "../js/eventHandler";
             role="tabpanel"
             aria-labelledby="list-mesh-list"
           >
-            <div class="container">
-              <nav>
-                <div class="nav nav-tabs" id="nav-tab-mesh" role="tablist-mesh">
-                  <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>
+           <mesh />
+           </div>
 
-              <div class="tab-content d-none" id="nav-tabContent-Mesh">
-                <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>
-                <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>
-                            <th scope="col">Destination</th>
-                            <th scope="col">Origin</th>
-                            <th scope="col">Frametype</th>
-                            <th scope="col">Payload</th>
-                            <th scope="col">Attempt</th>
-                            <th scope="col">Status</th>
-                          </tr>
-                        </thead>
-                        <tbody id="mesh-signalling-table"></tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  class="tab-pane fade"
-                  id="nav-actions"
-                  role="tabpanel-mesh"
-                  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>
-            </div>
-          </div>
 
           <div
             class="tab-pane fade show active"
@@ -280,93 +88,6 @@ import { loadAllData } from "../js/eventHandler";
           >
             <chat />
           </div>
-          <div
-            class="tab-pane fade"
-            id="list-logger"
-            role="tabpanel"
-            aria-labelledby="list-logger-list"
-          >
-            <div class="container">
-              <nav
-                class="navbar fixed-top bg-body-tertiary border-bottom"
-                style="margin-left: 87px"
-              >
-                <div class="container-fluid">
-                  <input
-                    type="checkbox"
-                    class="btn-check"
-                    id="enable_filter_info"
-                    autocomplete="off"
-                    checked
-                  />
-                  <label class="btn btn-outline-info" for="enable_filter_info"
-                    >info</label
-                  >
-
-                  <input
-                    type="checkbox"
-                    class="btn-check"
-                    id="enable_filter_debug"
-                    autocomplete="off"
-                  />
-                  <label
-                    class="btn btn-outline-primary"
-                    for="enable_filter_debug"
-                    >debug</label
-                  >
-
-                  <input
-                    type="checkbox"
-                    class="btn-check"
-                    id="enable_filter_warning"
-                    autocomplete="off"
-                  />
-                  <label
-                    class="btn btn-outline-warning"
-                    for="enable_filter_warning"
-                    >warning</label
-                  >
-
-                  <input
-                    type="checkbox"
-                    class="btn-check"
-                    id="enable_filter_error"
-                    autocomplete="off"
-                  />
-                  <label
-                    class="btn btn-outline-danger"
-                    for="enable_filter_error"
-                    >error</label
-                  >
-                </div>
-              </nav>
-
-              <div class="container-fluid mt-5">
-                <div class="tableFixHead">
-                  <table class="table table-hover">
-                    <thead>
-                      <tr>
-                        <th scope="col">Timestamp</th>
-                        <th scope="col">Type</th>
-                        <th scope="col">Area</th>
-                        <th scope="col">Log entry</th>
-                      </tr>
-                    </thead>
-                    <tbody id="log">
-                      <!--
-                     <tr>
-                       <th scope="row">1</th>
-                       <td>Mark</td>
-                       <td>Otto</td>
-                       <td>@mdo</td>
-                     </tr>
-                         -->
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
 
         <settings_view />
diff --git a/freedata_gui/src/components/main_left_navbar.vue b/freedata_gui/src/components/main_left_navbar.vue
new file mode 100644
index 00000000..55dbd3b7
--- /dev/null
+++ b/freedata_gui/src/components/main_left_navbar.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import main_modem_healthcheck from "./main_modem_healthcheck.vue";
+import { getOverallHealth } from "../js/eventHandler.js";
+
+
+const isTextVisible = ref(false); // Initially, the text is invisible
+function toggleTextVisibility() {
+  isTextVisible.value = !isTextVisible.value; // Toggle the visibility
+}
+
+
+</script>
+<template>
+
+
+  <!-- Button -->
+
+  <div class="btn-group" role="group" aria-label="Basic example">
+
+<button class="btn btn-outline-secondary border-0 ms-2 mb-3" type="button" @click="toggleTextVisibility()">
+    <span class=" fw-semibold"><i class="bi bi-text-paragraph"></i></span>
+  </button>
+</div>
+
+
+  <a
+    class="btn border btn-outline-secondary list-group-item rounded-3"
+    data-bs-html="false"
+    data-bs-toggle="modal"
+    data-bs-target="#modemCheck"
+    title="Check FreeDATA status"
+    :class="
+      getOverallHealth() > 4
+        ? 'bg-danger'
+        : getOverallHealth() < 2
+          ? ''
+          : 'bg-warning'
+    "
+    ><i class="h3 bi bi-activity"></i>
+    <span class="ms-2" v-if="isTextVisible">Healtcheck</span>
+
+  </a>
+
+ <div
+  class="list-group bg-body-secondary"
+  id="main-list-tab"
+  role="tablist"
+  style="margin-top: 100px"
+  @click="loadAllData"
+>
+
+
+  <a
+    class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
+    id="list-grid-list"
+    data-bs-toggle="list"
+    href="#list-grid"
+    role="tab"
+    aria-controls="list-grid"
+    title="Grid"
+  >
+    <i class="bi bi-grid h3"></i>
+    <span class="ms-2" v-if="isTextVisible">Home</span>
+  </a>
+
+  <a
+    class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
+    id="list-chat-list"
+    data-bs-toggle="list"
+    href="#list-chat"
+    role="tab"
+    aria-controls="list-chat"
+    title="Chat"
+    @click="getFreedataMessages"
+  >
+    <i class="bi bi-chat-text h3"></i>
+    <span class="ms-2" v-if="isTextVisible">RF Chat</span>
+  </a>
+
+  <a
+    class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
+    id="list-mesh-list"
+    data-bs-toggle="list"
+    href="#list-mesh"
+    role="tab"
+    aria-controls="list-mesh"
+  >
+    <i class="bi bi-rocket h3"></i>
+    <span class="ms-2" v-if="isTextVisible">Mesh</span>
+  </a>
+
+  <a
+    class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
+    id="list-settings-list"
+    data-bs-toggle="list"
+    href="#list-settings"
+    role="tab"
+    aria-controls="list-settings"
+    title="Settings"
+    @click="loadAllData"
+  >
+    <i class="bi bi-gear-wide-connected h3"></i>
+    <span class="ms-2" v-if="isTextVisible">Settings</span>
+  </a>
+</div>
+
+</template>
diff --git a/freedata_gui/src/components/main_main_screen.vue b/freedata_gui/src/components/main_main_screen.vue
new file mode 100644
index 00000000..ba534139
--- /dev/null
+++ b/freedata_gui/src/components/main_main_screen.vue
@@ -0,0 +1,2 @@
+<template>
+</template>
\ No newline at end of file
diff --git a/freedata_gui/src/components/main_modem_healthcheck.vue b/freedata_gui/src/components/main_modem_healthcheck.vue
deleted file mode 100644
index a93585b9..00000000
--- a/freedata_gui/src/components/main_modem_healthcheck.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-
-import { useStateStore } from "../store/stateStore.js";
-const state = useStateStore(pinia);
-
-import { getOverallHealth } from "../js/eventHandler.js";
-</script>
-<template>
-  <a
-    class="btn border btn-outline-secondary list-group-item mb-5"
-    data-bs-html="false"
-    data-bs-toggle="modal"
-    data-bs-target="#modemCheck"
-    title="Check FreeDATA status"
-    :class="
-      getOverallHealth() > 4
-        ? 'bg-danger'
-        : getOverallHealth() < 2
-          ? ''
-          : 'bg-warning'
-    "
-    ><i class="bi bi-activity h3"></i>
-  </a>
-</template>
diff --git a/freedata_gui/src/components/mesh.vue b/freedata_gui/src/components/mesh.vue
new file mode 100644
index 00000000..abfc1baa
--- /dev/null
+++ b/freedata_gui/src/components/mesh.vue
@@ -0,0 +1,131 @@
+<template>
+
+            <div class="container">
+              <nav>
+                <div class="nav nav-tabs" id="nav-tab-mesh" role="tablist-mesh">
+                  <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="tab-content d-none" id="nav-tabContent-Mesh">
+                <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>
+                <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>
+                            <th scope="col">Destination</th>
+                            <th scope="col">Origin</th>
+                            <th scope="col">Frametype</th>
+                            <th scope="col">Payload</th>
+                            <th scope="col">Attempt</th>
+                            <th scope="col">Status</th>
+                          </tr>
+                        </thead>
+                        <tbody id="mesh-signalling-table"></tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="tab-pane fade"
+                  id="nav-actions"
+                  role="tabpanel-mesh"
+                  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>
+            </div>
+</template>
\ No newline at end of file