Some Q's about Updating phpVMS Legacy to OSM

ERDEM · May 26, 2018

Hello gentlemen, I am working on applying this proccess to my va website but I have several questions. In that step

Skin Modifications

Place it before before the </head> tag (default is /lib/skins/crystal/layout.tpl)

</script> <script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet-providers.js">

</script> <script src="<?php echo SITE_URL?>/lib/js/leaflet/Leaflet.Geodesic.js"></script>

I use the skyblue skin instead of crystal. Therefore should I put these lines into crystal layout or skiblue layout.php file ?

flyalaska · May 26, 2018

1 hour ago, ERDEM said:

Hello gentlemen, I am working on applying this proccess to my va website but I have several questions. In that step

Skin Modifications

Place it before before the </head> tag (default is /lib/skins/crystal/layout.tpl)

<link rel="stylesheet" href="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.css" />

<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.js">

</script> <script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet-providers.js">

</script> <script src="<?php echo SITE_URL?>/lib/js/leaflet/Leaflet.Geodesic.js"></script>

I use the skyblue skin instead of crystal. Therefore should I put these lines into crystal layout or skiblue layout.php file ?

skyblue

ERDEM · May 26, 2018

Thank you for the reply. I tried it but I think I am doing sth wrong. should I put those lines before which head tag ? number 1 or number 2 as I drew in this screenshot.

ERDEM · May 26, 2018

And my layout file is not a tpl . It is layout php. Does it matter ?

flyalaska · May 26, 2018

put the css with your other css and your js with your js files in layout.php

flyalaska · May 26, 2018

I will update skyBlue and give you the updated files.

ERDEM · May 27, 2018

I did all the changes according to given in this link https://gist.github.com/nabeelio/8b7ab29fb67dfe27284d63d7136388dc

but I still have no map on my front page

In Template Modifications section I applied step number 1 and step number 2 , my final states of core/templates/acarsmap.tpl (not .tpl in my rootfiles. it is .php) and core/templates/route_map.tpl ( not .tpl again) are like ;

ACARSMAP.PHP

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<?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 class="mapcenter" align="center">
   <div id="acarsmap" style="width:<?php echo Config::Get('MAP_WIDTH');?>; height: <?php echo Config::Get('MAP_HEIGHT')?>"></div>
</div>
<?php
/* See below for details and columns you can use in this table */
?>
<table border = "0" width="100%" class="acarsmap">
<thead>
   <tr>
       <td><b>Pilot</b></td>
       <td><b>Flight Number</b></td>
       <td><b>Departure</b></td>
       <td><b>Arrival</b></td>
       <td><b>Status</b></td>
       <td><b>Altitude</b></td>
       <td><b>Speed</b></td>
       <td><b>Distance/Time Remain</b></td>
   </tr>
</thead>
<tbody id="pilotlist"></tbody>
</table>
<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 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><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%> - <%=flight.pilotname%></a></td>
<td><%=flight.flightnum%></td>
<td><%=flight.depicao%></td>
<td><%=flight.arricao%></td>
<td><%=flight.phasedetail%></td>
<td><%=flight.alt%></td>
<td><%=flight.gs%></td>
<td><%=flight.distremaining%> <?php echo Config::Get('UNITS');?> / <%=flight.timeremaining%></td>
</tr>
</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">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%> - <%=flight.pilotname%></a><br />
<strong>Flight <%=flight.flightnum%></strong> (<%=flight.depicao%> to <%=flight.arricao%>)<br />
<strong>Status: </strong><%=flight.phasedetail%><br />
<strong>Dist/Time Remain: </strong><%=flight.distremaining%> <?php echo Config::Get('UNITS');?> / <%=flight.timeremaining%><br />
</span>
</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: true,
   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: 10000
};
renderAcarsMap(opts);
</script>

and

ROUTEMAP.PHP

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<h3>Route Map</h3>
<div class="mapcenter" align="center">
   <div id="routemap" style="width:<?php echo Config::Get('MAP_WIDTH');?>; height: <?php echo Config::Get('MAP_HEIGHT')?>"></div>
