From 2d9b8374d89a4c06f67e316d0dfc72519412b90f Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Sat, 27 Jan 2024 05:18:34 +0000
Subject: [PATCH 01/11] Initial Work on LiveATC Widget

---
 simplepwa/index.html | 26 ++++++++++++++---
 simplepwa/main.js    |  7 +++--
 simplepwa/style.css  | 68 ++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 89 insertions(+), 12 deletions(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index f6bc1d8..d6bacf1 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -24,7 +24,7 @@
     <meta name="theme-color" content="#ffffff" />
 
     <!-- Styles -->
-	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-teal.min.css" />
     <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
     <link rel="stylesheet" href="style.css" />
@@ -45,9 +45,27 @@
 		<br>Connecting to Aviation Assistant<br>Please Wait.
 	</div>
     <div id="header" style="left: 210px;display: none">
-      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
-      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
-      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
+            <div id="header_nav">
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="liveATC()">LiveATC</button>
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
+            </div>
+            <div id="header_atc">
+             <table>
+              <tr>
+                <td> 
+                  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+                    <i class="material-icons">pause</i>
+                  </button>
+                </td>
+                <td>
+                  <span id="audioControl_CurrentFeedName">KBGR - ATIS</span><br>
+                  <span id="audioControl_CurrentFeedStatus" style="color:green;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
+                </td>
+              </tr>
+             </table>
+            </div>
     </div>
     <div id="main_tab" style="display: none">
       <iframe src="http://aa.local/tar1090"></iframe>
diff --git a/simplepwa/main.js b/simplepwa/main.js
index ecfe609..2de0fbf 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -11,7 +11,10 @@ function settings() {
 }
 
 function onload() {
-    var xhr = new XMLHttpRequest();
+    document.getElementById("loading").style.display = "none"
+    document.getElementById("header").style.display = "block"
+    document.getElementById("main_tab").style.display = "block"
+    /*var xhr = new XMLHttpRequest();
     xhr.open("GET", "http://aa.local:5000/alive", true);
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.onreadystatechange = function () {
@@ -27,7 +30,7 @@ function onload() {
             }, 1000)
         }
     }
-    xhr.send();   
+    xhr.send();  */
 }
 
 function updateSettings() {
diff --git a/simplepwa/style.css b/simplepwa/style.css
index 8f6495b..934f98f 100644
--- a/simplepwa/style.css
+++ b/simplepwa/style.css
@@ -5,7 +5,7 @@
   }  
 
 html * {
-	font-family: SF-Pro !important;
+	font-family: SF-Pro !important MaterialIcons;
 }
 
 #settings_logo {
@@ -16,6 +16,14 @@ html * {
   margin-right: 10px;
 }
 
+#header > button {
+  margin-right: 15px;
+}
+
+#header > button:nth-last-child(1) {
+  margin-right: 0px;
+}
+
 html,
 body {
   background-color: white;
@@ -34,13 +42,61 @@ body {
 
 #header {
   position: absolute;
-  display: block;
-  top: 10px;
-  border-radius: 8px;
   z-index: 1;
-  background-color: rgba(255, 255, 255, 0.7);
+  width: 800px;
+  top: 10px;
+}
+
+#header_nav {
+  display: inline-block;
+  position:relative;
+  background-color: rgba(255, 255, 255, 0.8);
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 8px;
   padding: 10px;
+  top: -30px;
+}
+
+#header_atc {
+  display: inline-block;
+  position: relative;
+  left: 30px;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 8px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#audioControl_CurrentFeedName {
+  font-size: 20px;
+  margin-left: 15px;
+  position: relative;
+  top: 5px;
+}
+
+#audioControl_CurrentFeedStatus {
+  font-size: 42px;
+  line-height: 8px;
+  margin-left: 15px;
+  position: relative;
+  top: 5px;
+}
+
+#audioControl_CurrentFeedStatusText {
+  margin-left: 5px;
+  line-height: 8px;
+  font-size: 12px;
+  position: relative;
+  top: -5px;
+}
+
+#audioControl_CurrentFeedTimeFormatting {
+  margin-left: 3px;
+  line-height: 8px;
+  font-size: 12px;
+  position: relative;
+  top: -5px;
 }
 
 #main_tab {
@@ -103,4 +159,4 @@ body {
 	top: 50%;
 	text-align: center;
 	transform: translate(-50%, -50%);
-}
\ No newline at end of file
+}

From 4700cbbd37c588e0814df0641c1830e433a266d3 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Sun, 28 Jan 2024 05:34:56 +0000
Subject: [PATCH 02/11] WIP: Add prelim ATC support, pulls from and lists state
 data. TODO: Add airports and feed info

