2025-01-15 18:26:54 +05:30
< div class = "topDiv" style = "background: #efecec" >
< div class = "row" style = "height: 70px" no-padding >
2022-04-20 11:15:19 +05:30
< div class = "col-sm-12 col-md-12" >
2025-01-15 18:26:54 +05:30
< app-all-menus > < / app-all-menus >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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"
/>
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
2022-04-20 11:15:19 +05:30
<!-- <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 > -->
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< / 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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);">
2022-04-20 11:15:19 +05:30
< 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 > -->
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< span >
2025-01-15 18:26:54 +05:30
< span * ngIf = "langSymbol === false" > {{ valueSymbol }}< / span >
< / span >
< / div >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / 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 > -->
2025-01-15 18:26:54 +05:30
< / 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< / 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< 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 >
2022-04-20 11:15:19 +05:30
< / div >
< / div >
2025-01-15 18:26:54 +05:30
< / 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
"
>
< td class = "l264" >
< 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
class="l270"
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 class = "l815" >
{{ device.vehicleGroup ? device.vehicleGroup.name : "" }}
< / td >
< td class = "l818" >
< 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
class="l832"
(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 >
< td style = "width: 200px" class = "l848" >
< 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"> -->
2022-04-20 11:15:19 +05:30
2025-01-15 18:26:54 +05:30
< 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)"
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
class="l886"
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
class="l901"
(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
class="l918"
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 939"
*ngIf="custtype == true || superAdmin == true"
(click)="vewdevLogin(device.user._id)"
>
{{
device.user
? device.user.first_name + " " + device.user.last_name
: ""
}}
< / td >
< td
class="l950"
(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
class="l964"
(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
class="l979"
*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
class="l997"
(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
class="l1011"
(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)">
2022-04-20 11:15:19 +05:30
< div * ngIf = "gpsStatus(device.gpsTracking) " md-tooltip = {{gStatus}} >
< img style = "width: 20px;" src = {{gpsImg}} >
< / div >
< / td > -->
2025-01-15 18:26:54 +05:30
< td
class="l033"
*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
class="l039"
*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)">
2022-04-20 11:15:19 +05:30
< div * ngIf = "testSignal(device.gsmSignal,device)" md-tooltip = {{gsmStatus}} >
< img style = "width: 20px;" src = {{gsmURL}} >
< / div >
< / td > -->
2025-01-15 18:26:54 +05:30
< td
class="l052"
*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 >
2022-04-20 11:15:19 +05:30
< / div >
2025-01-15 18:26:54 +05:30
< / 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" -->
2022-04-20 11:15:19 +05:30
2025-01-15 18:26:54 +05:30
<!-- <div class="row" style="margin - left: 1px; margin - right: 1px;margin - bottom: 15px;">
2022-04-20 11:15:19 +05:30
< 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 > -->
2025-01-15 18:26:54 +05:30
<!-- <div class="row" style="margin - left: 1px; margin - right: 1px;margin - bottom: 15px;height: auto;">
2022-04-20 11:15:19 +05:30
< 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 >
2025-01-15 18:26:54 +05:30
< / div > -->
< / div >
