diff --git a/webgui/main.js b/webgui/main.js
index 459c99fd6..39eb4d527 100644
--- a/webgui/main.js
+++ b/webgui/main.js
@@ -12,12 +12,13 @@ require.config({
flotresize : '3rdparty/flot/jquery.flot.resize',
flottime : '3rdparty/flot/jquery.flot.time',
fgcommand : 'lib/fgcommand',
+ sammy: '3rdparty/sammy-latest.min'
}
});
require([
- 'knockout', 'jquery', 'themeswitch', 'kojqui/button', 'flot'
-], function(ko, jquery) {
+ 'knockout', 'jquery','sammy', 'themeswitch', 'kojqui/button', 'flot', 'leaflet'
+], function(ko, jquery, Sammy) {
function KnockProps(aliases) {
@@ -329,16 +330,34 @@ require([
];
self.selectedTopic = ko.observable();
+ self.selectedSubtopic = ko.observable();
self.selectTopic = function(topic) {
- self.selectedTopic(topic);
+ location.hash = topic;
}
- self.selectTopic(self.topics[0]);
-
self.refresh = function() {
location.reload();
}
+
+ // Client-side routes
+ Sammy(function() {
+ this.get('#:topic', function() {
+ console.log("a", this.params );
+ self.selectedTopic( this.params.topic );
+ self.selectedSubtopic('');
+ });
+
+ this.get('#:topic/:subtopic', function() {
+ console.log("b", this.params );
+ self.selectedTopic( this.params.topic );
+ self.selectedSubtopic( this.params.subtopic );
+ });
+ // empty route
+ this.get('', function() {
+ this.app.runRoute( 'get', '#' + self.topics[0] );
+ });
+ }).run();
}
ko.components.register('Aircraft', {
diff --git a/webgui/topics/Aircraft.html b/webgui/topics/Aircraft.html
index 4ad788d03..c4627ee9e 100644
--- a/webgui/topics/Aircraft.html
+++ b/webgui/topics/Aircraft.html
@@ -9,4 +9,4 @@
click: $parent.selectTopic">
-
+
diff --git a/webgui/topics/Aircraft.js b/webgui/topics/Aircraft.js
index c78893c9f..b50851708 100644
--- a/webgui/topics/Aircraft.js
+++ b/webgui/topics/Aircraft.js
@@ -1,6 +1,6 @@
define([
- 'knockout', 'text!./Aircraft.html',
-], function(ko, htmlString) {
+ 'knockout', 'text!./Aircraft.html', './SubtopicViewmodel'
+], function(ko, htmlString, SubtopicViewmodel) {
ko.components.register('Aircraft/Select', {
require : 'topics/Aircraft/Select'
});
@@ -21,33 +21,15 @@ define([
require : 'topics/Aircraft/Panel'
});
- function ViewModel(params) {
- var self = this;
-
- self.topics = [
- 'Mass & Balance', 'Checklists', 'Failures', 'Panel', 'Select', 'Help'
- ];
-
- self.selectedTopic = ko.observable();
-
- self.selectedComponent = ko.pureComputed(function(){
- return "Aircraft/" + self.selectedTopic();
- });
-
- self.selectTopic = function(topic) {
- self.selectedTopic(topic);
- }
-
- self.selectTopic(self.topics[self.topics.length-1]);
-
- }
-
- ViewModel.prototype.dispose = function() {
- }
-
// Return component definition
return {
- viewModel : ViewModel,
+ viewModel : {
+ createViewModel : function(params, componentInfo) {
+ return new SubtopicViewmodel([
+ 'Help', 'Mass & Balance', 'Checklists', 'Failures', 'Panel', 'Select'
+ ], "Aircraft", params);
+ },
+ },
template : htmlString
};
});
diff --git a/webgui/topics/Environment.js b/webgui/topics/Environment.js
index 1a468b5fc..85d1f8696 100644
--- a/webgui/topics/Environment.js
+++ b/webgui/topics/Environment.js
@@ -1,6 +1,6 @@
define([
- 'knockout', 'text!./Environment.html'
-], function(ko, htmlString) {
+ 'knockout', 'text!./Environment.html', './SubtopicViewmodel'
+], function(ko, htmlString, SubtopicViewmodel) {
ko.components.register('Environment/Date & Time', {
require : 'topics/Environment/DateTime'
});
@@ -13,36 +13,15 @@ define([
require : 'topics/Environment/Position'
});
- function ViewModel(params) {
- var self = this;
-
-
- self.topics = [
- 'Date & Time',
- 'Weather',
- 'Position',
- ];
-
- self.selectedTopic = ko.observable();
-
- self.selectedComponent = ko.pureComputed(function(){
- return "Environment/" + self.selectedTopic();
- });
-
- self.selectTopic = function(topic) {
- self.selectedTopic(topic);
- }
-
- self.selectTopic(self.topics[0]);
-
- }
-
- ViewModel.prototype.dispose = function() {
- }
-
// Return component definition
return {
- viewModel : ViewModel,
+ viewModel : {
+ createViewModel : function(params, componentInfo) {
+ return new SubtopicViewmodel([
+ 'Date & Time', 'Weather', 'Position',
+ ], "Environment", params);
+ },
+ },
template : htmlString
};
});
diff --git a/webgui/topics/Map.js b/webgui/topics/Map.js
index f26c826c7..53e53a8e1 100644
--- a/webgui/topics/Map.js
+++ b/webgui/topics/Map.js
@@ -95,7 +95,7 @@ define([
bounds : L.latLngBounds(L.latLng(16.0, -179.0), L.latLng(72.0, -60.0)),
}),
- "dfs.de VFR" : new L.TileLayer(
+ "Germany VFR" : new L.TileLayer(
'https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected_01/tiles/{z}/{x}/{y}.png', {
minZoom : 5,
maxZoom : 15,
@@ -103,7 +103,7 @@ define([
bounds : L.latLngBounds(L.latLng(46.0, 5.0), L.latLng(55.1, 16.5)),
}),
- "Lower Airspace (Germany)" : new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png',
+ "Germany Lower Airspace" : new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png',
{
minZoom : 5,
maxZoom : 15,
@@ -132,7 +132,7 @@ define([
bounds : L.latLngBounds(L.latLng(41.0, -5.3), L.latLng(51.2, 10.1)),
}),
- "Clouds" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
+ "OpenWeatherMap - Clouds" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
maxZoom : 14,
minZoom : 0,
subdomains : '12',
@@ -142,7 +142,7 @@ define([
attribution : '©
open weather map',
}),
- "Precipitation" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', {
+ "OpenWeatherMap - Precipitation" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', {
maxZoom : 14,
minZoom : 0,
subdomains : '12',
@@ -152,7 +152,7 @@ define([
attribution : '©
open weather map',
}),
- "Isobares" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
+ "OpenWeatherMap - Isobares" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
maxZoom : 7,
minZoom : 0,
subdomains : '12',
@@ -162,7 +162,7 @@ define([
attribution : '©
open weather map',
}),
- "Wind" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png', {
+ "OpenWeatherMap - Wind" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png', {
maxZoom : 7,
minZoom : 0,
subdomains : '12',
diff --git a/webgui/topics/Simulator.js b/webgui/topics/Simulator.js
index 685e3e569..6b2d22f67 100644
--- a/webgui/topics/Simulator.js
+++ b/webgui/topics/Simulator.js
@@ -1,6 +1,6 @@
define([
- 'knockout', 'text!./Simulator.html'
-], function(ko, htmlString) {
+ 'knockout', 'text!./Simulator.html', './SubtopicViewmodel'
+], function(ko, htmlString, SubtopicViewmodel) {
ko.components.register('Simulator/Screenshot', {
require : 'topics/Simulator/Screenshot'
});
@@ -21,33 +21,15 @@ define([
require : 'topics/Simulator/Exit'
});
- function ViewModel(params) {
- var self = this;
-
- self.topics = [
- 'Screenshot', 'Properties', 'Config', 'Reset', 'Exit'
- ];
-
- self.selectedTopic = ko.observable();
-
- self.selectedComponent = ko.pureComputed(function() {
- return "Simulator/" + self.selectedTopic();
- });
-
- self.selectTopic = function(topic) {
- self.selectedTopic(topic);
- }
-
- self.selectTopic(self.topics[0]);
-
- }
-
- ViewModel.prototype.dispose = function() {
- }
-
// Return component definition
return {
- viewModel : ViewModel,
+ viewModel : {
+ createViewModel : function(params, componentInfo) {
+ return new SubtopicViewmodel([
+ 'Screenshot', 'Properties', 'Config', 'Reset', 'Exit'
+ ], "Simulator", params);
+ },
+ },
template : htmlString
};
});
diff --git a/webgui/topics/SubtopicViewmodel.js b/webgui/topics/SubtopicViewmodel.js
new file mode 100644
index 000000000..431575c36
--- /dev/null
+++ b/webgui/topics/SubtopicViewmodel.js
@@ -0,0 +1,34 @@
+(function(factory) {
+ if (typeof define === "function" && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['knockout'], factory);
+ } else {
+ // Browser globals
+ factory(ko);
+ }
+}(function(ko) {
+
+ function SubtopicViewModel(topics, prefix, params) {
+ var self = this;
+
+ self.topics = topics;
+
+ self.selectedTopic = ko.observable();
+
+ self.selectedComponent = ko.pureComputed(function() {
+ return prefix + "/" + self.selectedTopic();
+ });
+
+ self.selectTopic = function(topic) {
+ location.hash = prefix + "/" + topic;
+ self.selectedTopic(topic);
+ }
+
+ var topic = (params && params.topic) ? ko.unwrap(params.topic) : self.topics[0];
+ if( self.topics.indexOf(topic) == -1 )
+ topic = self.topics[0];
+ self.selectTopic(topic);
+ }
+
+ return SubtopicViewModel;
+}));
diff --git a/webgui/topics/Tools.js b/webgui/topics/Tools.js
index 44dc85dd3..d909e5e7c 100644
--- a/webgui/topics/Tools.js
+++ b/webgui/topics/Tools.js
@@ -1,6 +1,6 @@
define([
- 'knockout', 'text!./Tools.html'
-], function(ko, htmlString) {
+ 'knockout', 'text!./Tools.html', './SubtopicViewmodel'
+], function(ko, htmlString, SubtopicViewmodel) {
ko.components.register('Tools/Holding Pattern', {
require : 'topics/Tools/Holding'
@@ -14,36 +14,15 @@ define([
require : 'topics/Tools/Stopwatch'
});
- function ViewModel(params) {
- var self = this;
-
- self.topics = [
- 'Holding Pattern',
- 'Wind Calculator',
- 'Vertical Navigation',
- 'Stopwatch'
- ];
-
- self.selectedTopic = ko.observable();
-
- self.selectedComponent = ko.pureComputed(function() {
- return "Tools/" + self.selectedTopic();
- });
-
- self.selectTopic = function(topic) {
- self.selectedTopic(topic);
- }
-
- self.selectTopic(self.topics[0]);
-
- }
-
- ViewModel.prototype.dispose = function() {
- }
-
// Return component definition
return {
- viewModel : ViewModel,
+ viewModel : {
+ createViewModel : function(params, componentInfo) {
+ return new SubtopicViewmodel([
+ 'Holding Pattern', 'Wind Calculator', 'Vertical Navigation', 'Stopwatch'
+ ], "Tools", params);
+ },
+ },
template : htmlString
};
});