---
 simplepwa/index.html |  17 ++++--
 simplepwa/main.js    |  84 +++++++++++++++++++++++++++++
 simplepwa/style.css  | 124 ++++++++++++++++++++++++++++---------------
 3 files changed, 180 insertions(+), 45 deletions(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index d6bacf1..ef44e8a 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -40,7 +40,18 @@
     <script defer src="./main.js"></script>
   </head>
   <body onload="onload()">
-	<div id="loading">
+  <div id="sidebar">
+    <i class="material-icons" style="font-size: 30px;margin: 15px;">arrow_back_ios_new</i>
+    <span style="font-size:30px;font-weight: bold;margin: 15px;">Aircraft Radio</span>
+    <span style="font-size: 15px;margin: auto;">Powered By LiveATC</span>
+    <hr>
+    <div id="ATC_Data">
+      <ul class="mdl-list" id="ATC_Data_List">
+        
+      </ul>
+    </div>
+  </div>
+	<div id="loading" style="display: none">
 		<img id="loading_icon" src="images/loading.gif">
 		<br>Connecting to Aviation Assistant<br>Please Wait.
 	</div>
@@ -51,7 +62,7 @@
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="liveATC()">LiveATC</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
             </div>
-            <div id="header_atc">
+            <div id="header_atc" style="visibility: hidden">
              <table>
               <tr>
                 <td> 
@@ -68,7 +79,7 @@
             </div>
     </div>
     <div id="main_tab" style="display: none">
-      <iframe src="http://aa.local/tar1090"></iframe>
+      <!-- <iframe src="http://aa.local/tar1090"></iframe> -->
     </div>
     <div id="settings" style="display: none">
       <h2>Settings</h2>
diff --git a/simplepwa/main.js b/simplepwa/main.js
index 2de0fbf..da16142 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -1,3 +1,57 @@
+ATC_AIRPORTS = {}
+var usStates = {
+    'Alabama': 'AL',
+    'Alaska': 'AK',
+    'Arizona': 'AZ',
+    'Arkansas': 'AR',
+    'California': 'CA',
+    'Colorado': 'CO',
+    'Connecticut': 'CT',
+    'Delaware': 'DE',
+    'Florida': 'FL',
+    'Georgia': 'GA',
+    'Hawaii': 'HI',
+    'Idaho': 'ID',
+    'Illinois': 'IL',
+    'Indiana': 'IN',
+    'Iowa': 'IA',
+    'Kansas': 'KS',
+    'Kentucky': 'KY',
+    'Louisiana': 'LA',
+    'Maine': 'ME',
+    'Maryland': 'MD',
+    'Massachusetts': 'MA',
+    'Michigan': 'MI',
+    'Minnesota': 'MN',
+    'Mississippi': 'MS',
+    'Missouri': 'MO',
+    'Montana': 'MT',
+    'Nebraska': 'NE',
+    'Nevada': 'NV',
+    'New Hampshire': 'NH',
+    'New Jersey': 'NJ',
+    'New Mexico': 'NM',
+    'New York': 'NY',
+    'North Carolina': 'NC',
+    'North Dakota': 'ND',
+    'Ohio': 'OH',
+    'Oklahoma': 'OK',
+    'Oregon': 'OR',
+    'Pennsylvania': 'PA',
+    'Rhode Island': 'RI',
+    'South Carolina': 'SC',
+    'South Dakota': 'SD',
+    'Tennessee': 'TN',
+    'Texas': 'TX',
+    'Utah': 'UT',
+    'Vermont': 'VT',
+    'Virginia': 'VA',
+    'Washington': 'WA',
+    'West Virginia': 'WV',
+    'Wisconsin': 'WI',
+    'Wyoming': 'WY'
+  };
+
 function main() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("settings").style.display = "none";
@@ -14,6 +68,7 @@ function onload() {
     document.getElementById("loading").style.display = "none"
     document.getElementById("header").style.display = "block"
     document.getElementById("main_tab").style.display = "block"
+    liveATCPreload()
     /*var xhr = new XMLHttpRequest();
     xhr.open("GET", "http://aa.local:5000/alive", true);
     xhr.setRequestHeader('Content-Type', 'application/json');
@@ -85,4 +140,33 @@ function screenMessage(text) {
       var snackbarContainer = document.querySelector('#toasts');
       var data = {message: text};
       snackbarContainer.MaterialSnackbar.showSnackbar(data);
+}
+
+function liveATCPreload() {
+    xhr = new XMLHttpRequest();
+    xhr.open("GET", "https://server1.nicholaspease.com/reports/liveatc.json", true);
+   
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status != 0) {
+          ATC_AIRPORTS = JSON.parse(xhr.response)
+          selectState()
+        } 
+    }
+    xhr.send();
+}
+
+function selectState() {
+    for (state in ATC_AIRPORTS) {
+        node = document.createElement("div")
+        numOfFeeds = 0
+        numofAirports = 0
+        for (i in ATC_AIRPORTS[state].airports) {
+            numofAirports++
+            for (j in ATC_AIRPORTS[state].airports[i])
+                for (k in ATC_AIRPORTS[state].airports[i].feeds)
+                    numOfFeeds++
+        }
+        node.innerHTML = '<li class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+usStates[state]+'</span><span style="font-size: 24px">'+state+'</span><span class="mdl-list__item-sub-title">'+numofAirports+' Airports,<span style="margin-left: 5px;">'+numOfFeeds+' Feeds</span></span></span></li>'
+        document.getElementById("ATC_Data_List").appendChild(node)
+    }
 }
\ No newline at end of file
diff --git a/simplepwa/style.css b/simplepwa/style.css
index 934f98f..0945369 100644
--- a/simplepwa/style.css
+++ b/simplepwa/style.css
@@ -57,48 +57,6 @@ body {
   top: -30px;
 }
 
-#header_atc {
-  display: inline-block;
-  position: relative;
-  left: 30px;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-  border-radius: 8px;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-#audioControl_CurrentFeedName {
-  font-size: 20px;
-  margin-left: 15px;
-  position: relative;
-  top: 5px;
-}
-
-#audioControl_CurrentFeedStatus {
-  font-size: 42px;
-  line-height: 8px;
-  margin-left: 15px;
-  position: relative;
-  top: 5px;
-}
-
-#audioControl_CurrentFeedStatusText {
-  margin-left: 5px;
-  line-height: 8px;
-  font-size: 12px;
-  position: relative;
-  top: -5px;
-}
-
-#audioControl_CurrentFeedTimeFormatting {
-  margin-left: 3px;
-  line-height: 8px;
-  font-size: 12px;
-  position: relative;
-  top: -5px;
-}
-
 #main_tab {
   height: 100%;
 }
@@ -160,3 +118,85 @@ body {
 	text-align: center;
 	transform: translate(-50%, -50%);
 }
+
+/* ATC DATA */
+#header_atc {
+  display: inline-block;
+  position: relative;
+  left: 30px;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 8px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#audioControl_CurrentFeedName {
+  font-size: 20px;
+  margin-left: 15px;
+  position: relative;
+  top: 5px;
+}
+
+#audioControl_CurrentFeedStatus {
+  font-size: 42px;
+  line-height: 8px;
+  margin-left: 15px;
+  position: relative;
+  top: 5px;
+}
+
+#audioControl_CurrentFeedStatusText {
+  margin-left: 5px;
+  line-height: 8px;
+  font-size: 12px;
+  position: relative;
+  top: -5px;
+}
+
+#audioControl_CurrentFeedTimeFormatting {
+  margin-left: 3px;
+  line-height: 8px;
+  font-size: 12px;
+  position: relative;
+  top: -5px;
+}
+
+#sidebar {
+  position: absolute;
+  top: 15px;
+  left: calc(100% - 475px);
+  height: calc(100% - 30px);
+  width: 450px;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 8px;
+  line-height: 30px;
+}
+
+.ATC_State {
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 8px;
+  width: 90px;
+  margin: 15px;
+  text-align: center;
+  padding: 10px;
+  display: inline-block;
+}
+
+.ATC_State_Name {
+  font-size: 26px;
+}
+
+#ATC_Data {
+    overflow: auto;
+    max-height: 100%;
+    height: calc(100% - 100px);
+}
+
+#ATC_Data_List {
+  margin-top: 0px;
+  padding-top: 0px;
+  height: 100%;
+}
\ No newline at end of file

