fly/fgdata
1
0
Fork 0
Code Activity

Phi: Some tweaks for the Airport selection page

Browse source 
- Add a busy message while loading airport list
- Add METAR for the airport (if available)
- Remove cyclic object reference by making map and layer private
This commit is contained in:
Torsten Dreyer 2015-03-30 21:15:16 +02:00
parent 89b304cd1f
commit 872b40828a
2 changed files with 96 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
webgui/topics/Environment/Position.html
View file

@ -1,71 +1,69 @@
<style>
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
.metric {
font-style: italic;
font-size: 90%;
font-style: italic;
font-size: 90%;
}
</style>
<fieldset data-bind="visible: hasAirports">
<legend>Search (enter at least two characters of airport name or id)</legend>
<input type="text" data-bind="autocomplete: { minLength: 2, source: airports, select: onSelect }" style="width: 100%;">
</fieldset>
<div style="width=100%" data-bind="with: selectedAirport">
<div style="float: left;">
<div style="font-size: 20pt; font-weight: bold;" data-bind="text: id"></div>
<div>
<span style="font-size: 12pt; font-weight: normal;">Apt Elev </span>
<span style="font-size: 14pt; font-weight: bold;" data-bind="text: elevation"></span>
<span style="font-size: 14pt; font-weight: bold;">&apos;</span>
<h1 data-bind="visible: isLoading">Please wait... Loading Airports...</h1>
<div style="" data-bind="with: selectedAirport">
<div style="float: left;">
<div style="font-size: 20pt; font-weight: bold;" data-bind="text: id"></div>
<div>
<span style="font-size: 12pt; font-weight: normal;">Apt Elev </span> <span style="font-size: 14pt; font-weight: bold;"
data-bind="text: elevation"></span> <span style="font-size: 14pt; font-weight: bold;">&apos;</span>
</div>
<div>
<span style="font-size: 12pt; font-weight: normal;" data-bind="text: arpFormatted"></span>
</div>
</div>
<div>
<span style="font-size: 12pt; font-weight: normal;" data-bind="text: arpFormatted"></span>
</div>
</div>
<div style="float: right;">
<div>
<span style="font-size: 20pt; font-weight: normal; float: right" data-bind="text: name"></span>
</div>
<div>
<!--
<div style="float: right;">
<div>
<span style="font-size: 20pt; font-weight: normal; float: right" data-bind="text: name"></span>
</div>
<div>
<!--
<span style="font-size: 20pt; font-weight: bold;" data-bind="text: city"></span>
<span style="font-size: 20pt; font-weight: bold;">, </span>
<span style="font-size: 20pt; font-weight: bold;" data-bind="text: country"></span>
-->
</div>
</div>
</div>
</div>
<div class="ui-helper-clearfix"></div>
<fieldset data-bind="with: selectedAirport, visible: selectedAirport">
<legend>Communication</legend>
<table style="width: 100%">
<tr data-bind="foreach: comm">
<td>
<div data-bind="text: name" style="text-align: center"></div>
<div data-bind="foreach: frequencies" style="text-align: center">
<span data-bind="text: $data"></span>
</div>
</td>
</tr>
</table>
<table style="width: 100%">
<tr data-bind="foreach: comm">
<td>
<div data-bind="text: name" style="text-align: center"></div>
<div data-bind="foreach: frequencies" style="text-align: center">
<span data-bind="text: $data"></span>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset data-bind="visible: selectedAirport">
<div id="phi-environment-position-map" style="height: 400px;"></div>
<div id="phi-environment-position-map" style="height: 400px;"></div>
</fieldset>
<fieldset data-bind="with: selectedAirport, visible: selectedAirport">
<legend>Runway Information</legend>
<table style="width: 100%">
<thead>
<table style="width: 100%">
<thead>
<tr>
<th style="text-align: left">RWY</th>
<th style="text-align: right">True</th>
@ -77,18 +75,28 @@ overflow-x: hidden;
<th style="text-align: left"></th>
</tr>
</thead>
<tbody data-bind="foreach: runway">
<tr>
<td><span data-bind="text: id"></span></td>
<td style="text-align: right;"><span data-bind="text: heading"></span>&deg;</td>
<td><span data-bind="text: surface"></span></td>
<td><span data-bind="text: lengthFt"></span>ft <span data-bind="text: lengthM" class="metric"></span><span class="metric">m</span></td>
<td><span data-bind="text: widthFt"></span>ft <span data-bind="text: widthM" class="metric"></span><span class="metric">m</span></td>
<td><span data-bind="text: displacedThresholdFt"></span>ft <span data-bind="text: displacedThresholdM" class="metric"></span><span class="metric">m</span></td>
<td><span data-bind="text: stopwayFt"></span>ft <span data-bind="text: stopwayM" class="metric"></span><span class="metric">m</span></td>
<td><button data-bind="button: { text: false, icons: { primary: 'ui-icon-arrowreturnthick-1-e' } }, click: $parent.gotoRwy">Restart here</button></td>
</tr>
</tbody>
</table>
<tbody data-bind="foreach: runway">
<tr>
<td><span data-bind="text: id"></span></td>
<td style="text-align: right;"><span data-bind="text: heading"></span>&deg;</td>
<td><span data-bind="text: surface"></span></td>
<td><span data-bind="text: lengthFt"></span>ft <span data-bind="text: lengthM" class="metric"></span><span
class="metric">m</span></td>
<td><span data-bind="text: widthFt"></span>ft <span data-bind="text: widthM" class="metric"></span><span
class="metric">m</span></td>
<td><span data-bind="text: displacedThresholdFt"></span>ft <span data-bind="text: displacedThresholdM"
class="metric"></span><span class="metric">m</span></td>
<td><span data-bind="text: stopwayFt"></span>ft <span data-bind="text: stopwayM" class="metric"></span><span
class="metric">m</span></td>
<td><button
data-bind="button: { text: false, icons: { primary: 'ui-icon-arrowreturnthick-1-e' } }, click: $parent.gotoRwy">Restart
here</button></td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset data-bind="visible: metarValid">
<legend>Weather</legend>
<div data-bind="text: metar"></div>
</fieldset>

