Phi: Add Pause/Play buttons, widgets hidable

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"
+                <div class="right-floating" data-bind="buttonset: {}">
-                    data-bind="button: { icons: { primary: 'ui-icon-refresh' }, text: false }, click: refresh">Refresh Page</button>
+                    <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">

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 = {

webgui/main.js

@@ -18,8 +18,8 @@ require.config({
 });
 
 require([
-        'knockout', 'jquery','sammy',  'themeswitch', 'kojqui/button', 'flot', 'leaflet'
+        'knockout', 'jquery','sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu', 'flot', 'leaflet'
-], function(ko, jquery, Sammy) {
+], 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'
     });

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>

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
+    };
+});