From af27889f654881bb214be82f13cd3e794a69490c Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 02:53:01 +0000
Subject: [PATCH 03/11] Selection Complete, TODO: Refine UI

---
 simplepwa/index.html | 19 ++++++----
 simplepwa/main.js    | 84 +++++++++++++++++++++++++++++++++++++++++---
 simplepwa/style.css  | 22 ++++++++++--
 3 files changed, 113 insertions(+), 12 deletions(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index ef44e8a..fd46244 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -41,9 +41,13 @@
   </head>
   <body onload="onload()">
   <div id="sidebar">
-    <i class="material-icons" style="font-size: 30px;margin: 15px;">arrow_back_ios_new</i>
-    <span style="font-size:30px;font-weight: bold;margin: 15px;">Aircraft Radio</span>
-    <span style="font-size: 15px;margin: auto;">Powered By LiveATC</span>
+    <div>
+      <i class="material-icons" style="font-size: 30px;margin: 15px;">arrow_back_ios_new</i>
+      <span style="font-size:30px;font-weight: bold;margin: 15px;">Aircraft Radio</span>
+      <span style="font-size: 14px;margin: auto;">Powered By LiveATC</span>
+    </div>
+    <div id="ATC_State_Information"></div>
+    <div id="ATC_Airport_Information"></div>
     <hr>
     <div id="ATC_Data">
       <ul class="mdl-list" id="ATC_Data_List">
@@ -62,7 +66,7 @@
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="liveATC()">LiveATC</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
             </div>
-            <div id="header_atc" style="visibility: hidden">
+            <div id="header_atc" style="">
              <table>
               <tr>
                 <td> 
@@ -71,8 +75,11 @@
                   </button>
                 </td>
                 <td>
-                  <span id="audioControl_CurrentFeedName">KBGR - ATIS</span><br>
-                  <span id="audioControl_CurrentFeedStatus" style="color:green;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
+                  <span id="audioControl_CurrentFeedName"></span><br>
+                  <span id="audioControl_CurrentFeedStatus" style="color:red;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
+                  <audio id="player">
+                    <source type="audio/mpeg">
+                  </audio>
                 </td>
               </tr>
              </table>
diff --git a/simplepwa/main.js b/simplepwa/main.js
index da16142..b34d32b 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -142,6 +142,24 @@ function screenMessage(text) {
       snackbarContainer.MaterialSnackbar.showSnackbar(data);
 }
 
+function HHMMSS(time) {
+    var sec_num = parseInt(time, 10); // don't forget the second param
+    var hours = Math.floor(sec_num / 3600);
+    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
+    var seconds = sec_num - (hours * 3600) - (minutes * 60);
+
+    if (hours < 10) {
+        hours = "0" + hours;
+    }
+    if (minutes < 10) {
+        minutes = "0" + minutes;
+    }
+    if (seconds < 10) {
+        seconds = "0" + seconds;
+    }
+    return hours + ':' + minutes + ':' + seconds;
+}
+
 function liveATCPreload() {
     xhr = new XMLHttpRequest();
     xhr.open("GET", "https://server1.nicholaspease.com/reports/liveatc.json", true);
@@ -149,13 +167,17 @@ function liveATCPreload() {
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status != 0) {
           ATC_AIRPORTS = JSON.parse(xhr.response)
-          selectState()
+          listState()
         } 
     }
     xhr.send();
 }
 
