From b98dfa254dfe0bf00744d32ba52c8b828aca8bd3 Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Thu, 28 Sep 2017 12:34:02 +0300
Subject: [PATCH] Working on time tracker

---
 resources/views/tasks/time_tracker.blade.php  | 12 ++++++-
 .../tasks/time_tracker_knockout.blade.php     | 35 +++++++++++--------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/resources/views/tasks/time_tracker.blade.php b/resources/views/tasks/time_tracker.blade.php
index c0ac3e488300..01b13d46c620 100644
--- a/resources/views/tasks/time_tracker.blade.php
+++ b/resources/views/tasks/time_tracker.blade.php
@@ -101,6 +101,16 @@
         .list-group-item-type7:before { background-color: #a87821; }
         .list-group-item-type8:before { background-color: #676767; }
 
+		.list-group-item-running:after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 6px;
+            content: "";
+			background-color: #c9302c;
+        }
+
 		body {
 			margin-bottom: 60px;
 		}
@@ -254,7 +264,7 @@
 				</div>
 
 				<div data-bind="foreach: filteredTasks">
-	                <a href="#" data-bind="click: $parent.selectTask, event: { mouseover: showActionButton, mouseout: hideActionButton }, css: listItemState"
+	                <a href="#" data-bind="click: $parent.selectTask, event: { mouseover: onMouseOver, mouseout: onMouseOut }, css: listItemState"
 	                    class="list-group-item">
 	                    <div class="pull-right" style="text-align:right;">
 	                        <div data-bind="visible: actionButtonVisible()"
diff --git a/resources/views/tasks/time_tracker_knockout.blade.php b/resources/views/tasks/time_tracker_knockout.blade.php
index a99aeaa3a80c..24612776fd22 100644
--- a/resources/views/tasks/time_tracker_knockout.blade.php
+++ b/resources/views/tasks/time_tracker_knockout.blade.php
@@ -424,7 +424,7 @@
         self.project_id = ko.observable();
         self.client = ko.observable();
         self.project = ko.observable();
-        self.actionButtonVisible = ko.observable(false);
+        self.isHovered = ko.observable(false);
         self.created_at = ko.observable(moment().format('YYYY-MM-DD HH:mm:ss'));
 
         self.mapping = {
@@ -603,16 +603,29 @@
             return self.public_id();
         });
 
+        self.isRunning = ko.computed(function() {
+            var timeLog = self.time_log();
+            if (! timeLog.length) {
+                return false;
+            }
+            var time = timeLog[timeLog.length-1];
+            return time.isRunning();
+        });
+
+        self.actionButtonVisible = ko.computed(function() {
+            return self.isHovered();
+        });
+
         self.hasFocus = function() {
             console.log('focused... ' + self.public_id());
         }
 
-        self.showActionButton = function() {
-            self.actionButtonVisible(true);
+        self.onMouseOver = function() {
+            self.isHovered(true);
         }
 
-        self.hideActionButton = function() {
-            self.actionButtonVisible(false);
+        self.onMouseOut = function() {
+            self.isHovered(false);
         }
 
         self.addTime = function(time) {
@@ -703,6 +716,9 @@
                     str += ' changed fade-color';
                 }
             }
+            if (self.isRunning()) {
+                str += ' list-group-item-running';
+            }
             if (! self.project()) {
                 return str;
             }
@@ -712,15 +728,6 @@
 
         });
 
-        self.isRunning = ko.computed(function() {
-            var timeLog = self.time_log();
-            if (! timeLog.length) {
-                return false;
-            }
-            var time = timeLog[timeLog.length-1];
-            return time.isRunning();
-        });
-
         self.clientName = ko.computed(function() {
             return self.client() ? self.client().displayName() : '';
         });