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: 06/09/2024 15:39:21</h2>
  </div>

  <div>
    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectParameter('dht')">DHT</button>
    <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectParameter('npk1')">NPK 1</button>
    <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectParameter('npk2')">NPK 2</button>
  </div>

  <div *ngIf="selectedButton === 'dht'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>3539 Lux</h3>
        <h6>Intensitas Cahaya</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>27 °C</h3>
        <h6>Temperature</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>80%</h3>
        <h6>Kelembaban</h6>
      </div>
    </div>
  </div>
  
  <div *ngIf="selectedButton === 'npk1'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>28 °C</h3>
        <h6>Temperature</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>99.9%</h3>
        <h6>Moisture</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>1.5 mS/cm</h3>
        <h6>Conductivity</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>8.51</h3>
        <h6>pH</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>500 PPM</h3>
        <h6>Nitrogen</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>500 PPM</h3>
        <h6>Phosphorus</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>500 PPM</h3>
        <h6>Potassium</h6>
      </div>
    </div>
  </div>

  <div *ngIf="selectedButton === 'npk2'" class="card-container">
    <div class="card-parameter">
      <div>
        <h3>28.6 °C</h3>
        <h6>Temperature</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>99.8%</h3>
        <h6>Moisture</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>1.4 mS/cm</h3>
        <h6>Conductivity</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>8.55</h3>
        <h6>pH</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>510 PPM</h3>
        <h6>Nitrogen</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>512 PPM</h3>
        <h6>Phosphorus</h6>
      </div>
    </div>
    <div class="card-parameter">
      <div>
        <h3>500 PPM</h3>
        <h6>Potassium</h6>
      </div>
    </div>
  </div>

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