Time clock timer component

src/app/app-routing.module.ts

@@ -19,7 +19,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -17,14 +17,14 @@
         </div>
 
         <div class="card-body">
-            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
-            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
             <h6 class="text-left"><strong>Totals</strong></h6>
             <hr>
             <div class="row">
                 <div class="col-4">
                     <h6>Current</h6>
-                    <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+                    <h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
                 </div>
                 <div class="col-4">
                     <h6>Day</h6>

src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts

@@ -33,13 +33,13 @@ describe('TimeClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
+  it('should have p tag as \'Dario clocked out at 00:00:00\'', async(() => {
     // tslint:disable-next-line: no-shadowed-variable
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
-    expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
+    expect(ptag.textContent).toBe('Dario clocked out at 00:00:00');
   }));
 
   it('should set showfileds as true', () => {

src/app/components/options-sidebar/time-clock/time-clock.component.ts

@@ -15,29 +15,36 @@ export class TimeClockComponent  implements OnInit {
     { id: 'P4', name: 'Project 4' }
   ];
 
+  currentDate: Date = new Date();
   username = 'Dario';
-  clockInUsername = 'hh:mm:ss';
-  clockOutUsername = 'hh:mm:ss';
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;
-
+  showFields: boolean;
+  hourCounterRealTime: number;
+  minuteCounterRealTime: number;
+  secondsCounterRealTime: number;
   hour: number;
   minute: number;
   seconds: number;
-
-  showFields: boolean;
+  interval;
+  dataTechnology: string;
 
   constructor() {
     this.isClockIn = true;
     this.isEnterTechnology = false;
+    this.hourCounterRealTime = 0;
+    this.minuteCounterRealTime = 0;
+    this.secondsCounterRealTime = 0;
     this.hour = 0;
     this.minute = 0;
     this.seconds = 0;
    }
 
    employeClockIn(): boolean {
      this.isClockIn = !this.isClockIn;
+     this.startTimer();
+     this.setTimeToInOut();
      return this.isClockIn;
    }
 
@@ -46,13 +53,17 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
+       this.dataTechnology = '';
        this.isClockIn = true;
        this.isEnterTechnology = false;
        this.showAlertEnterTecnology = false;
+       this.pauseTimer();
+       this.setTimeToInOut();
      }
    }
 
    enterTechnology(data: string) {
+     this.dataTechnology = data;
      if ( data.length > 0 ) {
       this.isEnterTechnology = true;
      } else {
@@ -63,6 +74,37 @@ export class TimeClockComponent  implements OnInit {
    setShowFields(show: boolean) {
     this.isClockIn = false;
     this.showFields = show;
+    this.startTimer();
+    this.setTimeToInOut();
+  }
+
+  startTimer() {
+    this.interval = setInterval(() => {
+      this.timer();
+    }, 1000 );
+   }
+
+   pauseTimer() {
+     clearInterval(this.interval);
+   }
+
+   timer() {
+    this.secondsCounterRealTime += 1;
+    if ( this.secondsCounterRealTime === 59 ) {
+      this.minuteCounterRealTime += 1;
+      this.secondsCounterRealTime = 0;
+      if ( this.minuteCounterRealTime === 59 ) {
+        this.hourCounterRealTime += 1;
+        this.minuteCounterRealTime = 0;
+      }
+    }
+  }
+
+  setTimeToInOut() {
+    this.currentDate = new Date();
+    this.hour = this.currentDate.getHours();
+    this.minute = this.currentDate.getMinutes();
+    this.seconds = this.currentDate.getSeconds();
   }
 
   ngOnInit(): void {}

src/app/components/shared/clock/clock.component.spec.ts

@@ -6,7 +6,6 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -25,13 +24,18 @@ describe('ClockComponent', () => {
   });
 
   it('should show the current hour of day', () => {
-    const currentHour = 11;
-    expect(component.currentDate.getHours()).toEqual(currentHour);
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getHours()).toEqual(currentDate.getHours());
   });
 
   it('should show the current minutes of day', () => {
-    const currenMinutes = 5;
-    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getMinutes()).toEqual(currentDate.getMinutes());
+  });
+
+  it('should show the current seconds of day', () => {
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getSeconds()).toEqual(currentDate.getSeconds());
   });
 
 });