Phi: Map changes multiplayer config
- Rename some map overlays - add multiplayer config
This commit is contained in:
Torsten Dreyer
parent
4c28a44b3d
commit
c5c832d598
6 changed files with 162 additions and 58 deletions
51
webgui/lib/props2.js
Normal file
51
webgui/lib/props2.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* Wraps json properties into something like SGPropertyNodes
|
||||
*/
|
||||
(function(factory) {
|
||||
if (typeof define === "function" && define.amd)// AMD. Register as an anonymous module.
|
||||
define([
|
||||
], factory); else // Browser globals
|
||||
factory();
|
||||
}(function() {
|
||||
|
||||
var SGPropertyNode = function(json) {
|
||||
this.json = json;
|
||||
};
|
||||
|
||||
SGPropertyNode.prototype.getValue = function() {
|
||||
return this.json.value;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getName = function() {
|
||||
return this.json.name;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getPath = function() {
|
||||
return this.json.path;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getIndex = function() {
|
||||
return this.json.index;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getChildren = function(name) {
|
||||
var reply = [];
|
||||
this.json.children.forEach(function(child) {
|
||||
if (name && child.name == name)
|
||||
reply.push(new SGPropertyNode(child));
|
||||
});
|
||||
return reply;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getNode = function(name, index) {
|
||||
if (!index)
|
||||
index = 0;
|
||||
for (var i = 0; i < this.json.children.length; i++) {
|
||||
var child = this.json.children[i];
|
||||
if (child.name == name && child.index == index)
|
||||
return new SGPropertyNode(child);
|
||||
}
|
||||
}
|
||||
|
||||
return SGPropertyNode;
|
||||
}));
|
||||
|
|
@ -12,6 +12,7 @@ require.config({
|
|||
flotresize : '3rdparty/flot/jquery.flot.resize',
|
||||
flottime : '3rdparty/flot/jquery.flot.time',
|
||||
fgcommand : 'lib/fgcommand',
|
||||
props : 'lib/props2',
|
||||
sammy: '3rdparty/sammy-latest.min'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -127,10 +127,10 @@ define([
|
|||
}
|
||||
|
||||
self.overlays = {
|
||||
"Track" : trackLayer,
|
||||
"Flight History" : trackLayer,
|
||||
|
||||
"NavDB": L.navdbLayer(),
|
||||
"AI": L.aiLayer(),
|
||||
"Navigation Data": L.navdbLayer(),
|
||||
"Other Traffic": L.aiLayer(),
|
||||
|
||||
"VFRMap.com Sectionals (US)" : new L.TileLayer('http://vfrmap.com/20140918/tiles/vfrc/{z}/{y}/{x}.jpg', {
|
||||
maxZoom : 12,
|
||||
|
|
@ -229,15 +229,15 @@ define([
|
|||
}
|
||||
|
||||
self.mapResize = function(a,b) {
|
||||
self.overlays.NavDB.invalidate();
|
||||
self.overlays["Navigation Data"].invalidate();
|
||||
}
|
||||
|
||||
self.mapZoomend = function() {
|
||||
self.overlays.NavDB.invalidate();
|
||||
self.overlays["Navigation Data"].invalidate();
|
||||
}
|
||||
|
||||
self.mapMoveend = function() {
|
||||
self.overlays.NavDB.invalidate();
|
||||
self.overlays["Navigation Data"].invalidate();
|
||||
}
|
||||
|
||||
self.mapLoad = function(a,b) {
|
||||
|
|
|
|||
|
|
@ -2,52 +2,13 @@
|
|||
if (typeof define === "function" && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([
|
||||
'leaflet', './MapIcons'
|
||||
'leaflet', 'props', './MapIcons'
|
||||
], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
factory();
|
||||
}
|
||||
}(function(leaflet, MAP_ICON) {
|
||||
|
||||
var SGPropertyNode = function(json) {
|
||||
this.json = json;
|
||||
};
|
||||
|
||||
SGPropertyNode.prototype.getValue = function() {
|
||||
return this.json.value;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getName = function() {
|
||||
return this.json.name;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getPath = function() {
|
||||
return this.json.path;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getIndex = function() {
|
||||
return this.json.index;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getChildren = function(name) {
|
||||
var reply = [];
|
||||
this.json.children.forEach(function(child) {
|
||||
if (name && child.name == name)
|
||||
reply.push(new SGPropertyNode(child));
|
||||
});
|
||||
return reply;
|
||||
}
|
||||
|
||||
SGPropertyNode.prototype.getNode = function(name, index) {
|
||||
if (!index)
|
||||
index = 0;
|
||||
for (var i = 0; i < this.json.children.length; i++) {
|
||||
var child = this.json.children[i];
|
||||
if (child.name == name && child.index == index)
|
||||
return new SGPropertyNode(child);
|
||||
}
|
||||
}
|
||||
}(function(leaflet, SGPropertyNode, MAP_ICON) {
|
||||
|
||||
leaflet.AILayer = leaflet.GeoJSON.extend({
|
||||
options : {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,38 @@
|
|||
<div>
|
||||
<fieldset>
|
||||
<legend>AI</legend>
|
||||
<div>
|
||||
<input type="checkbox" id="sim-config-aitraffic-on"
|
||||
data-bind="button: { refreshOn: aiEnabled }, checked: aiEnabled">
|
||||
<label for="sim-config-aitraffic-on" data-bind="css: { 'ui-state-active': aiEnabled }">AI Traffic</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>AI</legend>
|
||||
<div>
|
||||
<input type="checkbox" id="sim-config-aitraffic-on" data-bind="button: { refreshOn: aiEnabled }, checked: aiEnabled">
|
||||
<label for="sim-config-aitraffic-on" data-bind="css: { 'ui-state-active': aiEnabled }">AI Traffic</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Multiplayer</legend>
|
||||
|
||||
<div>
|
||||
<label for="sim-config-multiplayer-callsign">Callsign</label> <span
|
||||
class="ui-spinner ui-widget ui-widget-content ui-corner-all"> <input class="ui-spinner-input"
|
||||
id="sim-config-multiplayer-callsign" data-bind="value: callsign, disable: online" maxlength="8">
|
||||
</span>
|
||||
<input type="checkbox" id="sim-config-multiplayer-hidereplay"
|
||||
data-bind="button: { refreshOn: multiplayerHideReplay }, checked: multiplayerHideReplay"> <label
|
||||
for="sim-config-multiplayer-hidereplay" data-bind="css: { 'ui-state-active': multiplayerHideReplay }">Hide
|
||||
replay sessions over MP</label>
|
||||
</div>
|
||||
<div>
|
||||
<button data-bind="button: { disabled: offline, label: 'Disconnect from ' + selectedServer() }, click: toggleConnect"></button>
|
||||
</div>
|
||||
<div>
|
||||
<button data-bind="button: { disabled: online }, click: toggleConnect">Connect to</button>
|
||||
<label for="sim-config-multiplayer-serverlist">foo</label>
|
||||
<select id="sim-config-multiplayer-serverlist"
|
||||
data-bind=" enable: offline
|
||||
value: selectedServer,
|
||||
options: serverList,
|
||||
optionsText: 'longname',
|
||||
optionsValue: 'longname'"></select>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<!--div data-bind="text: ko.toJSON($data)"></div-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,73 @@
|
|||
define([
|
||||
'jquery', 'knockout', 'text!./Config.html', 'fgcommand', 'kojqui/button', 'kojqui/buttonset'
|
||||
], function(jquery, ko, htmlString,fgCommand ) {
|
||||
'jquery', 'knockout', 'text!./Config.html', 'fgcommand', 'props', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu',
|
||||
], function(jquery, ko, htmlString, fgCommand, SGPropertyNode) {
|
||||
function ViewModel(params) {
|
||||
var self = this;
|
||||
|
||||
self.asa = ko.observable('');
|
||||
|
||||
self.aiEnabled = ko.observable().extend({ fgPropertyGetSet: "/sim/traffic-manager/enabled" });
|
||||
self.aiEnabled = ko.observable().extend({
|
||||
fgPropertyGetSet : "/sim/traffic-manager/enabled"
|
||||
});
|
||||
self.multiplayerHideReplay = ko.observable().extend({
|
||||
fgPropertyGetSet : "/sim/traffic-manager/enabled"
|
||||
});
|
||||
|
||||
self.callsign = ko.observable().extend({
|
||||
fgPropertyGetSet : "/sim/multiplay/callsign"
|
||||
});
|
||||
|
||||
self.online = ko.observable().extend({
|
||||
fgprop : "/sim/multiplay/online"
|
||||
});
|
||||
|
||||
self.offline = ko.pureComputed(function() {
|
||||
return !self.online();
|
||||
});
|
||||
|
||||
self.selectedServer = ko.observable().extend({
|
||||
fgPropertyGetSet : "/sim/multiplay/selected-server"
|
||||
});
|
||||
|
||||
self.gotServers = ko.observable().extend({
|
||||
fgprop: "/sim/multiplay/got-servers"
|
||||
}).subscribe(function(newValue) {
|
||||
if( newValue ) {
|
||||
self.serverList.removeAll();
|
||||
jquery.get('/json/sim/multiplay/server-list?d=3', null, function(data) {
|
||||
var root = new SGPropertyNode(data);
|
||||
root.getChildren('server').forEach(function(server){
|
||||
if( !server.getNode('online').getValue() )
|
||||
return;
|
||||
self.serverList.push( {
|
||||
name: server.getNode('name').getValue(),
|
||||
host: server.getNode('hostname').getValue(),
|
||||
location: server.getNode('location').getValue(),
|
||||
port: server.getNode('port').getValue(),
|
||||
longname: server.getNode('hostname').getValue() + ' - ' + server.getNode('location').getValue(),
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.serverList = ko.observableArray([]);
|
||||
|
||||
self.toggleConnect = function() {
|
||||
if( self.online() ) {
|
||||
fgCommand.multiplayer({ disconnect: {} });
|
||||
} else {
|
||||
fgCommand.multiplayer({ connect: {
|
||||
'servername': self.selectedServer(),
|
||||
} });
|
||||
}
|
||||
}
|
||||
|
||||
self.serverListVisible = ko.observable(true);
|
||||
|
||||
fgCommand.multiplayer({ refreshserverlist: {} });
|
||||
}
|
||||
|
||||
// Return component definition
|
||||
|
|
|
|||
Loading…
Reference in a new issue