pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add clock in navber header

Browse source 
;
This commit is contained in:
Kenta420 2023-10-04 14:34:01 +07:00
parent 8eab23e9ba
commit 6193d1f4a8
2 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/app/core/layout/layout.component.html
View file

@ -34,11 +34,13 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center ml-3"> <div class="flex items-center ml-3">
<div class="flex flex-row"> <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 <span
class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit" 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> </span>
<p <p
class="md:hidden px-1 flex items-center text-primary font-normal font-kanit" class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"

22
client/src/app/core/layout/layout.component.ts
View file

@ -1,10 +1,10 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { DatePipe, NgFor, NgIf } from '@angular/common'; import { DatePipe, NgFor, NgIf } from '@angular/common';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component'; import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service'; import { UserService } from '../services/user.service';
import { User } from '../models/user.model'; import { User } from '../models/user.model';
import { Subject, takeUntil } from 'rxjs'; import { Subject, Subscription, map, share, takeUntil, timer } from 'rxjs';
interface MenuItem { interface MenuItem {
name: string; name: string;
@ -18,7 +18,7 @@ interface MenuItem {
standalone: true, standalone: true,
imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe], imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
}) })
export class LayoutComponent implements OnInit { export class LayoutComponent implements OnInit, OnDestroy {
menuItems: MenuItem[] = [ menuItems: MenuItem[] = [
{ {
name: 'Dashboard', name: 'Dashboard',
@ -32,6 +32,7 @@ export class LayoutComponent implements OnInit {
}, },
]; ];
date = new Date(); date = new Date();
clockSubscription: Subscription | null = null;
isMenuOpen: boolean = false; isMenuOpen: boolean = false;
user: User | null = null; user: User | null = null;
exit$ = new Subject<void>(); exit$ = new Subject<void>();
@ -42,6 +43,21 @@ export class LayoutComponent implements OnInit {
this._userService.currentUser this._userService.currentUser
.pipe(takeUntil(this.exit$)) .pipe(takeUntil(this.exit$))
.subscribe((user) => (this.user = user)); .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() { logout() {