Files
AviationAssistant/gmap.html
T
LAX18 Development 32182ec85d Updates
2021-02-08 13:22:41 -05:00

549 lines
28 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="ol3/ol-3.17.1.css" type="text/css" />
<script src="ol3/ol-3.17.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3/ol3-layerswitcher.css" type="text/css" />
<script src="ol3/ol3-layerswitcher.js" type="text/javascript"></script>
<script type="text/javascript" src="js/luxon.js"></script>
<script type="text/javascript" src="js/flightinfo.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/liveatc.js"></script>
<script type="text/javascript" src="js/avwx.js"></script>
<script type="text/javascript" src="js/markers.js"></script>
<script type="text/javascript" src="js/dbloader.js"></script>
<script type="text/javascript" src="js/registrations.js"></script>
<script type="text/javascript" src="js/planeObject.js"></script>
<script type="text/javascript" src="js/formatter.js"></script>
<script type="text/javascript" src="js/flags.js"></script>
<script type="text/javascript" src="js/layers.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/script2.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<script type="text/javascript" src="js/schedules.js"></script>
<script type="text/javascript" src="js/liveatc.js"></script>
<link rel="stylesheet" href="material/material.min.css">
<script src="material/material.min.js"></script>
<link rel="stylesheet" href="material/font.css">
<title>Aviation Assistant</title>
</head>
<body onload="initialize()" scroll="no">
<div id="loader" class="hidden">
<img src="images/spinny.gif" id="spinny" alt="Loading...">
<progress id="loader_progress"></progress>
</div>
<!--
This is hideous. airframes.org insists on getting a POST with a "submit" value specified,
but if we have an input control with that name then it shadows the submit() function that
we need. So steal the submit function off a different form. Surely there is a better way?!
-->
<form id="horrible_hack" class="hidden">
</form>
<form id="airframes_post" method="POST" action="http://www.airframes.org/" target="_blank" class="hidden">
<input type="hidden" name="reg1" value="">
<input type="hidden" name="selcal" value="">
<input id="airframes_post_icao" type="hidden" name="ica024" value="">
<input type="hidden" name="submit" value="submit">
</form>
<div id="home_page" style="display: none;">
<img src="images/logo.png" class="logo">
<table class="home_table">
<tr>
<td class="pointer" onclick="goRadar()"><img src="images/radar.png"></td>
<td class="pointer" onclick="goItinerary()" id="itinerary_button"><img src="images/itinerary.png"></td>
<td class="pointer" onclick="goGraphs()"><img src="images/graphs.png"></td>
<td class="pointer" onclick="goSettings()"><img src="images/settings.png"></td>
</tr>
</table>
<button class="mdl-button mdl-js-button mdl-button--icon" id="info_button" style="width: 40px; height: 40px; min-width: initial;">
<i class="material-icons md-36" id="info_icon">help_outline</i>
</button>
<div id="info_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close_modal">&times;</span>
<h2>About</h2>
<iframe src="./information.html" width="100%" height="80%" style="border: none"></iframe>
</div>
</div>
</div>
<div id="itinerary_page" style="display: none;">
<div id="nav_bar">
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
<i class="material-icons">home</i>
</button>
<select id="itinerary_states" name="states" onchange="itineraryLoadAirports()">
</select>
<select id="itinerary_airports" name="airports" style="display: none;" onchange="airportSchedule()">
</select> Courtesy of https://flightaware.com/
</div>
<div id="itinerary_body">
<div id="itinerary_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="arrivals" style="display: none;"></div>
<div id="departures" style="display: none;"></div><br>
<div id="sch-arrivals" style="display: none;"></div>
<div id="sch-departures" style="display: none;"></div>
<div id="itinerary_undefined" style="display: none;">
<h2>No Information Available or No Flight Data</h2>
</div>
</div>
</div>
<div id="settings_page" style="display: none;">
<a href="javascript:goHome()"><img src="images/logo.png" class="settingslogo"></a>
<div id="settingstext">
<table>
<tr>
<td>
<h5>Internal Temperature:</h5>
</td>
<td>
<h5><span id="internal_temperature"></span> &#176; F</h5>
</td>
</tr>
<tr>
<td>
<h5>Offline Mode</h5>
</td>
<td><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" onclick="offlineToggle()">
<input type="checkbox" id="switch-1" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="setBrightness('down')">
<i class="material-icons">remove</i>
</button> <span id="brightness-text">Brightness (<span id="brightness_level"></span>)</span>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="setBrightness('up')">
<i class="material-icons">add</i>
</button>
</td>
</tr>
<tr>
<td>
<button class="mdl-button mdl-js-button mdl-button--raised" onclick="sendCMD('update')">
Check For Updates
</button>
</td>
<td>
<button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.close();opener.window.focus();">
Close Application
</button>
</td>
<td>
<button class="mdl-button mdl-js-button mdl-button--raised" id="branch_button" onclick="changeBranch()">
Change Branch to <span id="branch_name">N/A</span>
</button>
</td>
</tr>
</table>
</div>
</div>
<div id="radar_page">
<div id="nav_bar">
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
<i class="material-icons">home</i>
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="openRadar()">
Radar
</button>
<span class="divider"></span>
<!-- Raised button with ripple -->
<button id="metar_button" class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="openMetar()">
METAR
</button>
<!-- Raised button with ripple -->
<button id="liveatc_button" class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="openATC ()">
LiveATC
</button>
<span style="float: right;">
<span class="space-nopad center">
<span id="percentage">N/A</span>
</span>
<span class="space-nopad center">
<span id="battery" class="material-icons" style="font-size: 36px;text-align: center;">N/A</span>
</span>
<span class="space center">
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="volDown()">
<i class="material-icons">remove</i>
</button>
<!-- <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" onclick="toggleOffline()">
<span class="mdl-switch__label">Offline Mode</span>
</label> -->
</span>
<span class="space center">
Volume - <span id="volume_level">N/A</span>%
</span>
<span class="space center">
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="volUp()">
<i class="material-icons">add</i>
</button>
<!-- <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" onclick="toggleOffline()">
<span class="mdl-switch__label">Offline Mode</span>
</label> -->
</span>
<span class="space center">
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="sendCMD('shutdown')">
<i class="material-icons">power_settings_new</i>
</button>
</span>
</span>
</div>
<div id="map_container">
<div id="map_canvas"></div>
</div>
<div id="sidebar_container">
<div id="radar_container">
<div id="sidebar_canvas">
<div id="radar_radar_tab">
<div id="dump1090_infoblock">
<table style="width: 100%">
<tr class="infoblock_heading">
<td>
<b id="infoblock_name">Aircraft Radar</b>
</td>
</tr>
<tr class="infoblock_heading">
<td></td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body dim">
<td>No aircraft selected</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body">
<td>Aircraft (total): <span id="dump1090_total_ac">N/A</span></td>
<td>Messages: <span id="dump1090_message_rate">N/A</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td>(with positions): <span id="dump1090_total_ac_positions">N/A</span></td>
<td>History: <span id="dump1090_total_history">N/A</span> positions</td>
</tr>
</table>
</div>
<!-- dump1090_infoblock -->
<div id="selected_infoblock">
<table style="width: 100%">
<tr class="infoblock_heading">
<td colspan="2">
<b>
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
</b>
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">&#x21D2;</span>
<span id="selected_flag">
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
</span>
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
<span id="selected_icao"></span>
</a>
<span id="selected_registration"></span>
<span id="selected_icaotype"></span>
<span id="selected_emergency"></span>
</span>
</td>
</tr>
<tr id="infoblock_country" class="infoblock_body">
<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
</tr>
<tr class="infoblock_body">
<td>Speed: <span id="selected_speed">n/a</span></td>
<td>RSSI: <span id="selected_rssi">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td>Track: <span id="selected_track">n/a</span></td>
<td>Last seen: <span id="selected_seen">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
</tr>
</table>
</div>
<!-- selected_infoblock -->
<div id="planes_table">
<table id="tableinfo" style="width: 100%">
<thead style="background-color: #BBBBBB; cursor: pointer;">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()">
<!-- column for flag image -->
</td>
<td id="flight" onclick="sortByFlight();">Flight</td>
<td id="squawk" onclick="sortBySquawk();" style="text-align: right">Squawk</td>
<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude</td>
<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed</td>
<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance</td>
<td id="track" onclick="sortByTrack();" style="text-align: right">Track</td>
<td id="msgs" onclick="sortByMsgs();" style="text-align: right">Msgs</td>
<td id="seen" onclick="sortBySeen();" style="text-align: right">Age</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td>ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
</tr>
</tbody>
</table>
</div>
<!-- planes_table -->
</div>
<div id="radar_flight_tab" style="display: none;">
<div id="radar_flight_info" style="display: none;"><br>
<span id="flight_airline" style="font-size: 28px;">Example Airline</span><span id="flight_flightnum" style="font-size: 28px;">Number</span><span style="font-size: 28px;">&nbsp;(<span id="flight_flighticaonum"></span>)</span>
<br><br>
<i><span id="flight_status" style="font-size: 20px;">En Route</span></i><br><br>
<table style="width: 100%">
<tr>
<td style="text-align: left">
<span id="flight_airport_short_origin" style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_origin" style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_origin" style="font-size: 14px;">N/A</span>
</td>
<td style="text-align: right">
<span id="flight_airport_short_destination" style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_destination" style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_destination" style="font-size: 14px;">N/A</span>
</td>
</tr>
</table><br>
<div id="flight_progress" class="mdl-progress mdl-js-progress"></div><br>
<table style="width: 100%">
<tr>
<td style="text-align: left;" id="flight_depart_time" style="font-size: 10px;width: 50%;">
Depart Time
</td>
<td style="text-align: right;" id="flight_arrival_time" style="font-size: 10px;width: 50%;">
Arrival Time
</td>
</tr>
<tr>
<td style="text-align: left;" style="font-size: 10px;">
Transit Time:<br><span id="flight_transit_time"></span>
</td>
<td style="text-align: right;" style="font-size: 10px;">
Time Remaining:<br><span id="flight_remaining_time"></span>
</td>
</tr>
</table>
</div>
<div id="radar_flight_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div id="radar_aircraft_tab" style="display: none;">
<img src="" id="aircraft_image"><br><br>
<span style="font-size: 30px;"><span id="aircraft_name"></span> (<span id="aircraft_modelcode"></span>)</span><br><br>
<table style="width: 100%">
<tr>
<td style="text-align: center" id="aircraft_engine"></td>
<td style="text-align: center" id="aircraft_engine_count"></td>
<td style="text-align: center" id="aircraft_status"></td>
</tr>
<tr>
<th style="text-align: center">Engine Type</th>
<th style="text-align: center">Engine Count</th>
<th style="text-align: center">Plane Status</th>
</tr>
</table>
</div>
</div>
<div id="subtab_buttons">
<button class="mdl-button mdl-js-button mdl-button--raised" id="radar_radar_tab_button" onclick="radarRadarTabSwitch()">
Radar
</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="radar_flight_tab_button" onclick="radarFlightTabSwitch()">
Flight
</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="radar_aircraft_tab_button" onclick="radarAircraftTabSwitch()">
Aircraft
</button>
</div>
</div>
<div id="metar_container" style="display: none">
<div id="metar_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="metar_data" style="display: none">
<h5>Local METAR Reporting Station:</h5>
<h3 id="station_id"></h3>
<h5 id="station_name"></h5>
<h6 id="full_metar"><br><br><span id="updated_time"></span></h6>
<table style="width: 100%">
<tbody>
<tr>
<td style="text-align: center">
<h4><span id="temperature"></span> &#8457</h4>
Temperature
</td>
<td style="text-align: center">
<h4 id="altimeter"></h4>
Altimeter
</td>
<td style="text-align: center">
<h4 id="visibility"></h4>
Visibility
</td>
</tr>
<tr>
<td style="text-align: center">
<h4 id="wind_speed"></h4>
Wind Speed
</td>
<td style="text-align: center">
<h4 id="wind_direction"></h4>
Wind Direction
</td>
<td style="text-align: center">
<h4 id="wind_gusts"></h4>
Wind Gusts
</td>
</tr>
<tr>
<td style="text-align: center">
<h4><span id="dew_point"></span> &#8457</h4>
Dew Point
</td>
<td style="text-align: center">
<h4 id="rules"></h4>
Flight Rules
</td>
<td style="text-align: center">
<h4 id="size"></h4>
Airport Size
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="atc_container" style="display: none">
<div id="atc_radio">
<h4 id="atc_title">No feed selected</h4>
<audio id="player" controls>
<source type="audio/mpeg">
</audio>
<hr>
</div>
<div id="atc_selector">
</div>
</div>
</div>
<!-- sidebar_container -->
<div id="SpecialSquawkWarning" class="hidden">
<b>Squawk 7x00 is reported and shown.</b><br> This is most likely an error in receiving or decoding.<br> Please do not call the local authorities, they already know about it if it is a valid squawk.
</div>
<div id="update_error" class="hidden">
<b>Problem fetching data from dump1090.</b><br>
<span id="update_error_detail"></span><br> The displayed map data will be out of date.
</div>
<div id="container_splitter"></div>
</div>
<div id="graphs_page" style="display: none;height: 100%;">
<div id="nav_bar">
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
<i class="material-icons">home</i>
</button>
<select id="graphs_time" name="Times" onchange="changeGraphsTime()">
<option value="2h">2 Hours</option>
<option value="8h">8 Hours</option>
<option value="24h">1 Day</option>
<option value="7d">1 Week</option>
<option value="14d">2 Weeks</option>
<option value="30d">1 Month</option>
<option value="90d">3 Months</option>
<option value="180d">6 Months</option>
<option value="365d">1 Year</option>
<option value="730d">2 Years</option>
<option value="1095d">3 Years</option>
</select>
</div>
<div id="graphs_body">
<img src="" id="graphs_holder" class="graphs"><br>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_back_graphs" onclick="changeGraph(0)" disabled>
<i class="material-icons">arrow_back_ios</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_forward_graphs" onclick="changeGraph(1)">
<i class="material-icons">arrow_forward_ios</i>
</button>
</div>
</div>
<div id="no-updates-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</body>
</html>