From 40ab8a27e8daaa3cf223c99f536a975975300095 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Sat, 27 Apr 2024 20:47:26 +0000
Subject: [PATCH] [CodeFactor] Apply fixes

---
 freedata_gui/src/components/main.vue          |  37 +-
 .../src/components/main_footer_navbar.vue     | 364 +++++++++---------
 .../src/components/main_left_navbar.vue       | 139 ++++---
 .../src/components/main_main_screen.vue       |   3 +-
 freedata_gui/src/components/mesh.vue          | 251 ++++++------
 5 files changed, 378 insertions(+), 416 deletions(-)

diff --git a/freedata_gui/src/components/main.vue b/freedata_gui/src/components/main.vue
index e7dd5364..a541a9f8 100644
--- a/freedata_gui/src/components/main.vue
+++ b/freedata_gui/src/components/main.vue
@@ -15,13 +15,8 @@ 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">
@@ -31,24 +26,22 @@ import { loadAllData } from "../js/eventHandler";
     ></div>
   </div>
 
-
-
-
   <div class="container-fluid">
     <div class="row">
-
-<!-- Collapsible Left Navbar -->
-<div class="col-auto p-0 bg-body-secondary border-end">
+      <!-- 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">
+          <div
+            class="collapse collapse-horizontal show"
+            id="collapseLeftNavbar"
+          >
             <main_left_navbar />
           </div>
         </div>
       </div>
 
-
       <div class="col min-vh-100 m-0 p-0">
-<!--
+        <!--
         <main_top_navbar />
 -->
         <div class="tab-content" id="nav-tabContent-settings">
@@ -57,9 +50,7 @@ import { loadAllData } from "../js/eventHandler";
             id="list-home"
             role="tabpanel"
             aria-labelledby="list-home-list"
-          >
-
-          </div>
+          ></div>
 
           <div
             class="tab-pane fade d-none"
@@ -67,9 +58,8 @@ import { loadAllData } from "../js/eventHandler";
             role="tabpanel"
             aria-labelledby="list-mesh-list"
           >
-           <mesh />
-           </div>
-
+            <mesh />
+          </div>
 
           <div
             class="tab-pane fade show active"
@@ -89,13 +79,10 @@ import { loadAllData } from "../js/eventHandler";
             <chat />
           </div>
 
-
-        <settings_view />
-                    <main_footer_navbar />
-
+          <settings_view />
+          <main_footer_navbar />
         </div>
 
-
         <!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
 
         <div class="container">
diff --git a/freedata_gui/src/components/main_footer_navbar.vue b/freedata_gui/src/components/main_footer_navbar.vue
index c2f6b597..a1cef0ea 100644
--- a/freedata_gui/src/components/main_footer_navbar.vue
+++ b/freedata_gui/src/components/main_footer_navbar.vue
@@ -8,48 +8,46 @@ const state = useStateStore(pinia);
 </script>
 
 <template>
-        <nav
-          class="navbar navbar-expand-xl bg-body-tertiary border-top p-2"
-        >
-          <div class="col">
-            <div class="btn-toolbar" role="toolbar">
-              <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                  class="btn btn-sm btn-secondary me-1"
-                  v-bind:class="{
-                    'btn-danger': state.ptt_state == true,
-                    'btn-secondary': state.ptt_state == false,
-                  }"
-                  id="ptt_state"
-                  type="button"
-                  style="pointer-events: auto"
-                  disabled
-                  data-bs-toggle="tooltip"
-                  data-bs-placement="top"
-                  data-bs-title="PTT trigger state"
-                >
-                  <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
-                </button>
+  <nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
+    <div class="col">
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            v-bind:class="{
+              'btn-danger': state.ptt_state == true,
+              'btn-secondary': state.ptt_state == false,
+            }"
+            id="ptt_state"
+            type="button"
+            style="pointer-events: auto"
+            disabled
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            data-bs-title="PTT trigger state"
+          >
+            <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
+          </button>
 
