Phi: Add stopwatch widget

webgui/main.js

@@ -52,7 +52,6 @@ require([
                 // send subscriptions when the socket is open
                 var c = self.openCache;
                 delete self.openCache;
-                console.log(c);
                 c.forEach(function(e) {
                     self.addListener(e.prop, e.koObservable);
                 });
@@ -77,7 +76,6 @@ require([
         self.addListener = function(alias, koObservable) {
             if (self.openCache) {
                 // socket not yet open, just cache the request
-                console.log("caching listener request");
                 self.openCache.push({
                     "prop" : alias,
                     "koObservable" : koObservable
@@ -97,7 +95,6 @@ require([
 
             self.listeners[path] = koObservable;
 
-            console.log("subscribing to " + alias);
             self.ws.send(JSON.stringify({
                 command : 'addListener',
                 node : path
@@ -332,6 +329,10 @@ require([
         require : 'widgets/efis'
     });
 
+    ko.components.register('stopwatch', {
+        require : 'widgets/Stopwatch'
+    });
+
     ko.applyBindings(new PhiViewModel());
 
 });

webgui/topics/Tools.js

@@ -2,6 +2,10 @@ define([
         'knockout', 'text!./Tools.html'
 ], function(ko, htmlString) {
 
+    ko.components.register('Tools/Stopwatch', {
+        require : 'topics/Tools/Stopwatch'
+    });
+
     function ViewModel(params) {
         var self = this;
 

webgui/topics/Tools/Stopwatch.html

@@ -0,0 +1,4 @@
+<div data-bind="foreach: watches">
+    <div data-bind="component: { name: 'stopwatch' }"></div>
+</div>
+<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>

webgui/topics/Tools/Stopwatch.js

@@ -0,0 +1,23 @@
+define([
+        'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button'
+], function(jquery, ko, htmlString) {
+
+    function ViewModel(params) {
+        var self = this;
+        
+        self.watches = ko.observableArray([]);
+        
+        self.addWatch = function() {
+            self.watches.push(self.watches().length);
+        }
+    }
+
+     ViewModel.prototype.dispose = function() {
+     }
+
+    // Return component definition
+    return {
+        viewModel : ViewModel,
+        template : htmlString
+    };
+});

webgui/widgets/Stopwatch.html

@@ -0,0 +1,14 @@
+
+<div class="ui-widget ui-corner-all">
+    <div class="ui-widget-header">Stopwatch</div>
+    <div class="ui-widget-content ui-corner-all">
+        <div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
+            <span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
+                data-bind="text: secondsDisplay"></span>
+        </div>
+        <div>
+            <button data-bind="button: { refreshOn: startIcons, text: false, icons: startIcons, label: startLabel }, click: startStopPause">Start</button>
+            <button data-bind="button: { text: false, icons: { primary: ' ui-icon-refresh' } }, click: clear">Restart</button>
+        </div>
+    </div>
+</div>

webgui/widgets/Stopwatch.js

@@ -0,0 +1,100 @@
+define([
+        'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button'
+], function(jquery, ko, htmlString) {
+
+    function ViewModel(params) {
+        var self = this;
+
+        self.MODE = {
+            STOPPED : 0,
+            PAUSED : 1,
+            RUNNING : 2,
+        };
+
+        self.mode = ko.observable(self.MODE.STOPPED);
+        self.elapsedTime = ko.observable(0);
+        self.elapsedTimeSeconds = ko.pureComputed(function() {
+            return (self.elapsedTime() / 1000).toFixed(0);
+        });
+
+        self.startLabel = ko.pureComputed(function() {
+            return self.mode() == self.MODE.RUNNING ? "Pause" : "Start";
+        });
+
+        self.startIcons = ko.pureComputed(function() {
+            return self.mode() == self.MODE.RUNNING ? {
+                primary : 'ui-icon-pause'
+            } : {
+                primary : 'ui-icon-play'
+            };
+        });
+
+        function twoDigits(n) {
+            if (n >= 10)
+                return n.toString();
+            else
+                return '0' + n.toString();
+        }
+
+        self.hoursDisplay = ko.pureComputed(function() {
+            return twoDigits(Math.floor(self.elapsedTimeSeconds() / 3600));
+        });
+
+        self.minutesDisplay = ko.pureComputed(function() {
+            return twoDigits(Math.floor(self.elapsedTimeSeconds() / 60) % 60);
+        });
+
+        self.secondsDisplay = ko.pureComputed(function() {
+            return twoDigits(self.elapsedTimeSeconds() % 60);
+        });
+
+        self.startTime = 0;
+        self.runTime = 0;
+        self.cumulatedTime = 50;
+
+        self.startStopPause = function() {
+            switch (self.mode()) {
+            case self.MODE.STOPPED:
+            case self.MODE.PAUSED:
+                self.mode(self.MODE.RUNNING);
+                break;
+            case self.MODE.RUNNING:
+                self.mode(self.MODE.PAUSED);
+                self.cumulatedTime = self.elapsedTime();
+                break;
+
+            }
+
+            if (self.mode() == self.MODE.RUNNING) {
+                self.startTime = new Date();
+                self.update();
+            }
+        }
+
+        self.update = function() {
+            if (self.mode() != self.MODE.RUNNING)
+                return;
+
+            var now = new Date();
+            self.elapsedTime(self.cumulatedTime + (now - self.startTime));
+            setTimeout(function() {
+                self.update();
+            }, 100);
+        }
+
+        self.clear = function() {
+            self.cumulatedTime = 0;
+            self.startTime = new Date();
+            self.elapsedTime(0);
+        }
+    }
+
+    ViewModel.prototype.dispose = function() {
+    }
+
+    // Return component definition
+    return {
+        viewModel : ViewModel,
+        template : htmlString
+    };
+});