
<app-all-menus></app-all-menus>
<div class="topDiv">
<div id="toast"> <div id="desc">{{data_descip}}</div></div>
  <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">
      <h4>{{'DEVICES MASTER' | translate}}</h4>
  
    </div>
  </div>  
 
  <div class="row rowStyle">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
      <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">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <div style="width: 100%;height:82vh;overflow: auto;">
            <table  id="deviceTable" class="table table-striped table-hover" style="font-size: 12px;">         
            <thead style="background-color:#e0e0e0;color: #444444;">
              <tr>
                <th style="text-align:center;white-space: nowrap;">{{'Device Name' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Device ID' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Status' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'User' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Dealer' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Phone' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Created On' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Expire On' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Icon Type' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Fuel Voltage (mv)' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'SIM Number' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Today ODO' | translate}}</th>
                <th style="text-align:center;white-space: nowrap;">{{'Total ODO' | translate}}</th>       
                <th style="text-align:center;white-space: nowrap;">{{'Email' | translate}}</th>           
                <th  style="text-align:center;white-space: nowrap;">{{'Edit' | translate}}</th>           
                <th  style="text-align:center;white-space: nowrap;">{{'Delete Permanently' | translate}}</th>   
                <th  style="text-align:center;white-space: nowrap;">{{'Restore' | translate}}</th>    
                <th  style="text-align:center;white-space: nowrap;">{{'Delete' | translate}}</th>         
                <th style="text-align:center;white-space: nowrap;">{{'Certificates' | translate}}</th>       
                <th style="text-align:center;white-space: nowrap;">{{'Reset ODO' | translate}}</th>     
                <th style="text-align:center;white-space: nowrap;">{{'Delete History' | translate}}</th>    
                <th style="text-align:center;white-space: nowrap;">{{'Recalculate ODO' | translate}}</th>        
                <th style="text-align:center;white-space: nowrap;" title="Clear System logs">{{'CLear Logs' | translate}}</th>                  
                <th style="text-align:center;white-space: nowrap;">{{'Last Ping On' | translate}}</th>
              </tr>
            </thead> 
          </table>      
         </div>  
        </div>
      </div> 
    </div>
  </div>
</div>


<!-- <app-all-menus></app-all-menus>
<div style="padding-top: 6%;">
  <p class="headStyle">{{'DEVICES MASTER' | translate}}</p>  
  <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
  <div class="InputStyle">
    <div class="row">
      <div class="col-md-4" style="text-align: center;"> 
          <md-input-container>
          <input mdInput placeholder="{{'Search by Device ID' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
          #state="ngModel" [(ngModel)]="deviceName"
          (ngModelChange)="filterDevices(deviceName)">
         <md-autocomplete #tdAuto="mdAutocomplete">
            <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" (click)="getExactValue(device)">
              <span>{{device.viewValue}}</span>
            </md-option >
          </md-autocomplete>   
        </md-input-container>
        <md-input-container>
          <input mdInput placeholder="{{'Search by Sim Number' | translate}}" [mdAutocomplete]="tdAutosim" name="state" 
          #state="ngModel" [(ngModel)]="simnumber"
          (ngModelChange)="filterDevicesbysimnumber(simnumber)">
         <md-autocomplete #tdAutosim="mdAutocomplete">
            <md-option *ngFor="let sim of simNumberSelect" [value]="sim.sim_Number" (click)="getSIMValue(sim)">
              <span>{{sim.sim_Number}}</span>
            </md-option >
          </md-autocomplete>   
        </md-input-container>
      
      </div>
      <div class="col-md-2" style="padding-left: 0;">
        <span>{{'From Date' | translate}}</span>
        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-2">
        <span>{{'To Date' | translate}}</span>
        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
      </div>
      <div class="col-md-4" style="padding-top:17px;text-align: center;">
        <div class="loading" *ngIf="Load">Loading&#8230;</div> 
            <md-slide-toggle md-tooltip="Deleted Devices" [(ngModel)]="deletedDevices" (change)="onChange($event)"></md-slide-toggle> 
          <button style="background-color:#484848;color:#fdfdfd;width: 120px;margin-left: 20px;" md-raised-button (click)="callfunction()">{{'FIND' | translate}}</button> 
           <a id="download" href="{{XLurl}}"  download style="text-decoration:none;" > 
          <button style="background-color: #60ab1c;color:#fdfdfd;width: 135px;margin-left: 15px;" md-raised-button (click)="excelExport()">{{'EXPORT EXCEL' | translate}}</button>  
            </a>        
        </div>
    </div>
  </div>
        <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
      
  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
    <thead style="background-color:#A2C523;color: white;">
        <tr>
            <th style="text-align:center;">{{'Device Name' | translate}}</th>
            <th style="text-align:center;">{{'Device ID' | translate}}</th>
            <th style="text-align:center;">{{'Status' | translate}}</th>
            <th style="text-align:center;">{{'User' | translate}}</th>
            <th style="text-align:center;">{{'Dealer' | translate}}</th>
            <th style="text-align:center;">{{'Phone' | translate}}</th>
            <th style="text-align:center;">{{'Created On' | translate}}</th>
            <th style="text-align:center;">{{'Expire On' | translate}}</th>
            <th style="text-align:center;">{{'Icon Type' | translate}}</th>
            <th style="text-align:center;">{{'Fuel Voltage (mv)' | translate}}</th>
            <th style="text-align:center;">{{'SIM Number' | translate}}</th>
            <th style="text-align:center;">{{'Today ODO' | translate}}</th>
            <th style="text-align:center;">{{'Total ODO' | translate}}</th>       
            <th style="text-align:center;">{{'Email' | translate}}</th>           
            <th  style="text-align:center;">{{'Edit' | translate}}</th>           
            <th  style="text-align:center;">{{'Delete Permanently' | translate}}</th>   
            <th  style="text-align:center;">{{'Restore' | translate}}</th>    
            <th  style="text-align:center;">{{'Delete' | translate}}</th>         
            <th style="text-align:center;">{{'Certificates' | translate}}</th>       
            <th style="text-align:center;">{{'Reset ODO' | translate}}</th>     
            <th style="text-align:center;">{{'Delete History' | translate}}</th>    
            <th style="text-align:center;">{{'Recalculate ODO' | translate}}</th>        
            <th style="text-align:center;" title="Clear System logs">{{'CLear Logs' | translate}}</th>                  
        </tr>
    </thead>  
</table>
</div>
 -->
