From cc4f40b05eb0721ecb876ca5b2be7b7476d1035a Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Mon, 4 Nov 2024 08:27:44 +0700
Subject: [PATCH] fix(dashboard): fix card relay dan nama relay

---
 .../pages/dashboard/dashboard.component.html  | 34 +++++++++++++------
 .../pages/dashboard/dashboard.component.scss  | 15 ++++++++
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
index 85890ab..87b35db 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
@@ -147,18 +147,32 @@
 
   <div *ngIf="!isLoaded && selectedButton === 'relay'">
     <div *ngIf="relayStatus.length > 0; else noData">
-      <div class="card-container" *ngFor="let relay of relayStatus;">
-        <div class="card-parameter">
-          <div>
-            <h3 [ngClass]="relay.current_status ? 'status-on' : 'status-off'">
-              {{ relay.current_status ? 'ON' : 'OFF' }}
-            </h3>
-            <h6>Relay {{ relay.number }}</h6>
-          </div>
+        <div class="relay-container">
+            <div class="card-parameter relay-card" *ngFor="let relay of relayStatus;">
+                <div>
+                    <h3 [ngClass]="relay.current_status ? 'status-on' : 'status-off'">
+                        {{ relay.current_status ? 'ON' : 'OFF' }}
+                    </h3>
+                    <h6>
+                        <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 class="graph">
     <div class="title-graph">Monitoring Graphs</div>
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
index 4da6bbb..f0d512d 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
@@ -60,6 +60,21 @@
     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) {
     .card-parameter{
         flex: 1 1 45%;