94 lines
3.8 KiB
HTML
94 lines
3.8 KiB
HTML
<div class="container-graph">
|
||
<ng-container *ngIf="allNoData; else graphContent">
|
||
<div class="no-data">No available data</div>
|
||
</ng-container>
|
||
|
||
<ng-template #graphContent>
|
||
<div class="date-picker">
|
||
<mat-form-field>
|
||
<mat-label>Enter a date range</mat-label>
|
||
<mat-date-range-input [rangePicker]="picker">
|
||
<input matStartDate placeholder="Start date" [(ngModel)]="startDate" (dateChange)="dateChange()">
|
||
<input matEndDate placeholder="End date" [(ngModel)]="endDate" (dateChange)="dateChange()">
|
||
</mat-date-range-input>
|
||
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
|
||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||
</mat-form-field>
|
||
</div>
|
||
<div class="sensor-wrapper">
|
||
<div class="title">Sensor DHT</div>
|
||
<div class="button-param">
|
||
<button
|
||
[ngClass]="{'active': activeButton === 'vicitemperature'}"
|
||
(click)="filterData('vicitemperature')">
|
||
Temperatur Udara
|
||
</button>
|
||
<button
|
||
[ngClass]="{'active': activeButton === 'vicihumidity'}"
|
||
(click)="filterData('vicihumidity')">
|
||
Kelembaban Udara
|
||
</button>
|
||
<button
|
||
[ngClass]="{'active': activeButton === 'viciluminosity'}"
|
||
(click)="filterData('viciluminosity')">
|
||
Intensitas Cahaya
|
||
</button>
|
||
</div>
|
||
<ng-container *ngIf="isLoadingDHT; else dhtData">
|
||
<div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px">
|
||
<i class="fa fa-spinner fa-spin"></i>
|
||
</div>
|
||
</ng-container>
|
||
<ng-template #dhtData>
|
||
<canvas #myChartDHT id="myChartDHT" width="600" height="300" style="height: 300px;"></canvas>
|
||
<p *ngIf="isNoDataDHT" class="no-data">No available data</p>
|
||
</ng-template>
|
||
</div>
|
||
|
||
<div class="sensor-wrapper">
|
||
<div class="title-with-dropdown">
|
||
<div class="title">Sensor NPK1</div>
|
||
<select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK1" (change)="onResize()">
|
||
<option value="npk">NPK</option>
|
||
<option value="temperature">Temperatur Tanah</option>
|
||
<option value="humidity">Kelembaban Tanah</option>
|
||
<option value="ph">PH Tanah</option>
|
||
<option value="conductivity">Conductivity</option>
|
||
</select>
|
||
</div>
|
||
<ng-container *ngIf="isLoadingNPK1; else npk1Data">
|
||
<div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px">
|
||
<i class="fa fa-spinner fa-spin"></i>
|
||
</div>
|
||
</ng-container>
|
||
<ng-template #npk1Data>
|
||
<canvas #myChartNPK1 id="myChartNPK1"></canvas>
|
||
<p *ngIf="isNoDataNPK1" class="no-data">No available data</p>
|
||
</ng-template>
|
||
</div>
|
||
|
||
<div class="sensor-wrapper">
|
||
<div class="title-with-dropdown">
|
||
<div class="title">Sensor NPK2</div>
|
||
<select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK2" (change)=" onResize()">
|
||
<option value="npk">NPK</option>
|
||
<option value="temperature">Temperatur Tanah</option>
|
||
<option value="humidity">Kelembaban Tanah</option>
|
||
<option value="ph">PH Tanah</option>
|
||
<option value="conductivity">Conductivity</option>
|
||
</select>
|
||
</div>
|
||
<ng-container *ngIf="isLoadingNPK2; else npk2Data">
|
||
<div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px;">
|
||
<i class="fa fa-spinner fa-spin"></i>
|
||
</div>
|
||
</ng-container>
|
||
<ng-template #npk2Data>
|
||
<canvas #myChartNPK2 id="myChartNPK2"></canvas>
|
||
<p *ngIf="isNoDataNPK2" class="no-data">No available data</p>
|
||
</ng-template>
|
||
</div>
|
||
</ng-template>
|
||
</div>
|