</div>
<?php
/**
*
* This is the new Google Maps v3 code. Be careful of changing
* things here, only do something if you know what you're doing.
*
* These are some options for the map, you can change here.
*
* This map is used for schedules and PIREPS
*
* 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.
*
* If you want to adjust the size of the map - Look at the above
* "routemap" div with the CSS width/height parameters. You can
* easily adjust it from there.
*
* And for reference, you want to tinker:
* http://code.google.com/apis/maps/documentation/v3/basics.html
*/

if(isset($pirep))
   $mapdata = $pirep;
if(isset($schedule))
   $mapdata = $schedule;
?>
<?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>

<?php
/* Below here is all the javascript for the map. Be careful of what you
modify!! */
?>
<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>
<script type="text/javascript">

// Write the PIREP data out into JSON
// The big reason being we don't need to have PHP writing JS - yuck
const flight = JSON.parse('<?php echo json_encode($mapdata); ?>');
console.log(flight);

const map = createMap({
render_elem: 'routemap',
provider: '<?php echo Config::Get("MAP_TYPE"); ?>',
});

points.push(arrCoords);
const selPointsLayer = L.geodesic([points], {
   weight: 2,
   opacity: 0.5,
   color: 'black',
   steps: 10
}).addTo(map);

map.fitBounds(selPointsLayer.getBounds());
</script>

ERDEM · May 27, 2018

By the way , I ve found these files also in link https://github.com/nabeelio/phpvms_v2/pull/139/files#diff-fe394d5fa8b9f23b089b7a99ba844045, do I have to change them too ?

core/classes/ezdb/ezdb.class.php

lib/js/acarsmap.js

lib/js/base_map.js

lib/js/leaflet/Leaflet.Geodesic.js

lib/js/leaflet/leaflet-providers.js

lib/js/leaflet/leaflet-src.js

lib/js/leaflet/leaflet-src.js.map

lib/js/leaflet/leaflet.css

lib/js/leaflet/leaflet.js

lib/js/leaflet/leaflet.js.map

Edited May 27, 2018 by ERDEM

ERDEM · May 27, 2018

16 hours ago, flyalaska said:

put the css with your other css and your js with your js files in layout.php

And I did it it as you said , here my final layout.php state. I ve marked the lines bold I ve put . I couldnt find any .js files after the second head tag. is this correct like this ?

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
>
<link rel="stylesheet" href="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.css" />
<head>
<meta charset="utf-8">
<title><?php echo $page_title; ?></title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

<link rel="shortcut icon" type="image/png" href="<?php echo SITE_URL ?>/lib/skins/sky_Blue/images/favicon.png"/>
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/sky_Blue/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/sky_Blue/css/bootstrap.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/sky_Blue/css/style.responsive.css" />

<?php Template::Show('core_navigation'); ?>

</header>

<?php echo $page_content; ?>

<footer class="sky-footer">
<div class="sky-footer-inner">
<div class="sky-content-layout layout-item-0">
<div class="sky-content-layout-row">
<div class="sky-layout-cell layout-item-1" style="width: 24%">
<p><span style="color: rgb(238, 238, 238); font-size: 18px;"><i class="fa fa-info-circle"></i> About SkyBlue Air</span><br><br></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et congue nisl. Maecenas et commodo leo. Vivamus turpis odio, malesuada sit amet lectus id, fringilla volutpat massa. Fusce luctus velit eget sapien lobortis, sed aliquet purus venenatis.
</div><div class="sky-layout-cell layout-item-2" style="width: 24%">
<p><span style="color: rgb(238, 238, 238); font-size: 18px;"><i class="fa fa-paper-plane"></i> Recent Activity</span><br><br></p>
<?php
MainController::Run('Activity', 'Frontpage', 3);
?>
</div><div class="sky-layout-cell layout-item-3" style="width: 22%">
<p><span style="color: rgb(238, 238, 238); font-size: 18px;"><i class="fa fa-users"></i> Our Partners</span><br><br></p>
<p><a href="http://www.simpilotgroup.com"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/partner_simpilotgroup2.png"width="103" height="30"border="0" alt="0"></a><br></p>
<p><a href="http:www.//fs-products.net"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/partner_fsproducts_small.png"width="103" height="30"border="0" alt="0"></a><br></p>
<p><a href="http://www.php-mods.eu"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/partners_phpmods.png"width="103" height="30"border="0" alt="0"></a><br></p>
<p><a href="http://www.crazycreatives.com"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/partner_crazy_creatives.png"width="103" height="30"border="0" alt="0"></a><br></p>
<p><a href="http://www.vacentral.net"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/partner_vacentral.png"width="103" height="30"border="0" alt="0"></a><br></p>
</div><div class="sky-layout-cell layout-item-4" style="width: 30%">

