From 2c7a2a4a0104f0c3cabfbf5c97063d70751cc722 Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Tue, 8 Oct 2024 13:17:01 +0700
Subject: [PATCH] fix(dashoard): add lazy load untuk menampilkan card data

---
 .../pages/dashboard/dashboard.component.html  |  91 ++++++++++------
 .../pages/dashboard/dashboard.component.scss  |   6 ++
 .../pages/dashboard/dashboard.component.ts    | 101 ++++++++----------
 3 files changed, 106 insertions(+), 92 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
index 9ee2c1b..41ecb4f 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
@@ -8,122 +8,143 @@
   </div>
 
   <div>
-    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectParameter('dht')">DHT</button>
-    <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectParameter('npk1')">NPK 1</button>
-    <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectParameter('npk2')">NPK 2</button>
+    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">DHT</button>
+    <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectSensor('npk1')">NPK 1</button>
+    <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectSensor('npk2')">NPK 2</button>
+    <!-- <button [ngClass]="{'active-button': selectedButton === 'relay'}" (click)="selectSensor('relay')">Relay</button> -->
   </div>
 
-  <div *ngIf="selectedButton === 'dht'" class="card-container">
-    <div class="card-parameter">
-      <div>
-        <h3>3539 Lux</h3>
-        <h6>Intensitas Cahaya</h6>
+  <div *ngIf="isLoaded " class="loading">
+    Loading...
+  </div>
+
+  <div *ngIf="!isLoaded && selectedButton === 'dht'" class="card-container">
+      <div class="card-parameter">
+        <div>
+          <h3>{{sensorData.dht.lightIntensity}} Lux</h3>
+          <h6>Light Intensity</h6>
+        </div>
       </div>
-    </div>
-    <div class="card-parameter">
-      <div>
-        <h3>27 °C</h3>
-        <h6>Temperature</h6>
+      <div class="card-parameter">
+        <div>
+          <h3>{{sensorData.dht.temperature}} °C</h3>
+          <h6>Temperature</h6>
+        </div>
       </div>
-    </div>
-    <div class="card-parameter">
-      <div>
-        <h3>80%</h3>
-        <h6>Kelembaban</h6>
+      <div class="card-parameter">
+        <div>
+          <h3>{{sensorData.dht.humidity}}%</h3>
+          <h6>Humidity</h6>
+        </div>
       </div>
-    </div>
   </div>
   
-  <div *ngIf="selectedButton === 'npk1'" class="card-container">
+  <div *ngIf="!isLoaded && selectedButton === 'npk1'" class="card-container">
     <div class="card-parameter">
       <div>
-        <h3>28 °C</h3>
+        <h3>{{ sensorData.npk1.temperature }} °C</h3>
         <h6>Temperature</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>99.9%</h3>
+        <h3>{{sensorData.npk1.moisture}}%</h3>
         <h6>Moisture</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>1.5 mS/cm</h3>
+        <h3>{{sensorData.npk1.conductivity}}mS/cm</h3>
         <h6>Conductivity</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>8.51</h3>
+        <h3>{{sensorData.npk1.ph}}</h3>
         <h6>pH</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>500 PPM</h3>
+        <h3>{{sensorData.npk1.nitrogen}}PPM</h3>
         <h6>Nitrogen</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>500 PPM</h3>
+        <h3>{{sensorData.npk1.phosphorus}}PPM</h3>
         <h6>Phosphorus</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>500 PPM</h3>
+        <h3>{{sensorData.npk1.potassium}}PPM</h3>
         <h6>Potassium</h6>
       </div>
     </div>
   </div>
 
-  <div *ngIf="selectedButton === 'npk2'" class="card-container">
+  <div *ngIf="!isLoaded && selectedButton === 'npk2'" class="card-container">
     <div class="card-parameter">
       <div>
-        <h3>28.6 °C</h3>
+        <h3>{{ sensorData.npk2.temperature }}°C</h3>
         <h6>Temperature</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>99.8%</h3>
+        <h3>{{ sensorData.npk1.moisture }}%</h3>
         <h6>Moisture</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>1.4 mS/cm</h3>
+        <h3>{{ sensorData.npk1.conductivity }}mS/cm</h3>
         <h6>Conductivity</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>8.55</h3>
+        <h3>{{ sensorData.npk1.ph }}</h3>
         <h6>pH</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>510 PPM</h3>
+        <h3>{{ sensorData.npk1.nitrogen}}PPM</h3>
         <h6>Nitrogen</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>512 PPM</h3>
+        <h3>{{ sensorData.npk2.phosphorus}}PPM</h3>
         <h6>Phosphorus</h6>
       </div>
     </div>
     <div class="card-parameter">
       <div>
