Working on the time tracker

resources/views/tasks/time_tracker.blade.php

@@ -220,7 +220,7 @@
 										<tr data-bind="event: { mouseover: onMouseOver, mouseout: onMouseOut }">
 											<td style="padding: 0 6px 10px 0">
 												{!! Former::text('date')
-														->placeholder('date')
+														->placeholder($account->formatDate($account->getDateTime()))
 														->data_bind("datepicker: startDate, valueUpdate: 'afterkeydown'")
 														->data_date_format(Session::get(SESSION_DATE_PICKER_FORMAT, DEFAULT_DATE_PICKER_FORMAT))
 														->raw() !!}
@@ -228,13 +228,13 @@
 											<td style="padding: 0 6px 10px 6px">
 												{!! Former::text('start_time')
 														->placeholder('start_time')
-														->data_bind("timepicker: startTime, timepickerOptions: {scrollDefault: 'now', timeFormat: '" . ($account->military_time ? 'H:i:s' : 'g:i:s A') . "'}")
+														->data_bind("timepicker: startTimeOfDay, timepickerOptions: {scrollDefault: 'now', timeFormat: '" . ($account->military_time ? 'H:i:s' : 'g:i:s A') . "'}")
 														->raw() !!}
 											</td>
 											<td style="padding: 0 6px 10px 6px">
 												{!! Former::text('end_time')
 														->placeholder('end_time')
-														->data_bind("timepicker: endTime, timepickerOptions: {scrollDefault: 'now', timeFormat: '" . ($account->military_time ? 'H:i:s' : 'g:i:s A') . "'}")
+														->data_bind("timepicker: endTimeOfDay, timepickerOptions: {scrollDefault: 'now', timeFormat: '" . ($account->military_time ? 'H:i:s' : 'g:i:s A') . "'}")
 														->raw() !!}
 											</td>
 											<td style="padding: 0 0 10px 6px">

resources/views/tasks/time_tracker_knockout.blade.php

@@ -48,6 +48,9 @@
 
            ko.utils.registerEventHandler(element, 'change', function () {
              var value = valueAccessor();
+             var seconds = $(element).timepicker('getSecondsFromMidnight');
+             value(seconds);
+             /*
              var field = $(element).attr('name');
              var time = 0;
              if (field == 'duration') {
@@ -59,16 +62,17 @@
                  }
              }
              value(time);
+             */
            });
         },
         update: function (element, valueAccessor) {
           var value = ko.utils.unwrapObservable(valueAccessor());
           var field = $(element).attr('name');
 
+          if (value) {
               if (field == 'duration') {
                   $(element).timepicker('setTime', intToTime(value));
               } else {
-              if (value) {
                   $(element).timepicker('setTime', new Date(value * 1000));
               }
           }
@@ -662,8 +666,18 @@
             }
         }
 
-        if (data) {
+        self.checkForEmpty = function() {
-            self.update(data);
+            var hasEmpty = false;
+            var lastTime = 0;
+            for (var i=0; i<self.time_log().length; i++) {
+                var timeLog = self.time_log()[i];
+                if (timeLog.isEmpty() || timeLog.isRunning()) {
+                    hasEmpty = true;
+                }
+            }
+            if (!hasEmpty) {
+                self.addTime();
+            }
         }
 
         self.sortValue = function(field) {
@@ -712,6 +726,9 @@
         }
 
         self.addTime = function(time) {
+            if (!time) {
+                time = new TimeModel();
+            }
             self.time_log.push(time);
         }
 
@@ -897,9 +914,14 @@
         });
 
         self.removeTime = function(time) {
-            console.log('removed..');
             model.formChanged(true);
             self.time_log.remove(time);
+            self.checkForEmpty();
+        }
+
+        if (data) {
+            self.update(data);
+            self.checkForEmpty();
         }
     }
 
@@ -991,18 +1013,50 @@
             self.isHovered(false);
         }
 
+        self.startDateMidnight = function() {
+            return moment.unix(self.startTime()).set('hours', 0).set('minutes', 0).set('seconds', 0);
+        }
+
+        self.startTimeOfDay = ko.computed({
+            read: function () {
+                return self.startTime();
+            },
+            write: function(value) {
+                console.log('midnigh: ' + self.startDateMidnight().unix());
+                console.log('value: ' + value);
+                self.startTime(self.startDateMidnight().unix() + value);
+            }
+        });
+
+        self.endTimeOfDay = ko.computed({
+            read: function () {
+                return self.endTime();
+            },
+            write: function(value) {
+
+            }
+        });
+
+
         self.startDate = ko.computed({
             read: function () {
                 return self.startTime();
             },
             write: function(value) {
-                var origVal = moment.unix(self.startTime()).set('hours', 0).set('minutes', 0).set('seconds', 0);
+                var origVal = self.startDateMidnight();
                 var newVal = moment(value).set('hours', 0);
                 var diff = newVal.diff(origVal, 'days') * 60 * 60 * 24;
+                if (self.startTime()) {
                     self.startTime(self.startTime() + diff);
+                    console.log('update start to: ' + self.startTime());
                     if (self.endTime()) {
                         self.endTime(self.endTime() + diff);
                     }
+                } else {
+                    self.startTime(newVal.unix());
+                    //self.startTime(value);
+                    console.log('set start to: ' + self.startTime());
+                }
             }
         });
 
@@ -1026,6 +1080,9 @@
         self.duration = ko.computed({
             read: function () {
                 model.clock(); // bind to the clock
+                if (! self.startTime()) {
+                    return false;
+                }
                 var endTime = self.endTime() ? self.endTime() : moment().unix();
                 return endTime - self.startTime();
             },