From 6193d1f4a87c8a51d407a794034201c7e08f5b3e Mon Sep 17 00:00:00 2001
From: Kenta420 <poomipat002@gmail.com>
Date: Wed, 4 Oct 2023 14:34:01 +0700
Subject: [PATCH] add clock in navber header

;
---
 .../src/app/core/layout/layout.component.html |  6 +++--
 .../src/app/core/layout/layout.component.ts   | 22 ++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html
index 285b7ba..5385042 100644
--- a/client/src/app/core/layout/layout.component.html
+++ b/client/src/app/core/layout/layout.component.html
@@ -34,11 +34,13 @@
       <div class="flex items-center">
         <div class="flex items-center ml-3">
           <div class="flex flex-row">
-            <div class="flex justify-center sm:flex-row md:flex-col sm:px-5">
+            <div
+              class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
+            >
               <span
                 class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
               >
-                {{ date | date : "dd MMM yyyy" }}
+                {{ date | date : "dd MMM yyyy HH:mm:ss" }}
               </span>
               <p
                 class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
diff --git a/client/src/app/core/layout/layout.component.ts b/client/src/app/core/layout/layout.component.ts
index 24bcffa..1af2013 100644
--- a/client/src/app/core/layout/layout.component.ts
+++ b/client/src/app/core/layout/layout.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
 import { User } from '../models/user.model';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject, Subscription, map, share, takeUntil, timer } from 'rxjs';
 
 interface MenuItem {
   name: string;
@@ -18,7 +18,7 @@ interface MenuItem {
   standalone: true,
   imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
 })
-export class LayoutComponent implements OnInit {
+export class LayoutComponent implements OnInit, OnDestroy {
   menuItems: MenuItem[] = [
     {
       name: 'Dashboard',
@@ -32,6 +32,7 @@ export class LayoutComponent implements OnInit {
     },
   ];
   date = new Date();
+  clockSubscription: Subscription | null = null;
   isMenuOpen: boolean = false;
   user: User | null = null;
   exit$ = new Subject<void>();
@@ -42,6 +43,21 @@ export class LayoutComponent implements OnInit {
     this._userService.currentUser
       .pipe(takeUntil(this.exit$))
       .subscribe((user) => (this.user = user));
+
+    this.clockSubscription = timer(0, 1000)
+      .pipe(
+        map(() => new Date()),
+        share()
+      )
+      .subscribe((time) => {
+        this.date = time;
+      });
+  }
+
+  ngOnDestroy() {
+    this.exit$.next();
+    this.exit$.complete();
+    this.clockSubscription?.unsubscribe();
   }
 
   logout() {