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

fix(dashboard): fix card for current data by adding new parameter

Browse Source
This commit is contained in:
Desy Ayurianti 2024-09-24 13:15:26 +07:00
parent 30a4eae0d3
commit 1b99366200
14 changed files with 208 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
agrilink_vocpro/src/app/cores/interface/sensor-data.ts Normal file
View File

@ -0,0 +1,8 @@
import { Timestamp } from "rxjs";
export interface SensorData {
id: Timestamp<number>;
humidity: number;
temperature: number;
soil_moisture: number;
}

16
agrilink_vocpro/src/app/cores/services/api.service.spec.ts Normal file
View File

@ -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();
});
});

16
agrilink_vocpro/src/app/cores/services/api.service.ts Normal file
View File

@ -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);
}
}

4
agrilink_vocpro/src/app/pages/auth/auth.component.scss
View File

@ -1,10 +1,10 @@
.login { .login {
min-height: 100vh; min-height: 100vh;
font-family: "Poppins", sans-serif; font-family: "Onest", sans-serif;
} }
.bg-image { .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-size: cover;
background-position: left; background-position: left;
} }

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

@ -1,76 +1,133 @@
<div class="container"> <div class="container">
<div> <div>
<h1 class="title">Good Evening</h1> <h1 class="title">Hello there</h1>
<h3 class="description">Welcome to your management system</h3> <h3 class="description">Welcome back to your management system</h3>
</div> </div>
<div> <div>
<h2 class="update">Latets Update: 06/09/2024 15:39:21</h2> <h2 class="update">Latest Update: 06/09/2024 15:39:21</h2>
</div> </div>
<div class="card-container"> <div>
<div class="card-parameter"> <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectParameter('dht')">DHT</button>
<div> <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectParameter('npk1')">NPK 1</button>
<app-gauge-chart <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectParameter('npk2')">NPK 2</button>
[gaugeTitle]="nitrogenTitle" </div>
[gaugeData]="nitrogenData"
[colorStops]="nitrogenColorStops"
[maxValue]="nitrogenMaxValue"
[satuanData]="nitrogenSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="pottasiumTitle"
[gaugeData]="pottasiumData"
[colorStops]="pottasiumColorStops"
[maxValue]="pottasiumMaxValue"
[satuanData]="pottasiumSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="phosphorusTitle"
[gaugeData]="phosphorusData"
[colorStops]="phosphorusColorStops"
[maxValue]="phosphorusMaxValue"
[satuanData]="phosphorusSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="kelembabanTitle"
[gaugeData]="kelembabanData"
[colorStops]="kelembabanColorStops"
[maxValue]="kelembabanMaxValue"
[satuanData]="kelembabanSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="intensitasCahayaTitle"
[gaugeData]="intensitasCahayaData"
[colorStops]="intensitasCahayaColorStops"
[maxValue]="intensitasCahayaMaxValue"
[satuanData]="intensitasCahayaSatuanData"
>
</app-gauge-chart>
</div>
</div>
</div>
<div class="graph"> <div *ngIf="selectedButton === 'dht'" class="card-container">
<div class="title-graph"> Monitoring </div> <div class="card-parameter">
<div class="graph"> <div>
<app-graph></app-graph> <h3>3539 Lux</h3>
</div> <h6>Intensitas Cahaya</h6>
</div>
</div> </div>
<div class="card-parameter">
<div>
<h3>27 °C</h3>
<h6>Temperature</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>80%</h3>
<h6>Kelembaban</h6>
</div>
</div>
</div>
<div *ngIf="selectedButton === 'npk1'" class="card-container">
<div class="card-parameter">
<div>
<h3>28 °C</h3>
<h6>Temperature</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>99.9%</h3>
<h6>Moisture</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>1.5 mS/cm</h3>
<h6>Conductivity</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>8.51</h3>
<h6>pH</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>500 PPM</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>500 PPM</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>500 PPM</h3>
<h6>Potassium</h6>
</div>
</div>
</div>
<div *ngIf="selectedButton === 'npk2'" class="card-container">
<div class="card-parameter">
<div>
<h3>28.6 °C</h3>
<h6>Temperature</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>99.8%</h3>
<h6>Moisture</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>1.4 mS/cm</h3>
<h6>Conductivity</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>8.55</h3>
<h6>pH</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>510 PPM</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>512 PPM</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>500 PPM</h3>
<h6>Potassium</h6>
</div>
</div>
</div>
<div class="graph">
<div class="title-graph">Monitoring</div>
<div class="graph">
<app-graph></app-graph>
</div>
</div>
</div> </div>

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

