added timer

Author: daros10

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

@@ -23,7 +23,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.ts

@@ -1,27 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { interval, timer } from 'rxjs';
+
 
 @Component({
   selector: 'app-time-clock',
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.css']
 })
-export class TimeClockComponent {
+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;
+
+  public timer;
+
   constructor() {
     this.isClockIn = true;
     this.isEnterTechnology = false;
+    this.hour = 0;
+    this.minute = 0;
+    this.seconds = 0;
    }
 
    employeClockIn(): boolean {
      this.isClockIn = !this.isClockIn;
+     this.enableTimer();
      return this.isClockIn;
    }
 
@@ -33,6 +44,7 @@ export class TimeClockComponent {
        this.isClockIn = true;
        this.isEnterTechnology = false;
        this.showAlertEnterTecnology = false;
+       console.log('Disble Timer');
      }
    }
 
@@ -43,4 +55,27 @@ export class TimeClockComponent {
        this.isEnterTechnology = false;
      }
    }
+
+   enableTimer() {
+    this.timer = interval(1000);
+    this.timer.subscribe( (data) => {
+      this.seconds += 1;
+      if ( this.seconds === 59 ) {
+        this.minute += 1;
+        this.seconds = 0;
+        if ( this.minute === 59 ) {
+          this.hour += 1;
+          this.minute = 0;
+        }
+      }
+      // console.log(this.hour + ' : ' + this.minute + ' : ' + this.seconds);
+    });
+
+   }
+
+
+   ngOnInit(): void {
+  }
+
+
 }

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',
@@ -14,16 +15,23 @@ export class ClockComponent implements OnInit {
   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 timer = interval(1000);
+    timer.subscribe( (data) => {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+    } );
+   }
+
   ngOnInit(): void {
   }