-
28.6 °C
+ {{ sensorData.npk2.temperature }}°C
Temperature
-
99.8%
+ {{ sensorData.npk1.moisture }}%
Moisture
-
1.4 mS/cm
+ {{ sensorData.npk1.conductivity }}mS/cm
Conductivity
-
8.55
+ {{ sensorData.npk1.ph }}
pH
-
510 PPM
+ {{ sensorData.npk1.nitrogen}}PPM
Nitrogen
-
512 PPM
+ {{ sensorData.npk2.phosphorus}}PPM
Phosphorus
-
500 PPM
+ {{ sensorData.npk2.potassium }}PPM
Potassium
Monitoring
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);
+ }
+}