From 1449869c0f0efa1d8460567bcca89891709d727b Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Tue, 6 Feb 2024 22:49:55 +0100
Subject: [PATCH] adjusted chat navbars

---
 gui/src/components/chat.vue               |  14 +-
 gui/src/components/chat_conversations.vue |  32 +++++
 gui/src/components/chat_messages.vue      | 124 +++++++++++++++++-
 gui/src/components/chat_navbar.vue        | 153 ----------------------
 gui/src/components/chat_new_message.vue   |   6 +-
 5 files changed, 165 insertions(+), 164 deletions(-)
 delete mode 100644 gui/src/components/chat_navbar.vue

diff --git a/gui/src/components/chat.vue b/gui/src/components/chat.vue
index 9f914bdb..dfbd9e69 100644
--- a/gui/src/components/chat.vue
+++ b/gui/src/components/chat.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import chat_navbar from "./chat_navbar.vue";
 import chat_conversations from "./chat_conversations.vue";
 import chat_messages from "./chat_messages.vue";
 import chat_new_message from "./chat_new_message.vue";
@@ -7,9 +6,6 @@ import chat_new_message from "./chat_new_message.vue";
 
 <template>
   <div class="container-fluid m-0 p-0">
-    <!------ chat navbar ---------------------------------------------------------------------->
-
-    <chat_navbar />
 
     <div class="row h-100 ms-0 mt-0 me-1">
       <div class="col-3 m-0 p-0 h-100 bg-light">
@@ -29,16 +25,20 @@ import chat_new_message from "./chat_new_message.vue";
       <div class="col-9 border-start vh-100 p-0">
         <!------messages area ---------------------------------------------------------------------->
         <div
-          class="container overflow-auto"
+          class="container overflow-auto p-0"
           id="message-container"
-          style="height: calc(100% - 225px)"
+          style="height: calc(100% - 135px)"
         >
           <chat_messages />
         </div>
 
         <!------ new message area ---------------------------------------------------------------------->
 
-        <chat_new_message />
+
+<chat_new_message />
+
+
+
       </div>
     </div>
   </div>
diff --git a/gui/src/components/chat_conversations.vue b/gui/src/components/chat_conversations.vue
index 7a39b471..1930891a 100644
--- a/gui/src/components/chat_conversations.vue
+++ b/gui/src/components/chat_conversations.vue
@@ -5,6 +5,10 @@ setActivePinia(pinia);
 
 import { useChatStore } from "../store/chatStore.js";
 import { getBeaconDataByCallsign } from "../js/api.js";
+import { startChatWithNewStation } from "../js/chatHandler";
+
+import { ref, computed } from "vue";
+
 
 const chat = useChatStore(pinia);
 
@@ -34,8 +38,36 @@ function getDateTime(timestamp) {
   let seconds = date.getSeconds().toString().padStart(2, "0");
   return `${hours}:${minutes}`;
 }
+
+const newChatCall = ref(null);
+
+function newChat() {
+  let callsign = this.newChatCall.value;
+  callsign = callsign.toUpperCase().trim();
+  if (callsign === "") return;
+  //startChatWithNewStation(callsign);
+  //updateAllChat(false);
+  this.newChatCall.value = "";
+}
+
+
 </script>
 <template>
+
+<nav class="navbar sticky-top bg-body-tertiary">
+
+<button
+            class="btn btn-outline-primary w-100"
+            data-bs-target="#newChatModal"
+            data-bs-toggle="modal"
+          >
+            <i class="bi bi-pencil-square"> Start a new chat</i>
+          </button>
+
+
+</nav>
+
+
   <div
     class="list-group bg-body-tertiary m-0 p-1"
     id="chat-list-tab"
diff --git a/gui/src/components/chat_messages.vue b/gui/src/components/chat_messages.vue
index 28de1947..6c80fa7e 100644
--- a/gui/src/components/chat_messages.vue
+++ b/gui/src/components/chat_messages.vue
@@ -21,10 +21,128 @@ function getDateTime(timestampRaw) {
   let day = date.getDate().toString().padStart(2, "0");
   return `${year}-${month}-${day}`;
 }
+
+
+
+
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+} from "chart.js";
+
+import { Bar } from "vue-chartjs";
+import { ref, computed } from "vue";
+import annotationPlugin from "chartjs-plugin-annotation";
+
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  annotationPlugin,
+);
+
+var beaconHistogramOptions = {
+  type: "bar",
+  bezierCurve: false, //remove curves from your plot
+  scaleShowLabels: false, //remove labels
+  tooltipEvents: [], //remove trigger from tooltips so they will'nt be show
+  pointDot: false, //remove the points markers
+  scaleShowGridLines: true, //set to false to remove the grids background
+  maintainAspectRatio: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    annotation: {
+      annotations: [
+        {
+          type: "line",
+          mode: "horizontal",
+          scaleID: "y",
+          value: 0,
+          borderColor: "darkgrey", // Set the color to dark grey for the zero line
+          borderWidth: 0.5, // Set the line width
+        },
+      ],
+    },
+  },
+
+  scales: {
+    x: {
+      position: "bottom",
+      display: false,
+      min: -10,
+      max: 15,
+      ticks: {
+        display: false,
+      },
+    },
+    y: {
+      display: false,
+      min: -5,
+      max: 10,
+      ticks: {
+        display: false,
+      },
+    },
+  },
+};
+
+const beaconHistogramData = computed(() => ({
+  labels: chat.beaconLabelArray,
+  datasets: [
+    {
+      data: chat.beaconDataArray,
+      tension: 0.1,
+      borderColor: "rgb(0, 255, 0)",
+
+      backgroundColor: function (context) {
+        var value = context.dataset.data[context.dataIndex];
+        return value >= 0 ? "green" : "red";
+      },
+    },
+  ],
+}));
+
+
+
+
 </script>
 
 <template>
