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.css

@@ -1,10 +1,10 @@
 .content-ClockIn {
-  padding: 2.1rem 1rem;
+    padding: 2.1rem 1rem;
 }
 
 .timer {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-}
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+}

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

@@ -1,9 +1,4 @@
-<div class="text-center mt-3">
-
-    <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
-        Field technology is requiered. Enter this field for clock out.
-    </div>
-
+<div class="text-center mt-5">
     <div class="card">
         <div class="card-header">
             <div class="row">
@@ -17,22 +12,22 @@
         </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>
-                    <h3>4:22</h3>
+                    <h3>00:00</h3>
                 </div>
                 <div class="col-4">
                     <h6>Week</h6>
-                    <h3>14:00</h3>
+                    <h3>00:00</h3>
                 </div>
             </div>
             <h6 class="text-left"><strong>Projects</strong></h6>
@@ -46,7 +41,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
             </ul>
             <br>
-            <form *ngIf="!isClockIn || showFields">
+            <form *ngIf="(!isClockIn || showFields) && !isHidenForm">
                 <div class="form-group row">
                     <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
                     <div class="col-sm-10">
@@ -62,19 +57,23 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <div class="form-group row">
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
-                        <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                        <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
+                        <div>
+                            <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
+                        </div>
                     </div>
                 </div>
             </form>
             <hr>
             <div class="container">
                 <div class="row">
-                    <div class="col text-left">
+                    <div class="col text-left" id="optionsContainer">
                         <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Options
                           </button>
                     </div>
-                    <div class="col text-right">
+                    <div class="col text-right" id="clockInOutContainer">
                         <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
                         <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
                     </div>

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

@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { DebugElement, Component } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
@@ -10,7 +10,6 @@ describe('TimeClockComponent', () => {
   let de: DebugElement;
 
   function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
     const fixture = TestBed.createComponent(TimeClockComponent);
     const app = fixture.debugElement.componentInstance;
     return { fixture, app };
@@ -33,13 +32,12 @@ describe('TimeClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { app, fixture } = setup();
+  it('should have p tag as \'Dario clocked out at 00:00:00\'', async(() => {
+    const { 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', () => {
@@ -63,4 +61,45 @@ describe('TimeClockComponent', () => {
     li.nativeElement.click();
     expect(component.setShowFields).toHaveBeenCalledWith(true);
   });
+
+  it('should have button text as Options', async(() => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('optionsContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe(' Options ');
+  }));
+
+  it('should set Clock In', () => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('clockInOutContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe('Clock In');
+  });
+
+  it('should setVartToEmpty called', () => {
+    spyOn(component, 'setDefaultValuesToFields');
+    component.setDefaultValuesToFields();
+    expect(component.setDefaultValuesToFields).toHaveBeenCalled();
+  });
+
+  it('should employeClockIn called', () => {
+    spyOn(component, 'employeClockIn');
+    component.employeClockIn();
+    expect(component.employeClockIn).toHaveBeenCalled();
+  });
+
+  it('should employeClockOut called', () => {
+    spyOn(component, 'employeClockOut');
+    component.employeClockOut();
+    expect(component.employeClockOut).toHaveBeenCalled();
+  });
+
+  it('should enterTechnolofy called', () => {
+    spyOn(component, 'enterTechnology');
+    component.enterTechnology('');
+    expect(component.enterTechnology).toHaveBeenCalled();
+  });
+
 });

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

@@ -15,29 +15,42 @@ 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[] = new Array();
+  execOnlyOneTimeCounter = false;
+  execOnlyOneTimeClockIn = false;
+  isClockInEnable = false;
+  isHidenForm = true;
 
   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.isClockInEnable = true;
      this.isClockIn = !this.isClockIn;
+     this.isHidenForm = false;
+     this.startTimer();
+     this.setArrivalAndDepartureTimes();
      return this.isClockIn;
    }
 
@@ -46,9 +59,9 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.isClockIn = true;
-       this.isEnterTechnology = false;
-       this.showAlertEnterTecnology = false;
+       this.setDefaultValuesToFields();
+       this.pauseTimer();
+       this.setArrivalAndDepartureTimes();
      }
    }
 
@@ -61,10 +74,62 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
-    this.isClockIn = false;
-    this.showFields = show;
+     this.isHidenForm = false;
+     if ( this.isClockInEnable !== true ) {
+      this.isClockIn = false;
+      this.showFields = show;
+      if (  !this.execOnlyOneTimeCounter  ) {
+        this.startTimer();
+        this.execOnlyOneTimeCounter = true;
+      }
+      this.setArrivalAndDepartureTimes();
+     }
+  }
+
+  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;
+      }
+    }
+  }
+
+  setArrivalAndDepartureTimes() {
+    if ( !this.execOnlyOneTimeClockIn ) {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minute = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+      this.execOnlyOneTimeClockIn = true;
+    }
+
   }
 
-  ngOnInit(): void {}
+  setDefaultValuesToFields() {
+    this.isHidenForm = true;
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.showAlertEnterTecnology = false;
+    this.execOnlyOneTimeClockIn = false;
+    this.execOnlyOneTimeCounter = false;
+    this.isClockInEnable = false;
+  }
+
+  ngOnInit(): void {
+  }
 
 }

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

@@ -1,11 +1,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ClockComponent } from './clock.component';
+import { interval, timer } from 'rxjs';
 
 describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(ClockComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -25,13 +32,19 @@ 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());
+  });
+
+
 });

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

@@ -15,14 +15,14 @@ export class ClockComponent implements OnInit {
   displayTime: boolean;
 
   constructor() {
-    this.showClcok();
+    this.showClock();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
-   showClcok() {
+   showClock() {
     const timenInterval = interval(1000);
     timenInterval.subscribe( (data) => {
       this.currentDate = new Date();