Begin work on grabbing data from the backend to display on the frontend
This commit is contained in:
parent
61b3af2d7e
commit
5be1042cd7
|
@ -168,15 +168,9 @@
|
||||||
<div id="offset">
|
<div id="offset">
|
||||||
<div id="topElements">
|
<div id="topElements">
|
||||||
<div id="vitals">
|
<div id="vitals">
|
||||||
<div id="heartrate">
|
<div id="heartrate"></div>
|
||||||
<p>Heartrate: 0 BPM</p>
|
<div id="oxygen"></div>
|
||||||
</div>
|
<div id="bodyTemperature"></div>
|
||||||
<div id="oxygen">
|
|
||||||
<p>Oxygen: 0% O2</p>
|
|
||||||
</div>
|
|
||||||
<div id="bodyTemperature">
|
|
||||||
<p>Body Temp: 0°C</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="topMessage">
|
<div id="topMessage">
|
||||||
<p>Top message - Notifications, warnings, and malfunctions and such</p>
|
<p>Top message - Notifications, warnings, and malfunctions and such</p>
|
||||||
|
@ -216,12 +210,65 @@
|
||||||
<p>Test2</p>
|
<p>Test2</p>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<script type="text/javascript">
|
||||||
// TODO: Make baseUrl be set by Flask
|
// 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() {
|
function updateAll() {
|
||||||
stopInterval(
|
$.get(vitalsUrl, (data, status) => {
|
||||||
|
if(status == "success") {
|
||||||
|
setVitals(data);
|
||||||
|
} else {
|
||||||
|
displayMalfunction(malfunctionMessage[apiMalfunctionI] + ": " + status);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//stopInterval(t)
|
||||||
}
|
}
|
||||||
var t=setInterval(updateAll, 1000)
|
var t=setInterval(updateAll, 1000)
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue