Added server connection status check

gobbledy-gook · Jun 22, 2023 · 38113f6 · 38113f6
1 parent 6f5b604
commit 38113f6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 61 deletions.
diff --git a/report_ai/index.html b/report_ai/index.html
@@ -35,7 +35,7 @@
     <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 class = "connectionSignal" id="connectionSignal"> </div>
     </div>
   </div>
   <div class="topbar">

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,24 @@ 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() {
+  // 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)";
+      }
+    })
+    .catch((error) => {
+      document.getElementById("connectionSignal").style.backgroundColor = "rgb(209, 0, 31)";
+    });
+}
+
+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;
@@ -284,37 +284,37 @@ form .btn button:hover {
   color: #c6c6c6;
 }
 
-.connectionSignal{
-  border-radius: 100%; 
-  background-color: rgb(45, 246, 31); 
+.connectionSignal {
+  border-radius: 100%;
+  background-color: rgb(45, 246, 31);
   height: 20%;
-  margin-left:68%;
-  margin-right:10%;
-  margin-bottom:5%;
+  margin-left: 68%;
+  margin-right: 10%;
+  margin-bottom: 5%;
   /* margin-top: 10%; 
   margin-bottom: 2%; */
 }
 
-#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;
-}
+}