44
webgui/topics/Environment/Position.js
View file

@ -1,6 +1,8 @@
define([
'jquery', 'knockout', 'text!./Position.html', 'sprintf', 'leaflet', 'fgcommand', 'kojqui/autocomplete'
], function( jquery, ko, htmlString, sprintf, leaflet, fgcommand ) {
var MetarPropertiesPath = "/aaa";
function getAirportList(obs) {
if(typeof(Storage) !== "undefined") {
@ -59,7 +61,6 @@ define([
function AirportViewModel(geoJson, id) {
var self = this;
self.geoJson = geoJson;
jquery.get("/navdb?q=airport&id=" + id ).done(function(data) {
// expect geoJSON FeatureCollection
@ -82,6 +83,10 @@ define([
self.name(airport.properties.name);
self.city(airport.properties.name);
self.country(airport.properties.name);
self.hasMetar(airport.properties.metar);
if(self.hasMetar()) {
fgcommand.requestMetar( self.id(), MetarPropertiesPath );
}
var comm = {};
airport.properties.comm.forEach(function(c){
@ -100,9 +105,9 @@ define([
self.longitude(Number(arp[0]||0));
self.latitude(Number(arp[1]||0));
self.geoJson.clearLayers();
self.geoJson.addData(airport);
self.geoJson._map.setView([ self.latitude(), self.longitude() ], 13);
geoJson.clearLayers();
geoJson.addData(airport);
geoJson._map.setView([ self.latitude(), self.longitude() ], 13);
});
self.id = ko.observable('');
@ -112,6 +117,7 @@ define([
self.elevation = ko.observable(0);
self.longitude = ko.observable(0);
self.latitude = ko.observable(0);
self.hasMetar = ko.observable(false);
self.arpFormatted = ko.pureComputed(function() {
function dm(v) {
var s = v < 0;
@ -189,12 +195,12 @@ define([
function ViewModel(params) {
var self = this;
self.map = leaflet.map("phi-environment-position-map", {
var map = leaflet.map("phi-environment-position-map", {
dragging: false,
touchZoom: false,
scrollWheelZoom: false,
});
self.geoJson = leaflet.geoJson(null,{
var geoJson = leaflet.geoJson(null,{
style : function(feature) {
return {
color : 'black',
@ -206,8 +212,8 @@ define([
};
}
});
self.geoJson._map = self.map;
self.geoJson.addTo(self.map);
geoJson._map = map;
geoJson.addTo(map);
self.airports = ko.observableArray([]);
getAirportList(self.airports);
@ -215,14 +221,34 @@ define([
return self.airports().length;
});
self.isLoading = ko.pureComputed(function() {
return self.airports().length < 1;
});
self.selectedAirport = ko.observable();
self.metarValidFlag = ko.observable(0).extend({
observedProperty : MetarPropertiesPath + "/valid"
});
self.metarValid = ko.pureComputed(function(){
return self.metarValidFlag() && self.selectedAirport() && self.selectedAirport().hasMetar();
});
self.metar = ko.observable(0).extend({
observedProperty : MetarPropertiesPath + "/data"
});
self.onSelect = function(ev,ui) {
self.selectedAirport(new AirportViewModel(self.geoJson,getAirportId(ui.item.value)));
var id = getAirportId(ui.item.value);
self.selectedAirport(new AirportViewModel(geoJson,id));
}
}
ViewModel.prototype.dispose = function() {
fgcommand.clearMetar(MetarPropertiesPath);
self.metar.dispose();
self.metarValidFlag.dispose();
}
// Return component definition