<app-all-menus *ngIf="!token_identifier"></app-all-menus>
<button *ngIf="token_identifier"
  style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;z-index: 111;" md-raised-button>NLET
  ERP</button>
<div class="topWrapper" id="main">
  <div class="mainWrapperWrapper">
    <div class="row" style="background: #426E86">
      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center; padding-top: 10px;">     
      </div>
      <div class="col-sm-4 col-md-4 col-lg-4">
        <p
          style="margin: 0; padding-top: 5px;text-align: center; padding-bottom: 5px; font-size: 20px; font-weight: 500;color: white; ">
          {{headingName | translate}}</p>
        </div> <div id="toast"> <div id="desc">{{data_descip}}</div></div>
      </div>
      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center;"> </div>
    <div class="row rowStyle" style="padding-bottom: 39px;">
      <div class="col-sm-4 col-md-4 col-lg-4" style="padding-right: 0px;padding-left: 0px;overflow: auto">
        <div class="row" style='margin: 0;height: 100%;background: white;'>
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
            <md-tab-group style="height : 100% ;background: #efecec;" [selectedIndex]="tabIndexValue"
              class="tabCustomStyle" (selectedIndexChange)="getTab($event)">
              <md-tab [disabled]="tab_1">
                <ng-template md-tab-label> {{"Live Track" | translate}} </ng-template>
                <div class="row" style="margin:0%">
                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
                    <md-button-toggle-group style="width: 100%;padding: 5px;box-shadow: none;height: 40px;"
                      name="fontStyle" aria-label="Font Style">
                      <md-button-toggle style="width: 100%;font-size: 12px; text-align: center;"
                        *ngFor="let vehStatus of AllVeh"
                        [ngClass]="{ 'selectedRunning' :(vehStatus.status == 'Running'), 'deselected' : !vehStatus.status, 'selectedStopped' :(vehStatus.status == 'Stopped'), 'Inactice' :(vehStatus.status == 'Inactive'),'selectIdling' :(vehStatus.status == 'Idle'), 'selectedNodata' :  (vehStatus.status == 'No data')}">
                        <div (click)="getDeviceBYfilter(vehStatus.status,'tclick')">
                          {{vehStatus.totalCount}}
                          {{vehStatus.status | translate}}
                        </div>
                      </md-button-toggle>
                    </md-button-toggle-group>
                  </div>
                </div>
                <div class="row" style="margin:0%">
                  <div class="col-sm-12 col-md-12 col-lg-12"
                    style="padding: 0%; display: inherit; padding-left: 5px; padding-right: 7px; padding-bottom: 5px;">
                    <input style="float: right;border-radius: 0px;line-height: 1.3;" class="form-control" id="myInput"
                      name="myInput" [(ngModel)]="myInput" type="text"
                      (ngModelChange)="searchFilter($event,'devSearch')"
                      placeholder="{{'Device/Group search' | translate}}" />
                    <button md-raised-button [disabled]=" " md-raised-button (click)="pre()"
                      style="float:right;background: #2C7873; color: white;font-size: 14px;border-radius:0px;">
                      <<< </button> <button md-raised-button [disabled]="firstcall" md-raised-button (click)="next()"
                        style="float: right;background: #004445; color: white;font-size: 14px;border-radius:0px;"> >>>
                    </button>
                    <i class="fas fa-sync animateClass" title="{{'Refresh' | translate}}" (click)="refresh()"></i>
                    <i class="fas fa-plus-circle mr-1" style="font-size: 35px;padding-top: 4px;color: #426e86;cursor: pointer;" *ngIf="(custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn" title="{{'Add Vehicle' | translate}}" (click)="addVehicle()"></i>
                   <!-- <button class="btn btn-primary btn-sm rounded-circle" style="width: 35px;height: 35px;margin-top: 3px;float: right;">
                    <i class="fas fa-arrow-circle-down" style="font-size: 14px;cursor: pointer;" data-toggle="collapse" title="{{'Groups' | translate}}" data-target="#collapseExample"
                    aria-expanded="false" aria-controls="collapseExample"></i>
                    </button> -->
                  </div>
                </div>
                <!-- <div class="collapse" id="collapseExample">
                  <div class="card card-body">
                    <md-select [formControl]="toppings" multiple (change)="selectedGroup($event)" placeholder="Please select Group">
                      <md-option style="width: 360px;" *ngFor="let topping of groups" [value]="topping._id">{{topping.name}}</md-option>
                    </md-select>
                  </div>
                </div> -->
                <div class="row" style="margin:0%">
                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
                    <div style="font-size: 11px;padding-left: 5px; padding-right: 7px;height: 69vh;overflow: auto;">
                      <table id="myTable1" class="table table-hover" style="margin:0;padding-bottom: 39px;">
                        <thead style="background: #426E86; color: white;">
                          <tr>
                            <th>
                                <div>
                                  <md-checkbox type="checkbox" [checked]="true" (change)="selectAllVehicles($event)"></md-checkbox>
                                  <!-- <md-checkbox type="checkbox" [checked]="device.checked" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox> -->
                                </div>
                            </th>
                            <th>{{'Icon' | translate}}</th>
                            <th>{{'Reg. number' | translate}}</th>
                            <th>{{'Group' | translate}}</th>
                            <th>{{'Last Speed' | translate}}</th>
                            <th>{{'AC' | translate}}</th>
                            <th>{{'IGN' | translate}}</th>
                            <th>{{'PWR' | translate}}</th>
                            <!-- <th>{{'GSM' | translate}}</th> -->
                            <th title="{{'Additional Menu' | translate}}" style="text-align: center;cursor: pointer;"><i class="far fa-clipboard" style="font-size: 15px;"></i></th>
                          </tr>
                        </thead>
                        <tbody>
                          <!-- <tr *ngFor="let item of groups">
                            <div style="padding-top: 13px;padding-left: 5px;">
                              <md-checkbox type="checkbox" (change)="selectGroup($event,item)" [checked]="false"></md-checkbox>
                            </div>
                            <td>
                             {{item.name}}
                            </td>
                          </tr> -->
                          <tr *ngFor="let device of deviceList  ; let i = index" [ngStyle]="{'background' : device.columnHighlight === true ? '#f1efef' : 'white'}">
                            <div style="padding-top: 13px;padding-left: 5px;">
                               <md-checkbox type="checkbox" [checked]="device.checked === true" (change)="checkBoxValue($event,i)"></md-checkbox>
                               <!-- <md-checkbox type="checkbox" [checked]="device.checked" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox> -->
                            </div>            
                            <td style="padding-top:7px;padding-bottom: 5px;">
                              <div *ngIf="iconCheck(device.status,device.iconType)">
                                <img *ngIf="device.iconType != 'jcb'" style="width: 16px;" src={{devIcon}}>
                                <img *ngIf="device.iconType === 'jcb'" style="width: 20px;" src={{devIcon}}>
                              </div>
                            </td>
                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;">
                              {{device.Device_Name}}</td>
                            <td (click)="updateLiveTracking(device,null)"
                              style="cursor:pointer;text-align: left;"> {{device.vehicleGroup?device.vehicleGroup.name:'N/A'}}</td>
                              <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;text-align: center;">
                                {{device.last_speed}}</td>
                            <!-- <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
                                class="fas fa-wifi"
                                [ngStyle]="{color :getVehColor('gpsStatus',device.gpsTracking)}"></i> </td> -->
                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
                                class="fas fa-snowflake" [ngStyle]="{color : getVehColor('acStatus',device.ac)}"></i>
                            </td>
                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
                                class="fas fa-key" [ngStyle]="{color : getVehColor('ignStatus',device.last_ACC)}"></i>
                            </td>
                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
                                class="fas fa-power-off"
                                [ngStyle]="{color : getVehColor('powerStatus',device.power)}"></i> </td>
                            <!-- <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
                                class="fas fa-wifi" [ngStyle]="{color : getVehColor('gsmStatus',device.gsmSignal)}"></i>
                            </td> -->
                            <td [mdMenuTriggerFor]="additionalMenu" style="cursor:pointer;"
                              title="{{'Open Additional Menu'| translate}}">
                              <i class="fas fa-chevron-circle-down animateDropDown"></i>
                              <md-menu #additionalMenu="mdMenu" [overlapTrigger]="false" class="styleMenu">
                                <div style="display: inline-grid;">
                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="createTrip(device)"
                                    *ngIf="playPause === true" title="{{'Create Trip' | translate}}"
                                    style="width: 28px;margin-left: 2px;" class="play animateClass_10">play_arrow
                                  </md-icon>
                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="endTrip(device)"
                                    *ngIf="playPause === false" title="{{'End Trip' | translate}}"
                                    style="width: 28px;" class="play animateClass_11">pause_circle_outline</md-icon>
                                  <i [disabled]="(device.columnHighlight == true)" class="material-icons"
                                    style="cursor:pointer;font-size: 18px; text-align: center; padding-top: 3px; padding-bottom: 3px;"
                                    (click)="engineCut(device)" title="Immobilize"
                                    [ngStyle]="{'color':device.ignitionLock == '0'?'green':'red'}"> power_settings_new
                                  </i>
                                  <div>
                                    <img [disabled]="(device.columnHighlight == true)"
                                      src="../../assets/image/armSensor.png"
                                      *ngIf="(device.arm === '0')||(device.arm === undefined)"
                                      title="{{'Arm Vehicle' | translate}}" style="width:30px; cursor: pointer;"
                                      (click)="armDisarm(device, 'on')">
                                    <img [disabled]="(device.columnHighlight == true)"
                                      src="../../assets/image/disarmSensor.png" *ngIf="device.arm === '1'"
                                      title="{{'Disarm Vehicle' | translate}}"
                                      style="width:23px; cursor: pointer;margin-left: 3px;"
                                      (click)="armDisarm(device, 'off')">
                                  </div>
                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="locationShare(device)"
                                    title="{{'Share Location' | translate}}"
                                    style="font-size: 18px; text-align: center; padding-top: 5px; color: #3F51B5;"
                                    class="play animateClass_11">share</md-icon>
                                    <i class="fas fa-location-arrow" style="cursor:pointer;margin-top: 10px;color: red;margin-left: 5px;" title="Show Direction" (click)="directionShow(device)"></i>
                                    <i class="fas fa-terminal" style="cursor:pointer;margin-top: 10px;color: black;margin-left: 5px;" title="Trigger Command" (click)="triggerDeviceCmd(device)"></i>
                                </div>
                              </md-menu>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>    
                
              </md-tab>
              <md-tab [disabled]="tab_2">
                <ng-template md-tab-label> {{"Geofence" | translate}} </ng-template>
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="row" style="margin:0%">
                      <div class="col-sm-12 col-md-12 col-lg-12"
                        style="padding: 0%; display: inherit; padding-left: 5px;padding-top: 5px; padding-right: 7px; padding-bottom: 5px;">
                        <input style="float: right;border-radius: 0px;line-height: 1.3;background: white;"
                          class="form-control" id="myInput_1" name="myInput" [(ngModel)]="myInput" type="text"
                          (ngModelChange)="searchFilter($event,'geoSearch')"
                          placeholder="{{'Geofence Search' | translate}}" />
                        <button md-raised-button
                          style="float:right;background: #2C7873; color: white;font-size: 14px;border-radius:0px;">
                          <<< </button> <button md-raised-button (click)="next()"
                            style="float: right;background: #004445; color: white;font-size: 14px;border-radius:0px;">
                            >>>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style="margin:0%">
                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
                    <div style="font-size: 11px;padding-left: 5px; padding-right: 7px;height:540px">
                      <table id="myTable" class="table table-hover " style="margin:0;padding-bottom: 39px;">
                        <thead style="background: #426E86; color: white;">
                          <tr>
                            <th>{{'Group' | translate}}</th>
                            <th>{{'Geofence type' | translate}}</th>
                            <th>{{'Geo Fencing Name' | translate}}</th>
                            <th>{{'Status' | translate}}</th>
                            <th>{{'Vehicles' | translate}}</th>
                          </tr>
                        </thead>

                        <tbody>
                          <!-- *ngFor="let device of final" -->
                          <tr *ngFor="let geoObj of geoArr">
                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
                              {{geoObj.vehicleGroup?geoObj.vehicleGroup.name:"Not available"}}</td>
                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
                              {{geoObj.type?geoObj.type:"Not present"}}</td>
                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
                              {{geoObj.geoname }}</td>
                            <td>
                              <md-slide-toggle [(ngModel)]="geoObj.status" ngDefaultControl></md-slide-toggle>
                            </td>
                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
                              {{geoObj.devicesWithin?geoObj.devicesWithin.length:0}}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </md-tab>
              <md-tab [disabled]="tab_3">
                <ng-template md-tab-label> {{'History Track' | translate}} </ng-template>
                <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 20px; padding-right: 20px;">
                    <div class="row" style="margin: 0;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
                        <p style="margin-bottom: 0; padding-top: 10px;font-size: 12px">{{'Vehicle' | translate}}</p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 25px; padding-right: 5px;">
                        <!-- linethickness option -->
                    
                        <div *ngIf="devReady === false" >
                          <img src="../../assets/image/loaderGif.gif" style="width: 156px;height:40px;">               
                        </div>
                        <md-input-container *ngIf="devReady === true" style="width: 100%;height:40px;font-size: 12px;" [disabled]='disableSearch'>
                          <input mdInput placeholder="Search" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
                            [(ngModel)]="deviceName" (ngModelChange)="filterDevices(deviceName)"
                            [disabled]='disableSearch'>
                          <md-autocomplete #tdAuto="mdAutocomplete">
                            <md-option *ngFor="let device of foods" [value]="device.viewValue" (click)="change(device)">
                              <span>{{device.viewValue}}</span>
                            </md-option>
                          </md-autocomplete>
                        </md-input-container>
                      </div>
                    </div>
                    <div class="row" style="margin: 0;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
                        <p style="margin-bottom: 0; padding-top: 8px;font-size: 12px;">{{'Line Thickness' | translate}}
                        </p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6">
                        <!-- linethickness option -->
                        <md-select style="padding-top: 0;margin-left: 10px;color: white;width:100%;background:white"
                          [(ngModel)]="thicknessVal" ngDefaultControl>
                          <md-option *ngFor="let thickness of thicknessArr" [value]="thickness">
                            {{thickness}}
                          </md-option>
                        </md-select>
                      </div>
                    </div>
                    <div class="row" style="margin: 0;padding-top: 5px ; padding-bottom:5px;">
                      <div class="col-sm-6 col-md-6 col-lg-6"> </div>
                      <div class="col-sm-6 col-md-6 col-lg-6">
                        <!-- various options -->
                        <div style="padding-left: 10px;font-size: 12px;">
                          <i class="fas fa-info animateClass_1" title="{{'Idling'| translate}}"
                            [ngStyle]="{'background-color':idleColor == true?'#FFFCBB':'#c7c7c7'}"
                            (click)="changeColor('idle')"></i>
                          <i class="fas fa-parking animateClass_2" title="{{'parking'| translate}}"
                            [ngStyle]="{'background-color' : parkingColor === true ? 'red' : '#c7c7c7'}"
                            (click)="changeColor('parking')"></i>
                          <i class="fas fa-map-marker-alt animateClass_3" title="{{'Data Points'| translate}}"
                            [ngStyle]="{'background-color':dataColor == true?'#0e6cfb':'#c7c7c7'}"
                            (click)="changeColor('datapoint')"></i>
                        </div>
                      </div>
                    </div>
                    <div class="row" style="margin: 0;">
                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
                        <!-- timefilter icons -->
                        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%">
                          <button type="button" style="width:25%;border-right: 2px solid white;"
                            class="btn btn-secondary animateClass_4"
                            (click)="changeDate('today')">{{'Today' | translate}}</button>
                          <button type="button" style="width:25%;border-right: 2px solid white;"
                            class="btn btn-secondary animateClass_5"
                            (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
                          <button type="button" style="width:25%;border-right: 2px solid white;"
                            class="btn btn-secondary animateClass_6"
                            (click)="changeDate('week')">{{'Week' | translate}}</button>
                          <button [disabled]="true" type="button" class="btn btn-secondary animateClass_7"
                            (click)="changeDate('month')">{{'Month' | translate}}</button>
                        </div>
                      </div>
                    </div>
                    <div class="row" style="margin: 0;padding-top: 5px; ">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
                        <!-- ignition option label-->
                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
                        <!-- ignition input -->
                        <input id="minIdleTime" class="form-control form-control-sm"
                          style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;"
                          name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
                      </div>
                    </div>
<!------------------- satelight dropdown added --------------------------->
                    <div class="row" style="margin: 0;padding-top: 5px; ">
                      <div class="col-sm-1 col-md-1 col-lg-1" style="padding-left: 0;">
                      <md-checkbox type="checkbox" [checked]="satelliteDisabled === true" (change)="checkBoxValue1($event)"></md-checkbox>
                      </div>
                      <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Satellite' | translate}}</p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
                        <!-- <md-input-container> -->
                          <input placeholder="Satellite" [disabled]="!satelliteDisabled" [mdAutocomplete]="tdAutoedit2" name="neww2" #state="ngModel"
                            [(ngModel)]="satelite" (ngModelChange)="filterStates1(satelite)" class="form-control form-control-sm"
                          style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;">
                          <md-autocomplete #tdAutoedit2="mdAutocomplete">
                            <md-option *ngFor="let model of dataSelect2" [value]="model.value">{{model.value}}</md-option>
                          </md-autocomplete>
                        <!-- </md-input-container> -->
                      </div>

                      <!-- <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Geofence' | translate}}</p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
                       
                       
                      <md-slide-toggle  style="float: right; padding: 8px 35.1px"
                        md-tooltip="Show Geofences">
                      </md-slide-toggle>
                        
                      </div>

                      <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Route' | translate}}</p>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
                       
                      
                        <md-slide-toggle style="float: right; padding: 8px 35.1px" md-tooltip="Show routes">
                        </md-slide-toggle>
                        
                      </div> -->

                    </div>
<!-- ----------------------------------------------------------------------- -->
                    <div class="row" style="margin: 0;padding-top: 5px;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-top: 5px;padding-left: 0;">
                        <!-- from time label-->
                        <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-right: 0;padding-left:25px">
                        <!-- from datetime picker -->
                        <input id="datefrom" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
                          [bsConfig]="bsConfig" [(ngModel)]="datefrom" type="text">
                      </div>
                    </div>
                    <div class="row" style="margin: 0;padding-top: 5px;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-top: 5px;padding-left: 0;">
                        <!-- tolabel -->
                        <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-right: 0;padding-left:25px">
                        <!-- tolabel picker -->
                        <input id="date2" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
                          [bsConfig]="bsConfig" name="todate" [(ngModel)]="date2" type="text">
                      </div>
                    </div>
                    <div class="row" style="margin: 0;padding-top: 8px;padding-bottom: 5px;">
                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
                        
                        <button class="ml-1" style="background-color: #0e6cfb; color: white; float: right;" md-raised-button (click)="maphistory('')">{{'Show Track' | translate}}</button>
                        <button class="ml-1" *ngIf="showTable" style="background-color: red; color: white; float: right;" md-raised-button (click)="pdf()">{{'Export To PDF' | translate}}</button>
                        <button class="ml-1" *ngIf="showTable" style="background-color: green; color: white; float: right;" md-raised-button (click)="saveRoutePath()">{{'Save Route Path' | translate}}</button>
                      </div>

                      <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                        <button style="background-color: #0e6cfb; color: white; float: right;" md-raised-button
                          (click)="showArea()">{{'Show Area' | translate}}</button>
                      </div> -->
                    </div>
                    <div *ngIf="showTable" class="row" style="padding: 0%;padding-top: 10px;">
                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
                        <div class="row"
                          style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
                          <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;">
                            <!-- Vehicle heading -->
                            <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>

                          </div>
                          <div class="col-sm-2 col-md-2 col-lg-2">
                            <!-- Speed heading-->
                            <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
                          </div>
                          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
                            <!-- Controls heading-->
                            <p></p>
                          </div>
                          <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
                            <!-- Close Icon-->
                            <i class="fas fa-times" style="color: red; cursor: pointer;"
                              title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>

                          </div>
                        </div>
                        <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
                          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
                            <div style="max-height: 260px;">
                              <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index"
                                style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
                                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;"
                                  (click)="plotHistory(i)">
                                  <!-- Vehicle value -->
                                  <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}
                                  </p>
                                  <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
                                    <span
                                      style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
                                    <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
                                    <span
                                      style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
                                  </p>
                                </div>
                                <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;"
                                  (click)="plotHistory(i)">
                                  <!-- Speed value-->
                                  <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}
                                  </p>
                                </div>
                                <div class="col-sm-3 col-md-3 col-lg-3"
                                  style="padding-left: 0%;text-align: center;padding-right: 0;">
                                  <!-- Controls value-->
                                  <div>
                                    <md-icon *ngIf="SpeedMeter2" class="play animateClass_8" (click)="inter('slow')"
                                      mdTooltip="Rewind">fast_rewind</md-icon>
                                    <md-icon *ngIf="tempMapHistory[i].flag=='init'" class="play animateClass_9"
                                      (click)="play(i)" mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                                    <md-icon *ngIf="tempMapHistory[i].flag=='start'" class="play animateClass_10"
                                      (click)="play(i)" mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                                    <md-icon *ngIf="tempMapHistory[i].flag=='stop'" class="play animateClass_11"
                                      (click)="play(i)" mdTooltip="{{'Pause' | translate}}">pause_circle_outline
                                    </md-icon>
                                    <md-icon *ngIf="SpeedMeter2" class="play animateClass_12" (click)="inter('fast')"
                                      mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
                                    <!-- <i class="fal fa-octagon"></i> -->
                                  </div>
                                </div>
                                <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
                                  <i class="fas fa-times animateClass_13" title="{{'Remove track' | translate}}"></i>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </md-tab>
            </md-tab-group>
          </div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8 col-lg-8 panel-body panel-resizable" style="padding:0px; overflow: hidden">
        <div *ngIf="Load">
          <div class="loading">Loading&#8230;</div>
        </div>
        <!-- *ngIf="(immobilizeChk === true)&&(showHistory === false)"  -->
        <div *ngIf="(immobilizeChk === true)"  style="width: 350px;height: 250px;z-index: 3;position: absolute;background: white;top: 20%;left: 37%;background: white;border-radius: 12px;padding: 15px 20px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
          <div *ngIf="showErr === false" >
            <div style="text-align: center; padding: 20px;color: #426e86;">
              <i style="font-size: 60px; text-align: center;" class="far fa-clock"></i>
              <!-- <img  src={{timerGif}}> -->
            </div>     
            <p style="text-align: center;font-size: 16px;font-weight: 600;color: #a2a2a2;">Command Triggered , Please wait :</p>
            <div style="text-align: center; padding: 10px;font-size: 16px;font-weight: 600;color: #a2a2a2;">
              <span style="font-size: 40px;">{{immobilizeCount}}</span>
              <span>Sec.</span>
            </div>      
          </div> 
          <div  *ngIf="showErr === true">
            <div style="text-align: center; padding: 20px;">     
              <i *ngIf= "errIcon=== true" style="font-size: 60px; text-align: center;color: red;"  class="far fa-times-circle"></i>
              <i *ngIf= "locked=== true" style="font-size: 60px; text-align: center;color: red;" class="fas fa-lock"></i>
              <i  *ngIf= "unlocked === true" style="font-size: 60px; text-align: center;color: green;" class="fas fa-lock-open"></i>
            </div>
            <p style="text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;">{{ImmErrMsg}}</p>
          </div>           
        </div>
        <div *ngIf="showHistory === false" id="map" style="width: 100%; height: 100%;"></div>
        <div *ngIf="showHistory === true" id="map2" style="width: 100%; height: 100%;"></div>
        <div id='buttons' style=" width: 100px; top: 110px; right: -7px; position: absolute; z-index: 1;">
          <input type="range" min="0" max="22" value="5" class="slider" id="myRange"
            style="transform: rotate(-90deg);  height: 7px; box-shadow: 0px 0px 6px 5px lightg">
          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 80px;">
            <a style="float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid;text-align: center;width:38px;"
              [ngStyle]="{'background' : (mapTypeId=='roadmap') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('roadmap')">
              <!-- <span id="d"> -->
              <!-- <i class="material-icons" mdTooltip="Selected"  style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Street">
                streetview </i>
              <!-- </span> -->
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='terrain') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('terrain')">
              <!-- <span id="d"> -->
              <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='terrain'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px" mdTooltip="Google Physical">
                terrain </i>
              <!-- </span> -->
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='satellite') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('satellite')">
              <span id="e">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='satellite'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
                  mdTooltip="Google Satellite"> satellite </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='hybrid') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('hybrid')">
              <span id="f">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Hybrid">
                  layers </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (mapTypeId=='darkmode') ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="setMapType('darkmode')">
              <span id="k">
                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Night Mode">
                  nights_stay </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (isTraffic==true) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
              (click)="setMapType('traffic')">
              <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Traffic">
                  traffic </i>
              </span>
            </a>
          </div>

          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 15px;">
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (enableRouteComponent) ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="toggleMapComponents('route')">
              <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Route">
                  directions
                </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (enablePOIComponent) ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="toggleMapComponents('pointofinterest')">
              <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
                  mdTooltip="Point Of Interest"> person_pin_circle
                </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
              [ngStyle]="{'background' : (enableGeofenceComponent) ? '#86ac41c7;' : '#989898'}"
              class="pointer animateClass_10" (click)="toggleMapComponents('geofencing')"> <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Geofencing">
                  filter_tilt_shift
                </i>
              </span>
            </a>
            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
            [ngStyle]="{'background' : (enabletrail) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
            (click)="enableMapTrail()"> <span id="g">
                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Trail"> timeline
                </i>
              </span>
            </a>

           <!-- <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
           [ngStyle]="{'background' : (enabletrail) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
            (click)="viewStreet()"> <span id="viewStreet">
              
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip=""> timeline
              </i>
            </span>
          </a> -->

          <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
            [ngStyle]="{'background' : parkingButtonShow}" class="pointer animateClass_10"
            (click)="changeParking()"> <span id="viewStreet">
              <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="">local_parking
              </i>
            </span>
          </a>
          </div>
        </div>


        <!-- <a (click)="createTrip()" *ngIf="playPause" id="blog2"
          style="position: absolute; z-index: 1;rights: 18px; top: 200px;" mdTooltip="Create Trip"> <img
            src="../../assets/image/play-trip.png"></a>
        <a (click)="endTrip()" *ngIf="!playPause" id="blog2"
          style="position: absolute; z-index: 1;right: 18px; top: 200px;cursor: pointer;" mdTooltip="End Trip"> <img
            src="../../assets/image/pause-trip.png"></a> -->
        <div class="row" *ngIf="((showSocketData === true)&&(!token_identifier))"
          style="z-index: 1; bottom: 0px; position: absolute;background: white; padding: 10px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);left:15px;width:100%">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0px;padding-left: 0px">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="Socket data" aria-selected="true">{{'Socket Data'|translate}}</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="System logs" aria-selected="false">{{'System Logs' | translate}}</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="nearby-tab" data-toggle="tab" href="#nearby" role="tab" aria-controls="nearby" aria-selected="false">{{'Nearby Vehicles' | translate}}</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="dcq-tab" data-toggle="tab" href="#dcq" role="tab" aria-controls="dcq" aria-selected="false">{{'GPRS Command' | translate}}</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="view-tab" data-toggle="tab" href="#viewParanoma_1" role="tab" aria-controls="viewTab" aria-selected="false">{{'Vehicle Street View' | translate}}</a>
              </li>
              <li class="nav-item" >
                <a class="nav-link" id="view-tab" data-toggle="tab" href="#eventTab" role="tab" aria-controls="evetCLick" aria-selected="false">{{'Events' | translate}}</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-angle-down"></i></a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="row" *ngIf="((showSocketData === true)&&(!token_identifier))" style="margin-left: 0;">
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'Fuel Voltage' | translate}} :</span>
                        <span>{{socketData?socketData.fuelVoltage:''}}</span>
                      </div>
                      <div>
                        <span style="font-weight: 500;">{{'Heading' | translate}} :</span>
                        <!-- tempDevInfo.heading?tempDevInfo.heading: -->
                        <span>{{socketData?socketData.heading:''}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'Lattitude' | translate}} :</span>
                        <span>{{socketData?socketData.latDecimal:''}}</span>
                      </div>
                      <div>
                        <span style="font-weight: 500;">{{'Longitude' | translate}} :</span>
                        <span>{{socketData?socketData.longDecimal:''}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'IMEI' | translate}} :</span>
                        <span>{{socketData?socketData.imei:''}}</span>
                      </div>
                      <div>
                        <span style="font-weight: 500;">{{'Speed' | translate}} :</span>
                        <span>{{socketData?socketData.speed:''}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <!-- {{socketData | json}} -->
                        <span style="font-weight: 500;">{{'GPS Positioned' | translate}} :</span>
                        <span>{{socketData?socketData['GPS positioned']==1?'Fixed':socketData['GPS positioned']==0?'Not Fixed':'NA':'NA'}}</span>
                      </div>
                      <div>
                        <span style="font-weight: 500;">{{'Command' | translate}} :</span>
                        <span>{{socketData?socketData.command?socketData.command:'NA':'NA'}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <!-- tempDevInfo?convertDate(tempDevInfo.last_ping_on): -->
                        <span style="font-weight: 500;">{{'Date' | translate}} :</span>
                        <span>{{socketData?convertDate(socketData.date):''}}</span>
                      </div>
                      <div>
                        <!-- tempDevInfo?tempDevInfo.satellites: -->
                        <span style="font-weight: 500;">{{'Satellites' | translate}} :</span>
                        <span>{{socketData?socketData.satellites:'NA'}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <!-- tempDevInfo?tempDevInfo.last_ACC: -->
                        <span style="font-weight: 500;">{{'Ignition' | translate}} :</span>
                        <span>{{socketData?socketData.ignition==1?'ON':'OFF':'NA'}}</span>
                      </div>
                      <div>
                        <span style="font-weight: 500;">{{'Port' | translate}} :</span>
                        <span>{{socketData?socketData.port:'NA'}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'Ext. Voltage' | translate}} :</span>
                        <span>{{socketData?socketData.external_Battery?socketData.external_Battery:'NA' :'NA'}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    <!-- <span style="font-weight: 500;">{{'Area ' | translate}} :</span>
                    <span>{{(area | number)}}</span> -->
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'AC Status' | translate}} :</span>
                        <!-- {{ac}} -->
                        <!-- ==0?'OFF':socketData.ac==1?'ON' :ac==0?"OFF":ac==1?"ON":'NA':'NA' -->
                        <span>{{socketData?socketData.ac?socketData.ac==1?'ON':socketData.ac==0?'OFF':'NA':ac==0?"OFF":ac==1?"ON":'NA':'NA'}}</span>
                        <!-- <span>{{socketData?socketData.ac==1?socketData.ac:socketData.ac==2?socketData.ac :socketData.ac:'NA'}}</span> -->
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4">
                    
                  </div>
                </div>
                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
                  <div class="col-sm-12 col-md-12 col-lg-12">
                    <div>
                      <div>
                        <span style="font-weight: 500;">{{'Address' | translate}} :</span>
                        <span>{{liveAdd}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="row">
                  <div class="col-12">
                      <div style="width: 100%;">
                        <div class="limiterTable">
                          <div class="container-table100">
                            <div class="wrap-table100">
                              <div class="table100">
                                <table class="thisTableOnly">
                                  <thead style="background: #efecec;font-size: 12px;">
                                    <tr class="table100-head">
                                      <th class="column1">{{'IMEI' | translate }}</th>
                                      <th class="column2">{{'LATTITUDE' | translate}}</th>
                                      <th class="column3">{{'LONGITUDE' | translate}}</th>
                                      <th class="column3">{{'DEVICE TIME' | translate}}</th>
                                      <th class="column4">{{'INSERTION TIME' | translate}}</th>
                                      <th class="column5">{{'LAST PUSH' | translate}}</th>
                                      <th class="column6">{{'INT. RESPONSE' | translate}}</th>
                                      <th class="column1">{{'IGNITION' | translate}}</th>
                                      <th class="column2">{{'POWER' | translate}}</th>
                                      <th class="column3">{{'FUEL VOLTAGE' | translate}}</th>
                                      <th class="column4">{{'RAW DATA' | translate}}</th>
                                      <th class="column5">{{'AC' | translate}}</th>
                                      <th class="column6">{{'POWERCUT ALARM' | translate}}</th>
                                      <th class="column6">{{'SATTELITE' | translate}}</th>
                                      <th class="column6">{{'RAW IO' | translate}}</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                      <tr *ngFor="let rawData of gpsDataArr">
                                        <td class="column1">{{rawData.imei}}</td>
                                        <td class="column2">{{rawData.latDecimal}}</td>
                                        <td class="column3">{{rawData.longDecimal}}</td>
                                        <td class="column4">{{rawData.date  | date:'medium' }}</td>
                                        <td class="column4">{{rawData.insertionTime  | date:'medium' }}</td>
                                        <td class="column5">{{rawData.syncedAt?(rawData.syncedAt | date : 'medium'):'--'}}</td>
                                        <td class="column6">{{rawData.integrationResponse?rawData.integrationResponse:'--'}}</td>
                                        <td class="column1">{{rawData.ignition?rawData.ignition:'--'}}</td>
                                        <td class="column2">{{rawData.power?rawData.power:'--'}}</td>
                                        <td class="column4">{{rawData.fuelVoltage?rawData.fuelVoltage:'--'}}</td>
                                        <td class="column3">{{rawData.raw}}</td>
                                        <td class="column5">{{rawData.ac?rawData.ac:'--'}}</td>
                                        <td class="column6">{{rawData.powerCutAlarm?rawData.powerCutAlarm:'--'}}</td>
                                        <td class="column6">{{rawData.satellites?rawData.satellites:'--'}}</td>
                                        <td class="column6">{{rawData.rawio?getStringifyio(rawData.rawio):'--'}}</td>
                                      </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>                 
                      </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="nearby" role="tabpanel" aria-labelledby="nearby-tab">
                <div class="row">
                  <div class="col-12">
                    <div style="display: flex;margin-top: 10px;">
                      <label style="margin-top: 10px;">{{'Select Distance (in Meters)' | translate}}</label>
                      <div style="margin-top:15px">
                        <input type="range" min="0" max="20000"  [(ngModel)]="nearByValue" class="slider" id="nearbySlider" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg" (change)="changeRangeNearby()">
                        <p style="text-align: center;">{{nearByValue}} {{'meters' | translate}}</p>
                      </div> 
                      <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;height: 45px;" md-raised-button (click)="getNearByVehicles(socketData)">Vehicles</button>  
                    </div>
                  </div>
                </div>
               
              </div>
              <div class="tab-pane fade" id="dcq" role="tabpanel" aria-labelledby="profile-tab">
                <div class="row">
                  <div class="col-12">
                      <div style="width: 100%;">
                        <div class="limiterTable">
                          <div class="container-table100">
                            <div class="wrap-table100">
                              <div class="table100">
                                <table class="thisTableOnly">
                                  <thead style="background: #efecec;font-size: 12px;">
                                    <tr class="table100-head">
                                      <th class="column1">{{'IMEI' | translate}}</th>
                                      <th class="column2">{{'STATUS' | translate}}</th>
                                      <th class="column3">{{'ACTION' | translate}}</th>
                                      <th class="column3">{{'TYPE' | translate}}</th>
                                      <th class="column3">{{'MODEL' | translate}}</th>
                                      <th class="column4">{{'EXECUTION TIME' | translate}}</th>
                                      <th class="column5">{{'QUEUED TIME' | translate}}</th>
                                      <th class="column6">{{'COMMAND' | translate}}</th>
                                      <th class="column6">{{'RESPONSE' | translate}}</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                      <tr *ngFor="let dcq of dcqData">
                                        <td class="column1">{{dcq.imei}}</td>
                                        <td class="column2">{{dcq.status}}</td>
                                        <td class="column3">{{dcq.action}}</td>
                                        <td class="column3">{{dcq.cmd_type?dcq.cmd_type:'--'}}</td>
                                        <td class="column4">{{dcq.model}}</td>
                                        <td class="column4">{{dcq.executedAt  | date:'medium' }}</td>
                                        <td class="column5">{{dcq.queuedAt?(dcq.queuedAt | date : 'medium'):'--'}}</td>
                                        <td class="column6">{{dcq.command?dcq.command:'--'}}</td>
                                        <td class="column6">{{dcq.deviceResponse?dcq.deviceResponse:'--'}}</td>
                                      </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>                 
                      </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="viewParanoma_1" role="tabpanel" aria-labelledby="view-tab">
         
                <div id="viewParanoma" style="width: 400px;height: 200px;margin-left: 250px;"></div>
              </div>
              <div class="tab-pane fade" id="eventTab" role="tabpanel" aria-labelledby="event-tab">
                <div class="row">
                  <div class="col-12">
                      <div style="width: 100%;">
                        <div class="limiterTable">
                          <div class="container-table100">
                            <div class="wrap-table100">
                              <div class="table100">
                                <table  class="table table-striped table-hover" >  
                                  <tbody>
                                    <tr *ngFor="let notif of liveEventsData" style="margin-top:10px;">
                                      <td>
                                        <div>
                                          <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
                                          <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
                                          <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
                                        </div>   
                                      </td>  
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>                 
                      </div>
                  </div>
                </div>
              </div>
              
              <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"></div>
            </div>
          </div>
        </div>
        <div class="row" *ngIf="historyDataCondition === true" style="z-index: 1; bottom: 0px; position: absolute;background: white; padding: 10px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);left:15px;width:100%">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0px;padding-left: 0px">
            <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="position: absolute;top: -86px;background: white;border-radius: 12px;padding: 15px 20px;left: 20pc;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
              <div class="col-12">
                <div style="display: flex;">
                  <div>
                  <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='init'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                  <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                  <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)" mdTooltip="{{'Pause' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                  </div>
                  <input type="range" min="0" max={{seekBarValue}}  [(ngModel)]="sliderValue" class="slider" id="slider1" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"  (change)="zoomSet()">
                  <!-- (change)="changeRange()" -->
                  <div class="kWgQNm" id="myDIV">
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
                  </div>
                </div>
              </div>
            </div>
              <div class="row" >
                <div class="col-sm-12 col-md-12 col-lg-12" >
                  <ul class="nav nav-tabs" id="myTabHistory" role="tablistHIstory">
                    <li class="nav-item">
                        <a class="nav-link active" id="history-tab" data-toggle="tab" href="#homeH" role="tab" aria-controls=" data" aria-selected="true">{{'History'|translate}}</a>
                      </li>
                    <li class="nav-item">
                      <a class="nav-link" id="parking-tab" data-toggle="tab" href="#parking" role="tab" aria-controls="Socket data" aria-selected="false">{{'Parking'|translate}}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="event-tab" data-toggle="tab" href="#events" role="tab" aria-controls="Systessm logs" aria-selected="false">{{'Events' | translate}}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="extra-tab" data-toggle="tab" href="#contactH" role="tab" aria-controls="cfcontact" aria-selected="false"><i class="fas fa-angle-down"></i></a>
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent_1">
                    <div class="tab-pane fade show active" id="homeH" role="tabpanel" aria-labelledby="history-tab">
                        <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer" title="Time">Time <span *ngIf="playingHistory">{{historyDate}}</span></span>
                            </div>
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer"
                                title="Cumulative Distance (Kms.)">Cumulative Distance <span
                                  *ngIf="playingHistory">{{cummulative_Distance}}</span></span>
                            </div>
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer" title="Speed">Speed</span> <span *ngIf="playingHistory">{{speeed2}} <span
                                  style="text-align: center; padding-top: 10px;" *ngIf="playingHistory"
                                  title="Speed">{{'Km/Hr' | translate}}</span></span>
                            </div>
                          </div>
                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <div>
                                  <span style="font-weight: 500;">{{'Total Distance' | translate}} :</span>
                                  <span>{{total_dis}}</span>
                                </div>
                                <div>
                                  <span style="font-weight: 500;">{{'Stoppage Time' | translate}} :</span>
                                  <span>{{ideal_time}}</span>
                                </div>
                              </div>
                            </div>
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <div>
                                  <span style="font-weight: 500;cursor: pointer;" title="Command">{{'Command' | translate}}</span>
                                  <span title="Command">{{socketData?socketData.command:''}}</span>
                                  <!-- <span style="font-weight: 500;">{{'Cumulative Distance (Kms.)' | translate}} :</span>
                                <span>{{cummulative_Distance}}</span> -->
                                  <!-- <span style="font-weight: 500;">{{'Average Speed' | translate}} :</span> -->
                                  <!-- <span>{{avg_speed}}</span> -->
                                </div>
                                <div>
                                  <span style="font-weight: 500; cursor: pointer;" title="No. of Parkings"> Parking</span>
                                  <span title="No. of Parkings">{{stoppageCount}}</span>
                                </div>
                              </div>
                            </div>
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <div title="Max Speed" styl e="cursor: pointer;">
                                  <span style="font-weight: 500;">{{'Max Speed'|translate}}</span>
                                  <span>{{maxSpeedd}}</span><span style="padding-left: 2px;">{{'Km/Hr' | translate}}</span>
                                </div>
                                <div style="cursor: pointer" title="Average Speed">
                                  <span style="font-weight: 500">{{'Average Speed' | translate}}</span>
                                  <span>{{avg_speed}}</span><span style="padding-left: 2px;">{{'Km/Hr' | translate}}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <span style="font-weight: 500;" title="Fuel Consumption">{{'Fuel Consumption' | translate}}</span>
                                <span title="Fuel Consumption">NA</span>
                              </div>
                            </div>  
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <span style="font-weight: 500;" title="Fuel Consumption">{{'Ext. Voltage' | translate}}</span>
                                <span title="ext_voltage" style="padding-left: 20px;">{{'ext_voltage' | translate}}</span>
                                <span *ngIf="ext_voltage" style="padding-left: 10px;">{{'volt' | translate}}</span>
                              </div>
                            </div>
                            <div class="col-sm-4 col-md-4 col-lg-4" *ngIf="historyDataCondition === true">
                            <span style="font-weight: 500;">{{'Area (Acre)' | translate}} :</span>
                            <span>{{(area | number)}}</span>
                            </div>
                          </div>
                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
                            <div class="col-sm-8 col-md-8 col-lg-8">
                              <div>
                                <span style="font-weight: 500;" title="Fuel Consumption">Address</span>
                                <span title="Fuel Consumption">{{historyAdress}}</span>
                              </div>
                            </div> 
                            <div class="col-sm-4 col-md-4 col-lg-4">
                              <div>
                                <span style="font-weight: 500;" title="Fuel Consumption">Working Hours</span>
                                <span title="Fuel Consumption">{{workingHours}}</span>
                              </div>
                            </div>
                          </div>
                    </div>
                    <div class="tab-pane fade" id="parking" role="tabpanel" aria-labelledby="parking-tab">
                      <div class="row">
                        <div class="col-12">
                            <div style="width: 100%;">
                              <div class="limiterTable">
                                <div class="container-table100">
                                  <div class="wrap-table100">
                                    <div class="table100">
                                      <table class="thisTableOnly" style="width: 100%;">
                                        <thead style="background: #efecec;font-size: 12px;">
                                          <tr class="table100-head">
                                            <th style="padding: 10px;">{{'Vehicle Name' | translate}}</th>
                                            <th style="padding: 10px;">{{'From Time' | translate}}</th>
                                            <th style="padding: 10px;">{{'To Time' | translate}}</th>
                                            <th style="padding: 10px;">{{'Duration' | translate}}</th>
                                            <th style="padding: 10px;">{{'Location' | translate}}</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                            <tr *ngFor="let park of parkingArr">
                                              <td class="column1">{{park.device?park.device.Device_Name : '--'}}</td>
                                              <td class="column2">{{park.arrival_time | date:'medium' }}</td>
                                              <td class="column3">{{park.departure_time |  date:'medium'}}</td>
                                              <td class="column4">{{getDuration(park.arrival_time,park.departure_time)}}</td>
                                              <td class="column4" *ngIf="park.address">{{park.address?park.address:'--'}}</td>
                                              <td class="column4" *ngIf="!park.address">
                                                 <a href={{getAlink(park.lat,park.long)}}  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>            
                                              </td>
                                            </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </div>                 
                            </div>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="events" role="tabpanel" aria-labelledby="events-tab">
                      <div class="row">
                        <div class="col-12">
                            <div style="width: 100%;">
                              <div class="limiterTable">
                                <div class="container-table100">
                                  <div class="wrap-table100">
                                    <div class="table100">
                                      <table  class="table table-striped table-hover" >  
                                        <tbody>
                                          <tr *ngFor="let notif of notifArray" style="margin-top:10px;">
                                            <td>
                                              <div>
                                                <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
                                                <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
                                                <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
                                              </div>   
                                            </td>
                                          </tr>     
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </div>                 
                            </div>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="contactH" role="tabpanel" aria-labelledby="contactH-tab"></div>
                  </div>         
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="row" style="padding: 0px;margin: 0px;">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0;margin: 0;">
            <div class="row">
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div>
                    <i class="fas fa-expand" title="Hide work area" (click)="showHideWorkArea()"></i>
                </div> 
              </div>
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div>
                  <i class="fas fa-book-open"></i>
                </div>
                <div>
                  <p>{{currentTime}}</p>
                </div>    
              </div>
            </div>
          </div>
    </div> -->
  </div>

</div>

<!-- <div *ngIf="false"> -->
  <table id="headerTable" style="border: 1px solid black;width: 100%;
    border-collapse: collapse;">
    <tr style="text-align:center">
      <div style="text-align:center">Table</div>
    </tr>
    <tr style="height:30px;border-top:1px solid black">
      <td>
        <span style="font-weight: 700;">Name</span>: {{deviceNameForPDF}}
      </td>
      <td>
        <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: 700;">Start Time</span>: {{startTime}}
      </td>
      <td>
        <span style="font-weight: 700;">End Time</span>: {{endTime}}
      </td>
    </tr>
    <tr style="height:30px;border-top:1px solid black">
      <td>
        <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
      </td>
      <td>
        <span style="font-weight: 700;">End Address</span>: {{endAddress}}
      </td>
    </tr>
  </table>
<div class="w3-sidebar w3-bar-block w3-animate-right" style="display:none;right:0;width: 340px;top: 60px;background: transparent;" id="rightMenu">
  <button (click)="closeRightMenu()" class="w3-bar-item w3-button w3-large">Close &times;</button>
 <div class="card m-2" style="border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.2s;background: linear-gradient(45deg, #7a33df, #e9ecef);">
   <div class="card-body" style="font-family: initial;">
     <h6> {{liveAdd}}</h6>
     <span>Latitude:{{socketData?socketData.latDecimal:''}}</span>
      <span>Longitude:{{socketData?socketData.longDecimal:''}}</span>

   </div>

 </div>

<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
 background: linear-gradient(33deg, #ffe607ed, #cbe9ba);">
  <div class="card-body" style="font-family: initial;">
    <div class="row">
      <div class="col-md-6">
        <!-- <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6> -->
        <h6 [md-tooltip]="socketData?socketData.ac?socketData.ac==1?'Ac ON':socketData.ac==0?'AC OFF':'AC Not Supported':ac==1?'Ac ON':ac==0?'AC OFF':'AC Not Supported':'AC Not Supported'" ><img  style="width: 20px;" src="../../assets/image/acGrey.png"> {{socketData?socketData.ac?socketData.ac==1?'ON':socketData.ac==0?'OFF':'NA':ac==0?"OFF":ac==1?"ON":'NA':'NA'}}</h6>
        <h6 [md-tooltip]="socketData?socketData.power?socketData.power=='1'?'Power ON':socketData.power=='0'?'Power OFF':'':power=='1'?'Power ON':power=='0'?'Power OFF':'':''" class="mt-3"><img  style="width: 20px;" src="../../assets/image/power_off.png">
          {{socketData?socketData.power?socketData.power=="1"?'ON':socketData.power=="0"?'OFF':'NA':power=="0"?"OFF":power=="1"?"ON":'NA':'NA'}}</h6>

      </div>
      <div class="col-md-6">
        <h6 [md-tooltip]="socketData?socketData.ignition==1?'Ignition ON':'Ignition OFF':''"><img style="width: 20px;" src="../../assets/image/enginered.png"> {{socketData?socketData.ignition==1?'ON':'OFF':''}}</h6>
        <h6 md-tooltip="Door Status" class="mt-3"><img style="width: 26px;" src="../../assets/images/liveTrackIcons/car-door.png">
                  {{socketData?socketData.ignition==1?'ON':'OFF':''}}</h6>

      </div>

    </div>

  </div>

</div>

<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
 background: linear-gradient(33deg, #f44336, #cbe9ba)">
  <div class="card-body" style="font-family: initial;">
    <div class="row">
      <div class="col-md-6">
        <h6>Speed:<span class="font-weight-bold">{{socketData?socketData.speed:''}}</span> km/hr</h6>
        <h6 class="mt-3">Fuel Consumtion:<span class="font-weight-bold">{{fuelConsumption}}</span></h6>
        
      </div>
      <div class="col-md-6">
        <h6>Today's Odo:<span class="font-weight-bold">{{todaysOdo}}</span> km</h6>
        
      </div>

    </div>

  </div>

</div>

<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
 background: linear-gradient(33deg, #8f83ae, #544545);">
  <div class="card-header">
    <h6>Alerts</h6>
  </div>
 
  <div class="card-body"  style="font-family: initial;">
    <div class="row">
      <div class="col-md-6">
        <!-- <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6> -->
        
        <h6 md-tooltip="Power Alert"><img style="width: 20px;" src="../../assets/image/powerON.png"> Power alert:<span class="font-weight-bold">0</span></h6>
        <h6  class="mt-3" md-tooltip="Parking Alert"><i class="material-icons" >local_parking</i> Parking alert:<span class="font-weight-bold">0</span></h6>
        <h6 class="mt-3" md-tooltip="Toll Alert"><img style="width: 20px;" src="../../assets/image/tollbooth.png"> Toll alert:<span class="font-weight-bold">0</span></h6>
      </div>
      <div class="col-md-6">
        <h6 md-tooltip="Ignition Alert"><img style="width: 20px;"
            src="../../assets/image/enginena.png"> Ignition alert:<span  class="font-weight-bold">0</span></h6>
        <h6 class="mt-3" md-tooltip="Overspeed Alert"><i class="fas fa-tachometer-alt"></i> Overspeed alert:<span class="font-weight-bold">0</span></h6>
        <h6 class="mt-3" md-tooltip="Geofence Alert"><img style="width: 20px;" src="../../assets/image/geofence.png"> Geofence Alert:<span class="font-weight-bold">0</span></h6>
      </div>
    
    
    </div>
  </div>

</div>
<!-- <div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div>
<div class="card m-2">
  <div class="card-header">
    <h3>hjdsh</h3>

  </div>
  <div class="card-body">
    <h4>a,sjnaksnasjnl</h4>

  </div>

</div> -->
</div>

