Untitled
unknown
plain_text
5 months ago
7.9 kB
2
Indexable
<div class="container-fluid" id="sidebar-wrapper">
<div class="row">
<div class="side-nav">
<app-side-nav></app-side-nav>
<div>
<div class="min-header">
<app-header></app-header>
</div>
<div>
<p aria-hidden="true" class="reports barlow-semibold">
<img src="/assets/images/backbutton.svg" (click)="navigateToDashboard()" alt="backbutton" class="img-fluid"
style="width: 20px; height: 18px;">Reports
</p>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="run-button barlow-semibold" (click)="toggleForm()" title="run diagnostics">Run Diagnostics</button>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-8 ">
<div class="row h-100" >
<div class="card card1 col-md-9 offset-md-3 ">
<div class="card-body">
<h5 class="card-title">{{ equipment?.vehicleName }}</h5>
<img [src]="getImageSource(equipment?.vehicleType)" alt="{{ equipment?.vehicleType }} Logo" class="card-img-top mt-5"
[ngStyle]="{
'width': equipment?.vehicleType === 'ChipSpreader' ? '17rem' : '20rem',
'height': 'auto',
'margin-left': equipment?.vehicleType === 'ChipSpreader' ? '20px' : '0'
}" >
<div class="row mt-5">
<div class="col-6 mt-5">
<p class="card-text barlow-regular">Purchase Year</p>
</div>
<div class="col-6 mt-5 text-end">
<p class="card-text barlow-medium">{{ equipment?.manufactureYear | date:'yyyy' }}</p>
</div>
</div>
</div>
<div class="row">
<div class="col-6 mt-2">
<p class="card-text barlow-regular">Last Maintenance</p>
</div>
<div class="col-6 text-end mt-2">
<p class="card-text barlow-medium">{{ equipment?.lastMaintananceDate | date:'MMM dd, yyyy'}}</p>
</div>
</div>
<div class="row">
<div class="col-6 mt-2">
<p class="card-text barlow-regular">Next Maintenance</p>
</div>
<div class="col-6 text-end mt-2">
<p class="card-text barlow-medium">{{ equipment?.nextMaintananceDate | date:'MMM dd,yyyy' }}</p>
</div>
</div>
<div class="row">
<div>
<p class="card-text barlow-regular mt-2 pb-2">Configuration Details<span class="ms-5 barlow-medium config mt-2">{{ equipment?.configurationDetail }}</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 h-100 col-sm-8">
<div class="card card2">
<div class="card-body">
<div class="row">
<h5 class="card-title col-6">Pump Flow Rate</h5>
<div class="col-6 ">
<i class="calendar">
<input type="text" ngxDaterangepickerMd [(ngModel)]="selected"
(ngModelChange)="onDateRangeChange($event)" class="form-control date"
[locale]="{ displayFormat: 'MMM YY' }" />
<img src="/assets/images/calendar.svg" alt="Etnyre Logo" class="input-icon">
</i>
</div>
</div>
<div class="charts">
<div [chart]="lineChart"></div>
<div [chart]="barChart"></div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="showForm" class="overlay">
<form (ngSubmit)="onSubmit()" class="reportsUploadform uploadform1">
<div>
<p class="barlow-semibold ms-3">Run Diagnostics</p>
</div>
<div *ngIf="step === 1">
<div class="row">
<div class="col d-flex justify-content-between align-items-center">
<p class="select-data-point ms-3">Select Data Point(s)</p>
<div class="form-check justify-content-end move-left">
<input class="form-check-input" type="checkbox" (change)="toggleSelectAll($event)" [checked]="selectAll">
<label>Select All</label>
</div>
</div>
</div>
<div class="form-check">
<div class="checkbox-grid">
<div *ngFor="let parameter of filteredParameters">
<div class="form-check">
<input class="form-check-input" type="checkbox" [value]="parameter.parameter"
(change)="onCheckboxChange(parameter.parameter, $event, parameter.id)"
[checked]="selectedOptions.includes(parameter.parameter)">
{{ parameter.parameter }}
</div>
</div>
</div>
</div>
<div class="buttons mt-2">
<button type="button" (click)="toggleForm()" class="btn cancel-btn barlow-semibold">Cancel</button>
<button type="button" class="btn upload-btn barlow-semibold ms-4" (click)="nextStep()">Next</button>
</div>
</div>
<div *ngIf="step === 2">
<p class="ms-3 barlow-regular">Selected Data Points:</p>
<div class="selected-grid-container">
<div class="selected-grid">
<div *ngFor="let selected of selectedOptions; let i = index" class="ms-3 barlow-regular">
<img src="/assets/images/close.svg" alt="backbutton" class="img-fluid"
style="width: 16px; height: 16px;" (click)="removeSelectedOption(selected, filteredParameters[i].id)"> {{ selected }}
</div>
</div>
</div>
<div class="row time">
<div class="col-sm-3 mt-4 ms-3">
<label for="EquipmentType">Time interval(s)</label>
<div class="custom-input-container">
<input type="number" id="time-interval" name="interval1-end" [value]="timeInterval" class="custom-input">
<div class="increment-button" (click)="increment('time-interval')"></div>
<div class="decrement-button" (click)="decrement('time-interval')"></div>
</div>
</div>
<div class="col-sm-3 mt-4 ms-4">
<label for="selectEcu">Time Span(mins)</label>
<div class="custom-input-container">
<input type="number" id="time-span" name="interval1-end" [value]="timeSpan" class="custom-input">
<div class="increment-button" (click)="increment('time-span')"></div>
<div class="decrement-button" (click)="decrement('time-span')"></div>
</div>
</div>
</div>
<div class="buttons mt-4">
<button type="button" class="btn cancel-btn barlow-semibold" (click)="toggleForm()">Cancel</button>
<button type="button" class="btn cancel-btn ms-4 barlow-semibold" (click)="previousStep()">Back</button>
<button type="submit" class="btn upload-btn ms-4 barlow-semibold">Submit</button>
</div>
</div>
</form>
</div>
<div *ngIf="loading" class="overlay">
<div class="uploadform loadingform">
<div>
<p class="barlow-semibold">Run Diagnostics</p>
</div>
<div class="loading-icon">
<img src="/assets/images/Loading_icon.svg" alt="Etnyre Logo" class="img-fluid">
</div>
<p class="loading-msg">Please wait for the file to generate</p>
</div>
</div>
<div *ngIf="showAlert" class="alert-window">
<div class="alertbox barlow-regular">
<div>
<p class="barlow-semibold titleheader">Alert</p>
</div>
<p class="messageSize">Are you sure you want to cancel?</p>
<div class="alert-buttons">
<button type="button" class="btn no-btn" (click)="closeAlert()">No</button>
<button type="button" class="btn yes-btn" (click)="confirmCancel()">Yes</button>
</div>
</div>
</div>Editor is loading...
Leave a Comment