Add alerts.html

2024-05-03 08:02:36 -05:00
parent be906beba7
commit ce901286f9
1 changed files with 88 additions and 0 deletions
--- a/alerts.html
+++ b/alerts.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Radar Station Alarms</title>
+  <style>
+    /* Define styles for different alarm statuses */
+    .alarm-container {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .alarm-item {
+      padding: 10px;
+      margin-bottom: 5px;
+      color: black;
+      border-radius: 5px;
+    }
+
+    .status-cleared { background-color: green; }
+    .status-required { background-color: yellow; }
+    .status-mandatory { background-color: orange; }
+    .status-inoperative { background-color: red; }
+    .status-secondary { background-color: white; }
+  </style>
+</head>
+<body>
+  <div class="alarm-container">
+    <div id="alarms-container">
+      <p>Loading alarms...</p>
+    </div>
+  </div>
+
+  <!-- Include jQuery library -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    $(document).ready(function() {
+      // Function to fetch the radar station alarms
+      function fetchAlarms(stationId, elementId) {
+        var apiUrl = "https://api.weather.gov/radar/stations/" + stationId + "/alarms";
+        var alarmsElement = $("#" + elementId);
+
+        $.getJSON(apiUrl, function(data) {
+          alarmsElement.empty();
+
+          if (data["@graph"] && data["@graph"].length > 0) {
+            data["@graph"].forEach(function(alarm) {
+              var alarmStatus = alarm.status;
+              var alarmMessage = alarm.message;
+              var alarmTimestamp = new Date(alarm.timestamp).toLocaleString();
+
+              var alarmItem = $("<div class='alarm-item'></div>").text(alarmMessage);
+              var alarmTimestampElement = $("<div class='alarm-timestamp'></div>").text(alarmTimestamp);
+
+              // Set the status color based on its value
+              if (alarmStatus === "cleared") {
+                alarmItem.addClass("status-cleared");
+              } else if (alarmStatus === "required") {
+                alarmItem.addClass("status-required");
+              } else if (alarmStatus === "mandatory") {
+                alarmItem.addClass("status-mandatory");
+              } else if (alarmStatus === "inoperative") {
+                alarmItem.addClass("status-inoperative");
+              } else if (alarmStatus === "secondary") {
+                alarmItem.addClass("status-secondary");
+              }
+
+              alarmItem.append(alarmTimestampElement);
+              alarmsElement.append(alarmItem);
+            });
+          } else {
+            alarmsElement.text("No alarms found.");
+          }
+        }).fail(function() {
+          alarmsElement.text("Failed to fetch alarms.");
+        });
+      }
+
+      // Call the fetchAlarms function initially and then every minute
+      fetchAlarms("KBIS", "alarms-container");
+      setInterval(function() {
+        fetchAlarms("KBIS", "alarms-container");
+      }, 60000); // 60000 milliseconds = 1 minute
+    });
+  </script>
+</body>
+</html>