<p style="text-align: right;"><a href="http://www.vatsim.net" target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/vatsim.png"class="sky-lightbox"width="120" height="36"border="0" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"></a>

<a href="#"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/youtube.png"style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" class=""></a>
<a href="#"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/twitter_32-2.png"style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" class=""></a>
<a href="#"target="new"><img src="<?php echo SITE_URL?>/lib/skins/sky_Blue/images/facebook_32-2.png"style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" class=""></a>
</p>
<br>
© 2015-<?php echo date("Y") ?>, All Rights Reserved.<br>
skyBlue v1.0.4 by <a href="http://www.phpvms.209studios.com" target="_blank" title="209Studios">209Studios</a><br>
CMS by <a href="http://www.phpvms.net" target="_blank" title="phpVMS">phpVMS</a><br>
----------------------------------------------<br>
<script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
years=parseInt(difference/365)
difference=difference%365
difference+=" days"
document.write("It\'s been "+years+" years and "+difference+" since the launch of skyBlue Airways. We have been flying in the sky since December 14, 2015")
}
//enter the count up date using the format year/month/day
countup(2015,12,14)
</script>
<br>
----------------------------------------------<br>
skyBlue Air is in no way affiliated with any real world Airline. The Logos and Trademarks displayed on this site remain property of their respective owners.

</div>
</div>
</div>
</div>
</footer>

</div>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/sky_Blue/js/script.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/sky_Blue/js/script.responsive.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/sky_Blue/js/bootstrap.min.js"></script>

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-sign-in"></i> Crew Login</h4>
</div>
<div class="modal-body">
<form name="loginform" action="<?php echo url('/login');?>" method="post">
<div class="container center_div">
<label>Email Address or Pilot ID</label>
<input class="form-control input-sm" type="text" name="email" value=""/>
</div>
<br>
<div class="container center_div">
<label>Password</label>
<input class="form-control input-sm" type="password" name="password" value="" />
<br>
</div>
<div style="text-align:center;">
<div>
<input type="checkbox" name="remember"/><span> Remember Me</span>
</div>
<div>
</div>
<a href="<?php echo url('Login/forgotpassword'); ?>">I forgot my password</a>
</div>
<div class="modal-footer">
<span class="pull-left"><a href="<?php echo url('Login/forgotpassword'); ?>">Having Trouble Logging In?</a></span>
<button type="submit" name="submit" class="sky-button" value="Log In" /><i class="fa fa-sign-in fa-lg"></i> Login</button>
<input type="hidden" name="redir" value="index.php/Profile" />
<input type="hidden" name="action" value="login" />
<button type="button" class="sky-button" data-dismiss="modal"><i class="fa fa-times fa-lg"></i> Close</button>

</form>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>

</body>
</html>

Nabeel · May 30, 2018

On 5/27/2018 at 4:58 AM, ERDEM said:

By the way , I ve found these files also in link https://github.com/nabeelio/phpvms_v2/pull/139/files#diff-fe394d5fa8b9f23b089b7a99ba844045, do I have to change them too ?

Did you download the zip and extract the lib/js/leaflet files like it said to? The instructions say precisely where to place the CSS and JS lines.

Does the map work on the live map page? How about on the PIREP pages? You're saying the front page, but if that's something custom then you'll have to adapt the code for that.

ERDEM · May 30, 2018

Yes now it works perfect. Thank you very much.

Sign In

Some Q's about Updating phpVMS Legacy to OSM

Recommended Posts

ERDEM

flyalaska

ERDEM

ERDEM

flyalaska

flyalaska

ERDEM

ERDEM

ERDEM

Nabeel

ERDEM

Join the conversation