display Purdue IT status messages

tdx-enhanced.js

@@ -522,13 +522,13 @@
         });
     }
 
-    function changeTitle() {
+    async function changeTitle() {
         let title = document.querySelector(".organization-link a")
         if (title) {
             title.innerText = "Purdue University - STEM"
         }
 
-        injectSettings()
+        await injectToolbar()
     }
 
     function colorChange(color) {
@@ -651,14 +651,31 @@
     */
 
 
-    function injectSettings() {
+    async function injectToolbar() {
         let iconBar = document.querySelector(".tdbar-settings .pull-right")
 
+        let statusHTML = `
+            <div id="statusBox" class="pull-left">
+                <button type="button" class="btn btn-link btn-desktop">
+                    <a href="https://it.purdue.edu/status/" target="_blank">
+                        <span>Status</span>
+                        <span id="statusIcon" class="fa-solid fa-spinner"></span>
+                    </a>
+                </button>
+                <div id="statusMsg" class="dropdown-menu">
+                    <p id="statusText">All services operational.</p>
+                    <p id="statusTime"></p>
+                </div>
+            </div>
+        `
+
         let toolsHTML = `
         <div class="pull-left">
-            <button class="btn btn-link btn-desktop">
-                <a href="https://engineering.purdue.edu/ecnuds/tdx" target="_blank">TDX Tools</a>
-                <span class="fa-solid fa-arrow-up-right-from-square"></span>
+            <button type="button" class="btn btn-link btn-desktop">
+                <a href="https://engineering.purdue.edu/ecnuds/tdx" target="_blank">
+                    <span>TDX Tools</span>
+                    <span class="fa-solid fa-arrow-up-right-from-square"></span>
+                </a>
             </button>
         </div>
         `
@@ -724,6 +741,9 @@
         let settingsPage = document.createElement("div")
         settingsPage.innerHTML = settingsHTML
 
+        let statusLink = document.createElement("span")
+        statusLink.innerHTML = statusHTML
+
         let toolsLink = document.createElement("span")
         toolsLink.innerHTML = toolsHTML
 
@@ -743,10 +763,52 @@
                 settings("update",form)
             });
 
-            //tools link
+            //links
             let parent = iconBar.parentElement
+
+            //tools
             parent.prepend(toolsLink)
+
+            //status
+            parent.prepend(statusLink)
+            let statusData = await getITStatus()
+            let statusIcon = statusLink.querySelector("#statusIcon")
+            if (statusData.length>0) {
+                statusIcon.classList = ("fa-solid fa-triangle-exclamation")
+                let statusTime = statusLink.querySelector("#statusTime")
+                let statusText = statusLink.querySelector("#statusText")
+
+                let statusTimeParsed = moment(statusData[0].time)
+
+                statusTime.innerText = statusTimeParsed.fromNow()
+                statusText.innerText = statusData[0].msg //First msg for now, will there be more than one?
+            } else {
+                statusIcon.classList = ("fa-solid fa-check")
+            }
+        }
+    }
+
+    async function getITStatus() {
+        let url = "https://it.purdue.edu/api-status/messages.php"
+        let res = await fetch(url)
+        let data = await res.json()
+
+        let messages = []
+
+        let msgs = data.Results
+        if (msgs.length>0) {
+            let numMsgs = msgs.length/2
+            for (let i = 0; i<numMsgs; i++) {
+                let msg = {
+                    time: msgs[i],
+                    msg: msgs[i+1]
+                }
+                messages.push(msg)
+            }
+            console.warn("IT Messages:",messages)
         }
+
+        return messages
     }
 
     /* SETTINGS */
@@ -1034,7 +1096,7 @@
 /* Global */
 
 #settingsMenu {
-    left: 250px;
+    left: 400px;
     padding: 10px;
     width: 250px;
     background: var(--bg-1);
@@ -1058,6 +1120,30 @@
     gap: 24px;
 }
 
+#statusBox:hover #statusMsg {
+    display: block;
+    width: 400px;
+    line-height: 22px;
+    padding: 8px;
+    left: -150px;
+}
+
+#statusTime, #statusText {
+    margin: 6px;
+}
+
+#statusTime {
+    font-size: 12px;
+}
+
+#statusBox .fa-triangle-exclamation {
+    color: #ff8c4c;
+}
+
+#statusBox .fa-check {
+    color: #0dbb28;
+}
+
 .qBox {
 	margin-left: 10px;
 	padding: 5px;