From 38113f6b735644310789515ef580501d7e6446d8 Mon Sep 17 00:00:00 2001 From: MD Farhad Jaman Date: Thu, 22 Jun 2023 21:47:11 +0600 Subject: [PATCH] Added server connection status check --- report_ai/index.html | 2 +- report_ai/popup.js | 84 ++++++++++++++++++++++++++------------------ report_ai/rating.css | 52 +++++++++++++-------------- 3 files changed, 77 insertions(+), 61 deletions(-) diff --git a/report_ai/index.html b/report_ai/index.html index 05a0849..f9959c2 100644 --- a/report_ai/index.html +++ b/report_ai/index.html @@ -35,7 +35,7 @@

Report.AI

-
+
diff --git a/report_ai/popup.js b/report_ai/popup.js index f2a8087..67fb44c 100644 --- 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 index b60f1d8..1bce8e1 100644 --- 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; -} \ No newline at end of file +}