Changes made

trainer/src/app/app.component.html

@@ -1,4 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <h3>Personal Trainer</h3>
 </nav>
-<h3>Welcome to, {{title}}!</h3>
+<div class="container body-content app-container">
+      <abe-workout-runner></abe-workout-runner>
+</div>

trainer/src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
+import { WorkoutRunnerModule } from './workout-runner/workout-runner.module';
 
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    WorkoutRunnerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

trainer/src/app/workout-runner/exercise-description/exercise-description.component.html

@@ -0,0 +1,20 @@
+<div>
+  <div class="card">
+    <h4 class="card-header">
+      Description
+    </h4>
+    <div class="card-body">
+      <div class="card-text">{{description}}</div>
+    </div>
+  </div>
+  <br>
+  <div class="card">
+    <h4 class="card-header">
+      Steps
+    </h4>
+    <div class="card-body">
+      <div class="card-text" [innerHTML]="steps">
+      </div>
+    </div>
+  </div>
+</div>

trainer/src/app/workout-runner/exercise-description/exercise-description.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExerciseDescriptionComponent } from './exercise-description.component';
+
+describe('ExerciseDescriptionComponent', () => {
+  let component: ExerciseDescriptionComponent;
+  let fixture: ComponentFixture<ExerciseDescriptionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExerciseDescriptionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExerciseDescriptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

trainer/src/app/workout-runner/exercise-description/exercise-description.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'abe-exercise-description',
+  templateUrl: './exercise-description.component.html',
+  styles: []
+})
+export class ExerciseDescriptionComponent implements OnInit {
+  @Input() description: string;
+  @Input() steps: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

trainer/src/app/workout-runner/model.ts

@@ -0,0 +1,35 @@
+export class WorkoutPlan {
+    constructor(
+        public name: string,
+        public title: string,
+        public restBetweenExercise: number,
+        public exercises: ExercisePlan[],
+        public description?: string) {
+    }
+
+    totalWorkoutDuration(): number {
+        if (!this.exercises) {
+            return 0;
+        }
+
+        const total = this.exercises.map((e) => e.duration).reduce((previous, current) => previous + current);
+
+        return (this.restBetweenExercise ? this.restBetweenExercise : 0) * (this.exercises.length - 1) + total;
+    }
+}
+
+export class ExercisePlan {
+    constructor(public exercise: Exercise, public duration: number) {
+    }
+}
+
+export class Exercise {
+    constructor(
+        public name: string,
+        public title: string,
+        public description: string,
+        public image: string,
+        public nameSound?: string,
+        public procedure?: string,
+        public videos?: Array<string>) { }
+}

trainer/src/app/workout-runner/shared/seconds-to-time.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SecondsToTimePipe } from './seconds-to-time.pipe';
+
+describe('SecondsToTimePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SecondsToTimePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

trainer/src/app/workout-runner/shared/seconds-to-time.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'secondsToTime'
+})
+export class SecondsToTimePipe implements PipeTransform {
+
+  transform(value: number): any {
+    if (!isNaN(value)) {
+      const hours = Math.floor(value / 3600);
+      const minutes = Math.floor((value - (hours * 3600)) / 60);
+      const seconds = value - (hours * 3600) - (minutes * 60);
+
+      return ('0' + hours).substr(-2) + ':'
+        + ('0' + minutes).substr(-2) + ':'
+        + ('0' + seconds).substr(-2);
+    }
+    return;
+  }
+}

trainer/src/app/workout-runner/video-player/video-player.component.html

@@ -0,0 +1,8 @@
+<div class="card">
+    <h4 class="card-header">Videos</h4>
+  <div class="card-body">
+    <div *ngFor="let video of safeVideoUrls">
+      <iframe width="198" height="132" [src]="video" frameborder="0" allowfullscreen></iframe>
+    </div>
+  </div>
+</div>

trainer/src/app/workout-runner/video-player/video-player.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoPlayerComponent } from './video-player.component';
+
+describe('VideoPlayerComponent', () => {
+  let component: VideoPlayerComponent;
+  let fixture: ComponentFixture<VideoPlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoPlayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

trainer/src/app/workout-runner/video-player/video-player.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, OnChanges, Input, ViewEncapsulation } from '@angular/core';
+import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'abe-video-player',
+  templateUrl: './video-player.component.html',
+  styles:[]
+})
+export class VideoPlayerComponent implements OnInit, OnChanges {
+
+  private youtubeUrlPrefix = '//www.youtube.com/embed/';
+
+  @Input() videos: Array<string>;
+  safeVideoUrls: Array<SafeResourceUrl>;
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  ngOnChanges() {
+    this.safeVideoUrls = this.videos ?
+      this.videos.map(v => this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeUrlPrefix + v))
+      : this.videos;
+  }
+
+  ngOnInit() {
+  }
+
+}

trainer/src/app/workout-runner/workout-runner.component.html

@@ -0,0 +1,31 @@
+<div class="row pt-4">
+  <div id="description-panel" class="col-sm-3">
+    <abe-exercise-description [description]="currentExercise.exercise.description" [steps]="currentExercise.exercise.procedure"></abe-exercise-description>
+  </div>
+  <div id="exercise-pane" class="col-sm-6">
+    <div id="pause-overlay" (click)="pauseResumeToggle()" (window:keyup)="onKeyPressed($event)">
+      <span class="pause absolute-center" [ngClass]="{'ion-md-pause' : !workoutPaused, 'ion-md-play' : workoutPaused}"></span>
+    </div>
+    <h4 class="text-center">Workout Remaining - {{workoutTimeRemaining | secondsToTime}}</h4>
+    <h1 class="text-center">{{currentExercise.exercise.title}}</h1>
+    <div class="image-container row">
+      <img class="img-fluid col-sm" [src]="'/assets/images/' + currentExercise.exercise.image" style="max-height: 80%;"/>
+    </div>
+    <div class="progress time-progress row">
+      <div class="progress-bar" role="progressbar" [attr.aria-valuenow]="exerciseRunningDuration" aria-valuemin="0" [attr.aria-valuemax]="currentExercise.duration"
+        [ngStyle]="{'width':(exerciseRunningDuration/currentExercise.duration) * 100 + '%'}">
+      </div>
+    </div>
+    <div class="row">
+      <h4 class="col-sm-6 text-left">Time Remaining:
+        <strong>{{currentExercise.duration-exerciseRunningDuration}}</strong>
+      </h4>
+      <h4 class="col-sm-6 text-right" *ngIf="currentExercise.exercise.name=='rest'">Next up:
+        <strong>{{workoutPlan.exercises[currentExerciseIndex + 1].exercise.title}}</strong>
+      </h4>
+    </div>
+  </div>
+  <div id="video-panel" class="col-sm-3">
+    <abe-video-player [videos]="currentExercise.exercise.videos"></abe-video-player>
+  </div>
+</div>

trainer/src/app/workout-runner/workout-runner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkoutRunnerComponent } from './workout-runner.component';
+
+describe('WorkoutRunnerComponent', () => {
+  let component: WorkoutRunnerComponent;
+  let fixture: ComponentFixture<WorkoutRunnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkoutRunnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkoutRunnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});