update

src/app/modules/homepage/data/fake-data.ts

@@ -226,24 +226,24 @@ export const hotelData = [
       {
         roomNumber: '101',
         status: 'occupied',
-        checkInTime: '2024-09-11T12:00:00',
+        checkInTime: '1d',
       },
       { roomNumber: '102', status: 'available' },
       {
         roomNumber: '103',
         status: 'occupied',
-        checkInTime: '2024-09-11T13:30:00',
+        checkInTime: '1d',
       },
       { roomNumber: '104', status: 'available' },
       {
         roomNumber: '105',
         status: 'occupied',
-        checkInTime: '2024-09-11T14:00:00',
+        checkInTime: '1d',
       },
       {
         roomNumber: '106',
         status: 'occupied',
-        checkInTime: '2024-09-11T15:00:00',
+        checkInTime: '1d',
       },
     ],
   },
@@ -253,24 +253,24 @@ export const hotelData = [
       {
         roomNumber: '201',
         status: 'occupied',
-        checkInTime: '2024-09-11T11:00:00',
+        checkInTime: '1d',
       },
       { roomNumber: '202', status: 'available' },
       {
         roomNumber: '203',
         status: 'occupied',
-        checkInTime: '2024-09-11T14:00:00',
+        checkInTime: '1d',
       },
       { roomNumber: '204', status: 'available' },
       {
         roomNumber: '205',
         status: 'occupied',
-        checkInTime: '2024-09-11T15:30:00',
+        checkInTime: '1d',
       },
       {
         roomNumber: '206',
         status: 'occupied',
-        checkInTime: '2024-09-11T16:30:00',
+        checkInTime: '1d',
       },
     ],
   },
@@ -281,23 +281,23 @@ export const hotelData = [
       {
         roomNumber: '302',
         status: 'occupied',
-        checkInTime: '2024-09-11T12:45:00',
+        checkInTime: '1d',
       },
       {
         roomNumber: '303',
         status: 'occupied',
-        checkInTime: '2024-09-11T14:15:00',
+        checkInTime: '1d',
       },
       { roomNumber: '304', status: 'available' },
       {
         roomNumber: '305',
         status: 'occupied',
-        checkInTime: '2024-09-11T17:00:00',
+        checkInTime: '1d',
       },
       {
         roomNumber: '306',
         status: 'occupied',
-        checkInTime: '2024-09-11T18:00:00',
+        checkInTime: '2d',
       },
     ],
   },
@@ -308,23 +308,23 @@ export const hotelData = [
       {
         roomNumber: '402',
         status: 'occupied',
-        checkInTime: '2024-09-11T10:00:00',
+        checkInTime: '4d',
       },
       {
         roomNumber: '403',
         status: 'occupied',
-        checkInTime: '2024-09-11T11:30:00',
+        checkInTime: '',
       },
       { roomNumber: '404', status: 'available' },
       {
         roomNumber: '405',
         status: 'occupied',
-        checkInTime: '2024-09-11T15:45:00',
+        checkInTime: '',
       },
       {
         roomNumber: '406',
         status: 'occupied',
-        checkInTime: '2024-09-11T16:30:00',
+        checkInTime: '3d',
       },
     ],
   },
@@ -334,24 +334,24 @@ export const hotelData = [
       {
         roomNumber: '501',
         status: 'occupied',
-        checkInTime: '2024-09-11T09:00:00',
+        checkInTime: '4d',
       },
       { roomNumber: '502', status: 'available' },
       {
         roomNumber: '503',
         status: 'occupied',
-        checkInTime: '2024-09-11T10:00:00',
+        checkInTime: '1d',
       },
       {
         roomNumber: '504',
         status: 'occupied',
-        checkInTime: '2024-09-11T13:00:00',
+        checkInTime: '2d',
       },
       { roomNumber: '505', status: 'available' },
       {
         roomNumber: '506',
         status: 'occupied',
-        checkInTime: '2024-09-12T00:30:00',
+        checkInTime: '1d',
       },
     ],
   },

src/app/modules/homepage/hotel-management/hotel-management.component.html

@@ -24,7 +24,7 @@
           [ngClass]="room.status"
         >
           <span class="time-checkin" *ngIf="room.checkInTime">
-            {{ room.checkInTime | timeElapsed }}
+            {{ room.checkInTime }} {{clock}}
           </span>
           {{ room?.roomNumber }}
         </div>

src/app/modules/homepage/hotel-management/hotel-management.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { hotelData } from '../data/fake-data';
-import * as moment from 'moment';
+import {timer} from "rxjs";
 
 @Component({
   selector: 'app-hotel-management',
@@ -9,7 +9,26 @@ import * as moment from 'moment';
 })
 export class HotelManagementComponent implements OnInit {
   data = hotelData.reverse();
+  public clock:any = null;
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    timer(0, 1000).subscribe(() => {
+      this.time();
+    });
+  }
+
+  time() {
+    let date = new Date();
+    let second:number | string = date.getSeconds();
+    let minute:number | string = date.getMinutes();
+    let hour:number | string = date.getHours();
+    if (second < 10) {
+      second = '0' + second
+    }
+    if (minute < 0) {
+      minute = '0' + minute;
+    }
+    this.clock = hour + ":" + minute + ":" + second;
+  }
 }