-function selectState() {
+function listState() {
+    document.getElementById("ATC_Data_List").innerHTML = ""
+    document.getElementById("ATC_State_Information").setAttribute("onclick","")
+    document.getElementById("ATC_State_Information").style.display = "none"
+    document.getElementById("ATC_Airport_Information").style.display = "none"
     for (state in ATC_AIRPORTS) {
         node = document.createElement("div")
         numOfFeeds = 0
@@ -166,7 +188,61 @@ function selectState() {
                 for (k in ATC_AIRPORTS[state].airports[i].feeds)
                     numOfFeeds++
         }
-        node.innerHTML = '<li class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+usStates[state]+'</span><span style="font-size: 24px">'+state+'</span><span class="mdl-list__item-sub-title">'+numofAirports+' Airports,<span style="margin-left: 5px;">'+numOfFeeds+' Feeds</span></span></span></li>'
+        node.innerHTML = '<li onclick="selectState(\''+state+'\')" class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+usStates[state]+'</span><span style="font-size: 24px">'+state+'</span><span class="mdl-list__item-sub-title">'+numofAirports+' Airports,<span style="margin-left: 5px;">'+numOfFeeds+' Feeds</span></span></span></li>'
         document.getElementById("ATC_Data_List").appendChild(node)
     }
-}
\ No newline at end of file
+}
+
+function truncate(str, n){
+    return (str.length > n) ? str.slice(0, n-1) + '&hellip;' : str;
+  };
+
+function selectState(state) {
+    document.getElementById("ATC_State_Information").style.display = "block"
+    document.getElementById("ATC_Airport_Information").style.display = "none"
+    document.getElementById("ATC_State_Information").setAttribute("onclick","listState()")
+    document.getElementById("ATC_State_Information").innerHTML = '<span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+usStates[state]+'</span><span style="font-size: 24px">'+state+'</span>'
+    document.getElementById("ATC_Data_List").innerHTML = ""
+    for (airport in ATC_AIRPORTS[state].airports) {
+        node = document.createElement("div")
+        feeds = 0
+        for (i in ATC_AIRPORTS[state].airports[airport].feeds)
+            feeds++
+        node.innerHTML = '<li onclick="selectAirport(\''+state+'\',\''+airport+'\')" class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+airport+'</span><span style="font-size: 18px;text-overflow: ellipse;white-space: nowrap;overflow:hidden">'+truncate(ATC_AIRPORTS[state].airports[airport].name,30)+'</span><span class="mdl-list__item-sub-title">'+feeds+' Feeds</span></span></li>'
+        document.getElementById("ATC_Data_List").appendChild(node)
+    }
+}
+
+function selectAirport(state,airport) {
+    document.getElementById("ATC_State_Information").style.display = "block"
+    document.getElementById("ATC_Airport_Information").style.display = "block"
+    document.getElementById("ATC_Airport_Information").setAttribute("onclick","selectState('"+state+"')")
+    document.getElementById("ATC_Data_List").innerHTML = ""
+    document.getElementById("ATC_Airport_Information").innerHTML = '<span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+airport+'</span><span style="font-size: 18px;text-overflow: ellipse;white-space: nowrap;overflow:hidden">'+truncate(ATC_AIRPORTS[state].airports[airport].name,30)+'</span>'
+    for (feed in ATC_AIRPORTS[state].airports[airport].feeds) {
+        node = document.createElement("div")
+        node.innerHTML = '<li onclick="selectFeed(\''+state+'\',\''+airport+'\',\''+feed+'\')" class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 26px;text-overflow: ellipse;white-space: nowrap;overflow:hidden">'+truncate(ATC_AIRPORTS[state].airports[airport].feeds[feed].name,30)+'</span><span class="mdl-list__item-sub-title">'+ATC_AIRPORTS[state].airports[airport].location+'</span></span></span></li>'
+        document.getElementById("ATC_Data_List").appendChild(node)
+    }
+}
+
+function selectFeed(state,airport,feed) {
+    feed = ATC_AIRPORTS[state].airports[airport].feeds[feed]
+    re = /\/[^/]*\/([^.]*)/
+    console.log(re.exec(feed.url)[1]) //http://d.liveatc.net/
+    document.getElementById("player").setAttribute("src", "http://d.liveatc.net/"+re.exec(feed.url)[1])
+    document.getElementById("player").play()
+    document.getElementById("audioControl_CurrentFeedName").innerHTML = feed.name
+    window.setInterval(function () {
+        if (document.getElementById("player").readyState === 3 || document.getElementById("player").readyState === 4) {
+            document.getElementById("audioControl_CurrentFeedStatus").style.color = "green"
+            document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Connected"
+        } else {
+            document.getElementById("audioControl_CurrentFeedStatus").style.color = "red"
+            document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Disconnected"
+        }
+        var time = document.getElementById("player").currentTime
+        document.getElementById("audioControl_CurrentFeedTime").innerHTML = HHMMSS(time)
+    }, 1000)
+}
+
diff --git a/simplepwa/style.css b/simplepwa/style.css
index 0945369..84ec28b 100644
--- a/simplepwa/style.css
+++ b/simplepwa/style.css
@@ -172,6 +172,8 @@ body {
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: 8px;
   line-height: 30px;
+  display: flex;
+  flex-direction: column;
 }
 
 .ATC_State {
@@ -192,11 +194,27 @@ body {
 #ATC_Data {
     overflow: auto;
     max-height: 100%;
-    height: calc(100% - 100px);
+    height: 100%;
+}
+
+#ATC_Data > ul {
+  height: calc(100%);
 }
 
 #ATC_Data_List {
   margin-top: 0px;
   padding-top: 0px;
