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

dev smartfarming #1

Merged
agrilink merged 53 commits from development into main 2024-12-30 05:53:19 +00:00
Conversation 0 Commits 53 Files Changed 66 +107 -52
7 changed files with 107 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6ad5951413 - Show all commits

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

@ -8,7 +8,7 @@
</div>
<div>
<button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">DHT</button>
<button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">BHT</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>
@ -50,6 +50,24 @@
<div *ngIf="!isLoaded && selectedButton === 'npk1'">
<div *ngIf="sensorData.npk1.temperature || sensorData.npk1.moisture || sensorData.npk1.conductivity; else noData">
<div class="card-container">
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.potassium}} mg/L</h3>
<h6>Kalium</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.temperature}} °C</h3>
@ -74,24 +92,6 @@
<h6>pH</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk1.potassium}} mg/L</h3>
<h6>Kalium</h6>
</div>
</div>
</div>
</div>
</div>
@ -99,6 +99,24 @@
<div *ngIf="!isLoaded && selectedButton === 'npk2'">
<div *ngIf="sensorData.npk2.temperature || sensorData.npk2.moisture || sensorData.npk2.conductivity; else noData">
<div class="card-container">
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.potassium}} mg/L</h3>
<h6>Kalium</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.temperature}} °C</h3>
@ -123,24 +141,6 @@
<h6>pH</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
<h6>Nitrogen</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
<h6>Phosphorus</h6>
</div>
</div>
<div class="card-parameter">
<div>
<h3>{{sensorData.npk2.potassium}} mg/L</h3>
<h6>Kalium</h6>
</div>
</div>
</div>
</div>
</div>

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

@ -1,5 +1,10 @@
.container {
font-family: "Onest", sans-serif;
.active-button {
background-color: #cad849;
color: white;
}
}
.title {
@ -80,17 +85,45 @@
flex: 1 1 45%;
}
.card-container{
.active-button {
background-color: #cad849;
color: white;
}
button {
color: black;
margin-bottom: 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 20px;
justify-content: center;
}
}
@media (max-width: 576px) {
@media (max-width: 344px) {
.card-parameter{
flex: 1 1 100%;
}
.card-container{
button {
color: black;
margin-bottom: 20px;
}
.active-button {
background-color: #cad849;
color: white;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 20px;
justify-content: center;
}
}
@ -104,11 +137,6 @@ button {
margin-right: 20px;
}
.active-button {
background-color: #cad849;
color: white;
}
.loading{
font-size: 18px;
text-align: center;

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

@ -9,11 +9,12 @@
bottom: 0;
left: 0;
width: 16.67%;
z-index: 1000;
z-index: 1;
overflow-y: auto;
}
.content-area {
z-index: 0;
margin-left: 16.67%;
overflow-y: auto;
padding-left: 1rem;

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

@ -22,6 +22,5 @@
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" (click)="onLogout()">Sign out</a></li>
</ul>
</div>
</div>
</div>

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

@ -21,8 +21,24 @@
color: white;
font-size: 15px;
padding-left: 10px;
z-index: 9999;
}
.container-sidebar{
display: block;
}
}
@media (max-width: 430px) {
.dropdown-menu{
position: absolute;
z-index: 9999;
overflow: visible;
}
.dropdown-menu{
a{
font-size: 11.5px;
padding: 0px 0px 0px 10px
}
}
}

8
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
View File

@ -64,6 +64,14 @@
}
}
@media (max-width: 344px) {
canvas {
height: auto;
width: 100%;
max-width: 100%;
}
}
.loading {
font-size: 18px;
text-align: center;

9
agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
View File

@ -85,16 +85,19 @@
}
}
@media (max-width: 576px) {
@media (min-width: 344px) {
.card-parameter{
flex: 1 1 100%;
}
.card-container{
justify-content: center;
button {
color: #49473C;
margin-right: 20px;
margin-bottom: 20px;
}
}
button {
border: none;
border-radius: 10px;