-        <h3>500 PPM</h3>
+        <h3>{{ sensorData.npk2.potassium }}PPM</h3>
         <h6>Potassium</h6>
       </div>
     </div>
   </div>
 
+  <!-- <div *ngIf="selectedButton === 'relay'" class="card-container">
+    <div class="card-parameter">
+      <div>
+        <h3>ON</h3>
+        <h6>Nutrition</h6>
+      </div>
+    </div>
+    <div class="card-parameter">
+      <div>
+        <h3>OFF</h3>
+        <h6>Nutrition</h6>
+      </div>
+    </div>
+
+  </div> -->
+
   <div class="graph">
       <div class="title-graph">Monitoring</div>
       <div class="graph">
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
index cc6ff62..88b06aa 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
@@ -85,3 +85,9 @@ button {
     background-color: #cad849;
     color: white;
 }
+
+.loading{
+    font-size: 18px;
+    text-align: center;
+    color: #888;
+}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
index 4013ac7..e791723 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { SidebarComponent } from './layouts/sidebar/sidebar.component';
 import { GaugeChartComponent } from './page/gauge-chart/gauge-chart.component';
@@ -10,64 +10,51 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent, CommonModule],
   templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.scss'
+  styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent{
+export class DashboardComponent implements OnInit {
+  isLoaded: boolean = false; 
+  selectedButton: string = '';
+  sensorData: any = {
+    dht: {
+      lightIntensity: '3539',
+      temperature: '27',
+      humidity: '80'
+    },
+    npk1: {
+      temperature: '28',
+      moisture: '99.9',
+      conductivity: '1.5',
+      ph: '8.51',
+      nitrogen: '500',
+      phosphorus: '500',
+      potassium: '500'
+    },
+    npk2: {
+      temperature: '28.6',
+      moisture: '99.8',
+      conductivity: '1.4',
+      ph: '8.55',
+      nitrogen: '510',
+      phosphorus: '512',
+      potassium: '500'
+    }
+  };
 
-  selectedButton: string = 'dht';
-
-  // Fungsi untuk mengatur tombol yang dipilih
-  selectParameter(param: string) {
-    this.selectedButton = param;
+  ngOnInit(): void {
+    this.selectedButton = 'dht';
+    this.loadData();
   }
 
-  //kelembaban
-  kelembabanData: number = 90;
-  kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']];
-  kelembabanMaxValue: number = 100;
-  kelembabanSatuanData: string = '%';
-  kelembabanTitle: string = 'Kelembapan Udara';
+  selectSensor(param: string): void {
+    this.selectedButton = param;
+    this.loadData();
+  }
 
-  //suhu 
-  suhuData: number = 35;
-  suhuColorStops: [number, string][] = [[0, '#663440'], [1, '#663440']];
-  suhuMaxValue: number = 100;
-  suhuSatuanData: string = '°C';
-  suhuTitle: string = 'Suhu';
-
-  //intensitas cahaya
-  intensitasCahayaData: number = 3469;
-  intensitasCahayaColorStops: [number, string][] = [[0, '#b35b03'], [1, '#b35b03']];
-  intensitasCahayaMaxValue: number = 4000;
-  intensitasCahayaSatuanData: string = 'lux';
-  intensitasCahayaTitle: string = 'Intensitas Cahaya';
-
-  //kelembaban tanah
-  kelembabanTanahData: number = 90;
-  kelembabanTanahColorStops: [number, string][] = [[0, '#493e30'], [1, '#493e30']];
-  kelembabanTanahMaxValue: number = 100;
-  kelembabanTanahSatuanData: string = '%';
-  kelembabanTanahTitle: string = 'Kelembapan Tanah';
-
-    //nitrogen
-  nitrogenData: number = 1063;
-  nitrogenColorStops: [number, string][] = [[0, '#364732'], [1, '#364732']];
-  nitrogenMaxValue: number = 2000;
-  nitrogenSatuanData: string = 'NPM';
-  nitrogenTitle: string = 'Nitrogen';
-
-  //pottasium
-  pottasiumData: number = 1000;
-  pottasiumColorStops: [number, string][] = [[0, '#472e49'], [1, '#472e49']];
-  pottasiumMaxValue: number = 2000;
-  pottasiumSatuanData: string = 'NPM';
-  pottasiumTitle: string = 'Pottasium';
-
-  //phospor
-  phosphorusData: number = 1000;
-  phosphorusColorStops: [number, string][] = [[0, '#663440'], [1, '#663440']];
-  phosphorusMaxValue: number = 2000;
-  phosphorusSatuanData: string = 'NPM';
-  phosphorusTitle: string = 'Phosporus';
-
-}
\ No newline at end of file
+  loadData(): void {
+    this.isLoaded = true;
+    setTimeout(() => {
+      this.isLoaded = false;
+    }, 1000);
+  }
+}