Phi: implement setting of date and time

Use MIT licensed clockpicker from
http://weareoutman.github.io/clockpicker/ for Android like clock picker

Know bug: next/prev month click only works with ctrl-click (jquery bug?)

Phi/index.html

@@ -31,6 +31,7 @@
 
 <link rel="stylesheet" type="text/css" href="/Fonts/LiberationFonts/LiberationFonts.css">
 <link rel="stylesheet" href="3rdparty/leaflet-0.7.3/leaflet.css" />
+<link rel="stylesheet" href="3rdparty/clockpicker/jquery-clockpicker.min.css" />
 <link id="ui-theme" rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />
 
 <style>

Phi/main.js

@@ -16,7 +16,8 @@ require.config({
         props : 'lib/props2',
         sammy: '3rdparty/sammy-latest.min',
         aircraft: '../aircraft-dir',
-        pagedown: '3rdparty/pagedown'
+        pagedown: '3rdparty/pagedown',
+        clockpicker: '3rdparty/clockpicker/jquery-clockpicker.min',
     }
 });
 
@@ -265,7 +266,7 @@ require([
             [
                     "gmt", "/sim/time/gmt"
             ], [
-                    "local-offset", "/sim/time/local-offset"
+                    "timeWarp", "/sim/time/warp"
             ],
 
             // flight

Phi/topics/Environment/DateTime.html

@@ -11,13 +11,15 @@
 </fieldset>
 <fieldset>
     <legend>Date and Time</legend>
-    <div>Current System Time is: <span data-bind="text: simTimeUTC().toUTCString()"></span></div>
-    
-    <div data-bind="datepicker: { value: simTimeUTC }"></div>
     <div>
-        <input class="phi-datetime-2digits" data-bind="spinner: { value: hour, spin: wrapHour, page: 6 }" /> 
-        <input class="phi-datetime-2digits" data-bind="spinner: { value: minute, spin: wrapMinute }" />
-        
+        Current System Time is: <span data-bind="text: timeAsString"></span>
     </div>
 
+    <div data-bind="datepicker: { value: simTimeAsLocalTime, onSelect: onDateSelect }"></div>
+    <div class="input-group clockpicker">
+    <input type="text" class="form-control" value="18:00">
+    <span class="input-group-addon">
+        <span class="glyphicon glyphicon-time"></span>
+    </span>
+</div>
 </fieldset>

Phi/topics/Environment/DateTime.js

@@ -1,5 +1,5 @@
 define([
-        'jquery', 'knockout', 'text!./DateTime.html', 'fgcommand', 'kojqui/datepicker', 'kojqui/spinner'
+        'jquery', 'knockout', 'text!./DateTime.html', 'fgcommand', 'kojqui/datepicker', 'kojqui/spinner', 'clockpicker'
 ], function(jquery, ko, htmlString, fgcommand) {
     function ViewModel(params) {
         var self = this;
@@ -27,54 +27,63 @@ define([
             fgcommand.timeofday(offsetType);
         }
 
-        self.wrapHour = function(evt, ui) {
-           return self._wrap(evt,ui,0,24);
-        }
+        self.gmtProp = ko.observable().extend({
+            fgprop : 'gmt'
+        });
+        //TODO: bind this to gmtProp?
+//      self.clockpickerInput.val(d.getUTCHours() + ':' + d.getUTCMinutes());
 
-        self.wrapMinute = function(evt, ui) {
-            return self._wrap(evt,ui,0,60);
-        }
-        
-        self._wrap = function(evt,ui,min,max) {
-            if (ui.value >= max) {
-                $(evt.target).spinner("value", ui.value - max);
-                return false;
-            } else if (ui.value < min) {
-                $(evt.target).spinner("value", ui.value + max);
-                return false;
-            }
-            $(evt.target).spinner("value",ui.value);
-            return true;
-        }
-
-        self.gmtProp = ko.observable().extend({ fgprop: 'gmt' });
-       
-        self.simTimeUTC = ko.pureComputed({
-            read: function() {
-                return new Date(self.gmtProp() + "Z");
-            },
-            write: function(newValue) {
-                console.log("new time: ", newValue );
-            }
+        self.warp = ko.observable().extend({
+            fgprop : 'timeWarp'
         });
 
+        self.simTimeUTC = ko.pureComputed(function() {
+            // make a Date object holding the UTC time
+            var d = new Date(self.gmtProp() + "Z");
+            return d.getTime();
+        });
         
-        self.hour = ko.pureComputed({
-            read: function() {
-                return self.simTimeUTC().getUTCHours();
-            },
-            write: function(newValue) {
-                console.log("new hour", newValue );
-            }
+        self.timeAsString = ko.pureComputed(function() {
+            var d = new Date();
+            d.setTime( self.simTimeUTC() );
+           return d.toUTCString() 
         });
-        self.minute = ko.pureComputed({
-            read: function() {
-                return self.simTimeUTC().getUTCMinutes();
-            },
-            write: function(newValue) {
-                console.log("new minute", newValue );
-            }
+        
+        self.simTimeAsLocalTime = ko.pureComputed(function() {
+            // jqui datepicker displays local (browser) time, so fake it by adding timezoneOffset
+            var d = new Date();
+            d.setTime( self.simTimeUTC() + 60000 * d.getTimezoneOffset() );
+            return d;
         });
+
+        self.onDateSelect = function(dateText, inst) {
+            var utc = new Date(self.simTimeUTC());
+            utc.setFullYear(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
+            self.setWarpFor( utc.getTime() );
+        }
+        
+        self.setWarpFor = function( newDateTime ) {
+            var warp = (newDateTime - self.simTimeUTC())/1000;
+            console.log("warp=", warp, self.warp());
+            ko.utils.knockprops.write( "timeWarp", self.warp() + warp );
+        }
+
+        // clockpicker: see http://weareoutman.github.io/clockpicker/
+        self.clockpicker = jquery('.clockpicker').clockpicker({
+            placement : 'top',
+            align : 'left',
+            autoclose : true,
+            afterDone : function() {
+                var utc = new Date();
+                utc.setTime( self.simTimeUTC() );
+                var hm = self.clockpickerInput.val().toString().split(":");
+                utc.setUTCHours(hm[0]);
+                utc.setUTCMinutes(hm[1]);
+                self.setWarpFor( utc.getTime() );
+            },
+        });
+
+        self.clockpickerInput = jquery('.clockpicker input');
     }
 
     ViewModel.prototype.dispose = function() {