From 8a3704fa448d787e7d6b5aafedf8aafb58ccf06f Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Tue, 2 Jan 2018 18:10:19 +0100
Subject: [PATCH] feat(pomodoro): outline basic interface #32

---
 app-src/scripts/constants.js                  |  8 ++-
 .../pomodoro-button/_pomodoro-button-cp.scss  |  9 +++-
 .../pomodoro-button/pomodoro-button-cp.html   | 17 +++----
 .../pomodoro-button/pomodoro-button-cp.js     | 16 ++++++
 .../pomodoro-button/pomodoro-button-s.js      | 51 ++++++++++++++++---
 5 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/app-src/scripts/constants.js b/app-src/scripts/constants.js
index 8e90262ec0..eefdae5cd1 100644
--- a/app-src/scripts/constants.js
+++ b/app-src/scripts/constants.js
@@ -58,8 +58,12 @@
       currentProject: undefined,
       currentSession: {
         timeWorkedWithoutBreak: undefined,
-        pomodoroIsOnBreak: false,
-        pomodoroCurrentCycle: 0,
+        pomodoro:{
+          status : undefined,
+          isOnBreak: false,
+          currentCycle: 0,
+          currentSessionTime: undefined,
+        }
       },
       tasks: [],
       backlogTasks: [],
diff --git a/app-src/scripts/pomodoro-button/_pomodoro-button-cp.scss b/app-src/scripts/pomodoro-button/_pomodoro-button-cp.scss
index e1e9f09ba0..df606d1a70 100644
--- a/app-src/scripts/pomodoro-button/_pomodoro-button-cp.scss
+++ b/app-src/scripts/pomodoro-button/_pomodoro-button-cp.scss
@@ -3,10 +3,17 @@ pomodoro-button {
   display: inline-block;
   max-height: 40px;
 
+  .timer-btn {
+    font-size: 12px;
+    text-align: center !important;
+    padding-left: 5px !important;
+    font-weight: bold;
+  }
+
   md-fab-actions {
 
     .md-fab-action-item {
-      margin-top: 10px;
+      margin-top: 5px;
     }
   }
 }
\ No newline at end of file
diff --git a/app-src/scripts/pomodoro-button/pomodoro-button-cp.html b/app-src/scripts/pomodoro-button/pomodoro-button-cp.html
index 12f6caa6a5..5812ada335 100644
--- a/app-src/scripts/pomodoro-button/pomodoro-button-cp.html
+++ b/app-src/scripts/pomodoro-button/pomodoro-button-cp.html
@@ -4,29 +4,24 @@
                    ng-mouseenter="$ctrl.isOpen=true"
                    ng-mouseleave="$ctrl.isOpen=false">
   <md-fab-trigger>
-    <md-button class="md-icon-button md-accent md-raised">
-      <ng-md-icon icon="play_arrow"
-                  ng-if="$ctrl.status==='PLAY'"></ng-md-icon>
-      <ng-md-icon icon="pause"
-                  ng-if="$ctrl.status==='PAUSE'"></ng-md-icon>
-      <ng-md-icon icon="border_color"
-                  ng-if="$ctrl.status==='STOP'"></ng-md-icon>
+    <md-button class="md-icon-button md-accent md-raised timer-btn">
+      {{ $ctrl.svc.data.currentSessionTime | date:'mm:ss' }}
     </md-button>
   </md-fab-trigger>
   <md-fab-actions>
     <md-button class="md-fab md-raised md-mini"
-               ng-click="$ctrl.start()"
-               ng-if="$ctrl.status!=='PLAY'">
+               ng-click="$ctrl.play()"
+               ng-if="$ctrl.svc.data.status!=='PLAY'">
       <ng-md-icon icon="play_arrow"></ng-md-icon>
     </md-button>
     <md-button class="md-fab md-raised md-mini"
                ng-click="$ctrl.pause()"
-               ng-if="$ctrl.status!=='PAUSE'">
+               ng-if="$ctrl.svc.data.status==='PLAY'">
       <ng-md-icon icon="pause"></ng-md-icon>
     </md-button>
     <md-button class="md-fab md-raised md-mini"
                ng-click="$ctrl.stop()"
-               ng-if="$ctrl.status!=='STOP'">
+               ng-if="$ctrl.svc.data.status==='PLAY'">
       <ng-md-icon icon="stop"></ng-md-icon>
     </md-button>
   </md-fab-actions>
diff --git a/app-src/scripts/pomodoro-button/pomodoro-button-cp.js b/app-src/scripts/pomodoro-button/pomodoro-button-cp.js
index 6c750b9935..c326bfa51b 100644
--- a/app-src/scripts/pomodoro-button/pomodoro-button-cp.js
+++ b/app-src/scripts/pomodoro-button/pomodoro-button-cp.js
@@ -11,6 +11,22 @@
   class PomodoroButtonCtrl {
     /* @ngInject */
     constructor(PomodoroButton) {
+      this.svc = PomodoroButton;
+    }
+
+    play() {
+      this.svc.play();
+      this.isOpen = false
+    }
+
+    pause() {
+      this.svc.pause();
+      this.isOpen = false
+    }
+
+    stop() {
+      this.svc.stop();
+      this.isOpen = false
     }
   }
 
diff --git a/app-src/scripts/pomodoro-button/pomodoro-button-s.js b/app-src/scripts/pomodoro-button/pomodoro-button-s.js
index deab192634..00d9aa3c21 100644
--- a/app-src/scripts/pomodoro-button/pomodoro-button-s.js
+++ b/app-src/scripts/pomodoro-button/pomodoro-button-s.js
@@ -9,24 +9,63 @@
 (() => {
   'use strict';
 
+  const PLAY = 'PLAY';
+  const PAUSE = 'PAUSE';
+  const STOP = 'STOP';
+  const TICK_INTERVAL = 1000;
+
   class PomodoroButton {
     /* @ngInject */
-    constructor() {
+    constructor($rootScope, $interval) {
+      this.$rootScope = $rootScope;
+      this.$interval = $interval;
+
+      this.data = this.$rootScope.r.currentSession.pomodoro || {};
+      this.$rootScope.r.currentSession.pomodoro = this.data;
+
+      // DEFAULTS
+      this.data.status = STOP;
+      this.data.currentSessionTime = 0;
+
+      // TODO: INIT REMOTE INTERFACE
     }
 
-    startWorkSession() {
+    play() {
+      this.data.status = PLAY;
 
+      if (this.data.currentSessionTime) {
+        this.continueTimer();
+      } else {
+        this.initTimer();
+      }
     }
 
-    startBreak(){
-
+    pause() {
+      this.data.status = PAUSE;
+      this.$interval.cancel(this.timer);
     }
 
-    stop(){
-
+    stop() {
+      this.data.status = STOP;
+      this.$interval.cancel(this.timer);
+      this.data.currentSessionTime = 0;
     }
 
+    initTimer() {
+      this.data.currentSessionTime = 0;
+      this.continueTimer();
+    }
 
+    continueTimer() {
+      this.timer = this.$interval(() => {
+        this.tick();
+      }, TICK_INTERVAL);
+    }
+
+    tick() {
+      this.data.currentSessionTime += TICK_INTERVAL;
+      console.log('TICK', this.data.currentSessionTime);
+    }
   }
 
   angular