
  <app-all-menus></app-all-menus>
  <div style="min-height:420px;padding-top: 70px;">
    <p class="headStyle">{{'Vehicle History' | translate}}</p>
    <div class="loading" *ngIf="Load"></div>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-2">
          <md-input-container>
            <input mdInput placeholder="Search" [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" >
                <span>{{device.viewValue}}</span>
              </md-option >
            </md-autocomplete>   
          </md-input-container>
        </div>
        <div class="col-md-3">
          <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-3">
          <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="top: 16px;">
          <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="generateHistory()">{{'Generate History' | translate}}</button>
          <!-- <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button> -->     
            <a  *ngIf="SpeedMeter2"  (click)="inter('slow')" style="padding-left:20px;" id="blog6" mdTooltip="Rewind"> <img src="../../assets/image/rewind.png"></a> 
            <a   (click)="play(null)" style="padding-left:20px; padding-right:20px;" id="blog4" mdTooltip="Play History"> <img src="../../assets/image/ic_play.png"></a>    
            <a  *ngIf="SpeedMeter2" (click)="inter('fast')" id="blog5" mdTooltip="Fast Forward"> <img src="../../assets/image/forward.png"></a>
        </div>
      </div>
    </div>
    <div style="width: 100%">
      <div id="poiAddMap" style="padding: 0px;width: 100%;display: flex;height: 70vh;"></div>
      <canvas style="position:absolute;top:25%;right: 5%;" *ngIf="SpeedMeter2" data-type="radial-gauge"
data-width="140px"
 data-height="138px"
 data-units="Speed"
 data-units="KMPH"
 data-min-value="0"
 data-max-value="220"
 data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
 data-minor-ticks="2"
 data-stroke-ticks="true"
 data-highlights='[
            { "from": 0, "to": 50, "color": "#6fff72" },
            { "from": 50, "to": 100, "color": "yellow" },
            { "from": 100, "to": 150, "color": "#fb3232" },
            { "from": 150, "to": 200, "color": "red" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
 data-ticks-angle="225"
 data-start-angle="67.5"
 data-color-major-ticks="black"
 data-color-minor-ticks="black"
 data-color-title="black"
 data-color-units="black"
 data-color-numbers="black"
 data-color-plate="#f9f9f9"
 data-border-shadow-width="0"
 data-borders="true"
 data-needle-type="arrow"
 data-needle-width="1"
 data-needle-circle-size="7"
 data-needle-circle-outer="true"
 data-needle-circle-inner="false"
 data-animation-duration="1500"
 data-animation-rule="linear"
 data-color-border-outer="#ddd"
 data-color-border-outer-end="#ddd"
 data-color-border-middle="#ddd"
 data-color-border-middle-end="#ddd"
 data-color-border-inner="#ddd"
 data-color-border-inner-end="#ddd"
 data-color-needle-shadow-down="#333"
 data-color-needle-circle-outer="#333"
 data-color-needle-circle-outer-end="#111"
 data-color-needle-circle-inner="#111"
 data-color-needle-circle-inner-end="#222"
 data-value-box-border-radius="0"
 data-color-value-box-rect="white"
 data-color-value-box-rect-end="white"
 data-font-value="Led"
 data-font-numbers="Led"
 data-font-title="Led"
 data-font-units="Led"
data-value="0"
[attr.data-value]=speeed2
></canvas>
  </div>
  </div>
