From 5be1042cd7279754d5c7d67efaf3c4b08baf9795 Mon Sep 17 00:00:00 2001
From: Innovation <katieofgeeks@gmail.com>
Date: Sat, 30 Mar 2024 12:18:10 -0500
Subject: [PATCH] Begin work on grabbing data from the backend to display on
 the frontend

---
 src/templates/index.html | 71 +++++++++++++++++++++++++++++++++-------
 1 file changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/templates/index.html b/src/templates/index.html
index 0c7b346..46976fe 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -168,15 +168,9 @@
 		<div id="offset">
 			<div id="topElements">
 				<div id="vitals">
-					<div id="heartrate">
-						<p>Heartrate:	0 BPM</p>
-					</div>
-					<div id="oxygen">
-						<p>Oxygen:	0% O2</p>
-					</div>
-					<div id="bodyTemperature">
-						<p>Body Temp:	0&deg;C</p>
-					</div>
+					<div id="heartrate"></div>
+					<div id="oxygen"></div>
+					<div id="bodyTemperature"></div>
 				</div>
 				<div id="topMessage">
 					<p>Top message - Notifications, warnings, and malfunctions and such</p>
@@ -216,12 +210,65 @@
 				<p>Test2</p>
 			</div>
 		</div>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script type="text/javascript">
 			// TODO: Make baseUrl be set by Flask
-			var baseUrl = "http://localhost:5000"
-			
+			var baseUrl = "http://localhost:5000";
+			var vitalsUrl = baseUrl + "/api/vitals";
+
+			// Malfunction Messages (human-friendly)
+			malfunctionMessage = [ "API Malfunction" ]
+
+			apiMalfunctionI = 0
+
+			function displayMalfunction(malfunction) {
+				console.log(malfunction);
+			}
+
+			function setVitals(vitalsData) {
+				//var data = JSON.parse(vitalsData)
+				heartrate = vitalsData["0"]["heartrate"];
+				oxygen = vitalsData["0"]["oxygen"];
+				bodytemp = vitalsData["0"]["bodytemp"];
+
+				setVitalsHeartrate(heartrate);
+				setVitalsOxygen(oxygen);
+				setVitalsBodytemp(bodytemp);
+			}
+
+			function setVitalsHeartrate(heartrate) {
+				if(heartrate > 0) {
+					document.getElementById("heartrate").innerHTML = "<p>Heartrate: " + heartrate + " BPM</p>";
+				} else {
+					document.getElementById("heartrate").innerHTML = "";
+				}
+			}
+
+			function setVitalsOxygen(oxygen) {
+				if(oxygen > 0) {
+					document.getElementById("oxygen").innerHTML = "<p>Oxygen: " + oxygen + "% O2</p>";
+				} else {
+					document.getElementById("oxygen").innerHTML = "";
+				}
+			}
+
+			function setVitalsBodytemp(bodytemp) {
+				if(bodytemp > 0) {
+					document.getElementById("bodyTemperature").innerHTML = "<p>Body Temp: " + bodytemp + "°C</p>";
+				} else {
+					document.getElementById("bodyTemperature").innerHTML = "";
+				}
+			}
+
 			function updateAll() {
-				stopInterval(	
+				$.get(vitalsUrl, (data, status) => {
+					if(status == "success") {
+						setVitals(data);
+					} else {
+						displayMalfunction(malfunctionMessage[apiMalfunctionI] + ": " + status);
+					}
+				});
+				//stopInterval(t)
 			}
 			var t=setInterval(updateAll, 1000)
 		</script>