OSM Acars Map

[Ither]

Does anyone know how to write code that will hide the table if no flights exist? Show when they do? It bothers me that I have a table header showing of my column titles below ACARS map and no flights. I don't know JS well enough to build if/else on this (I can't do it in PHP) nor do I quite understand how the ACARS traffic is flowing.

These are from Nabeel's OSM migration files.

ACARSMAP.php

<?php 
/**
 * These are some options for the ACARS map, you can change here
 * 
 * By default, the zoom level and center are ignored, and the map 
 * will try to fit the all the flights in. If you want to manually set
 * the zoom level and center, set "autozoom" to false.
 * 
 * You can use these MapTypeId's:
 * http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
 * 
 * Change the "TERRAIN" to the "Constant" listed there - they are case-sensitive
 * 
 * Also, how to style the acars pilot list table. You can use these style selectors:
 * 
 * table.acarsmap { }
 * table.acarsmap thead { }
 * table.acarsmap tbody { }
 * table.acarsmap tbody tr.even { }
 * table.acarsmap tbody tr.odd { } 
 */
?>
<div id="acarsmap" class="routemap"></div>
<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>
<script src="<?php echo SITE_URL?>/lib/js/acarsmap.js"></script>
<?php
/*	This is the template for the little map bubble which pops up when you click on a flight
	Same principle as above, keep the <%=...%> tags intact. The same variables are available
	to use here as are available above.
*/
?>
<script type="text/html" id="acars_map_bubble">
<table width="250px">
  <tr>
    <td colspan="2"><b>Pilot: </b><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotname%></a></td>
  </tr>
  <tr>
    <td width="125px"><b>Departure: </b><%=flight.depicao%></td>
    <td width="125px"><b>Arrival: </b><%=flight.arricao%></td>
  </tr>
  <tr>
    <td><b>Flight: </b><%=flight.flightnum%></td>
    <td><b>Aircraft: </b><%=flight.aircraftname%></td>
  </tr>
  <tr>
    <td><b>Distance: </b><%=flight.distremaining%> <?php echo Config::Get('UNITS');?></td>
    <td><b>ETE: </b><%=flight.timeremaining%></td>
  </tr>
  <tr>
    <td colspan="2"><b>Status: </b><%=flight.phasedetail%></td>
  </tr>
</table>

</script>

<?php
/*	This is a small template for information about a navpoint popup 
	
	Variables available:
	
	<%=nav.title%>
	<%=nav.name%>
	<%=nav.freq%>
	<%=nav.lat%>
	<%=nav.lng%>
	<%=nav.type%>	2=NDB 3=VOR 4=DME 5=FIX 6=TRACK
 */
?>
<script type="text/html" id="navpoint_bubble">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<strong>Name: </strong><%=nav.title%> (<%=nav.name%>)<br />
<strong>Type: </strong>
<?php	/* Show the type of point */ ?>
<% if(nav.type == 2) { %> NDB <% } %>
<% if(nav.type == 3) { %> VOR <% } %>
<% if(nav.type == 4) { %> DME <% } %>
<% if(nav.type == 5) { %> FIX <% } %>
<% if(nav.type == 6) { %> TRACK <% } %>
<br />
<?php	/* Only show frequency if it's not a 0*/ ?>
<% if(nav.freq != 0) { %>
<strong>Frequency: </strong><%=nav.freq%>
<% } %>
</span>
</script>
<script type="text/javascript">
<?php 
/* These are the settings for the Google map. You can see the
	Google API reference if you want to add more options.
	
	There's two options I've added:
	
	autozoom: This will automatically center in on/zoom 
	  so all your current flights are visible. If false,
	  then the zoom and center you specify will be used instead
	  
	refreshTime: Time, in seconds * 1000 to refresh the map.
	  The default is 10000 (10 seconds)
*/
?>
const opts = {
	render_elem: 'acarsmap',
	provider: '<?php echo Config::Get("MAP_TYPE"); ?>',
	autozoom: false,
	zoom: <?php echo Config::Get('MAP_ZOOM_LEVEL'); ?>,
    center: L.latLng("<?php echo Config::Get('MAP_CENTER_LAT'); ?>", "<?php echo Config::Get('MAP_CENTER_LNG'); ?>"),
    refreshTime: 20000,
	autoClose: false
};

renderAcarsMap(opts);	
</script>
<script type="text/html" id="acars_map_row">
<tr class="<%=flight.trclass%>">
<td height="40"><%=flight.flightnum%></td>
<td class="hidden-xs"><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotname%></a></td>
<td><%=flight.aircraftname%></td>
<td class="hidden-xs"><%=flight.depicao%></td>
<td class="hidden-xs"><%=flight.arricao%></td>
<td class="hidden-xs"><%=flight.phasedetail%></td>
<td class="hidden-xs"><%=flight.alt%> ft</td>
<td class="hidden-xs"><%=flight.gs%> kts</td>
<td><%=flight.distremaining%> <?php echo Config::Get('UNITS');?></td>
<td><%=flight.timeremaining%></td>
</tr>
</script>

