Same as index.html, but now only a table.

2024-01-23 20:11:28 +00:00 · 2024-01-23 20:11:28 +00:00 · 42aeba4e04
commit 42aeba4e04
parent ac13371e40
1 changed files with 85 additions and 0 deletions
--- a/test.html
+++ b/test.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>DCSW Server Map: Table Edition</title>
+  </head>
+  <body>
+
+    <table border="1" cellpadding="5" cellspacing="0" id="myList" id="myTable"></table>
+
+    <p id="notes">Notes go here.</p>
+
+    <script>
+// Global Vars, cuzz we <3 anti-patterns
+const serverURL = "http://homeplate.close-air.support:8888/";
+var latest;
+var oldest;
+var Units;
+
+// Update, you know...the things.
+window.setInterval(updateContents, 5000);
+
+function updateContents() {
+
+    var notifications = "";
+
+    fetchContent();
+    units_added = unitsAdded();
+    if (units_added.length != 0) {
+        notifications = notifications + "Units Added: "+units_added+"<br/>";
+    };
+    units_rmved = unitsRemoved();
+    if (units_rmved != 0) {
+        notifications = notifications + "Units Removed: "+units_rmved+"<br/>";
+    };
+    document.getElementById("notes").innerHTML = notifications;
+    renderContents();
+}
+
+function fetchContent() {
+    oldest = latest;
+    Units = fetchData(serverURL);
+    latest = convertJSON(Units);
+}
+
+function convertJSON(jsonFile) {
+    var myArray = [];
+    for (index in jsonFile) { myArray.push(jsonFile[index].UnitName); };
+    return myArray;
+}
+
+function unitsRemoved() {
+    var myArray = [];
+    myArray = oldest.filter(x => !latest.includes(x));
+    return myArray;
+}
+
+function unitsAdded() {
+    var myArray = [];
+    myArray = latest.filter(x => !oldest.includes(x));
+    return myArray;
+}
+
+function renderContents() {
+    var myTable
+    for (unitIndex in Units)
+    {
+        myTable = myTable + "<tr><td>"+Units[unitIndex].UnitName+"</td><td>"+Units[unitIndex].Name+"</td><td>"+Units[unitIndex].SpeedInKnots+"</td>";
+    };
+    document.getElementById("myList").innerHTML = myTable;
+}
+
+function fetchData(url)
+{
+    var xhr = new XMLHttpRequest();    
+    var retval;
+
+    xhr.open("GET", url, false);
+    xhr.send();
+
+    return JSON.parse(xhr.responseText);
+}
+    </script>
+  </body>
+</html>