-  <div class="tab-content" id="nav-tabContent-chat-messages">
+
+  <nav class="navbar sticky-top bg-body-tertiary shadow ">
+<div class="input-group mb-0 p-0 w-50">
+            <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>
+
+  <div class="tab-content p-3" id="nav-tabContent-chat-messages">
     <template
       v-for="(details, callsign, key) in chat.callsign_list"
       :key="callsign"
@@ -62,6 +180,10 @@ function getDateTime(timestampRaw) {
       </div>
     </template>
   </div>
+
+
+
+
 </template>
 
 <style>
diff --git a/gui/src/components/chat_navbar.vue b/gui/src/components/chat_navbar.vue
deleted file mode 100644
index 92b20972..00000000
--- a/gui/src/components/chat_navbar.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script setup lang="ts">
-// @ts-nocheck
-
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-
-import { useStateStore } from "../store/stateStore.js";
-const state = useStateStore(pinia);
-
-import { useChatStore } from "../store/chatStore.js";
-const chat = useChatStore(pinia);
-
-import { startChatWithNewStation } from "../js/chatHandler";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-} from "chart.js";
-
-import { Bar } from "vue-chartjs";
-import { ref, computed } from "vue";
-import annotationPlugin from "chartjs-plugin-annotation";
-
-const newChatCall = ref(null);
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  annotationPlugin,
-);
-
-var beaconHistogramOptions = {
-  type: "bar",
-  bezierCurve: false, //remove curves from your plot
-  scaleShowLabels: false, //remove labels
-  tooltipEvents: [], //remove trigger from tooltips so they will'nt be show
-  pointDot: false, //remove the points markers
-  scaleShowGridLines: true, //set to false to remove the grids background
-  maintainAspectRatio: true,
-  plugins: {
-    legend: {
-      display: false,
-    },
-    annotation: {
-      annotations: [
-        {
-          type: "line",
-          mode: "horizontal",
-          scaleID: "y",
-          value: 0,
-          borderColor: "darkgrey", // Set the color to dark grey for the zero line
-          borderWidth: 0.5, // Set the line width
-        },
-      ],
-    },
-  },
-
-  scales: {
-    x: {
-      position: "bottom",
-      display: false,
-      min: -10,
-      max: 15,
-      ticks: {
-        display: false,
-      },
-    },
-    y: {
-      display: false,
-      min: -5,
-      max: 10,
-      ticks: {
-        display: false,
-      },
-    },
-  },
-};
-
-const beaconHistogramData = computed(() => ({
-  labels: chat.beaconLabelArray,
-  datasets: [
-    {
-      data: chat.beaconDataArray,
-      tension: 0.1,
-      borderColor: "rgb(0, 255, 0)",
-
-      backgroundColor: function (context) {
-        var value = context.dataset.data[context.dataIndex];
-        return value >= 0 ? "green" : "red";
-      },
-    },
-  ],
-}));
-
-function newChat() {
-  let callsign = this.newChatCall.value;
-  callsign = callsign.toUpperCase().trim();
-  if (callsign === "") return;
-  //startChatWithNewStation(callsign);
-  //updateAllChat(false);
-  this.newChatCall.value = "";
-}
-</script>
-
-<template>
-  <nav class="navbar bg-body-tertiary p-2 border-bottom">
-    <div class="container">
-      <div class="row w-100">
-        <div class="col-3 p-0">
-          <button
-            class="btn btn-outline-primary w-100"
-            data-bs-target="#newChatModal"
-            data-bs-toggle="modal"
-          >
-            <i class="bi bi-pencil-square"> Start a new chat</i>
-          </button>
-        </div>
-        <div class="col-5 ms-2 p-0">
-          <!-- right side of chat nav bar-->
-
-          <div class="input-group mb-0 p-0 w-50">
-            <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>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
diff --git a/gui/src/components/chat_new_message.vue b/gui/src/components/chat_new_message.vue
index a3cc5e71..26856665 100644
--- a/gui/src/components/chat_new_message.vue
+++ b/gui/src/components/chat_new_message.vue
@@ -193,8 +193,8 @@ const speedChartData = computed(() => ({
 
 
 <template>
-
-<div class="container-fluid mt-2 p-0">
+  <nav class="navbar sticky-bottom bg-body-tertiary border-top">
+<div class="container-fluid p-0">
                         <input
                           type="checkbox"
                           id="expand_textarea"
@@ -349,7 +349,7 @@ const speedChartData = computed(() => ({
 
 
 
-
+</nav>
 
 </template>