Live Flights Table (this is what I call onto dashboard.)

<?php 
/**
 * These are some options for the ACARS map, you can change here
 * 
 * By default, the zoom level and center are ignored, and the map 
 * will try to fit the all the flights in. If you want to manually set
 * the zoom level and center, set "autozoom" to false.
 * 
 * You can use these MapTypeId's:
 * http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
 * 
 * Change the "TERRAIN" to the "Constant" listed there - they are case-sensitive
 * 
 * Also, how to style the acars pilot list table. You can use these style selectors:
 * 
 * table.acarsmap { }
 * table.acarsmap thead { }
 * table.acarsmap tbody { }
 * table.acarsmap tbody tr.even { }
 * table.acarsmap tbody tr.odd { } 
 */
?>
<?php
/* See below for details and columns you can use in this table */
?>

<table border = "0" width="100%" class="acarsmap table table-striped">
<thead>
	<tr height="40">
		<th><b>Flight</b></th>
		<th class="hidden-xs"><b>Pilot</b></th>
		<th><b>Aircraft</b></th>
		<th class="hidden-xs"><b>Departure</b></th>
		<th class="hidden-xs"><b>Arrival</b></th>
		<th class="hidden-xs"><b>Status</b></th>
		<th class="hidden-xs"><b>Altitude</b></th>
		<th class="hidden-xs"><b>Speed</b></th>
		<th><b>Distance</b></th>
		<th><b>ETE</b></th>
	</tr>
</thead>
<tbody id="pilotlist"></tbody>
</table>
<?php
/* This is the template which is used in the table above, for each row. 
	Be careful modifying it. You can simply add/remove columns, combine 
	columns too. Keep each "section" (<%=...%>) intact
	
	Variables you can use (what they are is pretty obvious)
	
	Variable:							Notes:
	<%=flight.pilotid%>
	<%=flight.firstname%>
	<%=flight.lastname%>
	<%=flight.pilotname%>				First and last combined
	<%=flight.flightnum%>
	<%=flight.depapt%>					Gives the airport name
	<%=flight.depicao%>
	<%=flight.arrapt%>					Gives the airport name
	<%=flight.arricao%>
	<%=flight.phasedetail%>
	<%=flight.heading%>
	<%=flight.alt%>
	<%=flight.gs%>
	<%=flight.disremaining%>
	<%=flight.timeremaning%>
	<%=flight.aircraft%>				Gives the registration
	<%=flight.aircraftname%>			Gives the full name
	<%=flight.client%>					FSACARS/Xacars/FSFK, etc
	<%=flight.trclass%>					"even" or "odd"
	
	You can also use logic in the templating, if you so choose:
	http://ejohn.org/blog/javascript-micro-templating/
*/
?>
<script type="text/html" id="acars_map_row">
<tr class="<%=flight.trclass%>">
<td height="40"><%=flight.flightnum%></td>
<td class="hidden-xs"><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotname%></a></td>
<td><%=flight.aircraftname%></td>
<td class="hidden-xs"><%=flight.depicao%></td>
<td class="hidden-xs"><%=flight.arricao%></td>
<td class="hidden-xs"><%=flight.phasedetail%></td>
<td class="hidden-xs"><%=flight.alt%> ft</td>
<td class="hidden-xs"><%=flight.gs%> kts</td>
<td><%=flight.distremaining%> <?php echo Config::Get('UNITS');?></td>
<td><%=flight.timeremaining%></td>
</tr>
</script>

 

Edited December 29, 2019 by Ither

[web541]

The acars data travels from your acars software to the `phpvms_acarsdata` table. This is then read by phpvms and is output in JSON format to SITEURL/action.php/acars/data.

Then in lib/js/acarsmap.js this is loaded into the map using a JS AJAX call: https://github.com/nabeelio/phpvms_v2/blob/master/lib/js/acarsmap.js#L216

Through a few more calls, this function is loaded as the time specified in the bottom of the acarsmap.php file (or specific to the template file you are using):

refreshTime: 20000,

Where 20000 is in milliseconds, therefore giving a 20 second refresh rate. Now every 20 seconds, the map (and table) will update using the populateMap() function here https://github.com/nabeelio/phpvms_v2/blob/master/lib/js/acarsmap.js#L141 as specified in the previous AJAX call.

 

I haven't tried this myself, but I would think you would be able to just change this line https://github.com/nabeelio/phpvms_v2/blob/master/lib/js/acarsmap.js#L147 to

if (data.length == 0) {
    $("#acars_map_table").hide(); // Or .css("display", "none");
    return false;
}

$("#acars_map_table").show(); // or .css("display", "block");

And then in acarsmap.php add an id to the table, change this

<script type="text/html" id="acars_map_bubble">
<table width="250px">

to this

<script type="text/html" id="acars_map_bubble">
<table width="250px" id="acars_map_table">

And you would have to give the id to the table on the dashboard template as well.

Hope you have some luck with this.

Edited December 29, 2019 by web541

[Ither]

Web... You are awesome!

That is exactly what I needed.