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

<div class="container">
  <div>
      <h1 class="title">Hello there</h1>
      <h3 class="description">Welcome back to your management system</h3>
  </div>
  <div>
      <h2 class="update">Latest Update: {{latestUpdate}}</h2>
  </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">
    Loading...
  </div>

  <div *ngIf="!isLoaded && selectedButton === 'dht'" class="card-container">
      <div class="card-parameter">
        <div>
          <h3>{{sensorData.dht.lightIntensity}} Lux</h3>
          <h6>Light Intensity</h6>
        </div>
      </div>
      <div class="card-parameter">
        <div>
          <h3>{{sensorData.dht.temperature}} °C</h3>
          <h6>Temperature</h6>
        </div>
      </div>
      <div class="card-parameter">
        <div>
          <h3>{{sensorData.dht.humidity}} %RH</h3>
          <h6>Humidity</h6>
        </div>
      </div>
  </div>
  
  <div *ngIf="!isLoaded && selectedButton === 'npk1'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk1.temperature }} °C</h3>
        <h6>Temperature</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{sensorData.npk1.moisture}} %RH</h3>
        <h6>Moisture</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 class="card-parameter">
      <div>
        <h3>{{sensorData.npk1.nitrogen}} PPM</h3>
        <h6>Nitrogen</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{sensorData.npk1.phosphorus}} PPM</h3>
        <h6>Phosphorus</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{sensorData.npk1.potassium}} PPM</h3>
        <h6>Potassium</h6>
      </div>
    </div>
  </div>

  <div *ngIf="!isLoaded && selectedButton === 'npk2'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk2.temperature }}°C</h3>
        <h6>Temperature</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk1.moisture }} %RH</h3>
        <h6>Moisture</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 class="card-parameter">
      <div>
        <h3>{{ sensorData.npk1.nitrogen}} PPM</h3>
        <h6>Nitrogen</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk2.phosphorus}} PPM</h3>
        <h6>Phosphorus</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk2.potassium }} PPM</h3>
        <h6>Potassium</h6>
      </div>
    </div>
  </div>

  <div *ngIf="!isLoaded && selectedButton === 'relay'" class="card-container">
    <div class="card-parameter" *ngFor="let relay of relayStatus;">
      <div>
        <h3 [ngClass]="relay.current_status ? 'status-on' : 'status-off'">
          {{ relay.current_status ? 'ON' : 'OFF' }}
        </h3>
        <h6>Relay {{ relay.number }}</h6>
      </div>
    </div>
  </div>
  

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