-                <button
-                  class="btn btn-sm btn-secondary me-1"
-                  id="busy_state"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-html="true"
-                  v-bind:class="{
-                    'btn-danger': state.busy_state === true,
-                    'btn-secondary': state.busy_state === false,
-                  }"
-                  data-bs-title="Modem state"
-                  disabled
-                  style="pointer-events: auto"
-                >
-                  <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
-                </button>
-                <!--
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            id="busy_state"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            v-bind:class="{
+              'btn-danger': state.busy_state === true,
+              'btn-secondary': state.busy_state === false,
+            }"
+            data-bs-title="Modem state"
+            disabled
+            style="pointer-events: auto"
+          >
+            <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
+          </button>
+          <!--
           <button
             class="btn btn-sm btn-secondary me-1"
             id="arq_session"
@@ -69,7 +67,7 @@ const state = useStateStore(pinia);
             <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
           </button>
           -->
-                <!--
+          <!--
           <button
             class="btn btn-sm btn-secondary me-1"
             id="arq_state"
@@ -88,7 +86,7 @@ const state = useStateStore(pinia);
             <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
           </button>
           -->
-                <!--
+          <!--
               <button
                 class="btn btn-sm btn-secondary me-1"
                 id="rigctld_state"
@@ -102,7 +100,7 @@ const state = useStateStore(pinia);
                 <i class="bi bi-usb-symbol" style="font-size: 0.8rem"></i>
               </button>
 -->
-                <!--
+          <!--
           <button
             class="btn btn-sm btn-secondary disabled me-3"
             type="button"
@@ -120,154 +118,144 @@ const state = useStateStore(pinia);
             <i class="bi bi-hourglass"></i>
           </button>
             -->
-              </div>
+        </div>
 
-              <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                  class="btn btn-sm btn-secondary me-4 disabled"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-title="What's the frequency, Kenneth?"
-                  style="pointer-events: auto"
-                >
-                  {{ state.frequency / 1000 }} kHz
-                </button>
-              </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-title="What's the frequency, Kenneth?"
+            style="pointer-events: auto"
+          >
+            {{ state.frequency / 1000 }} kHz
+          </button>
+        </div>
 
-              <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                  class="btn btn-sm btn-secondary me-0"
-                  type="button"
-                  title="Speed level"
-                >
-                  <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
-                </button>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            title="Speed level"
+          >
+            <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
+          </button>
 
-                <button
-                  class="btn btn-sm btn-secondary me-4 disabled"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-html="true"
-                  data-bs-titel="speed level"
-                >
-                  <i
-                    class="bi"
-                    style="font-size: 1rem"
-                    v-bind:class="{
-                      'bi-reception-0': state.speed_level == 0,
-                      'bi-reception-1': state.speed_level == 1,
-                      'bi-reception-2': state.speed_level == 2,
-                      'bi-reception-3': state.speed_level == 3,
-                      'bi-reception-4': state.speed_level == 4,
-                    }"
-                  ></i>
-                </button>
-              </div>
-              <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                  class="btn btn-sm btn-secondary me-0"
-                  type="button"
-                  title="Bytes transfered"
-                >
-                  <i
-                    class="bi bi-file-earmark-binary"
-                    style="font-size: 1rem"
-                  ></i>
-                </button>
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            data-bs-titel="speed level"
+          >
+            <i
+              class="bi"
+              style="font-size: 1rem"
+              v-bind:class="{
+                'bi-reception-0': state.speed_level == 0,
+                'bi-reception-1': state.speed_level == 1,
+                'bi-reception-2': state.speed_level == 2,
+                'bi-reception-3': state.speed_level == 3,
+                'bi-reception-4': state.speed_level == 4,
+              }"
+            ></i>
+          </button>
+        </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            title="Bytes transfered"
+          >
+            <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
+          </button>
 
-                <button
-                  class="btn btn-sm btn-secondary me-4 disabled"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-html="true"
-                  data-bs-title="total bytes of transmission"
-                >
-                  {{ state.arq_total_bytes }}
-                </button>
-              </div>
-              <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                  class="btn btn-sm btn-secondary me-0"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-html="true"
-                  data-bs-title="Current or last connected with station"
-                >
-                  <i
-                    class="bi bi-file-earmark-binary"
-                    style="font-size: 1rem"
-                  ></i>
-                </button>
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            data-bs-title="total bytes of transmission"
+          >
+            {{ state.arq_total_bytes }}
+          </button>
+        </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            data-bs-title="Current or last connected with station"
+          >
+            <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
+          </button>
 
