From ec57f75ef6171a9eb80009cbb4384ec5f149edc5 Mon Sep 17 00:00:00 2001
From: James Pattinson <james@pattinson.org>
Date: Wed, 19 Feb 2025 17:49:03 +0000
Subject: [PATCH] Status bar and resiliency

---
 agcs.html | 50 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/agcs.html b/agcs.html
index b551964..63bdcc4 100644
--- a/agcs.html
+++ b/agcs.html
@@ -9,13 +9,15 @@ font-size:3;
 font-weight:bold;
 line-height:140%;
 }
-#status
-{
-background-color:red;
-font-size:4;
-font-weight:bold;
-color:white;
-line-height:140%;
+#status {
+  background-color: #FFFFFF;
+  border-radius: 15px;
+  font-family: 'andale mono', monospace;
+  font-size: 16pt;
+  width: 610px;
+  margin: 5px;
+  text-align: center;
+  line-height: 35px;
 }
 .myDiv
 {
@@ -106,20 +108,22 @@ line-height:140%;
     <title>EGFH Tower</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
- 	<script type = "text/javascript" 
-         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ 	
     <script type = "text/javascript">
 
 	function onConnectionLost(){
-		//invalidateDisplay();
+		invalidateDisplay();
 		console.log("connection lost");
-		document.getElementById("status").innerHTML = "Connection Lost";
+		document.getElementById("status").style.backgroundColor = '#AA0000';
+		document.getElementById("status").innerHTML = "Connection Lost, reloading";
 		connected_flag=0;
+		setTimeout(location.reload(), reloadDelay);
 	}
 
 	function onFailure(message) {
 		invalidateDisplay();
 		console.log("Failed");
+		document.getElementById("status").style.backgroundColor = '#AA0000';
 		document.getElementById("status").innerHTML = "Connection Failed- Retrying";
         setTimeout(MQTTconnect, reconnectTimeout);
     }
@@ -177,6 +181,12 @@ line-height:140%;
 	function invalidateDisplay() {
 		invalidateWind();
 		invalidateAvgWind();
+		invalidateOAT();
+	}
+
+	function invalidateOAT() {
+		document.getElementById("OAT").innerHTML = "XXX";
+		windValid = 0;
 	}
 
 	function invalidateWind() {
@@ -193,6 +203,7 @@ line-height:140%;
 	function onConnect() {
 
 		connected_flag=1;
+		document.getElementById("status").style.backgroundColor = '#00AA00';
 		document.getElementById("status").innerHTML = "Connected";
 		console.log("Connected to MQTT broker");
 		sub_topics()
@@ -231,8 +242,7 @@ line-height:140%;
 	function sub_topics() {
 
 		if (connected_flag==0) {
-			msg="Not Connected so can't subscribe"
-			console.log(out_msg);
+			console.log("Not Connected so can't subscribe");
 			return false;
 			}
 
@@ -294,11 +304,15 @@ line-height:140%;
 		if (secs > 10 && windValid == 1) {
 			invalidateWind();
 			console.log("Invalidating instant wind due to late message")
+			document.getElementById("status").innerHTML = "Missing Wind message";
+			document.getElementById("status").style.backgroundColor = '#AA0000';
 		}
 		secs = (dt.getTime() - lastAvgWind)/1000;
 		if (secs > 150 && windAvgValid == 1) {
 			invalidateAvgWind();
 			console.log("Invalidating average wind due to late message")
+			document.getElementById("status").innerHTML = "Missing avg Wind message";
+			document.getElementById("status").style.backgroundColor = '#AA0000';
 		}
 		secs = (dt.getTime() - lastPressure)/1000;
 		if (secs > 300 && pressureValid == 1) {
@@ -353,20 +367,22 @@ line-height:140%;
  <div class="flex-container">
 	<div id="zuluTime">QNH: XXX</div>
  </div>
+ <br>
+
+ <div class="flex-container">
+	<div id="status"></div>
+ </div>
 
 <p></p>
 
-<p>
-<div id="status">Connection Status: Not Connected</div>
-
 <script>
 var connected_flag=0	
 var mqtt;
 var reconnectTimeout = 2000;
+var reloadDelay = 5000;
 var host="wss://wx.swansea-airport.wales/mqtt";
 var qCorrection = 0; // Offset for QFE / QNH
 var row=0;
-var out_msg="";
 var mcount=0;
 var topic = "weather/#";
 var windValid = 0;