diff --git a/webgui/index.html b/webgui/index.html index 4d6ccb163..c6617133b 100644 --- a/webgui/index.html +++ b/webgui/index.html @@ -224,23 +224,16 @@ html, body, #wrapper { height: 100%; } -#refresh-button { +.right-floating { float: right; } -.switcher_container:before { - content: 'Theme'; - padding-right: 0.5em; - color: white; -} - .switcher_container { padding-right: 5px; float: right; } .switcher_list { - padding: 2px; } .switcher_label { @@ -264,15 +257,19 @@ html, body, #wrapper { click: $root.selectTopic"> </li> </ul> - <button id="refresh-button" - data-bind="button: { icons: { primary: 'ui-icon-refresh' }, text: false }, click: refresh">Refresh Page</button> - <div id="ui-theme-switcher"></div> + <div class="right-floating" data-bind="buttonset: {}"> + <button data-bind="button: { icons: { primary: 'ui-icon-refresh' }, text: false }, click: refresh" title="Refresh Page"></button> + <button data-bind="button: { icons: { primary: 'ui-icon-pause' }, text: false}, click: doPause" title="Pause"></button> + <button data-bind="button: { icons: { primary: 'ui-icon-play' }, text: false}, click: doUnpause" title="Play"></button> + <div id="ui-theme-switcher"></div> + </div> </div> <div id="htabs-content" data-bind="component: { name: selectedTopic, params: { topic: selectedSubtopic } }"></div> </div> <div id="widgetarea"> <div data-bind="foreach: widgets"> - <div class="phi-widget" data-bind="component: { name: $data }"></div> + <sidebarwidget params="widget: $data"> + </sidebarwidget> </div> </div> <div id="statusbar"> diff --git a/webgui/lib/fgcommand.js b/webgui/lib/fgcommand.js index 5d25e1938..1596cceea 100644 --- a/webgui/lib/fgcommand.js +++ b/webgui/lib/fgcommand.js @@ -119,6 +119,18 @@ this.sendCommand("request-metar", this.twoArgs("station", id, "path", path)); }, + togglepause : function() { + this.sendCommand("pause"); + }, + + unpause : function() { + this.sendCommand("pause", this.oneArg("force-play", true)); + }, + + pause : function() { + this.sendCommand("pause", this.oneArg("force-pause", true)); + }, + multiplayerConnect : function(cmd) { cmd = cmd || {}; var arg = { diff --git a/webgui/main.js b/webgui/main.js index 7d9c006cf..831ddca26 100644 --- a/webgui/main.js +++ b/webgui/main.js @@ -18,8 +18,8 @@ require.config({ }); require([ - 'knockout', 'jquery','sammy', 'themeswitch', 'kojqui/button', 'flot', 'leaflet' -], function(ko, jquery, Sammy) { + 'knockout', 'jquery','sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu', 'flot', 'leaflet' +], function(ko, jquery, Sammy, fgcommand ) { function KnockProps(aliases) { @@ -359,6 +359,14 @@ require([ location.reload(); } + self.doPause = function() { + fgcommand.pause(); + } + + self.doUnpause = function() { + fgcommand.unpause(); + } + // Client-side routes Sammy(function() { this.get('#:topic', function() { @@ -375,6 +383,7 @@ require([ this.app.runRoute( 'get', '#' + self.topics[0] ); }); }).run(); + } ko.components.register('Aircraft', { @@ -401,6 +410,10 @@ require([ require : 'topics/Help' }); + ko.components.register('sidebarwidget', { + require : 'widgets/sidebarwidget' + }); + ko.components.register('map', { require : 'widgets/map' }); diff --git a/webgui/widgets/sidebarwidget.html b/webgui/widgets/sidebarwidget.html new file mode 100644 index 000000000..da5adc8a8 --- /dev/null +++ b/webgui/widgets/sidebarwidget.html @@ -0,0 +1,33 @@ +<style> +.widget-header-button { + font-size: unset; +} +</style> +<div data-bind="event: { mouseover: onMouseover, mouseout: onMouseout }"> + <div> + <button + data-bind=" + button: { + icons: { + primary: pinned() ? 'ui-icon-pin-s' : 'ui-icon-pin-w' + }, + text: false + }, + click: pin" + class="widget-header-button" title="Pin"></button> + <button + data-bind=" + button: { + icons: { + primary: 'ui-icon-circlesmall-close' + }, + text: false + }, + click: close" + class="widget-header-button" title="Close"></button> + <span data-bind="text: widget"></span> + </div> + + <div class="phi-widget" data-bind="component: { name: widget }, visible: expanded"></div> + +</div> diff --git a/webgui/widgets/sidebarwidget.js b/webgui/widgets/sidebarwidget.js new file mode 100644 index 000000000..792d93279 --- /dev/null +++ b/webgui/widgets/sidebarwidget.js @@ -0,0 +1,35 @@ +define([ + 'jquery', 'knockout', 'text!./sidebarwidget.html', 'jquery-ui/draggable', +], function(jquery, ko, htmlString) { + + function ViewModel(params) { + var self = this; + + self.widget = ko.observable(params.widget); + + self.pinned = ko.observable(true); + self.pin = function() { + self.pinned(!self.pinned()); + } + + self.close = function() { + } + + self.expanded = ko.observable(true); + + self.onMouseover = function() { + self.expanded(true); + } + + self.onMouseout = function() { + if (!self.pinned()) + self.expanded(false); + } + } + + // Return component definition + return { + viewModel : ViewModel, + template : htmlString + }; +});