Merge pull request #17 from Narshe1412/timer

Closes #13 added option to switch between pomodoro or standard timer

src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { FormsModule } from '@angular/forms';
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
@@ -8,15 +9,8 @@ import { MatToolbarModule } from '@angular/material';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        MatToolbarModule
-      ],
-      declarations: [
-        AppComponent,
-        TimerComponent,
-
-      ],
+      imports: [RouterTestingModule, MatToolbarModule, FormsModule],
+      declarations: [AppComponent, TimerComponent]
       // schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   }));

src/app/app.module.ts

@@ -6,19 +6,18 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TimerComponent } from './components/timer/timer.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    TimerComponent
-  ],
+  declarations: [AppComponent, TimerComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatToolbarModule
+    MatToolbarModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/components/timer/timer.component.html

@@ -1,13 +1,43 @@
 <div>
   <h1>Timer Component</h1>
-  <button #start [disabled]="timerStatus === 'running'" [hidden]="timerStatus === 'running'">
-    {{ timerStatus === 'paused' ? 'Restart' : 'Start' }}
-  </button>
-  <button #pause [disabled]="timerStatus !== 'running'">Pause</button>
-  <button #resume [disabled]="timerStatus !== 'paused'">Resume</button>
-  <button #stop [disabled]="timerStatus !== 'running'" [hidden]="timerStatus === 'stopped'">
-    Stop
-  </button>
+  <div>
+    <div>
+      <select name="timertypeselector" id="timertypeselector" [(ngModel)]="timertypeselector">
+        <option value="pomodoro">Pomodoro</option>
+        <option value="standard">Standard 60min</option>
+        <option value="custom">Custom</option>
+      </select>
+    </div>
+    <div *ngIf="timertypeselector === 'custom'">
+      <input
+        type="text"
+        name="customtime"
+        id="customtime"
+        placeholder="Time in minutes"
+        [(ngModel)]="customtime"
+      />
+      <span> min.</span>
+    </div>
+    <div>
+      <button
+        disabled="true"
+        [disabled]="timerStatus === 'running' || isNaN(customtime) || customtime <= 0"
+        (click)="handleSelectTimerType()"
+      >
+        Change Timer Type
+      </button>
+    </div>
+  </div>
+  <div>
+    <button #start [disabled]="timerStatus === 'running'" [hidden]="timerStatus === 'running'">
+      {{ timerStatus === 'paused' ? 'Restart' : 'Start' }}
+    </button>
+    <button #stop [disabled]="timerStatus !== 'running'" [hidden]="timerStatus === 'stopped'">
+      Stop
+    </button>
+    <button #pause [disabled]="timerStatus !== 'running'">Pause</button>
+    <button #resume [disabled]="timerStatus !== 'paused'">Resume</button>
+  </div>
 </div>
 <div>
   <input
@@ -28,4 +58,5 @@ <h1>Timer Component</h1>
   />
   <label for="stopwatch">Stopwatch</label>
 </div>
+
 <h1 id="timerDisplay">{{ time }}</h1>

src/app/components/timer/timer.component.spec.ts

@@ -1,16 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TimerComponent } from './timer.component';
+import { FormsModule } from '@angular/forms';
 
 describe('TimerComponent', () => {
   let component: TimerComponent;
   let fixture: ComponentFixture<TimerComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TimerComponent ]
-    })
-    .compileComponents();
+      imports: [FormsModule],
+      declarations: [TimerComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/app/components/timer/timer.component.ts

@@ -10,29 +10,44 @@ import { SettingsService, CountingType } from 'src/app/services/settings.service
   styleUrls: ['./timer.component.scss']
 })
 export class TimerComponent implements OnInit, AfterViewInit, OnDestroy {
+  // HTML element references
   @ViewChild('pause') pauseBtn: ElementRef;
   @ViewChild('start') startBtn: ElementRef;
   @ViewChild('resume') resumeBtn: ElementRef;
   @ViewChild('stop') stopBtn: ElementRef;
   @ViewChild('countdown') countdownRd: ElementRef;
   @ViewChild('stopwatch') stopwatchRd: ElementRef;
+
+  // Class variables
+  // Observables
   private timer$: any;
   private isInterested$: any;
+  // Flag variables used from the HTML
+  public customtime;
+  public timertypeselector;
   public timerStatus: TimerStatus;
 
+  /**
+   * This makes the isNaN js function available from the HTML template rendered in angular
+   */
+  public isNaN = (x: any) => isNaN(x);
+
   constructor(private timerService: TimerService, private settings: SettingsService) {
     this.timerService.timerStatus$.subscribe(status => {
       this.timerStatus = status;
     });
   }
 
+  /**
+   * Returns the text representation of the time in the HH:MM:SS format
+   */
   public get time() {
-    console.log(this.timerService.currentTime);
-    return `${this.timerService.getDisplayHours()}:${this.timerService.getDisplayMinutes()}:${this.timerService.getDisplaySeconds()}`;
+    return this.timerService.getDisplayTimeInHHMMSS();
   }
 
   ngOnInit() {
     this.timer$ = timer(1000, 1000);
+    this.customtime = '';
   }
 
   ngOnDestroy() {
@@ -55,7 +70,7 @@ export class TimerComponent implements OnInit, AfterViewInit, OnDestroy {
     );
 
     const resumeBtnClick$ = fromEvent(this.resumeBtn.nativeElement, 'click').pipe(
-      tap(() => (this.timerService.timerStatus = TimerStatus.running)),
+      tap(_ => (this.timerService.timerStatus = TimerStatus.running)),
       mapTo(true)
     );
 
@@ -79,8 +94,16 @@ export class TimerComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  public changeCountdownType(type: CountingType) {
+  public changeCountdownType(type) {
     this.settings.countingType = type;
     this.timerService.resetTimer();
   }
+
+  public handleSelectTimerType() {
+    this.settings.timerType = this.timertypeselector;
+    if (this.timertypeselector === 'custom' && this.customtime) {
+      this.settings.timerStartAmount = this.customtime * 60;
+    }
+    this.timerService.resetTimer();
+  }
 }

src/app/services/settings.service.ts

@@ -29,7 +29,6 @@ export class SettingsService {
   private _timerStartAmount;
 
   // Setters/getters
-
   /**
    * Obtains the starting amount for a clock
    * @returns The default value for a pomodoro/standard clock, or if custom value is selected, return that one
@@ -39,16 +38,7 @@ export class SettingsService {
     if (this._timerStartAmount) {
       return this._timerStartAmount;
     }
-
-    // Return default otherwise
-    switch (this.timerType) {
-      case 'pomodoro':
-        return POMODORO_DEFAULT_START;
-      case 'standard':
-        return STANDARD_DEFAULT_START;
-      default:
-        return this._timerStartAmount || 0;
-    }
+    return this.getDefaultTimePerType(this.timerType);
   }
 
   /**
@@ -70,6 +60,7 @@ export class SettingsService {
    * Sets the type of timer that would be used if the user does not want to mess with the settings
    */
   public set timerType(value: 'pomodoro' | 'standard' | 'custom') {
+    this.timerStartAmount = this.getDefaultTimePerType(value);
     this._timerType = value;
   }
 
@@ -107,6 +98,21 @@ export class SettingsService {
     }
   }
 
+  /**
+   * Obtains the default time after a type has been passed to the function
+   */
+  private getDefaultTimePerType(timerType) {
+    // Return default otherwise
+    switch (timerType) {
+      case 'pomodoro':
+        return POMODORO_DEFAULT_START;
+      case 'standard':
+        return STANDARD_DEFAULT_START;
+      default:
+        return this.timerStartAmount || 0;
+    }
+  }
+
   constructor() {
     this.countingType = defaults.countingType;
     this.timerStartAmount = defaults.startTime;

src/app/services/timer.service.ts

@@ -89,4 +89,8 @@ export class TimerService {
   public resetTimer() {
     this.currentTime = this.settings.timerStartAmount;
   }
+
+  public getDisplayTimeInHHMMSS(): string {
+    return `${this.getDisplayHours()}:${this.getDisplayMinutes()}:${this.getDisplaySeconds()}`;
+  }
 }