Merge pull request #529 from DJ2LS/qm-develop-gui

Some fixes, tweaks

gui/src/components/chat.vue

@@ -33,7 +33,7 @@ import chat_new_message from "./chat_new_message.vue";
         <div
           class="container overflow-auto"
           id="message-container"
-          style="height: calc(100% - 200px)"
+          style="height: calc(100% - 225px)"
         >
           <chat_messages />
         </div>

gui/src/components/chat_navbar.vue

@@ -13,6 +13,8 @@ const chat = useChatStore(pinia);
 
 import { getRxBuffer } from "../js/sock.js";
 
+import { startChatWithNewStation } from "../js/chatHandler";
+
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -88,21 +90,6 @@ var beaconHistogramOptions = {
   },
 };
 
-//let dataArray = new Array(25).fill(0)
-//dataArray = dataArray.add([-3, 10, 8, 5, 3, 0, -5])
-//let dataArray1 = dataArray.shift(2)
-//console.log(dataArray1)
-//[-3, 10, 8, 5, 3, 0, -5]
-
-try {
-  chat.beaconLabelArray = Object.values(
-    chat.sorted_beacon_list["DJ2LS-0"].timestamp,
-  );
-  chat.beaconDataArray = Object.values(chat.sorted_beacon_list["DJ2LS-0"].snr);
-} catch (e) {
-  console.log(e);
-}
-
 const beaconHistogramData = computed(() => ({
   labels: chat.beaconLabelArray,
   datasets: [
@@ -121,8 +108,10 @@ const beaconHistogramData = computed(() => ({
 
 function newChat() {
   let callsign = this.newChatCall.value;
-  callsign = callsign.toUpperCase();
+  callsign = callsign.toUpperCase().trim();
-  chat.callsign_list.add(callsign);
+  if (callsign === "") return;
+  startChatWithNewStation(callsign);  
+  //updateAllChat(false);
   this.newChatCall.value = "";
 }
 

gui/src/components/main_active_rig_control.vue

@@ -80,7 +80,7 @@ function set_hamlib_rf_level() {
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                Select Frequency
+                
               </button>
 
               <!-- Dropdown Menu -->

gui/src/components/main_footer_navbar.vue

@@ -130,7 +130,7 @@ const state = useStateStore(pinia);
             data-bs-title="What's the frequency, Kenneth?"
             style="pointer-events: auto"
           >
-            {{ parseInt(state.frequency) / 1000 }} KHz
+            {{ parseInt(state.frequency) / 1000 }} kHz
           </button>
         </div>
 

gui/src/components/settings_gui.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { setColormap } from "../js/waterfallHandler";
 import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { setActivePinia } from "pinia";
@@ -10,6 +11,7 @@ const settings = useSettingsStore(pinia);
 
 function saveSettings() {
   saveSettingsToFile();
+  setColormap(settings.wftheme);
 }
 </script>
 <template>
@@ -59,7 +61,7 @@ function saveSettings() {
       id="wftheme_selector"
       @change="saveSettings"
       v-model="settings.wftheme"
-      disabled
+      
     >
       <option value="2">Default</option>
       <option value="0">Turbo</option>

gui/src/js/chatHandler.ts

@@ -20,7 +20,7 @@ import { sendMessage, sendBroadcastChannel } from "./sock.js";
 import { displayToast } from "./popupHandler.js";
 
 //const FD = require("./src/js/freedata.js");
-import { btoa_FD } from "./freedata.js";
+import { btoa_FD,sortByProperty } from "./freedata.js";
 
 // define default message object
 interface Attachment {
@@ -67,6 +67,13 @@ interface beaconDefaultObject {
   snr: string;
 }
 
+interface newChatDefaultObject {
+  command: string;
+  is_new: boolean;
+  timestamp: number;
+  dxcallsign: string;
+}
+
 // ---- MessageDB
 try {
   var PouchDB = require("pouchdb");
@@ -279,16 +286,6 @@ function sortChatList() {
   return reorderedData;
 }
 
-//https://medium.com/@asadise/sorting-a-json-array-according-one-property-in-javascript-18b1d22cd9e9
-function sortByProperty(property) {
-  return function (a, b) {
-    if (a[property] > b[property]) return 1;
-    else if (a[property] < b[property]) return -1;
-
-    return 0;
-  };
-}
-
 export function getMessageAttachment(id) {
   return new Promise(async (resolve, reject) => {
     try {
@@ -597,7 +594,7 @@ function addObjToDatabase(newobj) {
       console.log("new database entry");
       console.log(response);
 
-      if (newobj.command === "msg") {
+      if (newobj.command === "msg" || newobj.command==="newchat") {
         chat.unsorted_chat_list.push(newobj);
         chat.sorted_chat_list = sortChatList();
       }
@@ -697,6 +694,32 @@ function deleteFromDatabaseByCallsign(callsign) {
       console.log(err);
     });
 }
+//Function creates a new 'newchat' database entry when user initates a new chat, otherwise cannot send messages unless receiving a message/beacon from user first
+/**
+ * Add a newuser to the database, for when newuser button is clicked
+ * @param {string} call callsign of new user
+  */
+export function startChatWithNewStation(call) {
+  let newchat: newChatDefaultObject = {
+  command: "newchat",
+  is_new: false,
+  timestamp: Math.floor((new Date()).getTime() / 1000),
+  dxcallsign: call,
+};
+addObjToDatabase(newchat);
+if (!chat.sorted_beacon_list[call]) {
+  // If not, initialize it with an empty array for snr values
+  chat.sorted_beacon_list[call] = {
+    call,
+    snr: [],
+    timestamp: [],
+  };
+  chat.callsign_list.add(call);
+}
+//chat.unsorted_chat_list.push(newchat);
+//chat.sorted_chat_list = sortChatList();
+
+}
 
 // function for handling a received beacon
 export function newBeaconReceived(obj) {

gui/src/js/freedata.ts

@@ -25,3 +25,32 @@ export function atob(data) {
   //exports.atob = function (data) {
   return window.btoa(Buffer.from(data, "base64").toString("utf8"));
 }
+//https://medium.com/@asadise/sorting-a-json-array-according-one-property-in-javascript-18b1d22cd9e9
+/**
+ * Sort a json collection by a property ascending
+ * @param {string} property property to sort on
+ * @returns sorted json collection
+ */
+export function sortByProperty(property) {
+  return function (a, b) {
+    if (a[property] > b[property]) return 1;
+    else if (a[property] < b[property]) return -1;
+
+    return 0;
+  };
+}
+
+//https://medium.com/@asadise/sorting-a-json-array-according-one-property-in-javascript-18b1d22cd9e9
+/**
+ * Sort a json collection by a property descending
+ * @param {string} property property to sort on
+ * @returns sorted json collection
+ */
+export function sortByPropertyDesc(property) {
+  return function (a, b) {
+    if (a[property] < b[property]) return 1;
+    else if (a[property] > b[property]) return -1;
+
+    return 0;
+  };
+}

gui/src/js/settingsHandler.ts

@@ -1,6 +1,6 @@
 import path from "node:path";
 import fs from "fs";
-
+import { setColormap } from "./waterfallHandler";
 // pinia store setup
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
@@ -134,6 +134,9 @@ export function loadSettings() {
       fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
     }
     try {
+      if (key=="wftheme") {
+        setColormap(config[key]);
+      }
       if (key == "mycall") {
         settings.mycall = config[key].split("-")[0];
         settings.myssid = config[key].split("-")[1];

gui/src/js/sock.js

@@ -1,5 +1,5 @@
 var net = require("net");
-import { atob_FD, btoa_FD } from "./freedata";
+import { atob_FD, btoa_FD,sortByPropertyDesc } from "./freedata";
 import { addDataToWaterfall } from "../js/waterfallHandler.js";
 
 import {
@@ -228,7 +228,7 @@ client.on("data", function (socketdata) {
         stateStore.dbfs_level = Math.round(stateStore.dbfs_level);
 
         stateStore.arq_total_bytes = data["total_bytes"];
-        stateStore.heard_stations = data["stations"];
+        stateStore.heard_stations = data["stations"].sort(sortByPropertyDesc("timestamp"));
         stateStore.dxcallsign = data["dxcallsign"];
 
         stateStore.beacon_state = data["beacon_state"];

gui/src/js/waterfallHandler.js

@@ -15,8 +15,6 @@ export function initWaterfall() {
     wf_rows: 192, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container
   });
 
-  console.log(settings.wftheme);
-  spectrum.setColorMap(settings.wftheme);
 }
 
 export function addDataToWaterfall(data) {
@@ -27,3 +25,13 @@ export function addDataToWaterfall(data) {
     //console.log(e);
   }
 }
+/**
+ * Setwaterfall colormap array by index
+ * @param {number} index colormap index to use
+  */
+export function setColormap(index)
+{
+  if (isNaN(index)) index=0;
+  //console.log("Setting waterfall colormap to " + index)
+  spectrum.setColorMap(index);
+}