@ -1,5 +1,5 @@
.container { .container {
font-family: "Poppins", sans-serif; font-family: "Onest", sans-serif;
} }
.title { .title {
@ -25,7 +25,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
margin-top: 20px; margin-top: 20px;
justify-content: space-between; justify-content: flex-start;
} }
.card-parameter{ .card-parameter{
@ -35,9 +35,15 @@
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
flex: 1 1 30%; flex: 1 1 30%;
max-width: 30%;
min-width: 200px; min-width: 200px;
} }
.card-parameter:hover{
background-color: #16423C;
color: white;
}
.card-content{ .card-content{
text-align: center; text-align: center;
margin:auto; 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;
}

1
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.spec.ts
View File

@ -1,5 +1,4 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component'; import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => { describe('DashboardComponent', () => {

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

@ -3,15 +3,24 @@ 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';
import { GraphComponent } from './page/graph/graph.component'; import { GraphComponent } from './page/graph/graph.component';
import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
standalone: true, standalone: true,
imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent], imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent, CommonModule],
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss' styleUrl: './dashboard.component.scss'
}) })
export class DashboardComponent{ export class DashboardComponent{
selectedButton: string = 'dht';
// Fungsi untuk mengatur tombol yang dipilih
selectParameter(param: string) {
this.selectedButton = param;
}
//kelembaban //kelembaban
kelembabanData: number = 90; kelembabanData: number = 90;
kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']]; kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']];

4
agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
View File

@ -1,4 +1,4 @@
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100"> <div class="d-flex flex-column container align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline space">Agrilink Vocpro</span> <span class="fs-5 d-none d-sm-inline space">Agrilink Vocpro</span>
</a> </a>
@ -16,7 +16,7 @@
<div class="dropdown pb-4"> <div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">loser</span> <span class="d-none d-sm-inline mx-1">Tiffany</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" routerLink='/auth'>Sign out</a></li> <li><a class="dropdown-item" routerLink='/auth'>Sign out</a></li>

2
agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss
View File

@ -4,7 +4,7 @@
} }
.container{ .container{
font-family: 'Poppins', sans-serif; font-family: 'Onest', sans-serif;
} }
.title{ .title{

4
agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts
View File

@ -46,7 +46,7 @@ export class GaugeChartComponent {
text: this.gaugeTitle, text: this.gaugeTitle,
style: { style: {
fontSize: '15px', fontSize: '15px',
fontFamily: 'Poppins, sans-serif', fontFamily: 'Onest, sans-serif',
} }
}, },
pane: { pane: {
@ -87,7 +87,7 @@ export class GaugeChartComponent {
borderWidth: 0, borderWidth: 0,
style: { style: {
fontSize: '15px', fontSize: '15px',
fontFamily: 'Poppins, sans-serif', fontFamily: 'Onest, sans-serif',
} }
} }
}] as Highcharts.SeriesSolidgaugeOptions[] }] as Highcharts.SeriesSolidgaugeOptions[]

BIN
agrilink_vocpro/src/assets/images/auth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

5
agrilink_vocpro/src/index.html
View File

@ -11,10 +11,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;700&display=swap" rel="stylesheet">
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script>

2
agrilink_vocpro/src/styles.scss
View File

@ -1,3 +1,3 @@
body{ body{
font-family: "Poppins", sans-serif; font-family: "Onest", sans-serif;
} }