From 48b0acbc606272a9321d1a80843993a4add4a3fd Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Sun, 10 Sep 2023 08:23:40 +0200
Subject: [PATCH] adjusted top navbar

---
 gui_vue/src/components/main.vue               |  75 +----------
 gui_vue/src/components/main_footer_navbar.vue |   8 +-
 gui_vue/src/components/main_top_navbar.vue    | 117 ++++++++++++++++++
 gui_vue/src/store/stateStore.js               |   2 +-
 4 files changed, 125 insertions(+), 77 deletions(-)
 create mode 100644 gui_vue/src/components/main_top_navbar.vue

diff --git a/gui_vue/src/components/main.vue b/gui_vue/src/components/main.vue
index c57744b2..e33e36a5 100644
--- a/gui_vue/src/components/main.vue
+++ b/gui_vue/src/components/main.vue
@@ -12,7 +12,7 @@ const state = useStateStore(pinia);
 import { useSettingsStore } from '../store/settingsStore.js';
 const settings = useSettingsStore(pinia);
 
-
+import main_top_navbar from './main_top_navbar.vue'
 import main_audio from './main_audio.vue'
 import main_rig_control from './main_rig_control.vue'
 import main_my_station from './main_my_station.vue'
@@ -183,78 +183,9 @@ function changeGuiDesign(design) {
           <div class="tab-content" id="nav-tabContent">
       <div class="tab-pane fade show active" id="list-tnc" role="tabpanel" aria-labelledby="list-tnc-list">
 
+    <!-- TOP NAVBAR -->
+    <main_top_navbar/>
 
-    <!-- SECONDARY NAVBAR -->
-    <nav class="navbar bg-body-tertiary border-bottom">
-      <div style="margin-left: 100px">
-
-      </div>
-
-      <div>{{state.tnc_running_state}}
-
-        <div class="btn-group" role="group">
-          <button
-            type="button"
-            id="startTNC"
-            class="btn btn-sm btn-outline-success"
-            data-bs-toggle="tooltip"
-            data-bs-trigger="hover"
-            data-bs-html="false"
-            title="Start the TNC. Please set your audio and radio settings first!"
-            @click="startStopTNC()"
-          >
-            <i class="bi bi-play-fill"></i>
-            <span class="ms-2">Start tnc</span>
-          </button>
-          <button
-            type="button"
-            id="stopTNC"
-            class="btn btn-sm btn-outline-danger"
-            data-bs-toggle="tooltip"
-            data-bs-trigger="hover"
-            data-bs-html="false"
-            title="Stop the TNC."
-            @click="startStopTNC()"
-          >
-            <i class="bi bi-stop-fill"></i>
-            <span class="ms-2">Stop tnc</span>
-          </button>
-        </div>
-        <button
-          type="button"
-          id="openHelpModalStartStopTNC"
-          data-bs-toggle="modal"
-          data-bs-target="#startStopTNCHelpModal"
-          class="btn me-5 p-0 border-0"
-        >
-          <i class="bi bi-question-circle" style="font-size: 1rem"></i>
-        </button>
-
-      </div>
-
-      <!--
-	<div class="btn-toolbar" role="toolbar">
-
-<span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="false"
-			title="View the received files. This is currently under development!">
-
-
-	   <button class="btn btn-sm btn-primary me-2" data-bs-toggle="offcanvas" data-bs-target="#receivedFilesSidebar" id="openReceivedFiles" type="button" > <strong>Files </strong>
-	   <i class="bi bi-file-earmark-arrow-up-fill" style="font-size: 1rem; color: white;"></i>
-	   <i class="bi bi-file-earmark-arrow-down-fill" style="font-size: 1rem; color: white;"></i>
-	   </button>
-	   </span> <span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="false" title="Send files through HF. This is currently under development!">
-	   <button class="btn btn-sm btn-primary me-2" id="openDataModule" data-bs-toggle="offcanvas" data-bs-target="#transmitFileSidebar" type="button" style="display: None;"> <strong>TX File </strong>
-	   <i class="bi bi-file-earmark-arrow-up-fill" style="font-size: 1rem; color: white;"></i>
-	   </button>
-
-		</span> <span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true"
-			title="Settings and Info">
-
-		</span>
-	</div>
-	 -->
-    </nav>
 
     <div id="blurdiv" style="-webkit-filter: blur(0px); filter: blur(0px)">
       <!--beginn of blur div -->
diff --git a/gui_vue/src/components/main_footer_navbar.vue b/gui_vue/src/components/main_footer_navbar.vue
index ed9c3622..78915d86 100644
--- a/gui_vue/src/components/main_footer_navbar.vue
+++ b/gui_vue/src/components/main_footer_navbar.vue
@@ -104,7 +104,7 @@ const settings = useSettingsStore(pinia);
 
           <div class="btn-group btn-group-sm me-1" role="group">
                 <button
-                class="btn btn-sm btn-secondary me-4"
+                class="btn btn-sm btn-secondary me-4 disabled"
                 type="button"
                 data-bs-placement="top"
                 data-bs-toggle="tooltip"
@@ -134,7 +134,7 @@ const settings = useSettingsStore(pinia);
 
 
             <button
-                class="btn btn-sm btn-secondary me-4"
+                class="btn btn-sm btn-secondary me-4  disabled"
                 type="button"
                 data-bs-placement="top"
                 data-bs-toggle="tooltip"
@@ -173,7 +173,7 @@ const settings = useSettingsStore(pinia);
 
 
                           <button
-                class="btn btn-sm btn-secondary me-4"
+                class="btn btn-sm btn-secondary me-4  disabled"
                 type="button"
                 data-bs-placement="top"
                 data-bs-toggle="tooltip"
@@ -197,7 +197,7 @@ const settings = useSettingsStore(pinia);
 
 
                           <button
-                class="btn btn-sm btn-secondary me-1"
+                class="btn btn-sm btn-secondary disabled me-1"
                 type="button"
                 data-bs-placement="top"
                 data-bs-toggle="tooltip"
diff --git a/gui_vue/src/components/main_top_navbar.vue b/gui_vue/src/components/main_top_navbar.vue
new file mode 100644
index 00000000..e44dbe34
--- /dev/null
+++ b/gui_vue/src/components/main_top_navbar.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+
+import {saveSettingsToFile} from '../js/settingsHandler'
+
+import { setActivePinia } from 'pinia';
+import pinia from '../store/index';
+setActivePinia(pinia);
+
+import { useStateStore } from '../store/stateStore.js';
+const state = useStateStore(pinia);
+
+import { useSettingsStore } from '../store/settingsStore.js';
+const settings = useSettingsStore(pinia);
+
+</script>
+
+
+<template>
+<nav class="navbar bg-body-tertiary border-bottom">
+
+
+      <div class="mx-auto">
+
+        <div class="btn-group" role="group">
+
+          <button
+            type="button"
+            id="startTNC"
+            class="btn btn-sm btn-outline-secondary disabled me-4"
+
+
+          >TNC address: {{settings.tnc_host}}
+          </button>
+
+            </div>
+                    <div class="btn-group me-4" role="group">
+
+          <button
+            type="button"
+            id="startTNC"
+            class="btn btn-sm btn-outline-success"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="false"
+            title="Start the TNC. Please set your audio and radio settings first!"
+            @click="startStopTNC()"
+          >
+            <i class="bi bi-play-fill"></i>
+            <span class="ms-2">Start tnc</span>
+          </button>
+          <button
+            type="button"
+            id="stopTNC"
+            class="btn btn-sm btn-outline-danger"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="false"
+            title="Stop the TNC."
+            @click="startStopTNC()"
+          >
+            <i class="bi bi-stop-fill"></i>
+            <span class="ms-2">Stop tnc</span>
+          </button>
+        </div>
+
+
+                      <div class="btn-group me-1" role="group">
+
+          <button
+            type="button"
+            id="startTNC"
+            class="btn btn-sm btn-outline-secondary disabled"
+
+          >TNC state:{{settings.tnc_running_state}}
+          </button>
+
+            </div>
+
+
+        <button
+          type="button"
+          id="openHelpModalStartStopTNC"
+          data-bs-toggle="modal"
+          data-bs-target="#startStopTNCHelpModal"
+          class="btn me-4 p-0 border-0"
+        >
+          <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+        </button>
+
+      </div>
+
+
+
+      <!--
+	<div class="btn-toolbar" role="toolbar">
+
+<span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="false"
+			title="View the received files. This is currently under development!">
+
+
+	   <button class="btn btn-sm btn-primary me-2" data-bs-toggle="offcanvas" data-bs-target="#receivedFilesSidebar" id="openReceivedFiles" type="button" > <strong>Files </strong>
+	   <i class="bi bi-file-earmark-arrow-up-fill" style="font-size: 1rem; color: white;"></i>
+	   <i class="bi bi-file-earmark-arrow-down-fill" style="font-size: 1rem; color: white;"></i>
+	   </button>
+	   </span> <span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="false" title="Send files through HF. This is currently under development!">
+	   <button class="btn btn-sm btn-primary me-2" id="openDataModule" data-bs-toggle="offcanvas" data-bs-target="#transmitFileSidebar" type="button" style="display: None;"> <strong>TX File </strong>
+	   <i class="bi bi-file-earmark-arrow-up-fill" style="font-size: 1rem; color: white;"></i>
+	   </button>
+
+		</span> <span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true"
+			title="Settings and Info">
+
+		</span>
+	</div>
+	 -->
+    </nav>
+</template>
\ No newline at end of file
diff --git a/gui_vue/src/store/stateStore.js b/gui_vue/src/store/stateStore.js
index 5cdd7241..9f290045 100644
--- a/gui_vue/src/store/stateStore.js
+++ b/gui_vue/src/store/stateStore.js
@@ -21,7 +21,7 @@ export const useStateStore = defineStore('stateStore', () => {
 
     var tnc_connection = ref("disconnected")
     var tncStartCount = ref(0)
-    var tnc_running_state = ref(0)
+    var tnc_running_state = ref("--------")
 
     var arq_total_bytes = ref(0)