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,42 @@
 .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;
 }
+
+.place-holder-danger::-webkit-input-placeholder {
+    /* WebKit, Blink, Edge */
+    color: #909;
+}
+
+.place-holder-danger:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #909;
+    opacity: 1;
+}
+
+.placeholder-danger::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #DC3545 !important;
+    opacity: 1;
+}
+
+.placeholder-danger:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::placeholder {
+    /* Most modern browsers support this now. */
+    color: #DC3545 !important;
+}

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,14 +12,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>
@@ -62,7 +57,8 @@ <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 placeholder-danger " placeholder="Field technology is requiered. Enter this field for clock out.">
                     </div>
                 </div>
             </form>

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,40 @@ 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;
+  execOnlyOneTimeCounter = 0;
+  execOnlyOneTimeClockIn = 0;
+  isClockInEnable = false;
 
   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.startTimer();
+     this.setTimeToInOut();
      return this.isClockIn;
    }
 
@@ -46,13 +57,15 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.isClockIn = true;
-       this.isEnterTechnology = false;
-       this.showAlertEnterTecnology = false;
+       this.setVarToEmpty();
+       this.pauseTimer();
+       this.setTimeToInOut();
+
      }
    }
 
    enterTechnology(data: string) {
+     this.dataTechnology = data;
      if ( data.length > 0 ) {
       this.isEnterTechnology = true;
      } else {
@@ -61,8 +74,58 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
-    this.isClockIn = false;
-    this.showFields = show;
+     if ( this.isClockInEnable !== true ) {
+      this.isClockIn = false;
+      this.showFields = show;
+      if (  this.execOnlyOneTimeCounter === 0 ) {
+        this.startTimer();
+        this.execOnlyOneTimeCounter++;
+      }
+      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() {
+    if ( this.execOnlyOneTimeClockIn === 0 ) {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minute = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+      this.execOnlyOneTimeClockIn++;
+    }
+
+  }
+
+  setVarToEmpty() {
+    this.dataTechnology = '';
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.showAlertEnterTecnology = false;
+    this.execOnlyOneTimeClockIn = 0;
+    this.execOnlyOneTimeCounter = 0;
+    this.isClockInEnable = false;
   }
 
   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());
   });
 
 });