From 678c69732c3a5faba493227f449ce41140330d78 Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Thu, 19 Oct 2023 16:54:24 +0200
Subject: [PATCH] some gui polishing

---
 gui_vue/package.json                          |  3 +-
 gui_vue/src/components/chat_messages.vue      |  3 +-
 gui_vue/src/components/chat_navbar.vue        | 12 ++--
 gui_vue/src/components/chat_new_message.vue   | 64 ++++++++++++++-----
 gui_vue/src/components/main_active_stats.vue  |  2 +-
 gui_vue/src/components/main_footer_navbar.vue | 28 ++++----
 gui_vue/src/components/main_modals.vue        |  1 +
 gui_vue/src/js/sock.js                        |  2 +-
 gui_vue/src/store/chatStore.js                |  2 +-
 gui_vue/src/styles.css                        |  3 +
 10 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/gui_vue/package.json b/gui_vue/package.json
index be5e7fc1..2160b0a7 100644
--- a/gui_vue/package.json
+++ b/gui_vue/package.json
@@ -55,7 +55,8 @@
     "socket.io": "^4.7.2",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
-    "vue-chartjs": "^5.2.0"
+    "vue-chartjs": "^5.2.0",
+    "vuemoji-picker": "^0.2.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.7.4",
diff --git a/gui_vue/src/components/chat_messages.vue b/gui_vue/src/components/chat_messages.vue
index ff928106..95d6f61e 100644
--- a/gui_vue/src/components/chat_messages.vue
+++ b/gui_vue/src/components/chat_messages.vue
@@ -94,13 +94,14 @@ function getDateTime(timestampRaw) {
   display: flex;
   align-items: center;
   text-align: center;
+  color: #6c757d;
 }
 
 .separator::before,
 .separator::after {
   content: "";
   flex: 1;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid #adb5bd;
 }
 
 .separator:not(:empty)::before {
diff --git a/gui_vue/src/components/chat_navbar.vue b/gui_vue/src/components/chat_navbar.vue
index ee928b5b..868ad7b5 100644
--- a/gui_vue/src/components/chat_navbar.vue
+++ b/gui_vue/src/components/chat_navbar.vue
@@ -155,18 +155,18 @@ getRxBuffer()
   <nav class="navbar bg-body-tertiary border-bottom">
     <div class="container">
       <div class="row w-100">
-        <div class="col-4 p-0 me-2">
-          <div class="input-group bottom-0 m-0">
+        <div class="col-3 p-0 me-2">
+          <div class="input-group bottom-0 m-0 ms-1">
             <input
-              class="form-control w-50"
+              class="form-control"
               maxlength="9"
               style="text-transform: uppercase"
-              placeholder="DX CALL"
+              placeholder="callsign"
               @keypress.enter="newChat()"
              ref="newChatCall"
             />
             <button
-              class="btn btn-sm btn-success"
+              class="btn btn-sm btn-outline-success"
               id="createNewChatButton"
               type="button"
               title="Start a new chat (enter dx call sign first)"
@@ -207,7 +207,7 @@ getRxBuffer()
 
 <div class="input-group mb-0 p-0  ">
 
-  <button type="button" class="btn btn-secondary" @click="syncWithTNC()">
+  <button type="button" class="btn btn-outline-secondary" @click="syncWithTNC()">
       TNC Sync
     </button>
 </div>
diff --git a/gui_vue/src/components/chat_new_message.vue b/gui_vue/src/components/chat_new_message.vue
index 7f2d83ad..0165b7da 100644
--- a/gui_vue/src/components/chat_new_message.vue
+++ b/gui_vue/src/components/chat_new_message.vue
@@ -38,9 +38,20 @@ import {
 import { Line } from 'vue-chartjs'
 import { ref, computed } from 'vue';
 
+
+import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
+
+const handleEmojiClick = (detail: EmojiClickEventDetail) => {
+chat.inputText += detail.unicode
+
+}
+
+
 const chatModuleMessage=ref(null);
 
 
+
+
 function transmitNewMessage(){
 
     chat.inputText = chat.inputText.trim();
@@ -174,18 +185,28 @@ const speedChartData = computed(() => ({
                         ></label>
 
                         <div class="input-group bottom-0 ms-2">
-                          <!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
-                          <!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
-                          <div class="input-group-text">
-                            <i
-                              id="emojipickerbutton"
-                              class="bi bi-emoji-smile p-0"
-                              style="font-size: 1rem"
-                            ></i>
-                          </div>
+
+                            <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1"
+                            data-bs-toggle="modal" data-bs-target="#emojiPickerModal"
+                            data-bs-backdrop="false"
+                            >
+                                <i
+                                  id="emojipickerbutton"
+                                  class="bi bi-emoji-smile p-0"
+                                  style="font-size: 1rem"
+                                ></i>
+                            </button>
+
+
+
+                                        <!-- trigger file selection modal -->
+                            <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
+                              <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
+                            </button>
+
 
                           <textarea
-                            class="form-control"
+                            class="form-control border rounded-pill"
                             rows="1"
                             ref="chatModuleMessage"
                             placeholder="Message - Send with [Enter]"
@@ -194,14 +215,10 @@ const speedChartData = computed(() => ({
                           ></textarea>
 
 
-                            <!-- trigger file selection modal -->
-                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
-                              <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
-                            </button>
 
 
                             <button
-                              class="btn btn-sm btn-secondary me-2"
+                              class="btn btn-sm btn-secondary ms-1 me-2 rounded-pill"
                               @click="transmitNewMessage()"
                               type="button"
                             >
@@ -270,5 +287,20 @@ const speedChartData = computed(() => ({
   </div>
                 </div>
 
+<!-- Emoji Picker Modal -->
+<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog  modal-sm">
+    <div class="modal-content">
+      <div class="modal-body p-0">
+        <VuemojiPicker @emojiClick="handleEmojiClick" />
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+</template>
 
-</template>
\ No newline at end of file
diff --git a/gui_vue/src/components/main_active_stats.vue b/gui_vue/src/components/main_active_stats.vue
index 086c2941..f7748f7f 100644
--- a/gui_vue/src/components/main_active_stats.vue
+++ b/gui_vue/src/components/main_active_stats.vue
@@ -244,7 +244,7 @@ export default {
             <div class="btn-group" role="group" aria-label="Busy indicators">
 
               <button
-                class="btn btn-sm p-1 disabled"
+                class="btn btn-sm ms-1 p-1 disabled"
                 type="button"
                 data-bs-placement="top"
                 data-bs-toggle="tooltip"
diff --git a/gui_vue/src/components/main_footer_navbar.vue b/gui_vue/src/components/main_footer_navbar.vue
index fdd745c2..9e6a40c7 100644
--- a/gui_vue/src/components/main_footer_navbar.vue
+++ b/gui_vue/src/components/main_footer_navbar.vue
@@ -21,7 +21,7 @@ const state = useStateStore(pinia);
             class="btn btn-sm btn-secondary me-1"
             v-bind:class="{
               'bg-danger': state.ptt_state === 'True',
-              'bg-success': state.ptt_state === 'False',
+              'bg-secondary': state.ptt_state === 'False',
             }"
             id="ptt_state"
             type="button"
@@ -30,6 +30,7 @@ const state = useStateStore(pinia);
             data-bs-trigger="hover"
             data-bs-html="true"
             title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
+            disabled
           >
             <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
           </button>
@@ -44,9 +45,10 @@ const state = useStateStore(pinia);
             data-bs-html="true"
             v-bind:class="{
               'bg-danger': state.busy_state === 'BUSY',
-              'bg-success': state.busy_state === 'IDLE',
+              'bg-secondary': state.busy_state === 'IDLE',
             }"
             title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
+            disabled
           >
             <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
           </button>
@@ -62,8 +64,9 @@ const state = useStateStore(pinia);
             title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
             v-bind:class="{
               'bg-secondary': state.arq_session_state === 'disconnected',
-              'bg-success': state.arq_session_state === 'connected',
+              'bg-warning': state.arq_session_state === 'connected',
             }"
+            disabled
           >
             <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
           </button>
@@ -79,8 +82,9 @@ const state = useStateStore(pinia);
             title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
             v-bind:class="{
               'bg-secondary': state.arq_state === 'False',
-              'bg-success': state.arq_state === 'True',
+              'bg-warning': state.arq_state === 'True',
             }"
+            disabled
           >
             <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
           </button>
@@ -153,11 +157,11 @@ const state = useStateStore(pinia);
               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,
+                '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>
@@ -225,7 +229,7 @@ const state = useStateStore(pinia);
             aria-valuemin="0"
             aria-valuemax="100"
           ></div>
-          <p class="justify-content-center m-0 d-flex position-absolute w-100">
+          <p class="justify-content-center m-0 d-flex position-absolute w-100 text-dark">
             {{ state.arq_seconds_until_finish }}s left
           </p>
         </div>
@@ -244,9 +248,9 @@ const state = useStateStore(pinia);
             aria-valuemax="100"
           >
             <p
-              class="justify-content-center m-0 d-flex position-absolute w-100"
+              class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
             >
-              timeout in: {{ state.arq_seconds_until_timeout }}s
+              timeout in {{ state.arq_seconds_until_timeout }}s
             </p>
           </div>
         </div>
diff --git a/gui_vue/src/components/main_modals.vue b/gui_vue/src/components/main_modals.vue
index 55b44e6d..d6269723 100644
--- a/gui_vue/src/components/main_modals.vue
+++ b/gui_vue/src/components/main_modals.vue
@@ -92,6 +92,7 @@ ChartJS.register(
 
 
 
+
 <!-- Message Info Modal -->
 <div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
diff --git a/gui_vue/src/js/sock.js b/gui_vue/src/js/sock.js
index 3f793700..7ef8650f 100644
--- a/gui_vue/src/js/sock.js
+++ b/gui_vue/src/js/sock.js
@@ -167,7 +167,7 @@ client.on("data", function (socketdata) {
           continue;
         }
       }
-       // console.log(data)
+       //console.log(data)
       if (data["command"] == "tnc_state") {
         //console.log(data)
         // set length of RX Buffer to global variable
diff --git a/gui_vue/src/store/chatStore.js b/gui_vue/src/store/chatStore.js
index 67f3e67e..2c29c49d 100644
--- a/gui_vue/src/store/chatStore.js
+++ b/gui_vue/src/store/chatStore.js
@@ -40,7 +40,7 @@ export const useChatStore = defineStore("chatStore", () => {
         }
     }
 });
-  var inputText = ref();
+  var inputText = ref('');
   var inputFile = ref();
   var inputFileName = ref();
   var inputFileType = ref();
diff --git a/gui_vue/src/styles.css b/gui_vue/src/styles.css
index 1fc88516..e97b832f 100644
--- a/gui_vue/src/styles.css
+++ b/gui_vue/src/styles.css
@@ -107,3 +107,6 @@ https://stackoverflow.com/a/9622873
 [data-bs-theme="dark"] {
   /* default dark theme mods */
 }
+.modal-backdrop {
+   background-color: transparent;
+}