-                <button
-                  class="btn btn-sm btn-secondary disabled me-1"
-                  type="button"
-                  data-bs-placement="top"
-                  data-bs-toggle="tooltip"
-                  data-bs-trigger="hover"
-                  data-bs-html="true"
-                  data-bs-title="the dxcallsign of the connected station"
-                >
-                  {{ state.dxcallsign }}
-                </button>
-              </div>
-            </div>
+          <button
+            class="btn btn-sm btn-secondary disabled me-1"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            data-bs-title="the dxcallsign of the connected station"
+          >
+            {{ state.dxcallsign }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4">
+      <div style="margin-right: 2px">
+        <div class="progress w-100" style="height: 20px; min-width: 200px">
+          <div
+            class="progress-bar progress-bar-striped bg-primary force-gpu"
+            id="transmission_progress"
+            role="progressbar"
+            :style="{ width: state.arq_transmission_percent + '%' }"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+          <p
+            class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
+          >
+            Message Progress
+          </p>
+        </div>
+
+        <div
+          hidden
+          class="progress mb-0 rounded-0 rounded-bottom"
+          style="height: 10px"
+        >
+          <div
+            class="progress-bar progress-bar-striped bg-warning"
+            id="transmission_timeleft"
+            role="progressbar"
+            :style="{
+              width: state.arq_seconds_until_timeout_percent + '%',
+            }"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <p
+              class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
+            >
+              timeout in {{ state.arq_seconds_until_timeout }}s
+            </p>
           </div>
-          <div class="col-lg-4">
-            <div style="margin-right: 2px">
-              <div
-                class="progress w-100"
-                style="height: 20px; min-width: 200px"
-              >
-                <div
-                  class="progress-bar progress-bar-striped bg-primary force-gpu"
-                  id="transmission_progress"
-                  role="progressbar"
-                  :style="{ width: state.arq_transmission_percent + '%' }"
-                  aria-valuenow="0"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                ></div>
-                <p
-                  class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
-                >
-                  Message Progress
-                </p>
-              </div>
-
-              <div
-                hidden
-                class="progress mb-0 rounded-0 rounded-bottom"
-                style="height: 10px"
-              >
-                <div
-                  class="progress-bar progress-bar-striped bg-warning"
-                  id="transmission_timeleft"
-                  role="progressbar"
-                  :style="{
-                    width: state.arq_seconds_until_timeout_percent + '%',
-                  }"
-                  aria-valuenow="0"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                >
-                  <p
-                    class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
-                  >
-                    timeout in {{ state.arq_seconds_until_timeout }}s
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </nav>
-
+        </div>
+      </div>
+    </div>
+  </nav>
 </template>
diff --git a/freedata_gui/src/components/main_left_navbar.vue b/freedata_gui/src/components/main_left_navbar.vue
index 55dbd3b7..461d1612 100644
--- a/freedata_gui/src/components/main_left_navbar.vue
+++ b/freedata_gui/src/components/main_left_navbar.vue
@@ -1,28 +1,25 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+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>
-
+    <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"
@@ -39,70 +36,66 @@ function toggleTextVisibility() {
     "
     ><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"
+  <div
+    class="list-group bg-body-secondary"
+    id="main-list-tab"
+    role="tablist"
+    style="margin-top: 100px"
     @click="loadAllData"
   >
-    <i class="bi bi-gear-wide-connected h3"></i>
-    <span class="ms-2" v-if="isTextVisible">Settings</span>
-  </a>
-</div>
+    <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
index ba534139..cc340bc4 100644
--- a/freedata_gui/src/components/main_main_screen.vue
+++ b/freedata_gui/src/components/main_main_screen.vue
@@ -1,2 +1 @@
-<template>
-</template>
\ No newline at end of file
+<template></template>
diff --git a/freedata_gui/src/components/mesh.vue b/freedata_gui/src/components/mesh.vue
index abfc1baa..c6fe55fe 100644
--- a/freedata_gui/src/components/mesh.vue
+++ b/freedata_gui/src/components/mesh.vue
@@ -1,131 +1,126 @@
 <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="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-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
+      <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>