1159 lines
40 KiB
HTML
1159 lines
40 KiB
HTML
<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
|
|
"
|
|
>
|
|
<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"> -->
|
|
|
|
<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)">
|
|
<div *ngIf="gpsStatus(device.gpsTracking) " md-tooltip={{gStatus}}>
|
|
<img style="width: 20px;" src={{gpsImg}}>
|
|
</div>
|
|
</td> -->
|
|
<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)">
|
|
<div *ngIf="testSignal(device.gsmSignal,device)" md-tooltip={{gsmStatus}}>
|
|
<img style="width: 20px;" src={{gsmURL}}>
|
|
</div>
|
|
</td> -->
|
|
<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>
|
|
</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> -->
|
|
</div>
|