Create timer component for tracking worker time.

gulpfile.js

@@ -24,6 +24,7 @@ var files = {
     'orchestra/static/orchestra/common/components/checklist/css/checklist.scss',
     'orchestra/static/orchestra/common/components/iframe/css/iframe.scss',
     'orchestra/static/orchestra/common/components/quill/css/quill.scss',
+    'orchestra/static/orchestra/common/components/timer/timer.scss',
     'orchestra/static/orchestra/common/css/orchestra.scss',
   ],
   all_scss: [],
@@ -50,7 +51,6 @@ gulp.task('scss', function() {
   return gulp.src(files.scss, {
       base: './'
     })
-    .pipe(cache('scss'))
     .pipe(gulpif(!argv.production, sourcemaps.init()))
     .pipe(sass())
     .pipe(gulpif(!argv.production, sourcemaps.write()))

orchestra/static/orchestra/common/components/timer/directives.js

@@ -0,0 +1,67 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('orchestra.common.components.directives')
+    .directive('workTimer', workTimer);
+
+  function workTimer() {
+    return {
+      restrict: 'E',
+      scope: {
+        taskId: '=taskId',
+      },
+      link: function(scope, el, attr) {
+      },
+      controller: workTimerController,
+      controllerAs: 'vm',
+      templateUrl: '/static/orchestra/common/components/timer/timer.html'
+    };
+  }
+
+  function makeTwoDigits(i) {
+    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+    return i;
+  }
+
+  function prettyDisplayTime(milliseconds) {
+    var hours = Math.floor(milliseconds / 1000 / 60 / 60);
+    milliseconds = milliseconds - hours * 1000 * 3600;
+    var mins = Math.floor(milliseconds / 1000 / 60);
+    milliseconds = milliseconds - mins * 1000 * 60;
+    var secs = Math.round(milliseconds / 1000);
+    mins = makeTwoDigits(mins);
+    secs = makeTwoDigits(secs);
+    return hours + ":" + mins + ":" + secs;
+  }
+
+  function workTimerController($scope, $timeout) {
+    var vm = this;
+    vm.taskId = $scope.taskId;
+    vm.displayTime = '';
+    vm.timerRunning = false;
+
+    var startTime = null;
+    var timerPromise = null;
+
+    vm.startTimer = function() {
+      function updateTime() {
+        var today = new Date();
+        var diff = today - startTime;
+        vm.displayTime = prettyDisplayTime(diff);
+        if (vm.timerRunning) {
+          timerPromise = $timeout(updateTime, 500);
+        }
+      }
+
+      startTime = new Date();
+      vm.timerRunning = true;
+      updateTime();
+    }
+
+    vm.stopTimer = function() {
+      $timeout.cancel(timerPromise);
+      vm.timerRunning = false;
+    }
+  }
+})();

orchestra/static/orchestra/common/components/timer/timer.html

@@ -0,0 +1,5 @@
+<div class="timer">
+  <a ng-if="!vm.timerRunning" class="start-timer btn" ng-click="vm.startTimer()">Start Timer</a>
+  <a ng-if="vm.timerRunning" class="start-timer btn" ng-click="vm.stopTimer()">Stop Timer</a>
+  <div class="time-display">{{vm.displayTime}}</div>
+</div>

orchestra/static/orchestra/common/components/timer/timer.scss

@@ -0,0 +1,18 @@
+@import 'orchestra/static/orchestra/common/css/common';
+
+.timer {
+  display: inline-block;
+
+  .start-timer.btn {
+    color: white;
+    background-color: $light-green;
+    display: inline-block;
+  }
+
+  .time-display {
+    font-size: 30px;
+    color: white;
+    margin-left: 20px;
+    display: inline-block;
+  }
+}

orchestra/templates/orchestra/base.html

@@ -36,6 +36,7 @@
     <link rel="stylesheet" type="text/css" href="{% static 'orchestra/common/components/checklist/lib/dragula/dragula.min.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'dist/orchestra/common/components/checklist/css/checklist.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'dist/orchestra/common/components/iframe/css/iframe.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'dist/orchestra/common/components/timer/timer.css' %}">
 
     {% block page_stylesheets %}
     {% endblock page_stylesheets %}

orchestra/templates/orchestra/index.html

@@ -12,6 +12,8 @@
 </div>
 <!--  notification end -->
 
+<work-timer task-id="1"></work_timer>
+
 <div id="nav-options" class="dropdown">
   <div class="dropdown-toggle" id="dropdown-menu-main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
     {{ user.username }}
@@ -72,6 +74,7 @@
 <script src="{% static "orchestra/common/components/iframe/js/directives.js" %}" type="text/javascript"></script>
 <script src="{% static "orchestra/common/components/project_folder/project_folder.js" %}" type="text/javascript"></script>
 <script src="{% static "orchestra/common/components/team_messages/team_messages.js" %}" type="text/javascript"></script>
+<script src="{% static "orchestra/common/components/timer/directives.js" %}" type="text/javascript"></script>
 <script src="{% static "orchestra/task/js/module.js" %}" type="text/javascript"></script>
 <script src="{% static "orchestra/task/js/controllers.js" %}" type="text/javascript"></script>
 <script src="{% static "orchestra/task/js/directives.js" %}" type="text/javascript"></script>