From f27e2f7e682a37b6cc1c665d76f9eecd5f250411 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Mon, 29 Apr 2024 08:07:47 +0000
Subject: [PATCH] [CodeFactor] Apply fixes

---
 freedata_gui/src/components/chat.vue          |  78 +++---
 freedata_gui/src/components/main.vue          |  91 ++++---
 .../src/components/main_footer_navbar.vue     | 223 +++++++++++++-----
 .../src/components/main_left_navbar.vue       |   1 -
 4 files changed, 270 insertions(+), 123 deletions(-)

diff --git a/freedata_gui/src/components/chat.vue b/freedata_gui/src/components/chat.vue
index 19029953..6450484f 100644
--- a/freedata_gui/src/components/chat.vue
+++ b/freedata_gui/src/components/chat.vue
@@ -118,43 +118,53 @@ watch(
 </script>
 
 <template>
-<div class="container-fluid">
-  <div class="row">
-    <!-- Chat Conversations -->
-    <div class="col-3 bg-light p-0">
-      <div class="container-fluid overflow-auto p-0">
-        <chat_conversations />
-      </div>
-      <div class="list-group overflow-auto" id="list-tab-chat" role="tablist">
-      </div>
-    </div>
-
-    <!-- Chat Messages -->
-    <div class="col-9 border-start p-0">
-      <div class="d-flex flex-column">
-        <!-- Top Navbar -->
-        <nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
-          <h4 class="p-0 m-0">{{ chat.selectedCallsign }}</h4>
-
-          <div class="input-group mb-0 p-0 w-25">
-            <button type="button" class="btn btn-outline-secondary" disabled>
-              Beacons
-            </button>
-            <div class="form-floating border border-secondary-subtle border-1 rounded-end">
-              <Bar :data="beaconHistogramData" :options="beaconHistogramOptions" width="300" height="50" />
-            </div>
-          </div>
-        </nav>
-
-        <!-- Chat Messages Area -->
-        <div class="flex-grow-1 overflow-auto" ref="messagesContainer">
-          <chat_messages />
+  <div class="container-fluid">
+    <div class="row">
+      <!-- Chat Conversations -->
+      <div class="col-3 bg-light p-0">
+        <div class="container-fluid overflow-auto p-0">
+          <chat_conversations />
         </div>
+        <div
+          class="list-group overflow-auto"
+          id="list-tab-chat"
+          role="tablist"
+        ></div>
+      </div>
 
-        <!-- New Message Area -->
-        <chat_new_message />
+      <!-- Chat Messages -->
+      <div class="col-9 border-start p-0">
+        <div class="d-flex flex-column">
+          <!-- Top Navbar -->
+          <nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
+            <h4 class="p-0 m-0">{{ chat.selectedCallsign }}</h4>
+
+            <div class="input-group mb-0 p-0 w-25">
+              <button type="button" class="btn btn-outline-secondary" disabled>
+                Beacons
+              </button>
+              <div
+                class="form-floating border border-secondary-subtle border-1 rounded-end"
+              >
+                <Bar
+                  :data="beaconHistogramData"
+                  :options="beaconHistogramOptions"
+                  width="300"
+                  height="50"
+                />
+              </div>
+            </div>
+          </nav>
+
+          <!-- Chat Messages Area -->
+          <div class="flex-grow-1 overflow-auto" ref="messagesContainer">
+            <chat_messages />
+          </div>
+
+          <!-- New Message Area -->
+          <chat_new_message />
+        </div>
       </div>
     </div>
   </div>
-</div>
 </template>
diff --git a/freedata_gui/src/components/main.vue b/freedata_gui/src/components/main.vue
index 753577bd..89d27c2d 100644
--- a/freedata_gui/src/components/main.vue
+++ b/freedata_gui/src/components/main.vue
@@ -18,47 +18,72 @@ import { loadAllData } from "../js/eventHandler";
 </script>
 
 <template>
-<div aria-live="polite" aria-atomic="true" class="position-relative z-3">
-  <div class="toast-container position-absolute top-0 end-0 p-3" id="mainToastContainer"></div>
-</div>
+  <div aria-live="polite" aria-atomic="true" class="position-relative z-3">
+    <div
+      class="toast-container position-absolute top-0 end-0 p-3"
+      id="mainToastContainer"
+    ></div>
+  </div>
 
-<div class="container-fluid">
-  <div class="row">
-    <!-- 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 class="container-fluid">
+    <div class="row">
+      <!-- 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>
 
-    <!-- Main Content -->
-    <div class="col min-vh-100 m-0 p-0">
-      <div class="tab-content" id="nav-tabContent-settings">
-        <!-- Tab Panes -->
-        <div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list"></div>
-        <div class="tab-pane fade d-none" id="list-mesh" role="tabpanel" aria-labelledby="list-mesh-list">
-          <mesh />
+      <!-- Main Content -->
+      <div class="col min-vh-100 m-0 p-0">
+        <div class="tab-content" id="nav-tabContent-settings">
+          <!-- Tab Panes -->
+          <div
+            class="tab-pane fade"
+            id="list-home"
+            role="tabpanel"
+            aria-labelledby="list-home-list"
+          ></div>
+          <div
+            class="tab-pane fade d-none"
+            id="list-mesh"
+            role="tabpanel"
+            aria-labelledby="list-mesh-list"
+          >
+            <mesh />
+          </div>
+          <div
+            class="tab-pane fade show active"
+            id="list-grid"
+            role="tabpanel"
+            aria-labelledby="list-grid-list"
+          >
+            <Dynamic_components />
+          </div>
+          <div
+            class="tab-pane fade"
+            id="list-chat"
+            role="tabpanel"
+            aria-labelledby="list-chat-list"
+          >
+            <chat />
+          </div>
+          <settings_view />
+          <main_footer_navbar />
         </div>
-        <div class="tab-pane fade show active" id="list-grid" role="tabpanel" aria-labelledby="list-grid-list">
-          <Dynamic_components />
-        </div>
-        <div class="tab-pane fade" id="list-chat" role="tabpanel" aria-labelledby="list-chat-list">
-          <chat />
-        </div>
-        <settings_view />
-        <main_footer_navbar />
-      </div>
 
-      <!-- Footer Area -->
-      <div class="container">
-        <!--<main_footer_navbar />-->
+        <!-- Footer Area -->
+        <div class="container">
+          <!--<main_footer_navbar />-->
+        </div>
       </div>
     </div>
   </div>
-</div>
-
-<main_modals />
 
+  <main_modals />
 </template>
diff --git a/freedata_gui/src/components/main_footer_navbar.vue b/freedata_gui/src/components/main_footer_navbar.vue
index 9c9bc64e..34236d8e 100644
--- a/freedata_gui/src/components/main_footer_navbar.vue
+++ b/freedata_gui/src/components/main_footer_navbar.vue
@@ -8,71 +8,184 @@ 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" :class="{ 'btn-danger': state.ptt_state, 'btn-secondary': !state.ptt_state }" 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"
+            :class="{
+              'btn-danger': state.ptt_state,
+              'btn-secondary': !state.ptt_state,
+            }"
+            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" :class="{ 'btn-danger': state.busy_state, 'btn-secondary': !state.busy_state }" data-bs-title="Modem state" disabled style="pointer-events: auto">
-          <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
-        </button>
-      </div>
+          <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"
+            :class="{
+              'btn-danger': state.busy_state,
+              'btn-secondary': !state.busy_state,
+            }"
+            data-bs-title="Modem state"
+            disabled
+            style="pointer-events: auto"
+          >
+            <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
+          </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-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" :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 }" style="font-size: 1rem"></i>
-        </button>
-      </div>
+          <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"
+              :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,
+              }"
+              style="font-size: 1rem"
+            ></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 transferred">
-          <i class="bi bi-file-earmark-binary" 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="Bytes transferred"
+          >
+            <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>
+          <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>
+        <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>
-  </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>
+          <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>
-</nav>
 
+    <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>
 </template>
diff --git a/freedata_gui/src/components/main_left_navbar.vue b/freedata_gui/src/components/main_left_navbar.vue
index c34e586f..483c0396 100644
--- a/freedata_gui/src/components/main_left_navbar.vue
+++ b/freedata_gui/src/components/main_left_navbar.vue
@@ -6,7 +6,6 @@ import { getFreedataMessages } from "../js/api";
 import { getRemote } from "../store/settingsStore.js";
 import { loadAllData } from "../js/eventHandler";
 
-
 const isTextVisible = ref(false); // Initially, the text is invisible
 function toggleTextVisibility() {
   isTextVisible.value = !isTextVisible.value; // Toggle the visibility