Working on the time tracker

resources/views/tasks/time_tracker.blade.php

@@ -220,7 +220,8 @@
 										<tr data-bindx="event: { mouseover: showActions, mouseout: hideActions }">
 											<td style="padding: 0 6px 10px 0">
 												{!! Former::text('date')
-														->data_bindx("")
+														->data_bind("datepicker: startDate, valueUpdate: 'afterkeydown'")
+														->data_date_format(Session::get(SESSION_DATE_PICKER_FORMAT, DEFAULT_DATE_PICKER_FORMAT))
 														->raw() !!}
 											</td>
 											<td style="padding: 0 6px 10px 6px">
@@ -376,7 +377,6 @@
         var tasks = {!! $tasks !!};
 		var clients = {!! $clients !!};
 	    var projects = {!! $projects !!};
-        var dateTimeFormat = '{{ $account->getMomentDateTimeFormat() }}';
         var timezone = '{{ $account->getTimezone() }}';
 
 		var clientMap = {};

resources/views/tasks/time_tracker_knockout.blade.php

@@ -20,6 +20,22 @@
         return new Date(1970, 0, 1, hours, minutes, seconds, 0);
     }
 
+    ko.bindingHandlers.datepicker = {
+        init: function (element, valueAccessor, allBindingsAccessor) {
+           $(element).datepicker();
+           $(element).change(function() {
+              var value = valueAccessor();
+              value($(element).datepicker('getDate'));
+           })
+        },
+        update: function (element, valueAccessor) {
+           var value = ko.utils.unwrapObservable(valueAccessor());
+           if (value) {
+               $(element).datepicker('setDate', new Date(value * 1000));
+           }
+        }
+    };
+
     ko.bindingHandlers.timepicker = {
         init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().timepickerOptions || {};
@@ -32,10 +48,16 @@
 
            ko.utils.registerEventHandler(element, 'change', function () {
              var value = valueAccessor();
+             var field = $(element).attr('name');
+             var time = 0;
+             if (field == 'duration') {
+                time = $(element).timepicker('getSecondsFromMidnight');
+             } else {
                  var dateTime = $(element).timepicker('getTime');
                  if (dateTime) {
                      time = dateTime.getTime() / 1000;
                  }
+             }
              value(time);
            });
         },
@@ -46,8 +68,10 @@
           if (field == 'duration') {
               $(element).timepicker('setTime', intToTime(value));
           } else {
+              if (value) {
                   $(element).timepicker('setTime', new Date(value * 1000));
               }
+          }
 
           //console.log(field + ': ' + value);
           if (field == 'start_time') {
@@ -948,6 +972,15 @@
             self.endTime(data[1]);
         };
 
+        self.startDate = ko.computed({
+            read: function () {
+                return self.startTime();
+            },
+            write: function(value) {
+                console.log('New Date: ' + value);
+            }
+        });
+
         self.order = ko.computed(function() {
             return self.startTime();
         });
@@ -969,12 +1002,10 @@
             read: function () {
                 model.clock(); // bind to the clock
                 var endTime = self.endTime() ? self.endTime() : moment().unix();
-                //console.log('duration: ' + (endTime - self.startTime()));
                 return endTime - self.startTime();
             },
             write: function(value) {
-                console.log('duration: ' + value);
+                self.endTime(self.startTime() + value);
-                //self.endTime(value);
             }
         });