agrilink/frontend-smartfarming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashoard): add lazy load untuk menampilkan card data

Browse Source
This commit is contained in:
Desy Ayurianti 2024-10-08 13:17:01 +07:00
parent d1d0c5498a
commit 2c7a2a4a01
3 changed files with 106 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
View File

@ -8,122 +8,143 @@
</div> </div>
<div> <div>
<button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectParameter('dht')">DHT</button> <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">DHT</button>
<button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectParameter('npk1')">NPK 1</button> <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectSensor('npk1')">NPK 1</button>
<button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectParameter('npk2')">NPK 2</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>
<div *ngIf="selectedButton === 'dht'" class="card-container"> <div *ngIf="isLoaded " class="loading">
Loading...
</div>
<div *ngIf="!isLoaded && selectedButton === 'dht'" class="card-container">
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>3539 Lux</h3> <h3>{{sensorData.dht.lightIntensity}} Lux</h3>
<h6>Intensitas Cahaya</h6> <h6>Light Intensity</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>27 °C</h3> <h3>{{sensorData.dht.temperature}} °C</h3>
<h6>Temperature</h6> <h6>Temperature</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>80%</h3> <h3>{{sensorData.dht.humidity}}%</h3>
<h6>Kelembaban</h6> <h6>Humidity</h6>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="selectedButton === 'npk1'" class="card-container"> <div *ngIf="!isLoaded && selectedButton === 'npk1'" class="card-container">
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>28 °C</h3> <h3>{{ sensorData.npk1.temperature }} °C</h3>
<h6>Temperature</h6> <h6>Temperature</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>99.9%</h3> <h3>{{sensorData.npk1.moisture}}%</h3>
<h6>Moisture</h6> <h6>Moisture</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>1.5 mS/cm</h3> <h3>{{sensorData.npk1.conductivity}}mS/cm</h3>
<h6>Conductivity</h6> <h6>Conductivity</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>8.51</h3> <h3>{{sensorData.npk1.ph}}</h3>
<h6>pH</h6> <h6>pH</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>500 PPM</h3> <h3>{{sensorData.npk1.nitrogen}}PPM</h3>
<h6>Nitrogen</h6> <h6>Nitrogen</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>500 PPM</h3> <h3>{{sensorData.npk1.phosphorus}}PPM</h3>
<h6>Phosphorus</h6> <h6>Phosphorus</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>500 PPM</h3> <h3>{{sensorData.npk1.potassium}}PPM</h3>
<h6>Potassium</h6> <h6>Potassium</h6>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="selectedButton === 'npk2'" class="card-container"> <div *ngIf="!isLoaded && selectedButton === 'npk2'" class="card-container">
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>28.6 °C</h3> <h3>{{ sensorData.npk2.temperature }}°C</h3>
<h6>Temperature</h6> <h6>Temperature</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>99.8%</h3> <h3>{{ sensorData.npk1.moisture }}%</h3>
<h6>Moisture</h6> <h6>Moisture</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>1.4 mS/cm</h3> <h3>{{ sensorData.npk1.conductivity }}mS/cm</h3>
<h6>Conductivity</h6> <h6>Conductivity</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>8.55</h3> <h3>{{ sensorData.npk1.ph }}</h3>
<h6>pH</h6> <h6>pH</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>510 PPM</h3> <h3>{{ sensorData.npk1.nitrogen}}PPM</h3>
<h6>Nitrogen</h6> <h6>Nitrogen</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>512 PPM</h3> <h3>{{ sensorData.npk2.phosphorus}}PPM</h3>
<h6>Phosphorus</h6> <h6>Phosphorus</h6>
</div> </div>
</div> </div>
<div class="card-parameter"> <div class="card-parameter">
<div> <div>
<h3>500 PPM</h3> <h3>{{ sensorData.npk2.potassium }}PPM</h3>
<h6>Potassium</h6> <h6>Potassium</h6>
</div> </div>
</div> </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="graph">
<div class="title-graph">Monitoring</div> <div class="title-graph">Monitoring</div>
<div class="graph"> <div class="graph">

6
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
View File

@ -85,3 +85,9 @@ button {
background-color: #cad849; background-color: #cad849;
color: white; color: white;
} }
.loading{
font-size: 18px;
text-align: center;
color: #888;
}

97
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { SidebarComponent } from './layouts/sidebar/sidebar.component'; import { SidebarComponent } from './layouts/sidebar/sidebar.component';
import { GaugeChartComponent } from './page/gauge-chart/gauge-chart.component'; import { GaugeChartComponent } from './page/gauge-chart/gauge-chart.component';
@ -10,64 +10,51 @@ import { CommonModule } from '@angular/common';
standalone: true, standalone: true,
imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent, CommonModule], imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent, CommonModule],
templateUrl: './dashboard.component.html', 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'; ngOnInit(): void {
this.selectedButton = 'dht';
this.loadData();
}
// Fungsi untuk mengatur tombol yang dipilih selectSensor(param: string): void {
selectParameter(param: string) {
this.selectedButton = param; this.selectedButton = param;
this.loadData();
} }
//kelembaban loadData(): void {
kelembabanData: number = 90; this.isLoaded = true;
kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']]; setTimeout(() => {
kelembabanMaxValue: number = 100; this.isLoaded = false;
kelembabanSatuanData: string = '%'; }, 1000);
kelembabanTitle: string = 'Kelembapan Udara'; }
//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';
} }