From 5c9d964ffc2eef6fca0baacc6b7aba7f4ee10aae Mon Sep 17 00:00:00 2001 From: Manuel Colorado Date: Sun, 10 Mar 2019 21:39:41 +0000 Subject: [PATCH] added option to switch between pomodoro or standard timer --- src/app/app.component.spec.ts | 12 ++--- src/app/app.module.ts | 11 ++--- src/app/components/timer/timer.component.html | 47 +++++++++++++++---- .../components/timer/timer.component.spec.ts | 7 +-- src/app/components/timer/timer.component.ts | 31 ++++++++++-- src/app/services/settings.service.ts | 28 ++++++----- src/app/services/timer.service.ts | 4 ++ 7 files changed, 99 insertions(+), 41 deletions(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 85ed1ac..a06d634 100644 --- a/src/app/app.component.spec.ts +++ b/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(); })); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5cd597d..dd10352 100644 --- a/src/app/app.module.ts +++ b/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 {} diff --git a/src/app/components/timer/timer.component.html b/src/app/components/timer/timer.component.html index bacf82e..9812f33 100644 --- a/src/app/components/timer/timer.component.html +++ b/src/app/components/timer/timer.component.html @@ -1,13 +1,43 @@

Timer Component

- - - - +
+
+ +
+
+ + min. +
+
+ +
+
+
+ + + + +
Timer Component />
+

{{ time }}

diff --git a/src/app/components/timer/timer.component.spec.ts b/src/app/components/timer/timer.component.spec.ts index 170b780..e79c472 100644 --- a/src/app/components/timer/timer.component.spec.ts +++ b/src/app/components/timer/timer.component.spec.ts @@ -1,6 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { TimerComponent } from './timer.component'; +import { FormsModule } from '@angular/forms'; describe('TimerComponent', () => { let component: TimerComponent; @@ -8,9 +9,9 @@ describe('TimerComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TimerComponent ] - }) - .compileComponents(); + imports: [FormsModule], + declarations: [TimerComponent] + }).compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/timer/timer.component.ts b/src/app/components/timer/timer.component.ts index d64fde3..3690225 100644 --- a/src/app/components/timer/timer.component.ts +++ b/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(); + } } diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index 208a923..7e46d26 100644 --- a/src/app/services/settings.service.ts +++ b/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; diff --git a/src/app/services/timer.service.ts b/src/app/services/timer.service.ts index 2b0b63e..8430269 100644 --- a/src/app/services/timer.service.ts +++ b/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()}`; + } }