-  height: 100%;
+  width: 100%;
+}
+
+#ATC_State_Information {
+  margin: 10px 0px 0px 10px;
+}
+
+#ATC_Airport_Information {
+  margin: 10px 10px 0px 10px;
+}
+
+#player {
+  display: none;
 }
\ No newline at end of file

From 4198153c8d30519876f2985db8239d826d2f46b6 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 05:15:44 +0000
Subject: [PATCH 04/11] ATC UI Complete, TODO: WEB/LOCAL Modes on Web Server

---
 simplepwa/index.html | 14 +++++++-------
 simplepwa/main.js    | 29 ++++++++++++++++++++++++++---
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index fd46244..885c3aa 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -40,9 +40,9 @@
     <script defer src="./main.js"></script>
   </head>
   <body onload="onload()">
-  <div id="sidebar">
+  <div id="sidebar" style="display: none">
     <div>
-      <i class="material-icons" style="font-size: 30px;margin: 15px;">arrow_back_ios_new</i>
+      <span onclick="main()"><i class="material-icons" style="font-size: 30px;margin: 15px;" onmouseup="main()">arrow_back_ios_new</i></span>
       <span style="font-size:30px;font-weight: bold;margin: 15px;">Aircraft Radio</span>
       <span style="font-size: 14px;margin: auto;">Powered By LiveATC</span>
     </div>
