From c35897086a576ded8a9f642c3b524102474cab8d Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Sat, 6 Apr 2024 05:08:44 +0000
Subject: [PATCH] feat: UI now updates connection status

---
 src/index.html          | 34 +++++++++++----------------
 src/js/communication.js | 51 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/index.html b/src/index.html
index b42b3e0..0dd9cec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,28 +11,20 @@
     <main class="h-full flex">
         <div id="map" class="h-full grow"></div>
         <div class="mx-5 space-y-5">
-            <div class="flex items-center justify-between bg-green-500 text-white p-2">
-                <div class="flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                        class="h-4 w-4">
-                        <polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                    <span>Connected</span>
-                </div>
-            </div>
-            <div class="flex items-center justify-between bg-red-500 text-white p-2">
-                <div class="flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                        class="h-4 w-4">
-                        <path
-                            d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z">
-                        </path>
-                    </svg>
-                    <span>Disconnected</span>
+            <section id="status-bar">
+                <div class="flex items-center justify-between bg-red-500 text-white p-2">
+                    <div class="flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="h-4 w-4">
+                            <path
+                                d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z">
+                            </path>
+                        </svg>
+                        <span>Disconnected</span>
+                    </div>
                 </div>
-            </div>
+            </section>
             <section class="flex">
                 <label of="import-path"
                     class="justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-blue-500 text-white flex items-center cursor-pointer">
diff --git a/src/js/communication.js b/src/js/communication.js
index 83da3c2..20e490e 100644
--- a/src/js/communication.js
+++ b/src/js/communication.js
@@ -6,6 +6,32 @@ import * as logging from "tauri-plugin-log-api";
 import * as boat_vars from "./data";
 import * as path_vars from "./map/add_point";
 
+const connected_status = `
+            <div class="flex items-center justify-between bg-green-500 text-white p-2">
+                <div class="flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="h-4 w-4">
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                    <span>Connected</span>
+                </div>
+            </div>`
+
+const disconnected_status = `
+            <div class="flex items-center justify-between bg-red-500 text-white p-2">
+                <div class="flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="h-4 w-4">
+                        <path
+                            d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z">
+                        </path>
+                    </svg>
+                    <span>Disconnected</span>
+                </div>
+            </div>`
+
 /** Run Element
  * @type{HTMLButtonElement | null}
  * */
@@ -29,6 +55,15 @@ if (run_button === null) {
     });
 }
 
+/** Status Bar Element
+ * @type{HTMLDivElement | null}
+ * */
+const status_bar = document.getElementById("status-bar");
+
+if (status_bar === null) {
+    logging.error("Unable to Find Status Bar Element");
+}
+
 /** The current connected port.
  * 
  * @type{string}
@@ -46,7 +81,7 @@ async function search_port() {
             // Taking the first port
             // TODO: Handle multiple ports
             port = ports[0];
-            run_button.disabled = false;
+            update_ui(true);
             return;
         }
     } catch (e) {
@@ -72,8 +107,18 @@ listen("received-data", async (event) => {
 listen("disconnected", async (event) => {
     logging.info("Port Disconnected");
     if (event.payload === port) {
+        update_ui(false);
+        search_port();
+    }
+});
+
+function update_ui(connection) {
+    if (connection === true) {
+        run_button.disabled = false;
+        status_bar.innerHTML = connected_status;
+    } else {
         port = null;
+        status_bar.innerHTML = disconnected_status;
         run_button.disabled = true;
-        search_port();
     }
-});
\ No newline at end of file
+}
\ No newline at end of file