Improve connection signal handling and UI updates

gobbledy-gook · Jun 23, 2023 · d9d93fe · d9d93fe
1 parent 38113f6
commit d9d93fe
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/report_ai/index.html b/report_ai/index.html
@@ -31,12 +31,17 @@
 </head>
 
 <body>
-  <div style = "display:flex; width:100%; background-color: #2a2a2a;">
-    <div style = "width:75%"><h1>Report.AI</h1></div>
-    <div style = "display:flex; flex-direction:column; margin-left:7%">
-      <div style="height:70%;"><button title="Reload Current-tab" id = "refreshBtn">Reload</button></div>
-      <div class = "connectionSignal" id="connectionSignal"> </div>
+  <div style="width: 100%;">
+    <div style = "display:flex;align-items: center; width:100%; background-color: #2a2a2a;">
+      <div style = "width:75%"><h1>Report.AI</h1></div>
+      <div style = "display:flex; flex-direction:column; margin-left:7%">
+        <div ><button title="Reload Current-tab" id = "refreshBtn">Reload</button></div>
+      </div>
     </div>
+    <div class = "connectionSignal" id="connectionSignal">
+      <div class="text"></div>
+      <div class="icon"></div>
+      </div>
   </div>
   <div class="topbar">
     <div style="width: 59%; text-align:right; padding-right:2%">Overall Page Rating</div>

diff --git a/report_ai/popup.js b/report_ai/popup.js
@@ -178,15 +178,31 @@ function saveEntry(rating, url) {
 chrome.storage.local.get(["key"], logger);
 
 function checkConnectionSignal() {
+  const element = document.getElementById("connectionSignal");
+  const text = element.querySelector(".text");
+  const icon = element.querySelector(".icon");
+
+  // Show loading state
+  icon.style.backgroundColor = "rgb(238, 210, 2)";
+  text.innerHTML = "waiting for connection...";
+
   // check if the server is running
   fetch("http://127.0.0.1:5000/healthcheck")
     .then((response) => {
       if (response.status === 200) {
-        document.getElementById("connectionSignal").style.backgroundColor = "rgb(45, 246, 31)";
+        // Update UI for successful connection
+        icon.style.backgroundColor = "rgb(45, 246, 31)";
+        text.innerHTML = "connected to server";
+      } else {
+        // Update UI for server error
+        icon.style.backgroundColor = "rgb(209, 0, 31)";
+        text.innerHTML = "server unavailable";
       }
     })
     .catch((error) => {
-      document.getElementById("connectionSignal").style.backgroundColor = "rgb(209, 0, 31)";
+      // Update UI for fetch error
+      icon.style.backgroundColor = "rgb(209, 0, 31)";
+      text.innerHTML = "server unavailable";
     });
 }
 

diff --git a/report_ai/rating.css b/report_ai/rating.css
@@ -283,16 +283,23 @@ form .btn button:hover {
   overflow-y: hidden;
   color: #c6c6c6;
 }
-
 .connectionSignal {
+  padding-right: 24px;
+  padding-bottom: 8px;
+  background-color: #2a2a2a;
+  gap: 8px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.connectionSignal > .icon {
   border-radius: 100%;
-  background-color: rgb(45, 246, 31);
-  height: 20%;
-  margin-left: 68%;
-  margin-right: 10%;
-  margin-bottom: 5%;
-  /* margin-top: 10%; 
-  margin-bottom: 2%; */
+  background-color: rgb(255, 255, 255);
+  height: 10px;
+  width: 10px;
+}
+.connectionSignal > .text {
+  color: rgb(255, 255, 255);
 }
 
 #refreshBtn {