@@ -63,19 +63,19 @@
             <div id="header_nav">
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="liveATC()">LiveATC</button>
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="ATC()">LiveATC</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
             </div>
-            <div id="header_atc" style="">
+            <div id="header_atc">
              <table>
               <tr>
                 <td> 
-                  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
-                    <i class="material-icons">pause</i>
+                  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" id="ATC_Pause_Play" onmouseup="pausePlay()">
+                    <i class="material-icons" id="ATC_Pause_Play_Icon">stop</i>
                   </button>
                 </td>
                 <td>
-                  <span id="audioControl_CurrentFeedName"></span><br>
+                  <span id="audioControl_CurrentFeedName">No Feed Loaded</span><br>
                   <span id="audioControl_CurrentFeedStatus" style="color:red;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
                   <audio id="player">
                     <source type="audio/mpeg">
diff --git a/simplepwa/main.js b/simplepwa/main.js
index b34d32b..8ad82d2 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -55,15 +55,24 @@ var usStates = {
 function main() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("settings").style.display = "none";
+    document.getElementById("sidebar").style.display = "none";
     document.getElementById("header").style.left = "210px"
 }
 
 function settings() {
     document.getElementById("main_tab").style.display = "none";
     document.getElementById("settings").style.display = "block";
+    document.getElementById("sidebar").style.display = "none";
     document.getElementById("header").style.left = "2%"
 }
 
+function ATC() {
+    document.getElementById("main_tab").style.display = "block";
+    document.getElementById("sidebar").style.display = "flex";
+    document.getElementById("settings").style.display = "none";
+    document.getElementById("header").style.left = "10px"
+}
+
 function onload() {
     document.getElementById("loading").style.display = "none"
     document.getElementById("header").style.display = "block"
@@ -211,6 +220,7 @@ function selectState(state) {
         node.innerHTML = '<li onclick="selectAirport(\''+state+'\',\''+airport+'\')" class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 40px;font-weight:100;width:40px;height:40px;margin-right: 30px;">'+airport+'</span><span style="font-size: 18px;text-overflow: ellipse;white-space: nowrap;overflow:hidden">'+truncate(ATC_AIRPORTS[state].airports[airport].name,30)+'</span><span class="mdl-list__item-sub-title">'+feeds+' Feeds</span></span></li>'
         document.getElementById("ATC_Data_List").appendChild(node)
     }
+    document.getElementById("ATC_Data").scrollTop = 0;
 }
 
 function selectAirport(state,airport) {
@@ -224,6 +234,7 @@ function selectAirport(state,airport) {
         node.innerHTML = '<li onclick="selectFeed(\''+state+'\',\''+airport+'\',\''+feed+'\')" class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><span style="font-size: 26px;text-overflow: ellipse;white-space: nowrap;overflow:hidden">'+truncate(ATC_AIRPORTS[state].airports[airport].feeds[feed].name,30)+'</span><span class="mdl-list__item-sub-title">'+ATC_AIRPORTS[state].airports[airport].location+'</span></span></span></li>'
         document.getElementById("ATC_Data_List").appendChild(node)
     }
+    document.getElementById("ATC_Data").scrollTop = 0;
 }
 
 function selectFeed(state,airport,feed) {
@@ -233,16 +244,28 @@ function selectFeed(state,airport,feed) {
     document.getElementById("player").setAttribute("src", "http://d.liveatc.net/"+re.exec(feed.url)[1])
     document.getElementById("player").play()
     document.getElementById("audioControl_CurrentFeedName").innerHTML = feed.name
+    document.getElementById("audioControl_CurrentFeedStatus").style.color = "orange"
+    document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Connecting"
+    document.getElementById("ATC_Pause_Play_Icon").innerHTML = "pause"
     window.setInterval(function () {
         if (document.getElementById("player").readyState === 3 || document.getElementById("player").readyState === 4) {
             document.getElementById("audioControl_CurrentFeedStatus").style.color = "green"
             document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Connected"
         } else {
-            document.getElementById("audioControl_CurrentFeedStatus").style.color = "red"
-            document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Disconnected"
+            document.getElementById("audioControl_CurrentFeedStatus").style.color = "orange"
+            document.getElementById("audioControl_CurrentFeedStatusText").innerHTML = "Connecting"
         }
         var time = document.getElementById("player").currentTime
         document.getElementById("audioControl_CurrentFeedTime").innerHTML = HHMMSS(time)
-    }, 1000)
+    }, 500)
 }
 
