npease/AviationAssistantV2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ATC UI Complete, TODO: WEB/LOCAL Modes on Web Server

Browse Source
This commit is contained in:
Nicholas Pease
2024-01-29 05:15:44 +00:00
parent af27889f65
commit 4198153c8d
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
simplepwa/index.html
+7 -7
View File
@@ -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">
simplepwa/main.js
+26 -3
View File
@@ -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"
}
}