frontend-smartfarming/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html

<div class="container">
  <div>
    <h1 class="title">{{ greeting }}</h1> 
    <h3 class="description">Welcome back to your management system</h3>
  </div>
  
  <div>
    <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>
  </div>

  <div *ngIf="isLoaded" class="loading">
    <i class="fa fa-spinner fa-spin"></i>
  </div>

  <ng-template #noData>
    <div class="loading">No available data</div>
  </ng-template>

  <div *ngIf="!isLoaded && selectedButton === 'dht'">
    <div *ngIf="sensorData.dht.lightIntensity || sensorData.dht.temperature || sensorData.dht.humidity; else noData">
      <div class="card-container">
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.dht.lightIntensity}} Lux</h3>
            <h6>Intensitas Cahaya</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.dht.temperature}} °C</h3>
            <h6>Temperatur Udara</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.dht.humidity}} %</h3>
            <h6>Kelembaban Udara</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

  <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>
            <h6>Temperatur Tanah</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk1.moisture}} %</h3>
            <h6>Kelembaban Tanah</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk1.conductivity}} μS/cm</h3>
            <h6>Conductivity</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk1.ph}}</h3>
            <h6>pH</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

  <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>
            <h6>Temperatur Tanah</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk2.moisture}} %</h3>
            <h6>Kelembaban Tanah</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk2.conductivity}} μS/cm</h3>
            <h6>Conductivity</h6>
          </div>
        </div>
        <div class="card-parameter">
          <div>
            <h3>{{sensorData.npk2.ph}}</h3>
            <h6>pH</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="!isLoaded && selectedButton === 'relay'">
    <div *ngIf="relayStatus.length > 0; else noData">
        <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 checkRelay2">
                                Katup Air
                            </ng-container>
                        </ng-template>
                        <ng-template #checkRelay2>
                          <ng-container *ngIf="relay.number === 3; else defaultRelay">
                              Pompa Air
                          </ng-container>
                      </ng-template>
                        <ng-template #defaultRelay>
                            Relay {{ relay.number }}
                        </ng-template>
                    </h6>
                </div>
            </div>
        </div>
    </div>
  </div>

  <div class="graph">
    <div class="title-graph">Monitoring Graphs</div>
    <div class="graph">
        <app-graph></app-graph>
    </div>
  </div>
</div>