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

fix(dashboard): fix card relay dan nama relay

Browse Source
This commit is contained in:
Desy Ayurianti 2024-11-04 08:27:44 +07:00
parent 50bd5c0ebf
commit cc4f40b05e
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,18 +147,32 @@
<div *ngIf="!isLoaded && selectedButton === 'relay'"> <div *ngIf="!isLoaded && selectedButton === 'relay'">
<div *ngIf="relayStatus.length > 0; else noData"> <div *ngIf="relayStatus.length > 0; else noData">
<div class="card-container" *ngFor="let relay of relayStatus;"> <div class="relay-container">
<div class="card-parameter"> <div class="card-parameter relay-card" *ngFor="let relay of relayStatus;">
<div> <div>
<h3 [ngClass]="relay.current_status ? 'status-on' : 'status-off'"> <h3 [ngClass]="relay.current_status ? 'status-on' : 'status-off'">
{{ relay.current_status ? 'ON' : 'OFF' }} {{ relay.current_status ? 'ON' : 'OFF' }}
</h3> </h3>
<h6>Relay {{ relay.number }}</h6> <h6>
</div> <ng-container *ngIf="relay.number === 1; else checkRelay">
Katup Nutrisi
</ng-container>
<ng-template #checkRelay>
<ng-container *ngIf="relay.number === 2; else defaultRelay">
Katup Air
</ng-container>
</ng-template>
<ng-template #defaultRelay>
Relay {{ relay.number }}
</ng-template>
</h6>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div class="graph"> <div class="graph">
<div class="title-graph">Monitoring Graphs</div> <div class="title-graph">Monitoring Graphs</div>

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

@ -60,6 +60,21 @@
margin-top: 22px; margin-top: 22px;
} }
.relay-container {
padding: 20px 0px 20px 0px;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: flex-start;
}
.relay-card {
border-radius: 8px;
flex: 1 1 30%;
max-width: 30%;
min-width: 200px;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.card-parameter{ .card-parameter{
flex: 1 1 45%; flex: 1 1 45%;