Untitled

 avatar
unknown
plain_text
4 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)">&nbsp;{{ 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