Add play/pause buttons

vvmk · Sep 3, 2018 · 8ff838f · 8ff838f
1 parent edef673
commit 8ff838f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/app/runner/drill-runner/drill-runner.component.html b/src/app/runner/drill-runner/drill-runner.component.html
@@ -33,6 +33,14 @@ <h5 class="my-3 text-center routine-duration">
             <span class="mt-5 p-0 text-center drill-tick">
                 {{drillTick}}
             </span>
+            <div class="mb-2 mt-auto running-controls">
+                <button class="btn btn-link btn-lg pause-button" (click)="pauseDrills()" *ngIf="!paused">
+                    <fa-icon class="text-dark" [icon]="faPause"></fa-icon>
+                </button>
+                <button class="btn btn-link btn-lg resume-button" (click)="resumeDrills()" *ngIf="paused">
+                    <fa-icon class="text-dark" [icon]="faPlay"></fa-icon>
+                </button>
+            </div>
         </div>
     </div>
 </div>

diff --git a/src/app/runner/drill-runner/drill-runner.component.ts b/src/app/runner/drill-runner/drill-runner.component.ts
@@ -33,6 +33,8 @@ export class DrillRunnerComponent implements OnInit {
   private drillTick: number;
 
   running = false;
+  paused = false;
+
   breakTime = 5;
   oneSecond = 1100;
 
@@ -131,6 +133,20 @@ export class DrillRunnerComponent implements OnInit {
     }
   }
 
+  pauseDrills() {
+    this.paused = true;
+    clearTimeout(this.clock);
+
+    console.log('pause');
+  }
+
+  resumeDrills() {
+    this.paused = false;
+    this.countdown(this.drillTick + 3);
+
+    console.log('resume');
+  }
+
   setProps(data): void {
     this.routine = data['routine'];
     this.drills = this.routine.drills;