Further work on template. Vitals implemented on API. Vitals backend not yet implemented.

src/nightserver.py

@@ -1,6 +1,63 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, jsonify, request
 app = Flask(__name__)
 
+# Vitals
+vitalsHeartrate = 0
+vitalsOxygen = 0
+vitalsBodytemp = 0.0
+
+@app.route('/api/vitals/heartrate')
+def getVitalsHeartrate():
+	returnArr = [ { 'heartrate': vitalsHeartrate } ]
+	return jsonify(returnArr)
+
+@app.route('/api/vitals/heartrate', methods=['POST'])
+def setVitalsHeartrate():
+	global vitalsHeartrate
+	json = request.get_json()
+	try:
+		vitalsHeartrate = json['heartrate']
+	except:
+		return 'Incorrect usage.\nUsage: { heartrate: INT }\n', 400
+	return 'Information set successfully', 204
+
+@app.route('/api/vitals/oxygen')
+def getVitalsOxygen():
+	returnArr = [ { 'oxygen': vitalsOxygen } ]
+	return jsonify(returnArr)
+
+@app.route('/api/vitals/oxygen', methods=['POST'])
+def setVitalsOxygen():
+	global vitalsOxygen
+	json = request.get_json()
+	try:
+		vitalsOxygen = json['oxygen']
+	except:
+		return 'Incorrect usage.\nUsage: { oxygen: INT }\n', 400
+	return 'Information set successfully', 204
+
+@app.route('/api/vitals/bodytemp')
+def getVitalsBodytemp():
+	returnArr = [ { 'bodytemp': vitalsBodytemp } ]
+	return jsonify(returnArr)
+
+@app.route('/api/vitals/bodytemp', methods=['POST'])
+def setVitalsBodytemp():
+	global vitalsBodytemp
+	json = request.get_json()
+	try:
+		vitalsBodytemp = json['bodytemp']
+	except:
+		return 'Incorrect usage.\nUsage: { bodytemp: FLOAT }\n', 400
+	return 'Information set successfully', 204
+
+@app.route('/api/vitals')
+def getVitals():
+	returnArr = [ { 'heartrate': vitalsHeartrate, 'oxygen': vitalsOxygen, 'bodytemp': vitalsBodytemp } ]
+	return jsonify(returnArr)
+
+
+
 @app.route('/')
 def uiindex():
 	return render_template('index.html')

src/templates/index.html

@@ -28,30 +28,48 @@
 				padding: 2px;
 				display: flex;
 				flex-wrap: wrap;
-				border: 1px solid #0FF; /* TODO: Remove this later */
+				/*border: 1px solid #0FF;*/ /* TODO: Remove this later */
 			}
 
 			/* Below are all Vitals styling */
 			#vitals {
+				display: flex;
+				flex: none;
+				line-height: 0;
+				flex-direction: column;
+				text-align: left;
 				margin-left: 2px;
 				/*flex-grow: 1;*/
 				width: 30%;
-				border: 1px solid #F00; /* TODO: Remove this later. */
+				/*border: 1px solid #F00;*/ /* TODO: Remove this later. */
+			}
+
+			#heartrate {
+				
+			}
+
+			#oxygen {
+
+			}
+
+			#bodyTemperature {
+				
 			}
 
 			/* Below are all Top Message styling */
 			#topMessage {
+				align-self: center;
 				flex-grow: 2;
 				margin-left: 2px;
 				margin-right: 2px;
-				border: 1px solid #0F0; /* TODO: Remove this later */
+				border: 1px solid #F00; /* TODO: Remove this later */
 			}
 
 			/* Below are all Map styling */
 			#map {
 				margin-right: 2px;
 				width: 30%;
-				border: 1px solid #00F; /* TODO: Remove this later */
+				/*border: 1px solid #00F;*/ /* TODO: Remove this later */
 			}
 
 			#mapElements {
@@ -73,7 +91,7 @@
 			}
 
 			#projectName {
-
+				align-self: flex-end;
 			}
 
 			#compass {
@@ -150,10 +168,18 @@
 		<div id="offset">
 			<div id="topElements">
 				<div id="vitals">
-					<p>Vitals</p>
+					<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>
 				<div id="topMessage">
-					<p>Top message</p>
+					<p>Top message - Notifications, warnings, and malfunctions and such</p>
 				</div>
 				<div id="map">
 					<div id="mapElements">
@@ -163,6 +189,7 @@
 							</div>
 							<div id="projectName">
 								<p>K.A.T.I.E.</p>
+								<p style="text-align: right;">0&deg;C</p>
 							</div>
 						</div>
 						<div id="mapProper">