diff --git a/agrilink_vocpro/src/app/cores/interface/sensor-data.ts b/agrilink_vocpro/src/app/cores/interface/sensor-data.ts new file mode 100644 index 0000000..4eeee95 --- /dev/null +++ b/agrilink_vocpro/src/app/cores/interface/sensor-data.ts @@ -0,0 +1,8 @@ +import { Timestamp } from "rxjs"; + +export interface SensorData { + id: Timestamp; + humidity: number; + temperature: number; + soil_moisture: number; +} \ No newline at end of file diff --git a/agrilink_vocpro/src/app/cores/services/api.service.spec.ts b/agrilink_vocpro/src/app/cores/services/api.service.spec.ts new file mode 100644 index 0000000..c0310ae --- /dev/null +++ b/agrilink_vocpro/src/app/cores/services/api.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApiService } from './api.service'; + +describe('ApiService', () => { + let service: ApiService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApiService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/agrilink_vocpro/src/app/cores/services/api.service.ts b/agrilink_vocpro/src/app/cores/services/api.service.ts new file mode 100644 index 0000000..a992cae --- /dev/null +++ b/agrilink_vocpro/src/app/cores/services/api.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) +export class ApiService { + private apiURL = 'https://jx027dj4-5000.asse.devtunnels.ms/api/sensor-data'; + + constructor(private http: HttpClient) { } + + get(){ + return this.http.get(this.apiURL); + } + +} diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.scss b/agrilink_vocpro/src/app/pages/auth/auth.component.scss index 702fd45..b701036 100644 --- a/agrilink_vocpro/src/app/pages/auth/auth.component.scss +++ b/agrilink_vocpro/src/app/pages/auth/auth.component.scss @@ -1,10 +1,10 @@ .login { min-height: 100vh; - font-family: "Poppins", sans-serif; + font-family: "Onest", sans-serif; } .bg-image { - background-image: url('https://www.verifiedmarketreports.com/images/blogs/05-24/top-7-trends-in-smart-farming.webp'); + background-image: url('../../../assets/images/auth.png'); background-size: cover; background-position: left; } diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html index d16b5a4..9ee2c1b 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html +++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html @@ -1,76 +1,133 @@
-
-

Good Evening

-

Welcome to your management system

-
-
-

Latets Update: 06/09/2024 15:39:21

-
+
+

Hello there

+

Welcome back to your management system

+
+
+

Latest Update: 06/09/2024 15:39:21

+
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
- -
-
- - -
-
-
+
+ + + +
-
-
Monitoring
-
- -
+
+
+
+

3539 Lux

+
Intensitas Cahaya
+
+
+
+

27 °C

+
Temperature
+
+
+
+
+

80%

+
Kelembaban
+
+
+
+ +
+
+
+

28 °C

+
Temperature
+
+
+
+
+

99.9%

+
Moisture
+
+
+
+
+

1.5 mS/cm

+
Conductivity
+
+
+
+
+

8.51

+
pH
+
+
+
+
+

500 PPM

+
Nitrogen
+
+
+
+
+

500 PPM

+
Phosphorus
+
+
+
+
+

500 PPM

+
Potassium
+
+
+
+ +
+
+
+

28.6 °C

+
Temperature
+
+
+
+
+

99.8%

+
Moisture
+
+
+
+
+

1.4 mS/cm

+
Conductivity
+
+
+
+
+

8.55

+
pH
+
+
+
+
+

510 PPM

+
Nitrogen
+
+
+
+
+

512 PPM

+
Phosphorus
+
+
+
+
+

500 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 f57823a..cc6ff62 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss +++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss @@ -1,5 +1,5 @@ .container { - font-family: "Poppins", sans-serif; + font-family: "Onest", sans-serif; } .title { @@ -25,7 +25,7 @@ flex-wrap: wrap; gap: 20px; margin-top: 20px; - justify-content: space-between; + justify-content: flex-start; } .card-parameter{ @@ -35,9 +35,15 @@ border-radius: 8px; text-align: center; flex: 1 1 30%; + max-width: 30%; min-width: 200px; } +.card-parameter:hover{ + background-color: #16423C; + color: white; +} + .card-content{ text-align: center; margin:auto; @@ -66,3 +72,16 @@ } } +button { + border: none; + border-radius: 10px; + padding: 5px 10px; + font-size: 15px; + cursor: pointer; + margin-right: 20px; +} + +.active-button { + background-color: #cad849; + color: white; +} diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.spec.ts b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.spec.ts index 30e39a2..2852986 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.spec.ts +++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { DashboardComponent } from './dashboard.component'; describe('DashboardComponent', () => { diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts index 8b75e2a..4013ac7 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts +++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts @@ -3,15 +3,24 @@ import { RouterOutlet } from '@angular/router'; import { SidebarComponent } from './layouts/sidebar/sidebar.component'; import { GaugeChartComponent } from './page/gauge-chart/gauge-chart.component'; import { GraphComponent } from './page/graph/graph.component'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-dashboard', standalone: true, - imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent], + imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent, CommonModule], templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.scss' }) export class DashboardComponent{ + + selectedButton: string = 'dht'; + + // Fungsi untuk mengatur tombol yang dipilih + selectParameter(param: string) { + this.selectedButton = param; + } + //kelembaban kelembabanData: number = 90; kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']]; diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html index 25da2a1..00d62d2 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html +++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html @@ -1,4 +1,4 @@ -
+
Agrilink Vocpro @@ -16,7 +16,7 @@
  • Sign out
    • diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss index 387a63a..4784aa9 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss +++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss @@ -4,7 +4,7 @@ } .container{ - font-family: 'Poppins', sans-serif; + font-family: 'Onest', sans-serif; } .title{ diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts index 6b09d64..67e1936 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts +++ b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts @@ -46,7 +46,7 @@ export class GaugeChartComponent { text: this.gaugeTitle, style: { fontSize: '15px', - fontFamily: 'Poppins, sans-serif', + fontFamily: 'Onest, sans-serif', } }, pane: { @@ -87,7 +87,7 @@ export class GaugeChartComponent { borderWidth: 0, style: { fontSize: '15px', - fontFamily: 'Poppins, sans-serif', + fontFamily: 'Onest, sans-serif', } } }] as Highcharts.SeriesSolidgaugeOptions[] diff --git a/agrilink_vocpro/src/assets/images/auth.png b/agrilink_vocpro/src/assets/images/auth.png new file mode 100644 index 0000000..edf2027 Binary files /dev/null and b/agrilink_vocpro/src/assets/images/auth.png differ diff --git a/agrilink_vocpro/src/index.html b/agrilink_vocpro/src/index.html index 9a70fad..42cbd9d 100644 --- a/agrilink_vocpro/src/index.html +++ b/agrilink_vocpro/src/index.html @@ -11,10 +11,7 @@ - + diff --git a/agrilink_vocpro/src/styles.scss b/agrilink_vocpro/src/styles.scss index b32d139..90e18ea 100644 --- a/agrilink_vocpro/src/styles.scss +++ b/agrilink_vocpro/src/styles.scss @@ -1,3 +1,3 @@ body{ - font-family: "Poppins", sans-serif; + font-family: "Onest", sans-serif; }