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')">DHT</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}}%</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}}%</h3>
        <h6>Moisture</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{sensorData.npk1.conductivity}}mS/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 }}%</h3>
        <h6>Moisture</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>{{ sensorData.npk1.conductivity }}mS/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="selectedButton === 'relay'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>ON</h3>
        <h6>Nutrition</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>OFF</h3>
        <h6>Nutrition</h6>
      </div>
    </div>

  </div> -->

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