feat(pomodoro): outline basic interface #32

johannesjo · Jan 3, 2018 · 8a3704f · 8a3704f
1 parent 791c422
commit 8a3704f
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 19 deletions.
diff --git 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
@@ -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;
     }
   }
 }
diff --git 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
@@ -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
@@ -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;
 
-    startWorkSession() {
+      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
     }
 
-    startBreak(){
+    play() {
+      this.data.status = PLAY;
+
+      if (this.data.currentSessionTime) {
+        this.continueTimer();
+      } else {
+        this.initTimer();
+      }
+    }
 
+    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