Working on the time tracker

resources/views/tasks/time_tracker.blade.php

@@ -245,28 +245,13 @@
 											<td style="padding: 0 0 10px 6px">
 												{!! Former::text('duration')
 														->placeholder('duration')
-														->data_bind("timepicker: duration, timepickerOptions: {timeFormat: 'H:i:s', showAsDuration: true}")
+														->data_bind("typeahead: duration")
 														->raw() !!}
 											</td>
 											<td style="width:38px; padding-top: 0px; padding-right: 8px">
 												<i style="cursor:pointer;float:right" data-bind="click: $root.selectedTask().removeTime, visible: actionButtonVisible" class="fa fa-minus-circle redlink" title="{{ trans('texts.remove') }}"/>
 											</td>
 
-											<!--
-											<td style="padding: 0px 12px 12px 0 !important">
-												<div data-bind="css: { 'has-error': !isStartValid() }">
-													<input type="text" data-bind="dateTimePicker: startTime.pretty, event:{ change: $root.refresh }"
-													class="form-control time-input time-input-start" placeholder="{{ trans('texts.start_time') }}"/>
-												</div>
-											</td>
-											<td style="padding: 0px 12px 12px 0 !important; width:100px">
-												<input type="text" data-bind="value: duration.pretty, visible: !isEmpty()" class="form-control"></div>
-												<a href="#" data-bind="click: function() { setNow(), $root.refresh() }, visible: isEmpty()">{{ trans('texts.set_now') }}</a>
-											</td>
-											<td style="width:30px" class="td-icon">
-												<i style="width:12px;cursor:pointer" data-bind="click: $root.removeItem, visible: actionsVisible() &amp;&amp; !isEmpty()" class="fa fa-minus-circle redlink" title="Remove item"/>
-											</td>
-											-->
 										</tr>
 									</tbody>
 								</table>

resources/views/tasks/time_tracker_knockout.blade.php

@@ -49,7 +49,6 @@
            ko.utils.registerEventHandler(element, 'change', function () {
              var value = valueAccessor();
              var seconds = $(element).timepicker('getSecondsFromMidnight');
-             console.log('seconds:' + seconds);
              value(seconds);
            });
         },
@@ -76,6 +75,55 @@
         }
     };
 
+    var defaultTimes = [];
+    for (var i=15; i<(15*4*24); i+=15) {
+        var time = moment.utc(i * 1000 * 60).format("HH:mm:ss");
+        defaultTimes.push(time);
+    }
+
+    var timeMatcher = function(strs) {
+      return function findMatches(q, cb) {
+        var matches, substringRegex;
+        matches = [];
+        substrRegex = new RegExp(q, 'i');
+        $.each(strs, function(i, str) {
+          if (substrRegex.test(str)) {
+            matches.push(str);
+          }
+        });
+        cb(matches);
+      };
+    };
+
+    ko.bindingHandlers.typeahead = {
+        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+            var $element = $(element);
+            var allBindings = allBindingsAccessor();
+            $element.typeahead({
+                highlight: true,
+                minLength: 0,
+            },
+            {
+                name: 'times',
+                source: timeMatcher(defaultTimes)
+            }).on('typeahead:select', function(element, datum, name) {
+                var value = valueAccessor();
+                var duration = moment.duration(datum).asSeconds();
+                value(duration);
+            });
+        },
+
+        update: function (element, valueAccessor) {
+            var value = ko.utils.unwrapObservable(valueAccessor());
+            if (value) {
+                var duration = moment.duration(value * 1000);
+                var value = Math.floor(duration.asHours()) + moment.utc(duration.asMilliseconds()).format(":mm:ss")
+                $(element).typeahead('val', value);
+                //$(element).typeahead('val', moment.utc(value * 1000).format("H:mm:ss"));
+            }
+        }
+    };
+
 
     function ViewModel() {
         var self = this;
@@ -672,9 +720,6 @@
                 var startValid = true;
                 var endValid = true;
                 if (!timeLog.isEmpty()) {
-                    console.log('1: ' + (lastTime && timeLog.startTime() < lastTime));
-                    console.log('2: ' + (timeLog.endTime() && timeLog.startTime() > timeLog.endTime()));
-                    console.log('end: ' + timeLog.endTime());
                     if ((lastTime && timeLog.startTime() < lastTime) || (timeLog.endTime() && timeLog.startTime() > timeLog.endTime())) {
                         startValid = false;
                     }
@@ -1130,8 +1175,12 @@
                 }
                 var endTime = self.endTime() ? self.endTime() : moment().unix();
                 return endTime - self.startTime();
+                //var duration = moment.duration((endTime - self.startTime()) * 1000);
+                //console.log(Math.floor(duration.asHours()) + moment.utc(duration.asMilliseconds()).format(":mm:ss"));
+                //return Math.floor(duration.asHours()) + moment.utc(duration.asMilliseconds()).format(":mm:ss");
             },
             write: function(value) {
+                console.log('end: ' + (self.startTime() + value));
                 self.endTime(self.startTime() + value);
             }
         });