Add alerts.html

This commit is contained in:
2024-05-03 08:02:36 -05:00
parent be906beba7
commit ce901286f9

88
alerts.html Normal file
View File

@@ -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>