From 1189d7c8e8ac4020cff5c814913db01a866d12ea Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Sun, 1 Oct 2017 12:01:31 +0300
Subject: [PATCH] Working on the time tracker

---
 resources/views/tasks/time_tracker.blade.php  | 11 ++++++--
 .../tasks/time_tracker_knockout.blade.php     | 27 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/resources/views/tasks/time_tracker.blade.php b/resources/views/tasks/time_tracker.blade.php
index f295fa70f5d9..26e17fb15960 100644
--- a/resources/views/tasks/time_tracker.blade.php
+++ b/resources/views/tasks/time_tracker.blade.php
@@ -127,7 +127,7 @@
 		}
 
 		.ui-timepicker-wrapper {
-			width: 10em !important;
+			width: 200px !important;
 		}
 
 		.footer {
@@ -217,28 +217,35 @@
 
 								<table class="table times-table" style="margin-bottom: 0px !important;">
 									<tbody data-bind="foreach: selectedTask().time_log">
-										<tr data-bindx="event: { mouseover: showActions, mouseout: hideActions }">
+										<tr data-bind="event: { mouseover: onMouseOver, mouseout: onMouseOut }">
 											<td style="padding: 0 6px 10px 0">
 												{!! Former::text('date')
+														->placeholder('date')
 														->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">
 												{!! 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') . "'}")
 														->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') . "'}")
 														->raw() !!}
 											</td>
 											<td style="padding: 0 0 10px 6px">
 												{!! Former::text('duration')
+														->placeholder('duration')
 														->data_bind("timepicker: duration, timepickerOptions: {timeFormat: 'H:i:s', showAsDuration: true}")
 														->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">
diff --git a/resources/views/tasks/time_tracker_knockout.blade.php b/resources/views/tasks/time_tracker_knockout.blade.php
index 15d673cc8658..8be1f0ec3bc3 100644
--- a/resources/views/tasks/time_tracker_knockout.blade.php
+++ b/resources/views/tasks/time_tracker_knockout.blade.php
@@ -73,10 +73,11 @@
               }
           }
 
-          //console.log(field + ': ' + value);
           if (field == 'start_time') {
-              $input = $(element).closest('td').next('td').find('input').show();
-              $input.timepicker('option', 'durationTime', $(element).val());
+              setTimeout(function() {
+                  $input = $(element).closest('td').next('td').find('input').show();
+                  $input.timepicker('option', 'durationTime', $(element).val());
+              }, 1);
           }
         }
     };
@@ -894,6 +895,12 @@
             var duration = self.seconds(false);
             return Math.floor(duration.asHours()) + moment.utc(duration.asMilliseconds()).format(":mm:ss");
         });
+
+        self.removeTime = function(time) {
+            console.log('removed..');
+            model.formChanged(true);
+            self.time_log.remove(time);
+        }
     }
 
     function ProjectModel(data) {
@@ -963,15 +970,27 @@
         var self = this;
         self.startTime = ko.observable(0);
         self.endTime = ko.observable(0);
-        self.actionsVisible = ko.observable(false);
         self.isStartValid = ko.observable(true);
         self.isEndValid = ko.observable(true);
+        self.isHovered = ko.observable(false);
 
         if (data) {
             self.startTime(data[0]);
             self.endTime(data[1]);
         };
 
+        self.actionButtonVisible = ko.computed(function() {
+            return self.isHovered() && ! self.isEmpty();
+        });
+
+        self.onMouseOver = function() {
+            self.isHovered(true);
+        }
+
+        self.onMouseOut = function() {
+            self.isHovered(false);
+        }
+
         self.startDate = ko.computed({
             read: function () {
                 return self.startTime();