
<!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->

<div id="mySidenav" class="sidenav">
        <!-- <a href="#" id="about"></a> -->
        <a id="blog">
                <div style="padding: 10px; background-color: #ddd;">
                        <input type="search" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (keyup)="searchFilter()" placeholder="{{'Device Search' | translate}}"/>
                </div>

                <div [ng2IfScrollbars]>
                
            
                        <table class="scroll" id="myTable">
                             
                                <tr *ngFor="let device of total_final | orderBy: key : reverse | filter:myInput ;let i = index">
                                        <td>
                                            
                                                <i class="ml-1 mr-1 fas" [ngClass]="{'fa-car':device.iconType=='car','fa-motorcycle':device.iconType=='bike','typeon':device.Ignition,'typeoff':!device.Ignition}"></i>

                                        </td>
                                        <td  style="cursor:pointer;width:40%;" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device)">
                                                <span style="display:block;font-size: 12px;">{{ device.Device_Name }}</span>    
                                        </td>
                                        <td>
                                        <span style="display:block;text-align: center" *ngIf="test(device.Ignition,device.Ignition_Time)">
                                                   
                                        <i title="Ignition {{device.Ignition}}" [ngClass]="{'fas fa-fire':true,'on':device.Ignition,'off':!device.Ignition}"></i>
                                                       
                                        </span>
                                        </td>
                                   
                                        <td>
                                        
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus>=6" class="fas fa-battery-full" style="color:green"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==5" class="fas fa-battery-three-quarters" style="color:green"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==4" class="fas fa-battery-half" style="color:yellow"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==3" class="fas fa-battery-quarter" style="color:yellow"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==2" class="fas fa-battery-quarter" style="color:yellow"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==1" class="fas fa-battery-quarter" style="color:red"></i>
                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==undefined" class="fas fa-battery-empty" ></i>
 
                                           
                                     

                                        </td>
                                        <td>
                                      
                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==undefined" class=" fas fa-signal" ></i>
                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==0" class=" fas fa-signal" style="color:red"></i>
                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==1" class=" fas fa-signal" style="font-size: 10;color:green"></i>
                                           
                                               

                                        </td>
                                 
                                        <td>
                                       
                                                
                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==1" class="fas fa-crosshairs" style="color:green"></i>
                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==0" class="fas fa-crosshairs" style="color:red"></i>
                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==undefined" class="fas fa-crosshairs" ></i>

                                        </td>
                                        <td>
                                         
                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==undefined" class="fas fa-alarm-clock" ></i>
                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==0" class="fas fa-alarm-clock" style="color:red"></i>
                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==1" class="fas fa-alarm-clock" style="color:green"></i>
                                                
                                        

                                        </td>
                                        <td>
                                               
                                                <i title="Power {{device.power}}" *ngIf="device.power==undefined" class="fas fa-plug" ></i>
                                                <i title="Power {{device.power}}" *ngIf="device.power==0" class="fas fa-plug" style="color:red"></i>
                                                <i title="Power {{device.power}}" *ngIf="device.power==1" class="fas fa-plug" style="color:green"></i>
                                               

                                        </td>
                                        <td>
                                               
                                                

                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==undefined" class="fas fa-stop" ></i>
                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==0" class="fas fa-pause" style="color:red"></i>
                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==1" class="fas fa-play" style="color:green"></i>

                                        </td>
                                        <!-- <td>
                                              
                                             
                                                <i *ngIf="device.satellites==undefined" class="far fa-wifi" ></i>
                                                <i *ngIf="device.satellites==0" class="far fa-wifi" style="color:red"></i>
                                                <i *ngIf="device.satellites>=1" class="far fa-wifi" style="color:green"></i>
                                        </td> -->
                                </tr>
                       </table>
      

                </div>

        </a>
</div>