+function pausePlay() {
+    if (document.getElementById("ATC_Pause_Play_Icon").innerHTML == "pause") {
+        document.getElementById("player").pause()
+        document.getElementById("ATC_Pause_Play_Icon").innerHTML = "play_arrow"
+    } else if (document.getElementById("ATC_Pause_Play_Icon").innerHTML == "play_arrow") {
+        document.getElementById("player").play()
+        document.getElementById("ATC_Pause_Play_Icon").innerHTML = "pause"
+    }
+}
\ No newline at end of file

From 9b2d443055612ae47b27d1176f1ebfd2e9caf3b0 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 05:29:42 +0000
Subject: [PATCH 05/11] Fixes for iPad

---
 simplepwa/index.html | 2 +-
 simplepwa/main.js    | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index 885c3aa..5d0dc5c 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -63,7 +63,7 @@
             <div id="header_nav">
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="ATC()">LiveATC</button>
+              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="ATC()" id="ATC_Button">LiveATC</button>
               <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
             </div>
             <div id="header_atc">
diff --git a/simplepwa/main.js b/simplepwa/main.js
index 8ad82d2..f5bedcf 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -56,6 +56,8 @@ function main() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("settings").style.display = "none";
     document.getElementById("sidebar").style.display = "none";
+    document.getElementById("header_atc").style.display = "block";
+    document.getElementById("ATC_Button").style.display = "block";
     document.getElementById("header").style.left = "210px"
 }
 
@@ -63,13 +65,17 @@ function settings() {
     document.getElementById("main_tab").style.display = "none";
     document.getElementById("settings").style.display = "block";
     document.getElementById("sidebar").style.display = "none";
+    document.getElementById("header_atc").style.display = "none";
+    document.getElementById("ATC_Button").style.display = "block";
     document.getElementById("header").style.left = "2%"
 }
 
 function ATC() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("sidebar").style.display = "flex";
+    document.getElementById("ATC_Button").style.display = "none";
     document.getElementById("settings").style.display = "none";
+    document.getElementById("header_atc").style.display = "block";
     document.getElementById("header").style.left = "10px"
 }
 

From de60122e0a06cda7b98eeda748aadbf7a51360c4 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 05:31:36 +0000
Subject: [PATCH 06/11] Visibility Fix

---
 simplepwa/main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/simplepwa/main.js b/simplepwa/main.js
index f5bedcf..2b61e5e 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -57,7 +57,7 @@ function main() {
     document.getElementById("settings").style.display = "none";
     document.getElementById("sidebar").style.display = "none";
     document.getElementById("header_atc").style.display = "block";
-    document.getElementById("ATC_Button").style.display = "block";
+    document.getElementById("ATC_Button").style.visibility = "hidden";
     document.getElementById("header").style.left = "210px"
 }
 
@@ -66,7 +66,7 @@ function settings() {
     document.getElementById("settings").style.display = "block";
     document.getElementById("sidebar").style.display = "none";
     document.getElementById("header_atc").style.display = "none";
-    document.getElementById("ATC_Button").style.display = "block";
+    document.getElementById("ATC_Button").style.visibility = "hidden";
     document.getElementById("header").style.left = "2%"
 }
 
@@ -75,7 +75,7 @@ function ATC() {
     document.getElementById("sidebar").style.display = "flex";
     document.getElementById("ATC_Button").style.display = "none";
     document.getElementById("settings").style.display = "none";
-    document.getElementById("header_atc").style.display = "block";
+    document.getElementById("header_atc").style.visibility = "hidden";
     document.getElementById("header").style.left = "10px"
 }
 

From d35d017f881223ecbe3b6c2a1e9f2f8b9390edc6 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 05:34:12 +0000
Subject: [PATCH 07/11] Wrong ID Used

---
 simplepwa/main.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/simplepwa/main.js b/simplepwa/main.js
index 2b61e5e..0f62747 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -57,7 +57,7 @@ function main() {
     document.getElementById("settings").style.display = "none";
     document.getElementById("sidebar").style.display = "none";
     document.getElementById("header_atc").style.display = "block";
-    document.getElementById("ATC_Button").style.visibility = "hidden";
+    document.getElementById("ATC_Button").style.visibility = "visible";
     document.getElementById("header").style.left = "210px"
 }
 
@@ -66,16 +66,16 @@ function settings() {
     document.getElementById("settings").style.display = "block";
     document.getElementById("sidebar").style.display = "none";
     document.getElementById("header_atc").style.display = "none";
-    document.getElementById("ATC_Button").style.visibility = "hidden";
+    document.getElementById("ATC_Button").style.visibility = "visible";
     document.getElementById("header").style.left = "2%"
 }
 
 function ATC() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("sidebar").style.display = "flex";
