2022-04-20 11:15:19 +05:30
< div class = "topDiv" style = "background: #efecec;" >
< div class = "row" style = "height:70px" no-padding >
< div class = "col-sm-12 col-md-12" >
< app-all-menus > < / app-all-menus >
< / div >
< / div >
< div * ngIf = "showButton" class = "pull-left mt-sm text-dark" style = "background: linen ; width: 24px ; border-radius: 50 % ;
height: 23px; position: absolute;z-index: 1;width: 24px;top: 103px;" (click)="scrollLeft()">
< i style = "margin-left: 4px;" class = "fa fa-chevron-circle-left" aria-hidden = "true" > < / i >
< / div >
< div # widgetsContent class = "custom-slider-main " >
< div class = "col-sm-4 col-lg-2 " style = "padding-right: 0;padding-left: 0;"
*ngFor="let deviceSummary of DeviceSummaryArr">
< div class = "row" style = "margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);"
(click)="devicebystatus(deviceSummary.status)">
< div class = "col-sm-4 col-md-4 "
[ngClass]="{ 'selectedRunning_1' :(deviceSummary.status == 'RUNNING'), 'selectedStopped_1' :(deviceSummary.status == 'STOPPED'),'selectedOur_1' :(deviceSummary.status == 'OUT OF REACH'),'selectAll_1' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling_1' :(deviceSummary.status == 'IDLE'),'expireStatus_1' : (deviceSummary.status == 'EXPIRED'),'selectedNoGPS_1' : (deviceSummary.status == 'NO DATA')}">
< img src = {{deviceSummary.icon}} alt = "Total Vehicle" height = "42" width = "42" >
< / div >
< div class = "col-sm-8 col-md-8 "
[ngClass]="{ 'selectedRunning' :(deviceSummary.status == 'RUNNING'), 'selectedStopped' :(deviceSummary.status == 'STOPPED'),'selectedOur' :(deviceSummary.status == 'OUT OF REACH'),'selectAll' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling' :(deviceSummary.status == 'IDLE'),'expireStatus' : (deviceSummary.status == 'EXPIRED'),'selectedNoGPS' : (deviceSummary.status == 'NO DATA')}">
< span style = "font-weight : 500" > {{deviceSummary.status |
translate}}< / span > < br > < span > {{deviceSummary.total}}< / span >
< / div >
< / div >
< / div >
< / div >
< div * ngIf = "!showButton" class = "pull-right mt-sm text-dark" style = "background: linen ; position: absolute ; z-index: 1 ; width: 24px ;
height: 23px;right: 0px;top: 105px;border-radius: 50%;" (click)="scrollRight()">
< i style = "margin-left: 4px;" class = "fa fa-chevron-circle-right" aria-hidden = "true" > < / i >
< / div >
<!-- <div class="menu - wrappers">
< div class = "row" style = "margin-left: 1px;margin-right: 1px;margin-bottom: 10px;" >
< div class = "col-sm-4 col-lg-2 " style = "padding-right: 0;padding-left: 0;" * ngFor = "let deviceSummary of DeviceSummaryArr" >
< div class = "row" style = "margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);" ( click ) = " devicebystatus ( deviceSummary . status ) " >
< div class = "col-sm-4 col-md-4 " [ ngClass ] = " { ' selectedRunning_1 ' : ( deviceSummary . status = = ' RUNNING ' ) , ' selectedStopped_1 ' : ( deviceSummary . status = = ' STOPPED ' ) , ' selectedOur_1 ' : ( deviceSummary . status = = ' OUT OF REACH ' ) , ' selectAll_1 ' : ( deviceSummary . status = = ' TOTAL VEHICLES ' ) , ' selectIdling_1 ' : ( deviceSummary . status = = ' IDLE ' ) , ' selectedNoGPS_1 ' : ( deviceSummary . status = = ' NO DATA ' ) } " >
< img src = {{deviceSummary.icon}} alt = "Total Vehicle" height = "42" width = "42" >
< / div >
< div class = "col-sm-8 col-md-8 " [ ngClass ] = " { ' selectedRunning ' : ( deviceSummary . status = = ' RUNNING ' ) , ' selectedStopped ' : ( deviceSummary . status = = ' STOPPED ' ) , ' selectedOur ' : ( deviceSummary . status = = ' OUT OF REACH ' ) , ' selectAll ' : ( deviceSummary . status = = ' TOTAL VEHICLES ' ) , ' selectIdling ' : ( deviceSummary . status = = ' IDLE ' ) , ' selectedNoGPS ' : ( deviceSummary . status = = ' NO DATA ' ) } " >
< span style = "font-weight : 500" > {{deviceSummary.status | translate}}< / span > < br > < span > {{deviceSummary.total}}< / span >
< / div >
< / div >
< / div >
< / div >
< / div > -->
< div class = "row" * ngIf = "((superAdmin === true)||(custtype === true))" style = "margin-left: 1px; margin-right: 1px;margin-bottom: 15px;height: auto;" >
< div class = "col-lg-4 col-sm-4" style = "padding:0" >
< div style = "margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = " box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 600;color:#9a9a9a;margin-bottom: 0;" > {{'ADDED VEHICLES' | translate}}< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-4 col-md-4" * ngFor = "let count of totalCount" >
< div style = "cursor: pointer;" ( click ) = " getAddedVehList ( count . key ) " title = "{{'Get Added Vehicle List' | translate}}" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . key = = ' Today ' ) , ' weekStyle ' : ( count . key = = ' Week ' ) , ' monthStyle ' : ( count . key = = ' Month ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;color: #777777;" > {{count.key |translate}}< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-sm-4" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = "box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 600;color:#9a9a9a;;margin-bottom: 0;" > {{'GOING TO EXPIRE VEHICLES' | translate}}< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-4 col-md-4" * ngFor = "let count of totalExpiredCount" >
< div style = "cursor: pointer;" ( click ) = " getExpiredVehList ( count . key ) " title = "{{'Get Expired Vehicle List'|translate}}" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . key = = ' Today ' ) , ' weekStyle ' : ( count . key = = ' Week ' ) , ' monthStyle ' : ( count . key = = ' Month ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;color: #777777;" > {{count.key | translate}}< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-sm-4" style = "padding:0;" >
<!-- <div style="margin - left: 5px; margin - right: 5px; background: white; box - shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
< div class = "row" style = "box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 600;color:#9a9a9a;;margin-bottom: 0;" > BILLING DETAIL< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-6 col-md-6" * ngFor = "let count of billingDetailArr" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' pendingStyle ' : ( count . key = = ' Pending ' ) , ' paidStyle ' : ( count . key = = ' Paid ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;color: #777777;" > {{count.key}}< / p >
< / div >
< / div >
< / div > -->
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = "box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 600;color:#9a9a9a;;margin-bottom: 0;" > {{'RENEWED VEHICLES'|translate}}< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-4 col-md-4" * ngFor = "let count of totalRenewedCount" >
< div style = "cursor: pointer;" ( click ) = " renewedVehList ( count . key ) " title = "{{'Get Renewed Vehicle List'|translate}}" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . key = = ' Today ' ) , ' weekStyle ' : ( count . key = = ' Week ' ) , ' monthStyle ' : ( count . key = = ' Month ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;color: #777777;" > {{count.key | translate}}< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" * ngIf = "((superAdmin === false)&&(custtype === false))" style = "margin-left: 1px; margin-right: 1px;margin-bottom: 15px;" >
< div class = "col-lg-3 col-sm-3" * ngIf = "fuelShow === true" style = "padding:0" >
< div style = "margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = " box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;" >
< div class = "col-12" style = "padding: 0;" >
< div >
< p style = "font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;" > {{'FUEL PRICE' | translate}}< / p >
< md-select style = "color: white; padding: 0%; position: absolute; top: 0; right: 0;" [ ( ngModel ) ] = " currState " ( change ) = " getFuelprice ( currState ) " ngDefaultControl >
< md-option * ngFor = "let ustate of Indianstate" [ value ] = " ustate " >
{{ustate}}
< / md-option >
< / md-select >
< / div >
< / div >
< / div >
< div class = "row" style = "text-align: center;;height: 180px;max-height: 180px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-6 col-md-6" * ngFor = "let count of fuelCount" >
< div style = "cursor: pointer;" >
< p style = "font-size: 20px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . fuel = = ' Petrol ' ) , ' weekStyle ' : ( count . fuel = = ' Diesel ' ) } " >
< i * ngIf = "langSymbol ===true" style = "font-size: 20px;" class = "fas fa-rupee-sign" > < / i >
{{count.price}}/{{count.unit}}< / p >
< p style = "font-size: 25px;color: #777777;" > {{count.fuel |translate}}< / p >
< span >
< span * ngIf = "langSymbol === false" > {{valueSymbol}}< / span >
< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-3 col-sm-3" * ngIf = "fuelShow === false" style = "padding:0" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "deviceBarChart" style = "display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label = "bar graph" role = "img" > < / canvas >
< / div >
< / div >
< div class = "col-lg-3 col-sm-3" style = "padding:0;" >
< div style = "margin-left: 5px ;
margin-right: 5px;
background: white;
box-shadow: 3px 1px 5px 0px rgb(178 176 174);
height: 230px;
">
<!-- padding - top: 17px;
padding-bottom: 17px; -->
< div class = "row" style = " box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;" >
< div class = "col-12" style = "padding: 0;" >
< div >
< p style = "font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;" > {{'Alerts' |
translate}}< / p >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-4" style = "padding: 12px;text-align: center;" * ngFor = "let noti of notificationArray" >
< span style = "font-size: 20px;font-weight: 700;color: #cb0000" > {{noti.count}}< / span > < br >
< lable style = "font-size: 18px;font-weight: 400;color:blueviolet" > {{noti.name}}< / lable >
< / div >
< / div >
< / div >
<!-- <div style="margin - left: 5px; margin - right: 5px; background: white; box - shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
< canvas id = "utilisationChart" style = "display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label = "linegraph" role = "img" > < / canvas >
< / div > -->
< / div >
< div class = "col-lg-3 col-sm-3" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "deviceExpense" style = "display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label = "linegraph" role = "img" > < / canvas >
< / div >
< / div >
< div class = "col-lg-3 col-sm-3" style = "padding:0;;height: 230px" >
< div class = "row" style = "text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "col-lg-12 col-sm-12" style = "padding: 0%;" >
< div style = "padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;" >
< p style = "font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;" > Reminders< / p >
< md-select style = "position: absolute;top: 0%;right: 0%;padding-top: 3px;margin-left: 10px;color: white;" [ ( ngModel ) ] = " reminderVal " ( change ) = " getreminderevent ( $ event ) " ngDefaultControl >
< md-option * ngFor = "let reminder of reminderType" [ value ] = " reminder . value " >
{{reminder.viewValue}}
< / md-option >
< / md-select >
< / div >
< / div >
< / div >
< div class = "row" style = "padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;" >
< div class = "col-lg-12 col-sm-12" style = "padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; " >
< div style = "height: 175px; overflow: auto" >
< ul style = "padding-left: 20px;" >
< li * ngFor = "let reminder of notifArr" style = "font-size: 13px;margin-bottom: 2px;font-weight: 500;color: #cb0000;" > {{reminder}}< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" style = "margin-left: 6px; margin-right: 6px; margin-top: 5px;" >
< div class = "col-sm-12 col-lg-12 col-md-6" style = "padding: 0;" >
< div class = "row" no-padding style = "margin: 0;" >
< div class = "col-sm-10 col-lg-10 col-md-6" style = "padding:0" >
<!-- <i *ngIf="(superAdmin === true)||(isOrganisation === true)" class="fas fa - video" (click)="demoVideos()" mdTooltip="{{'Tutorial Video' | translate}}" style="box - shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; font - size: 24px;margin - left: 12px;"></i> -->
<!-- <div title="Demo Videos" style="display: initial;color: #5b7065;" (click)="demoVideos()"><i class="fas fa - video"></i></div> -->
< input type = "search" style = "width: 225px;float: right;border-radius: 0px;line-height: 1.3;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class = "form-control" id = "myInput" name = "myInput" type = "text" [ ( ngModel ) ] = " myInput " ( ngModelChange ) = " searchFilter ( $ event , ' id ' ) " placeholder = "{{'Device Search' | translate}}" / >
< / div >
< div class = "col-sm-2 col-lg-2 col-md-6" style = "padding-right: 0;padding-left: 0;" >
< button [ disabled ] = " firstcall " md-raised-button ( click ) = " next ( ) " style = "float: right;background: #004445; color: white;font-size: 14px;width:50%;border-radius:0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174)" > {{'Next' | translate}} >>> < / button >
< button [ disabled ] = " lastcall " md-raised-button ( click ) = " pre ( ) " style = "float:right;background: #2C7873; color: white;font-size: 14px;width:50%;border-radius:0px;" > < < < {{'Previous' | translate}} < / button >
< / div >
< / div >
< / div >
< / div >
< div class = "row" style = "margin-left: 1px; margin-right: 1px;" >
< div class = "col-sm-12 col-lg-12" style = "padding: 0; font-size: 12px; color: black;margin-right: 10px;" >
< div style = "overflow-x: auto;overflow-y: auto;margin-left: 5px; margin-right: 5px;background: white; box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" >
< table id = "myTable1" class = "table table-striped table-hover" >
< thead style = "background: #426E86; color: white;" >
< tr >
< th style = "width: 50px;" > {{'Icon' | translate}}< / th >
< th style = "width: 100px;" title = "Registration number" > {{'Reg. Num.' | translate}}< / th >
< th style = "width: 50px;" > {{'Group' | translate}}< / th >
< th style = "width: 50px;" > {{"Today's ODO" | translate}}< / th >
< th style = "width: 50px;" > {{'Total ODO' | translate}}< / th >
< th style = "width: 500px; text-align: center;" title = "Last location" > {{'Location' | translate}}< / th >
< th style = "width: 100px;" title = "Last updated on" > {{'Last update' | translate}}< / th >
< th style = "width: 100px;" > {{'Trip status' | translate}}< / th >
< th style = "width: 110px;" > {{'Status' | translate}}< / th >
< th * ngIf = "((custtype == true)||(superAdmin == true))" style = "width: 100px;" > {{'User' | translate}}< / th >
< th style = "width: 50px;" > {{'Satellites' | translate}}< / th >
< th style = "width: 50px;" title = "Last Speed" > {{'Speed' | translate}}< / th >
< th * ngIf = "(ext_volt === true)||(ext_volt === undefined)" style = "width: 50px;" title = "Ext. Volt (V)" > {{'Voltage' | translate}}< / th >
< th style = "width: 50px;" title = "Temperature" > {{'Temp' | translate}}< / th >
< th style = "width: 50px;" title = "{{fuelvariable}}" > Fuel< / th >
<!-- <th *ngIf="(gps_column === true)||(gps_column === undefined)" style="width: 50px;">{{'GPS' | translate}}</th> -->
< th * ngIf = "(ac_column === true)||(ac_column === undefined)" style = "width: 50px;" > {{'AC' | translate}}< / th >
< th * ngIf = "(power_column === true)||(power_column === undefined)" style = "width: 50px;" > {{'POWER' | translate}}< / th >
<!-- <th *ngIf="(gsm_column === true)||(gsm_column === undefined)" style="width: 50px;" title="GSM Signal">{{'GSM' | translate}}</th> -->
< th * ngIf = "(ignition_column === true)||(ignition_column === undefined)" style = "width: 50px;" title = "IGNITION" > {{'IGN' | translate}}< / th >
< / tr >
< / thead >
< tbody style = "cursor: pointer;" >
< tr * ngFor = "let device of deviceData | orderBy: key : reverse | filter:myInput ;let i = index" >
2023-01-07 17:09:46 +00:00
< td >
2022-04-20 11:15:19 +05:30
< div * ngIf = "iconCheck(device.status,device.iconType)" >
< img * ngIf = "device.iconType === 'jcb'" width = '30px' style = "margin-left: 10px;" src = {{devIcon}} >
< img * ngIf = "device.iconType != 'jcb'" width = '20px' style = "margin-left: 10px;" src = {{devIcon}} >
< / div >
< / td >
< td style = "padding-left: 0px;padding-right: 0px;padding-top: 0px;" >
< i * ngIf = "((device.Shared != undefined)&&(device.Shared.length != 0))" class = "material-icons" style = "font-size: 17px; color: #426e86; float: right; box-shadow: 1px 1px 1px; border-radius: 50px;" ( click ) = " showSharedDevice ( device ) " title = "shared device" > supervised_user_circle < / i >
< div style = "padding-top: 10px;" >
< p style = "margin-bottom: 0px;" > {{device.Device_Name}}< / p >
< / div >
< / td >
<!-- <td style="cursor:pointer" >{{device.sim_number}}</td> -->
< td > {{device.vehicleGroup?device.vehicleGroup.name:''}}< / td >
< td >
< div style = "cursor: pointer;" >
< img * ngIf = "device.roadShow === true" style = "width: 20px;cursor: pointer;margin-left: 4px;" src = '{{roadicon}}' ( click ) = totalOdo ( device ) md-tooltip = "Click to get today odo" >
< div * ngIf = "device.roadShow === false" >
< span > {{device.currentODO}}< / span >
< / div >
< / div >
< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.total_odo
? (device.total_odo | number: '1.2-2' ): 0}}< / td >
2023-01-07 17:09:46 +00:00
< td style = "width:200px" >
2022-04-20 11:15:19 +05:30
< div style = "cursor: pointer;" >
<!-- title="update Address" (click)="updateAddress(device)" -->
<!-- <img style="width: 20px;" src='../../assets/image/addressICON.png' (click)=getAddress(device) md - tooltip="Click to get device's last location"> -->
2023-01-07 17:09:46 +00:00
< div style = "text-align: center;" >
< span style = "text-align: center;" md-tooltip = "Device's last location" * ngIf = "device.locationAddress" > {{device.locationAddress}}< / span >
< span style = "text-align: start;" * ngIf = "!device.locationAddress" >
< img style = "width: 20px;" src = '../../assets/image/addressICON.png' ( click ) = getAddress ( device , true )
2022-04-20 11:15:19 +05:30
md-tooltip="Click to get device's last location">
< / span >
< i * ngIf = "(device.pen)" style = "cursor: pointer;color:gray" class = "fas fa-pen" title = "update Address" ( click ) = " updateAddress ( device ) " > < / i >
< i * ngIf = "(device.pen)" class = "fas fa-language" ( click ) = " translateAddressToHindi ( device ) " > < / i >
< / div >
< / div >
< / td >
< td style = "width:200px" ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.last_ping_on|date:'medium'}}< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.currentTripStatus||'NA'}}< / td >
< td style = "padding-left: 0px;padding-right: 0px;width:220px" ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " >
< span >
{{device.status}}
< / span >
< span * ngIf = "device.power=='0'" style = "color: red;" > [Power Disconnected]< / span >
< / td >
< td class = "name" * ngIf = "((custtype == true)||(superAdmin == true))" ( click ) = " vewdevLogin ( device . user . _id ) " > {{device.user?(device.user.first_name + " "+ device.user.last_name):""}}< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.satellites?device.satellites:"NA"}}< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " title = "Last Speed" > {{device.last_speed?device.last_speed:0}}< / td >
< td * ngIf = "(ext_volt === true)||(ext_volt === undefined)" ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.battery?device.battery:0}}< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " > {{device.temp?gettemp(device.temp):'0'}}< / td >
< td ( click ) = " vewdev ( device . Device_ID , device . Device_Name , device . type_of_device , device . expiration_date , device . last_speed , device . status ) " title = "{{fuelvariable}}" > {{getfuel(device,i)}}< / td >
<!-- <td *ngIf="(gps_column === true)||(gps_column === undefined)">
< div * ngIf = "gpsStatus(device.gpsTracking) " md-tooltip = {{gStatus}} >
< img style = "width: 20px;" src = {{gpsImg}} >
< / div >
< / td > -->
< td * ngIf = "(ac_column === true)||(ac_column === undefined)" >
< div * ngIf = "gpsACStatus(device.ac)" md-tooltip = {{aStatus}} >
<!-- <img style="width: 22px" src='../../assets/image/acimgGreen.png'> -->
< img style = "width: 20px;" src = {{ACImg}} >
< / div >
< / td >
< td * ngIf = "(power_column === true)||(power_column === undefined)" >
< div * ngIf = "testtPower(device.power)" md-tooltip = {{pStatus}} >
< img style = "width: 20px;" src = {{pwrURL}} >
< / div >
< / td >
<!-- <td *ngIf="(gsm_column === true)||(gsm_column === undefined)">
< div * ngIf = "testSignal(device.gsmSignal,device)" md-tooltip = {{gsmStatus}} >
< img style = "width: 20px;" src = {{gsmURL}} >
< / div >
< / td > -->
< td * ngIf = "(ignition_column === true)||(ignition_column === undefined)" >
< div * ngIf = "test(device.last_ACC,device.last_ACC_on)" md-tooltip = {{textStatus}} >
< img style = "width: 20px;" src = {{imgurl}} >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / div >
< div >
< / div >
<!-- "Device_Name Device_ID Shared status total_odo vehicleGroup type_of_device last_speed status_updated_at currentODO last_ACC_on gsmSignal power ac gpsTracking satellites temp last_location last_ping_on currentTripStatus last_ACC" -->
<!-- <div class="row" style="margin - left: 1px; margin - right: 1px;margin - bottom: 15px;">
< div class = "col-lg-4 col-sm-4" style = "padding:0" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "deviceBarChart" style = "display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label = "bar graph" role = "img" > < / canvas >
< / div >
< / div >
< div class = "col-lg-3 col-sm-3" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "utilisationChart" style = "display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label = "linegraph" role = "img" > < / canvas >
< / div >
< / div >
< div class = "col-lg-3 col-sm-3" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "deviceExpense" style = "display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label = "linegraph" role = "img" > < / canvas >
< / div >
< / div >
< div class = "col-lg-2 col-sm-2" style = "padding:0;;height: 230px" >
< div class = "row" style = "text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "col-lg-12 col-sm-12" style = "padding: 0%;" >
< div style = "display:inline-flex;padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;" >
< p style = "margin-bottom: 0;margin-left: 10px; margin-top: 3px;" > Reminders< / p >
< md-select style = "padding-top: 0;margin-left: 10px;color: white;" [ ( ngModel ) ] = " reminderVal " ( change ) = " getreminderevent ( $ event ) " ngDefaultControl >
< md-option * ngFor = "let reminder of reminderType" [ value ] = " reminder . value " >
{{reminder.viewValue}}
< / md-option >
< / md-select >
< / div >
< / div >
< / div >
< div class = "row" style = "padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;" >
< div class = "col-lg-12 col-sm-12" style = "padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; " >
< div style = "height: 175px; overflow: auto" >
< ul style = "padding-left: 20px;" >
< li * ngFor = "let reminder of notifArr" style = "font-size: 11px;margin-bottom: 2px;font-weight: 500;color: #cb0000;" > {{reminder}}< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div > -->
<!-- <div class="row" style="margin - left: 1px; margin - right: 1px;margin - bottom: 15px;height: auto;">
< div class = "col-lg-4 col-sm-4" style = "padding:0" >
< div style = "margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = " box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 800;color:#9a9a9a;margin-bottom: 0;" > ADDED VEHICLES< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-4 col-md-4" * ngFor = "let count of totalCount" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . key = = ' Today ' ) , ' weekStyle ' : ( count . key = = ' Week ' ) , ' monthStyle ' : ( count . key = = ' Month ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;font-weight: 700;color: #777777;" > {{count.key}}< / p >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-sm-4" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< div class = "row" style = "box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;" >
< div class = "col-12" style = "text-align: center;padding-right: 0;" >
< p style = "font-weight: 800;color:#9a9a9a;;margin-bottom: 0;" > EXPIRED VEHICLES< / p >
< / div >
< / div >
< div class = "row" style = "text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;" >
< div class = "col-sm-12 col-lg-4 col-md-4" * ngFor = "let count of totalExpiredCount" >
< p style = "font-size: 50px;font-weight: 700;" [ ngClass ] = " { ' todayStyle ' : ( count . key = = ' Today ' ) , ' weekStyle ' : ( count . key = = ' Week ' ) , ' monthStyle ' : ( count . key = = ' Month ' ) } " > {{count.value}}< / p >
< p style = "font-size: 20px;font-weight: 700;color: #777777;" > {{count.key}}< / p >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-sm-4" style = "padding:0;" >
< div style = "margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);" >
< canvas id = "utilisationChart" style = "display: block; width: 650px; height: 241px;padding: 10px 0px 20px" aria-label = "linegraph" role = "img" > < / canvas >
< / div >
< / div >
< / div > -->
