<!-- <html>
  <head>
      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  

      
    </head>
  <body>

<app-all-menus></app-all-menus>


 <div class="small">
  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
<md-menu #menu="mdMenu">

      <a href="#">
        <h6>DASHBOARD
        <md-icon style="float:right">dashboard</md-icon>
      </h6>
    </a>
      
  
         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
         
   
  </md-menu> 
</div> 

  <div style="float:left; width: 100%;padding-top: 6%;" class="scrollbar" id="style-1" >
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <p style="text-align: center; padding-top: 30px; font-size: 25px; font-weight: 500;margin-top: 0;">VEHICLE TYPE</p>
  <div id="toast"><div id="desc">{{data_descip}}</div></div>
 
  <button md-tooltip="Add Vehicle Type" style="border:1px solid transparent; background-color: transparent;margin-top:8px" (click)="add_VehicleType()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>
  <input type="search"   id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Vehicle Search"/>

  <table  id="myTable" class="table table-striped table-hover " style="overflow-y: hidden;
  overflow-x: hidden;font-size:12px">         
  <thead style="background-color:#A2C523;color: white;">
    <tr>
      <th>{{'Brand' | translate}}</th>
      <th>{{'Description' | translate}}</th>
      <th>{{'Model' | translate}}</th>
      <th>{{'Icon Type' | translate}}</th>
      <th>{{'Voltage Calibration' | translate}}</th>
   
      <th>{{'Tank Size' | translate}}</th>
      <th>{{'Mileage' | translate}}</th>
      <th>{{'Last Modified' | translate}}</th>
      <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>         
      <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>         
    </tr>
  </thead>

  <tbody>

<tr *ngFor="let data of vehicle">

      <td  style="cursor:pointer" >{{data.brand}}</td>

      <td  style="cursor:pointer" >{{data.description}}</td>

      <td  style="cursor:pointer" >{{data.model}}</td>
      <td  style="cursor:pointer" >{{data.iconType?data.iconType:"NA"}}</td> 

    
      <td style="cursor:pointer" md-tooltip="show detail"
      (click)="openCaliberation(data.voltage_calibration)" >
      
        {{data.voltage_calibration?data.voltage_calibration.length:0}} Calibration</td>

   
      <td  style="cursor:pointer" >{{data.tank_size}}</td>

      <td  style="cursor:pointer">{{data.mileage}}</td>

   <td  style="cursor:pointer" >{{data.last_modified|date:'short'}}</td> 

   <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="edit_Record(data)">edit</md-icon ></td>

   <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon ></td>

  </tr>  
  </tbody> 
</table> 



</div>

</body> -->



<!-- New UI -->



<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
    
  
      <i class="fas fa-plus-circle" (click)="add_VehicleType()" md-tooltip="Add Vehicle Type" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
      <h4>{{'Vehicle Types' | translate}}</h4>
    </div>
  </div>  

  <div class="row rowStyle">
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
          <input  style="margin: 10px 10px 10px 0px;width: 225px;height: 30px;float: right;border-radius: 0px;line-height: 1.3;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" type="search"   id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Vehicle Search" />
          <div style="width: 100%;height:76vh;overflow: scroll;">
            <table  id="myTable" class="table table-striped table-hover" style="font-size: 12px;">         
            <thead style="background-color:#e0e0e0;color: #444444;">
              <tr>
                <th>{{'Brand' | translate}}</th>
                <th>{{'Description' | translate}}</th>
                <th>{{'Model' | translate}}</th>
                <th>{{'Icon Type' | translate}}</th>
                <th style="white-space: nowrap;">{{'Voltage Calibration' | translate}}</th>      
                <th style="white-space: nowrap;">{{'Temprature Calibration' | translate}}</th>      
                <th style="white-space: nowrap;">{{'Tank Size' | translate}}</th>
                <th>{{'Mileage' | translate}}</th>
                <th>{{'Last Modified' | translate}}</th>
                <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>
                <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>
              </tr>
            </thead>       
            <tbody> 
          <tr *ngFor="let data of vehicle">
                <td  style="cursor:pointer" >{{data.brand}}</td>
                <td  style="cursor:pointer" >{{data.description}}</td>
                <td  style="cursor:pointer" >{{data.model}}</td>
                <td  style="cursor:pointer" >{{data.iconType?data.iconType:"NA"}}</td> 
                <td style="cursor:pointer" md-tooltip="show detail" (click)="openCaliberation(data.voltage_calibration)">
                  {{data.voltage_calibration?data.voltage_calibration.length:0}} Calibration</td>  
                  <td style="cursor:pointer" md-tooltip="show detail" (click)="opentempCaliberation(data.temp_calibration)">
                    {{data.temp_calibration?data.temp_calibration.length:0}} Calibration</td>         
                <td  style="cursor:pointer" >{{data.tank_size}}</td>
                <td  style="cursor:pointer">{{data.mileage}}</td>
                 <td  style="cursor:pointer;white-space: nowrap;" >{{data.last_modified|date:'short'}}</td> 
                <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="edit_Record(data)">edit</md-icon ></td>
                 <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon ></td>     
            </tr>  
            </tbody> 
          </table>      
         </div>   
        </div>
      </div>  
    </div>
    <div  class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;padding-right: 15px;padding-left: 15px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
          <p style="text-align: center;color: #b1afaf;">{{calibrationTitle}}</p>
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
          <div *ngIf="calibrationData.length != 0" style="width: 100%;height:77vh;overflow: auto;">
            <table style="border:1px solid black;width: 100%;">
              <tr style="border:1px solid black;" *ngFor="let data1 of calibrationData"><label style="padding: .8em;">Voltage</label> 
                <th style="border:1px solid black;" style="padding: .8em;">{{data1.voltage}}</th>
                <label style="padding: .8em;">Fuel</label> <td style="border:1px solid black;" style="padding: .8em;">{{data1.fuel}}</td>
              </tr>
            </table>
          </div>
          <div *ngIf="calibrationData.length == 0" style="width: 100%;height:82vh;overflow: auto;text-align: center; padding-top: 20vh;">
           <p style="font-weight: 500; color: #686868;">{{noticeTitle}} {{'Information' | translate}}</p>
           <p style="color: #919191;">{{'Click on' | translate}} {{noticeTitle}} {{'column in vehicle type table for get more detail' | translate}}</p>
          </div>  
        </div> 
        </div>
      </div> 
    </div>
  </div>


