Merge pull request #17 from ioet/Clock-Component

Clock component

Author: enriquezrene

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

@@ -24,7 +24,7 @@ <h6 class="text-left"><strong>Totals</strong></h6>
             <div class="row">
                 <div class="col-4">
                     <h6>Current</h6>
-                    <h3>-</h3>
+                    <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | 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

@@ -1,7 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
@@ -41,7 +40,6 @@ describe('TimeClockComponent', () => {
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
     expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
-
   }));
 
   it('should set showfileds as true', () => {

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

@@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.css']
 })
+
 export class TimeClockComponent  implements OnInit {
 
   projects = [
@@ -17,15 +18,22 @@ export class TimeClockComponent  implements OnInit {
   username = 'Dario';
   clockInUsername = 'hh:mm:ss';
   clockOutUsername = 'hh:mm:ss';
-
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;
+
+  hour: number;
+  minute: number;
+  seconds: number;
+
   showFields: boolean;
 
   constructor() {
     this.isClockIn = true;
     this.isEnterTechnology = false;
+    this.hour = 0;
+    this.minute = 0;
+    this.seconds = 0;
    }
 
    employeClockIn(): boolean {
@@ -58,4 +66,5 @@ export class TimeClockComponent  implements OnInit {
   }
 
   ngOnInit(): void {}
+
 }

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

@@ -6,6 +6,7 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -22,4 +23,15 @@ describe('ClockComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show the current hour of day', () => {
+    const currentHour = 11;
+    expect(component.currentDate.getHours()).toEqual(currentHour);
+  });
+
+  it('should show the current minutes of day', () => {
+    const currenMinutes = 5;
+    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+  });
+
 });

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { interval, timer } from 'rxjs';
 
 @Component({
   selector: 'app-clock',
@@ -7,23 +8,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClockComponent implements OnInit {
 
-  currentDate: Date;
+  currentDate: Date = new Date();
   hour: number;
   minutes: number;
   seconds: number;
   displayTime: boolean;
 
   constructor() {
-    this.currentDate = new Date();
-    this.hour = this.currentDate.getHours();
-    this.minutes = this.currentDate.getMinutes();
-    this.seconds = this.currentDate.getSeconds();
+    this.showClcok();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
+   showClcok() {
+    const timenInterval = interval(1000);
+    timenInterval.subscribe( (data) => {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+    });
+   }
+
   ngOnInit(): void {
   }