-    document.getElementById("ATC_Button").style.display = "none";
+    document.getElementById("ATC_Button").style.visibility = "hidden";
     document.getElementById("settings").style.display = "none";
-    document.getElementById("header_atc").style.visibility = "hidden";
+    document.getElementById("header_atc").style.display = "block";
     document.getElementById("header").style.left = "10px"
 }
 

From 8aefa1bda141e32e6e8fb25e820482b09b5ad0b5 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 29 Jan 2024 05:42:04 +0000
Subject: [PATCH 08/11] Visibility Fix

---
 simplepwa/main.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/simplepwa/main.js b/simplepwa/main.js
index 0f62747..c8b63be 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -56,8 +56,8 @@ function main() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("settings").style.display = "none";
     document.getElementById("sidebar").style.display = "none";
-    document.getElementById("header_atc").style.display = "block";
-    document.getElementById("ATC_Button").style.visibility = "visible";
+    document.getElementById("header_atc").style.visibility = "visible";
+    document.getElementById("ATC_Button").style.display = "inline-block";
     document.getElementById("header").style.left = "210px"
 }
 
@@ -65,17 +65,17 @@ function settings() {
     document.getElementById("main_tab").style.display = "none";
     document.getElementById("settings").style.display = "block";
     document.getElementById("sidebar").style.display = "none";
-    document.getElementById("header_atc").style.display = "none";
-    document.getElementById("ATC_Button").style.visibility = "visible";
+    document.getElementById("header_atc").style.visibility = "hidden";
+    document.getElementById("ATC_Button").style.display = "inline-block";
     document.getElementById("header").style.left = "2%"
 }
 
 function ATC() {
     document.getElementById("main_tab").style.display = "block";
     document.getElementById("sidebar").style.display = "flex";
-    document.getElementById("ATC_Button").style.visibility = "hidden";
+    document.getElementById("ATC_Button").style.display = "none";
     document.getElementById("settings").style.display = "none";
-    document.getElementById("header_atc").style.display = "block";
+    document.getElementById("header_atc").style.visibility = "visible";
     document.getElementById("header").style.left = "10px"
 }
 

From 2aacea3d681b527d37f7764bc99faafdf42b40fc Mon Sep 17 00:00:00 2001
From: Nicholas Pease <npease@noreply>
Date: Sun, 28 Jan 2024 19:45:09 -1000
Subject: [PATCH 09/11] Uncomment IFrame

---
 simplepwa/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index 5d0dc5c..0a1f787 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -86,7 +86,7 @@
             </div>
     </div>
     <div id="main_tab" style="display: none">
-      <!-- <iframe src="http://aa.local/tar1090"></iframe> -->
+      <iframe src="http://aa.local/tar1090"></iframe>
     </div>
     <div id="settings" style="display: none">
       <h2>Settings</h2>

From dedc8eec26eeff9e9a3b293c1ba7c4fa9f1e6b6a Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Tue, 30 Jan 2024 01:01:42 +0000
Subject: [PATCH 10/11] Reenable Settings Sync

---
 simplepwa/main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/simplepwa/main.js b/simplepwa/main.js
index c8b63be..40fefda 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -84,13 +84,13 @@ function onload() {
     document.getElementById("header").style.display = "block"
     document.getElementById("main_tab").style.display = "block"
     liveATCPreload()
-    /*var xhr = new XMLHttpRequest();
+    var xhr = new XMLHttpRequest();
     xhr.open("GET", "http://aa.local:5000/alive", true);
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status != 0) {
             document.getElementById("loading").style.display = "none"
-            document.getElementById("header").style.display = "block"
+document.getElementById("header").style.display = "block"
             document.getElementById("main_tab").style.display = "block"
             updateSettings()
             setInterval(updateSettings, 10000)
@@ -100,7 +100,7 @@ function onload() {
             }, 1000)
         }
     }
-    xhr.send();  */
+    xhr.send();
 }
 
 function updateSettings() {

From 4a787895ffdf639e875765c7e3b3cd061dbfac26 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Tue, 30 Jan 2024 01:37:03 +0000
Subject: [PATCH 11/11] Fix loading

undefined
---
 simplepwa/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/simplepwa/index.html b/simplepwa/index.html
index 0a1f787..79a18b5 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -55,7 +55,7 @@
       </ul>
     </div>
   </div>
-	<div id="loading" style="display: none">
+	<div id="loading" style="display: bl  ock">
 		<img id="loading_icon" src="images/loading.gif">
 		<br>Connecting to Aviation Assistant<br>Please Wait.
 	</div>