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

      
    </head>
  <body>

      <div class="upper">
          <md-toolbar>My App</md-toolbar>
        <md-toolbar flex style="background-color:white;width: 100%;" >
          
                <img src={{this.logo}}
                style=
                "width:12%;padding-top:20px;">
              <ul style="
              padding: 30px 0% 0px 16%;
              box-sizing: border-box;
              flex-direction: row;
              display: flex;
              height: 65px;width:auto"  fxLayout="row" >
                
                <li style="line-height: 65px;
                width:auto;margin-left: 7px;">
                  <a  class="pointer" (click)="soon()"><span id="ac"><md-icon style="display: block;
                    position: absolute;
                    margin-left: 18px;">dashboard</md-icon><span >{{'DASHBOARD' | translate}}</span></span></a>
                </li>
                <li style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
                  <a class="pointer" (click)="group()">
                      <span id="d">
                        <md-icon style="display: block;position: absolute;margin-left: 10px;">group</md-icon>{{'GROUPS' | translate}}</span>
                    </a>
                  </li>
                <li style="line-height: 65px;width:auto;margin-left: 7px;">
                <a class="pointer" (click)="devi()" ><span id="d"><md-icon style="display: block;
                  position: absolute;
                  margin-left: 8px;">devices</md-icon>{{'VEHICLES' | translate}}</span></a> 
                </li>
                <li style="line-height: 65px;
                width:auto;margin-left: 7px;">
                <a class="pointer" (click)="openNav()" ><span id="d"><md-icon style="display: block;
                  position: absolute;
                  margin-left: 13px;">my_location</md-icon>{{'TRACKER' | translate}}</span></a>
                </li>
                <li style="line-height: 65px;
                width:auto;margin-left: 7px;">
                <a class="pointer" (click)="geo()" ><span id="d"><md-icon style="display: block;
                  position: absolute;
                  margin-left: 22px;">blur_circular</md-icon>{{'GEO FENCING' | translate}}</span></a>
                </li>

                <li style="line-height: 65px;
                width:auto;margin-left: 7px;">
                <a class="pointer" [mdMenuTriggerFor]="appMenu3"  ><span id="active"><md-icon style="display: block;position: absolute;
                  margin-left: 13px;">report</md-icon>{{'REPORTS' | translate}}</span></a>
                </li>
                <li [mdMenuTriggerFor]="routeMenu" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
                  <a class="pointer">
                      <span id="d">
                        <md-icon style="display: block;position: absolute;margin-left: 10px;">swap_calls</md-icon>ROUTES</span>
                    </a>
                  </li>
                  <li *ngIf="superAdmin" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
                    <a class="pointer" (click)="dealerInfo()">
                        <span id="d">
                          <md-icon style="display: block;position: absolute;margin-left: 10px;">supervisor_account</md-icon>DEALERS</span>
                      </a>
                    </li>
                <md-menu class="test" #appMenu3="mdMenu" [y-position]="before">              
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report()" >&nbsp;&nbsp;<span id="ac"><span id="active">Daily Report</span></span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report_speed()" >&nbsp;&nbsp;<span id="d">Speed Variation</span></a>
                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ideal()" >&nbsp;&nbsp;<span id="d">Idle</span></a> -->
                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ign()" >&nbsp;&nbsp;<span id="d">Ignition</span></a> -->
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="trip_report()" >&nbsp;&nbsp;<span id="d">Trip Report</span></a> 
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="summaryReport()" >&nbsp;&nbsp;<span id="d">Summary Report</span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="geofancingReport()" >&nbsp;&nbsp;<span id="d">Geofencing Report</span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="overspeed()" >&nbsp;&nbsp;<span id="d">Overspeeding Report</span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="routeViolation()" >&nbsp;&nbsp;<span id="d">Route Violation Report</span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="stoppage_report()" >&nbsp;&nbsp;<span id="d">Stoppage Report</span></a> 
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ignition_report()" >&nbsp;&nbsp;<span id="d">Ignition Report</span></a>   
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="distance_report()" >&nbsp;&nbsp;<span id="d">Distance Report</span></a>
                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="alert_report()" >&nbsp;&nbsp;<span id="d">Alert Report</span></a>      
                  </md-menu>
                  <md-menu class="test" #routeMenu="mdMenu" [y-position]="before">              
                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="vehicleRoute()" >&nbsp;&nbsp;<span id="ac"><span id="active">ROUTE LIST</span></span></a>
                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="route_map()" >&nbsp;&nbsp;<span id="d">ROUTE MAPPING</span></a>
                    </md-menu>
                <li style="line-height:65px;width:auto;margin-left:7px;">
                <a class="pointer" *ngIf="cust" (click)="addcus()" ><span id="d"><md-icon style="display: block;position: absolute;margin-left: 14px;">person_add</md-icon>CUSTOMER</span></a>
                </li>
                           </ul>
                
                           <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
                     
                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                  <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
                                  <h5>&nbsp;&nbsp;{{mb}}</h5>
                                  <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                  &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>&nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
                                     <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                                </md-menu>
                                
                                <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                         
                                   <img src="../../assets/image/us.jpg" height=24px>
                                </button>
                         </ul>
                               
                        
                     
                             <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
                     
                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                   <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
                                   <h5>&nbsp;&nbsp;{{mb}}</h5>
                                   <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                   &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default"  (click)="myaccount()" >My Account</button>       &nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;    
                                      <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                                 </md-menu>
                                 
                                 <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                                
                                    <img src="../../assets/image/us.jpg" height=24px>
                                 </button>
                                 <app-notification></app-notification>
                             
                           </ul>
                                 
              
             </md-toolbar>
        </div>



 <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="min-height:420px">
    <p class="headStyle">Ignition Report</p>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--Select Device--"  ngDefaultControl>
            <md-option *ngFor="let option of options" [value]="option">
              {{ option.value }}
            </md-option>
          </md-select>
        </div>
        <div class="col-md-3">
          <span>From Date</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-3">
          <span>To Date</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-3" style="top: 16px;">
            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="ignition_report(Fromdate,todate,option)">Ignition Report</button>
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="export_to_XL(Fromdate,todate,option)">Export to excel</button>
          </div>
      </div>
    </div>
    <table class="table table-striped table-hover" style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">
      <thead>
        <tr>
          <th>On/Off</th>
          <th>Date Time</th>
          <th>Location</th>
      </thead>
      <tbody>
        <tr *ngFor="let report of ignition_data">
          <td style="cursor:pointer">{{report.switch}}</td>
          <td style="cursor:pointer">{{report.timestamp| date:'short'}}</td>
          <td style="cursor:pointer">{{report.address}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>