Merge pull request #45 from farhadjaman/serverStatus

Added server connection status check
gobbledy-gook · Jun 23, 2023 · 4ddc8eb · 4ddc8eb
2 parents 9a8265a + d9d93fe
commit 4ddc8eb
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 69 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"> </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
@@ -11,7 +11,7 @@ function logger(result) {
   const btn2 = document.querySelector("#summary");
   const btn3 = document.querySelector("#askbtn");
   const btn4 = document.querySelector("#refreshBtn");
-  
+
   btn0.onclick = () => {
     var review = document.getElementById("review").value;
     var b1 = document.getElementsByClassName("radiobutton");
@@ -28,7 +28,7 @@ function logger(result) {
     }
     btn0.style.backgroundColor = "white";
     btn0.style.color = "#111";
-  
+
     console.log("Review :", review);
   };
 
@@ -90,38 +90,38 @@ function logger(result) {
   };
 
   btn3.onclick = async () => {
-	try {
-    const question = {
-      question: document.getElementById("ask").value,
-      context: result.key.text,
-    };
-	  const response = await fetch("http://127.0.0.1:5000/ask-question", {
-		method: "POST",
-		headers: {
-		  "Content-Type": "application/json",
-		  "Access-Control-Allow-Origin": "*",
-		  "Access-Control-Allow-Headers": "Content-Type,Authorization",
-		  "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
-		},
-		// sending the question to the server
-		body: JSON.stringify(question),
-	  });
-  
-	  const json = await response.json();
-	  const answer = json.answer.answer;
-  
-	  console.log("Answer: ", answer);
-	  // Update the UI with the received answer
-	  var answerDiv = document.getElementById("Answer");
-	  answerDiv.style.display = "block";
-	  answerDiv.innerHTML = answer;
-	} catch (error) {
-	  console.error("Error fetching answer:", error);
-	}
+    try {
+      const question = {
+        question: document.getElementById("ask").value,
+        context: result.key.text,
+      };
+      const response = await fetch("http://127.0.0.1:5000/ask-question", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Headers": "Content-Type,Authorization",
+          "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
+        },
+        // sending the question to the server
+        body: JSON.stringify(question),
+      });
+
+      const json = await response.json();
+      const answer = json.answer.answer;
+
+      console.log("Answer: ", answer);
+      // Update the UI with the received answer
+      var answerDiv = document.getElementById("Answer");
+      answerDiv.style.display = "block";
+      answerDiv.innerHTML = answer;
+    } catch (error) {
+      console.error("Error fetching answer:", error);
+    }
   };
 
-  btn4.onclick = () =>{
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  btn4.onclick = () => {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
       chrome.tabs.reload(tabs[0].id);
       location.reload();
     });
@@ -148,7 +148,7 @@ function getRating(url) {
       console.log(rating.toFixed(2));
       document.getElementById("overallRating").innerHTML = rating.toFixed(2);
     })
-    .catch((error) => {});
+    .catch((error) => { });
 }
 
 function saveEntry(rating, url) {
@@ -171,8 +171,40 @@ function saveEntry(rating, url) {
     .then((json) => {
       console.log("Response JSON:", json);
     })
-    .catch((error) => {});
+    .catch((error) => { });
 }
 
 // fetching the local data and calling the logger
 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) {
+        // 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) => {
+      // Update UI for fetch error
+      icon.style.backgroundColor = "rgb(209, 0, 31)";
+      text.innerHTML = "server unavailable";
+    });
+}
+
+checkConnectionSignal();
+setInterval(checkConnectionSignal, 30000);
diff --git a/report_ai/rating.css b/report_ai/rating.css
@@ -1,9 +1,9 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
+  font-family: 'Poppins', sans-serif;
 }
 html,
 body {
@@ -93,19 +93,19 @@ input#rate-5:checked ~ label {
   text-shadow: 0 0 20px #952;
 }
 #rate-1:checked ~ form header:before {
-  content: "Waste";
+  content: 'Waste';
 }
 #rate-2:checked ~ form header:before {
-  content: "Dislike ";
+  content: 'Dislike ';
 }
 #rate-3:checked ~ form header:before {
-  content: "Good";
+  content: 'Good';
 }
 #rate-4:checked ~ form header:before {
-  content: "Great";
+  content: 'Great';
 }
 #rate-5:checked ~ form header:before {
-  content: "Awesome";
+  content: 'Awesome';
 }
 .container form {
   display: none;
@@ -283,38 +283,45 @@ form .btn button:hover {
   overflow-y: hidden;
   color: #c6c6c6;
 }
-
-.connectionSignal{
-  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%; */
+.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(255, 255, 255);
+  height: 10px;
+  width: 10px;
+}
+.connectionSignal > .text {
+  color: rgb(255, 255, 255);
 }
 
-#refreshBtn{
-  padding-right:10%;
-  padding-left:10%;
+#refreshBtn {
+  padding-right: 10%;
+  padding-left: 10%;
   /* margin-left:20%; */
-  margin-right:10%;
-  margin-top:10%;
+  margin-right: 10%;
+  margin-top: 10%;
   border-radius: 10%;
-  color:#dbdbdb;
+  color: #dbdbdb;
   border: 1px solid #b3b3b3d7;
   background-color: #818080;
 }
 
-#refreshBtn:hover{
-  padding-right:10%;
-  padding-left:10%;
+#refreshBtn:hover {
+  padding-right: 10%;
+  padding-left: 10%;
   /* margin-left:30%; */
-  margin-right:10%;
-  margin-top:10%;
+  margin-right: 10%;
+  margin-top: 10%;
   border-radius: 10%;
-  color:#232323;
+  color: #232323;
   border: 1px solid #00000000;
   background-color: #dadada;
-}
+}