From 141fc9bb5441a85cec6bb62cae9c66db44efb318 Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Fri, 11 Oct 2024 11:02:04 +0700
Subject: [PATCH] feat(dashboard): integrate latest update in dashboard section
 1

---
 .../pages/dashboard/dashboard.component.html  |  2 +-
 .../pages/dashboard/dashboard.component.ts    | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
index 41ecb4f..0f7b715 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
@@ -4,7 +4,7 @@
       <h3 class="description">Welcome back to your management system</h3>
   </div>
   <div>
-      <h2 class="update">Latest Update: 06/09/2024 15:39:21</h2>
+      <h2 class="update">Latest Update: {{latestUpdate}}</h2>
   </div>
 
   <div>
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
index a5541d9..2348555 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
@@ -6,6 +6,7 @@ import { GraphComponent } from './page/graph/graph.component';
 import { CommonModule } from '@angular/common';
 import { ApiService } from '../../cores/services/api.service';
 import { SensorData } from '../../cores/interface/sensor-data';
+import { interval } from 'rxjs';
 
 @Component({
   selector: 'app-dashboard',
@@ -17,6 +18,8 @@ import { SensorData } from '../../cores/interface/sensor-data';
 export class DashboardComponent implements OnInit {
   isLoaded: boolean = false; 
   selectedButton: string = '';
+  latestUpdate: string = ''; 
+  intervalId: any;
   sensorData: SensorData = {  
     dht: { lightIntensity: 0, temperature: 0, humidity: 0 },
     npk1: { temperature: 0, moisture: 0, conductivity: 0, ph: 0, nitrogen: 0, phosphorus: 0, potassium: 0 },
@@ -27,9 +30,38 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.selectedButton = 'dht';
+    this.startClock();
     this.loadData();
   }
 
+  ngOnDestroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  startClock(): void {
+    this.updateLatestTime(); 
+
+    this.intervalId = setInterval(() => {
+      this.updateLatestTime();
+    }, 1000);
+  }
+
+  updateLatestTime(): void {
+    const now = new Date();
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    };
+    this.latestUpdate = now.toLocaleString('en-GB', options); // Update waktu ke format yang sesuai
+  }
+
+
   selectSensor(param: string): void {
     this.selectedButton = param;
     this.loadData();
@@ -73,6 +105,7 @@ export class DashboardComponent implements OnInit {
           };
         }
 
+        this.updateLatestTime(); // Update waktu setelah data diambil
         this.isLoaded = false;
       },
       (error) => {
@@ -82,3 +115,4 @@ export class DashboardComponent implements OnInit {
     );
   }
 }
+