latest updates @APR 20, 2022
This commit is contained in:
pritesh
parent
90b15f5e00
commit
a0bdbc7c55
1657 changed files with 301942 additions and 0 deletions
238
src/app/route-set/route-set.component.html
Normal file
238
src/app/route-set/route-set.component.html
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<app-all-menus></app-all-menus>
|
||||
<div class="topDiv">
|
||||
<div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12">
|
||||
<h4>{{'Create route' | translate}}</h4>
|
||||
<div id="toast">
|
||||
<div id="desc">{{data_descip}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12">
|
||||
<div id="toast">
|
||||
<div id="desc">{{data_descip}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding:0px">
|
||||
<div class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
|
||||
<div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
|
||||
<p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Source' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
|
||||
<input id="txtSource" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Source Address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
|
||||
<p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Destination' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
|
||||
<input id="txtDestination" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Destination Address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;">
|
||||
<div class="col-6" style="padding: 0;">
|
||||
<p style="font-size: 12px">{{'Add adress' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<i class="fas fa-plus" style="float: right;" (click)="addField()"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;" *ngFor="let inputField of fieldArr ; let i = index">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
|
||||
<i class="fas fa-trash" (click)="deleteAddressField(i)"></i>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
|
||||
<input id="{{inputField.aid}}" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Address" (change)="getClickEvent(i)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
|
||||
<p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Route Name' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
|
||||
<input type="text" style="height: 28px;" class="form-control" name="routename" type="text" [(ngModel)]="rName" placeholder="{{'Route Name' | translate}}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
|
||||
<p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">Vehicle :</p>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
|
||||
<div style="width: auto;">
|
||||
<select id="dbselect" multiple="multiple">
|
||||
<option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
|
||||
<p style="margin-bottom: 0;font-size: 12px;">{{'Speed Alert' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">
|
||||
<md-checkbox [(ngModel)]="speed_alert" style="float:left;margin-top: 4px;"></md-checkbox>
|
||||
<input [disabled] = "speed_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="speedAlert" placeholder="00" />
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;">
|
||||
<p>Km/hr</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-bottom: 10px;">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
|
||||
<p style="margin-bottom: 0;font-size: 12px;">{{'Total Distance' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">
|
||||
<p id=total></p>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;">
|
||||
<p>Kms</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0;margin-top: 20px;">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
|
||||
<button style="background-color: red; color: white; float: right;" md-raised-button (click)="getRoute()">{{'Show route' | translate}}</button>
|
||||
<button style="background-color: #0e6cfb; color: white; float: right;margin-right: 10px;" md-raised-button (click)="saveRoute()">{{'Create' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
|
||||
<div id="mapp" style="width: 100%; height: 85vh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<app-all-menus></app-all-menus>
|
||||
|
||||
|
||||
|
||||
<div class="small">
|
||||
<button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
|
||||
<i class="material-icons">list</i>
|
||||
</button>
|
||||
<md-menu #menu="mdMenu">
|
||||
|
||||
<a href="#">
|
||||
<h6>DASHBOARD
|
||||
<md-icon style="float:right">dashboard</md-icon>
|
||||
</h6>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="#">
|
||||
<h6>RULES
|
||||
<md-icon style="float:right">dock</md-icon>
|
||||
</h6>
|
||||
</a>
|
||||
|
||||
|
||||
</md-menu>
|
||||
</div>
|
||||
|
||||
<div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
|
||||
overflow-x: hidden;">
|
||||
<div id="toast">
|
||||
<div id="desc">{{data_descip}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left; width: 99%; padding-top: 6%;">
|
||||
<b>
|
||||
<h4 style="text-align:center;padding-top:1%">{{'Add Geo Fence' | translate}}</h4>
|
||||
</b>
|
||||
<table class="scroll" id="myTable" class="table table-striped ">
|
||||
<tbody>
|
||||
<tr style="width:100%">
|
||||
<td>
|
||||
<md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
|
||||
<md-option *ngFor="let grp of grpName" [value]="grp">
|
||||
{{grp.name}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
</td>
|
||||
<td>
|
||||
<md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
|
||||
<md-option *ngFor="let geoT of geoType" [value]="geoT">
|
||||
{{geoT}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
</td>
|
||||
<td style="width:30%">
|
||||
<md-form-field class="example-full-width width" style="width:100%;float:left">
|
||||
<input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/>
|
||||
<md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error>
|
||||
</md-form-field>
|
||||
</td>
|
||||
<td style="width:15%">
|
||||
<p style="padding-top: 18%;">{{'Get Alert on' | translate}} :</p>
|
||||
</td>
|
||||
<td style="width:15%;padding-top: 19px;">
|
||||
<md-checkbox [(ngModel)]=" enter" style="float:left;padding-top: 8%;">{{'Entering' | translate}}</md-checkbox>
|
||||
</td>
|
||||
<td style="width:20%;padding-top: 19px;">
|
||||
<md-checkbox style="float:left;padding-top: 8%;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
|
||||
</td>
|
||||
<td style="width:20%;padding-top: 19px;">
|
||||
<button style="width: 60%;cursor:pointer;margin-top: 4%;" class="btn btn-success" (click)="creategeo()">{{'Create' | translate}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style=float:left>{{'Select Your Geo Fence Region' | translate}} :</p>
|
||||
<br>
|
||||
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
|
||||
<div id="map" style="padding: 0px;width: 100%;display: flex;height: 57vh;"></div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<app-all-menus></app-all-menus>
|
||||
<div style="padding-top: 6%;">
|
||||
<div class="row" style="padding: 50px 10px 10px;">
|
||||
|
||||
<div id="toast"><div id="desc">{{data_descip}}</div></div>
|
||||
<div class="col-md-2">
|
||||
<a>{{'Source' | translate}} :</a>
|
||||
<md-form-field>
|
||||
<input type="text" mdInput name="text" id="txtSource" >
|
||||
</md-form-field>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a>{{'Destination' | translate}} :</a>
|
||||
<md-form-field >
|
||||
<input type="text" mdInput name="text" id="txtDestination">
|
||||
</md-form-field>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a>{{'Routes name' | translate}} :</a>
|
||||
<md-form-field >
|
||||
<input mdInput type="text" name="text" [(ngModel)]="rName">
|
||||
</md-form-field>
|
||||
</div>
|
||||
<div class="col-md-6" style="margin-top: 13px;">
|
||||
<button md-raised-button style="background-color:#ff2525;color: white;;border:#fdfdfd;width:125px" class="btn btn-primary w3-button/" (click)="getRoute()">{{'Get route' | translate}}</button>
|
||||
|
||||
<button md-raised-button style="background-color: #3f51b5;color: white;border: white;width:125px" class="btn btn-primary w3-button/" (click)="saveRoute()">{{'Save' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-left: 10px;">{{'Total Distance' | translate}}: <span id="total"></span></p>
|
||||
<div id="mapp" style="padding: 0px;width: 100%;display: flex;height: 68vh;"></div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
867
src/app/route-set/route-set.component.scss
Normal file
867
src/app/route-set/route-set.component.scss
Normal file
|
|
@ -0,0 +1,867 @@
|
|||
// ul, li {
|
||||
// list-style: none;
|
||||
// float: left;
|
||||
// line-height: 15vh;
|
||||
// }
|
||||
|
||||
// .route{
|
||||
// h2{
|
||||
// text-align: center;
|
||||
// background: #efefef;
|
||||
// color: #6d6d6d;
|
||||
// padding: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* Absolute Center Spinner */
|
||||
// .loading {
|
||||
// position: fixed;
|
||||
// z-index: 999;
|
||||
// height: 2em;
|
||||
// width: 2em;
|
||||
// overflow: show;
|
||||
// margin: auto;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
// /* Transparent Overlay */
|
||||
// .loading:before {
|
||||
// content: '';
|
||||
// display: block;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background-color: rgba(0,0,0,0.3);
|
||||
// }
|
||||
|
||||
// /* :not(:required) hides these rules from IE9 and below */
|
||||
// .loading:not(:required) {
|
||||
// /* hide "loading..." text */
|
||||
// font: 0/0 a;
|
||||
// color: transparent;
|
||||
// text-shadow: none;
|
||||
// background-color: transparent;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// .loading:not(:required):after {
|
||||
// content: '';
|
||||
// display: block;
|
||||
// font-size: 10px;
|
||||
// width: 1em;
|
||||
// height: 1em;
|
||||
// margin-top: -0.5em;
|
||||
// -webkit-animation: spinner 1500ms infinite linear;
|
||||
// -moz-animation: spinner 1500ms infinite linear;
|
||||
// -ms-animation: spinner 1500ms infinite linear;
|
||||
// -o-animation: spinner 1500ms infinite linear;
|
||||
// animation: spinner 1500ms infinite linear;
|
||||
// border-radius: 0.5em;
|
||||
// -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
|
||||
// box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
|
||||
// }
|
||||
|
||||
// /* Animation */
|
||||
|
||||
// @-webkit-keyframes spinner {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(0deg);
|
||||
// -moz-transform: rotate(0deg);
|
||||
// -ms-transform: rotate(0deg);
|
||||
// -o-transform: rotate(0deg);
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(360deg);
|
||||
// -moz-transform: rotate(360deg);
|
||||
// -ms-transform: rotate(360deg);
|
||||
// -o-transform: rotate(360deg);
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
// @-moz-keyframes spinner {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(0deg);
|
||||
// -moz-transform: rotate(0deg);
|
||||
// -ms-transform: rotate(0deg);
|
||||
// -o-transform: rotate(0deg);
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(360deg);
|
||||
// -moz-transform: rotate(360deg);
|
||||
// -ms-transform: rotate(360deg);
|
||||
// -o-transform: rotate(360deg);
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
// @-o-keyframes spinner {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(0deg);
|
||||
// -moz-transform: rotate(0deg);
|
||||
// -ms-transform: rotate(0deg);
|
||||
// -o-transform: rotate(0deg);
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(360deg);
|
||||
// -moz-transform: rotate(360deg);
|
||||
// -ms-transform: rotate(360deg);
|
||||
// -o-transform: rotate(360deg);
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
// @keyframes spinner {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(0deg);
|
||||
// -moz-transform: rotate(0deg);
|
||||
// -ms-transform: rotate(0deg);
|
||||
// -o-transform: rotate(0deg);
|
||||
// transform: rotate(0deg);
|
||||
// }
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(360deg);
|
||||
// -moz-transform: rotate(360deg);
|
||||
// -ms-transform: rotate(360deg);
|
||||
// -o-transform: rotate(360deg);
|
||||
// transform: rotate(360deg);
|
||||
// }
|
||||
// }
|
||||
// ::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// .upper{
|
||||
// margin-top: -70px;
|
||||
// width: 100%;
|
||||
// height: 15%;
|
||||
// /* margin-left: -2px;*/
|
||||
// position: fixed;
|
||||
// background-color: white;
|
||||
// top: 0;
|
||||
// z-index: 1
|
||||
// }
|
||||
// .up{
|
||||
// color: gray;
|
||||
// /* Add a font */
|
||||
// font-family: "Courier New", Courier, monospace;
|
||||
// /* Set the font-size to 25 pixels */
|
||||
// font-size: 25px;
|
||||
|
||||
// }
|
||||
// .middle {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// .dropdown {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
// .dropdown-content {
|
||||
// display: none;
|
||||
// position: absolute;
|
||||
// background-color: #f9f9f9;
|
||||
// min-width: 160px;
|
||||
// box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
// z-index: 1;
|
||||
// margin-left: -220px;
|
||||
// margin-top: -20px;
|
||||
|
||||
// }
|
||||
|
||||
// .dropdown:hover .dropdown-content {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// .desc {
|
||||
// padding: 15px;
|
||||
// text-align: center;
|
||||
// }
|
||||
// #insert{
|
||||
// margin-left:8px;
|
||||
// margin-top:-15px;
|
||||
// text-shadow: 20px;
|
||||
// }
|
||||
// #insert2{
|
||||
// margin-left:8px;
|
||||
// margin-top:-15px;
|
||||
// text-shadow: 20px;
|
||||
// }
|
||||
// .example-container {
|
||||
// width: 500px;
|
||||
// height: 300px;
|
||||
// border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
// }
|
||||
|
||||
// .example-sidenav-content {
|
||||
// display: flex;
|
||||
// height: 100%;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// .example-sidenav {
|
||||
// padding: 20px;
|
||||
// }
|
||||
// .vertical-menu {
|
||||
// width: 250px;
|
||||
// padding-left: 10px;
|
||||
// }
|
||||
|
||||
// .vertical-menu a {
|
||||
// background-color: #eee;
|
||||
// color: black;
|
||||
// display: block;
|
||||
// padding: 12px;
|
||||
// text-decoration: none;
|
||||
|
||||
// }
|
||||
|
||||
// .vertical-menu a:hover {
|
||||
// background-color: #ccc;
|
||||
// }
|
||||
|
||||
// .vertical-menu a.active {
|
||||
|
||||
// background: rgba(0, 0, 0, 0.8);
|
||||
// color: white;
|
||||
// }
|
||||
// #c2 {
|
||||
|
||||
|
||||
// }
|
||||
// #c1 {
|
||||
// float:left;
|
||||
|
||||
// }
|
||||
// .close-thik:after {
|
||||
// content: '✖'; /* UTF-8 symbol */
|
||||
// position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
|
||||
// }
|
||||
// [data-tooltip] {
|
||||
// position: relative;
|
||||
// z-index: 2;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// /* Hide the tooltip content by default */
|
||||
// [data-tooltip]:before,
|
||||
// // [data-tooltip]:after {
|
||||
// // visibility: hidden;
|
||||
// // -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
// // filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
// // opacity: 0;
|
||||
// // pointer-events: none;
|
||||
// // }
|
||||
|
||||
// /* Position tooltip above the element */
|
||||
// [data-tooltip]:before {
|
||||
// position: absolute;
|
||||
// bottom: 110%;
|
||||
// left: 50%;
|
||||
// margin-bottom: -5px;
|
||||
// margin-left: -40px;
|
||||
// padding: 7px;
|
||||
// width: 100px;
|
||||
// -webkit-border-radius: 3px;
|
||||
// -moz-border-radius: 3px;
|
||||
// border-radius: 3px;
|
||||
// background-color: #000;
|
||||
// background-color: hsla(0, 0%, 20%, 0.9);
|
||||
// color: #fff;
|
||||
// content: attr(data-tooltip);
|
||||
// text-align: center;
|
||||
// font-size: 14px;
|
||||
// line-height: 1.2;
|
||||
// }
|
||||
|
||||
// /* Triangle hack to make tooltip look like a speech bubble */
|
||||
// [data-tooltip]:after {
|
||||
// position: absolute;
|
||||
// bottom: 150%;
|
||||
// left: 50%;
|
||||
// margin-left: -5px;
|
||||
// width: 0;
|
||||
// border-top: 5px solid #000;
|
||||
// border-top: 5px solid hsla(0, 0%, 20%, 0.9);
|
||||
// border-right: 5px solid transparent;
|
||||
// border-left: 5px solid transparent;
|
||||
// content: " ";
|
||||
// font-size: 0;
|
||||
// line-height: 0;
|
||||
// }
|
||||
|
||||
// /* Show tooltip content on hover */
|
||||
// [data-tooltip]:hover:before,
|
||||
// // [data-tooltip]:hover:after {
|
||||
// // visibility: visible;
|
||||
// // -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
// // filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
// // opacity: 1;
|
||||
// // }
|
||||
// button3 {
|
||||
// background-color: Transparent;
|
||||
// background-repeat:no-repeat;
|
||||
// border: none;
|
||||
// cursor:pointer;
|
||||
// overflow: hidden;
|
||||
// outline:none;
|
||||
// }
|
||||
// .icon-bar {
|
||||
// width: 17%;
|
||||
// background-color: #18262F;
|
||||
// margin-top: -9px;
|
||||
// height: 100%;
|
||||
// position: fixed;
|
||||
// display: inline-block;
|
||||
// margin-left: -16px;
|
||||
// }
|
||||
// @media screen and (max-width: 1000px){
|
||||
// .off{
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// .icon-bar2 {
|
||||
|
||||
// width: 297px;
|
||||
// background-color: white;
|
||||
// margin-top: -7px;
|
||||
// height:86vh;
|
||||
// position: fixed;
|
||||
|
||||
// }
|
||||
// .icon-bar a {
|
||||
// display: block;
|
||||
// text-align: center;
|
||||
// padding: 16px;
|
||||
// transition: all 0.3s ease;
|
||||
// color: white;
|
||||
// font-size: 14px;
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// .icon-bar a:hover {
|
||||
// background-color: #000;
|
||||
// }
|
||||
|
||||
// .active {
|
||||
// background-color: #4CAF50 !important;
|
||||
// }
|
||||
// @media screen and (max-width: 900px) {
|
||||
// .icon-bar{
|
||||
// display: none;
|
||||
|
||||
// }
|
||||
// .sch{
|
||||
// display: none;
|
||||
// }
|
||||
// .first{
|
||||
// width:1%!important;
|
||||
// }
|
||||
// .second{
|
||||
// margin-left: 8px!important;
|
||||
// }
|
||||
// .small{
|
||||
// display: block!important;
|
||||
// }
|
||||
// .image{
|
||||
// display: none;
|
||||
// }
|
||||
// .schlar{
|
||||
// display: block!important;
|
||||
// }
|
||||
// }
|
||||
// .small{
|
||||
// display: none;
|
||||
// }
|
||||
// .pointer{
|
||||
// cursor:pointer !important;
|
||||
// font-size: 11px
|
||||
// }
|
||||
// /* Side Navi */
|
||||
// #mySidenav a {
|
||||
// margin-top: -9px;
|
||||
// position: absolute;
|
||||
// left: -80px;
|
||||
// transition: 0.3s;
|
||||
// width: 100px;
|
||||
// text-decoration: none;
|
||||
// font-size: 28px;
|
||||
// color: white;
|
||||
// border-radius: 0 5px 5px 0;
|
||||
// }
|
||||
|
||||
// #mySidenav a:hover {
|
||||
// left: 0;
|
||||
// }
|
||||
|
||||
// #about {
|
||||
// top: 20px;
|
||||
// background-color: #ffffff;
|
||||
// opacity: .4;
|
||||
// }
|
||||
|
||||
// #blog {
|
||||
// top: 80px;
|
||||
// background-color: #18262F;
|
||||
// }
|
||||
|
||||
// #projects {
|
||||
// top: 140px;
|
||||
// background-color: #f44336;
|
||||
// }
|
||||
// #d:hover {
|
||||
// color: rgb(14, 102, 18);
|
||||
|
||||
|
||||
// }
|
||||
// #ac{
|
||||
// color: rgb(38, 38, 90)
|
||||
// }
|
||||
// #contact {
|
||||
// top: 200px;
|
||||
// background-color: #555
|
||||
// }
|
||||
// #active{
|
||||
// text-decoration-line: underline;
|
||||
// text-decoration-color: rgb(66, 26, 245);
|
||||
// }
|
||||
// .overlay {
|
||||
// height: 100%;
|
||||
// width: 0;
|
||||
// position: fixed;
|
||||
// z-index: 1;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// background-color: rgb(0,0,0);
|
||||
// background-color: rgba(0,0,0, 0.9);
|
||||
// overflow-x: hidden;
|
||||
// transition: 0.5s;
|
||||
// }
|
||||
|
||||
// .overlay-content {
|
||||
// position: relative;
|
||||
// top: 25%;
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
// margin-top: 30px;
|
||||
// }
|
||||
|
||||
// .overlay a {
|
||||
// padding: 8px;
|
||||
// text-decoration: none;
|
||||
// font-size: 36px;
|
||||
// color: #818181;
|
||||
// display: block;
|
||||
// transition: 0.3s;
|
||||
// }
|
||||
|
||||
// .overlay a:hover, .overlay a:focus {
|
||||
// color: #f1f1f1;
|
||||
// }
|
||||
|
||||
// .overlay .closebtn {
|
||||
// position: absolute;
|
||||
// top: 20px;
|
||||
// right: 45px;
|
||||
// font-size: 60px;
|
||||
// }
|
||||
|
||||
// @media screen and (max-height: 450px) {
|
||||
// .overlay a {font-size: 20px}
|
||||
// .overlay .closebtn {
|
||||
// font-size: 40px;
|
||||
// top: 15px;
|
||||
// right: 35px;
|
||||
// }
|
||||
// }
|
||||
// agm-map {
|
||||
// height: 300px;
|
||||
// }
|
||||
|
||||
// /* Toast Msg */
|
||||
|
||||
|
||||
// #toast {
|
||||
// visibility: hidden;
|
||||
// max-width: 50px;
|
||||
// height: 50px;
|
||||
// /*margin-left: -125px;*/
|
||||
// margin: auto;
|
||||
// background-color: #333;
|
||||
// color: #fff;
|
||||
// text-align: center;
|
||||
// border-radius: 2px;
|
||||
|
||||
// position: fixed;
|
||||
// z-index: 1;
|
||||
// left: 60%;right:0;
|
||||
// bottom: 80%;
|
||||
// font-size: 13px;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
// #toast #img{
|
||||
// width: 50px;
|
||||
// height: 50px;
|
||||
|
||||
// float: left;
|
||||
|
||||
// padding-top: 16px;
|
||||
// padding-bottom: 16px;
|
||||
|
||||
// box-sizing: border-box;
|
||||
|
||||
|
||||
// background-color: #111;
|
||||
// color: #fff;
|
||||
// }
|
||||
// #toast #desc{
|
||||
|
||||
|
||||
// color: #fff;
|
||||
|
||||
// padding: 16px;
|
||||
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
// #toast.show {
|
||||
// visibility: visible;
|
||||
// -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
|
||||
// animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
|
||||
// }
|
||||
// #myInput {
|
||||
// border-radius: 15px;
|
||||
// /* border: 2px solid #18262F; */
|
||||
// padding: 7px;
|
||||
// width: 116px;
|
||||
// height: 17px;
|
||||
// font-size: 9px;
|
||||
// outline: none;
|
||||
// float: right;
|
||||
// margin-top: 2%;
|
||||
// }
|
||||
|
||||
// @-webkit-keyframes expand {
|
||||
// from {min-width: 50px}
|
||||
// to {min-width: 350px}
|
||||
// }
|
||||
|
||||
// @keyframes expand {
|
||||
// from {min-width: 50px}
|
||||
// to {min-width: 350px}
|
||||
// }
|
||||
// @-webkit-keyframes stay {
|
||||
// from {min-width: 350px}
|
||||
// to {min-width: 350px}
|
||||
// }
|
||||
|
||||
// @keyframes stay {
|
||||
// from {min-width: 350px}
|
||||
// to {min-width: 350px}
|
||||
// }
|
||||
// @-webkit-keyframes shrink {
|
||||
// from {min-width: 350px;}
|
||||
// to {min-width: 50px;}
|
||||
// }
|
||||
|
||||
// @keyframes shrink {
|
||||
// from {min-width: 350px;}
|
||||
// to {min-width: 50px;}
|
||||
// }
|
||||
|
||||
// @-webkit-keyframes fadeout {
|
||||
// from {bottom: 30px; opacity: 1;}
|
||||
// to {bottom: 60px; opacity: 0;}
|
||||
// }
|
||||
|
||||
// @keyframes fadeout {
|
||||
// from {bottom: 30px; opacity: 1;}
|
||||
// to {bottom: 60px; opacity: 0;}
|
||||
// }
|
||||
// .mat-slide-toggle-thumb-container {
|
||||
// z-index: auto !important;
|
||||
// }
|
||||
|
||||
// .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
|
||||
// z-index:auto!important;
|
||||
|
||||
// }
|
||||
// .mat-menu-panel.mat-menu-before.mat-menu-below{
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
// .mat-menu-panel.my-full-width-menu {
|
||||
// max-width: none;
|
||||
// width: 100vw;
|
||||
// margin-left: -8px;
|
||||
// margin-top: 24px;
|
||||
// }
|
||||
// .menu-overflow-hidden {
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
|
||||
// /* Notification */
|
||||
// #nav{list-style:none;margin: 0px;padding: 0px;}
|
||||
// #nav li {
|
||||
// float: right;
|
||||
// margin-right: 20px;
|
||||
// font-family: Arial;
|
||||
// font-size: 14px;
|
||||
// font-weight:bold;
|
||||
// }
|
||||
// #nav li a{color:#333333;text-decoration:none}
|
||||
// #nav li a:hover{color:#1788c0;text-decoration:none}
|
||||
|
||||
|
||||
// #notification_li
|
||||
// {
|
||||
// position:relative
|
||||
// }
|
||||
// #notificationContainer
|
||||
// {
|
||||
// background-color: #fff;
|
||||
// border: 1px solid rgba(100, 100, 100, .4);
|
||||
// -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
|
||||
// overflow: visible;
|
||||
// position: absolute;
|
||||
// top: 30px;
|
||||
// margin-left: -170px;
|
||||
// width: 400px;
|
||||
// z-index: -1;
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// #notificationContainer:before {
|
||||
// content: '';
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// color: transparent;
|
||||
// border: 10px solid black;
|
||||
// border-color: transparent transparent white;
|
||||
// margin-top: -20px;
|
||||
// margin-left: 188px;
|
||||
// }
|
||||
// #notificationTitle
|
||||
// {
|
||||
// font-weight: bold;
|
||||
// padding: 8px;
|
||||
// font-size: 13px;
|
||||
// background-color: #ffffff;
|
||||
// position: fixed;
|
||||
// z-index: 1000;
|
||||
// width: 384px;
|
||||
// border-bottom: 1px solid #dddddd;
|
||||
|
||||
// }
|
||||
// #notificationsBody
|
||||
// {
|
||||
// padding: 33px 0px 0px 0px !important;
|
||||
// min-height:300px;
|
||||
// }
|
||||
|
||||
|
||||
// .addStyle{
|
||||
|
||||
// // border-top: 1px solid #d6d6d6;
|
||||
// border-bottom: 1px solid #d6d6d6;
|
||||
// padding-top: 7px;
|
||||
// padding-bottom: 8px;
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// #notificationFooter
|
||||
// {
|
||||
// /*
|
||||
// font-weight: bold;
|
||||
// padding: 8px;
|
||||
// font-size: 13px;
|
||||
// background-color: #ffffff;
|
||||
// position: fixed;
|
||||
// z-index: 1000;
|
||||
// width: 384px;
|
||||
// border-bottom: 1px solid #dddddd; */
|
||||
|
||||
// background-color: #e9eaed;
|
||||
// text-align: center;
|
||||
// font-weight: bold;
|
||||
// z-index: 1000;
|
||||
// padding: 8px;
|
||||
// font-size: 13px;
|
||||
// border-top: 1px solid #dddddd;
|
||||
// }
|
||||
|
||||
|
||||
// .cardStyle{
|
||||
// display: inline-block;
|
||||
// padding:5px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// #notification_count
|
||||
// {
|
||||
// padding: 3px 7px 3px 7px;
|
||||
// background: #cc0000;
|
||||
// color: #ffffff;
|
||||
// font-weight: bold;
|
||||
// margin-left: 77px;
|
||||
// border-radius: 9px;
|
||||
// -moz-border-radius: 9px;
|
||||
// -webkit-border-radius: 9px;
|
||||
// position: absolute;
|
||||
// margin-top: -11px;
|
||||
// font-size: 11px;
|
||||
// }
|
||||
// .route_detail {
|
||||
// float: left;
|
||||
// position: relative;
|
||||
// height: 234px;
|
||||
// background-color: #f7f8f9;
|
||||
// padding: 81px 19px 16px 0;
|
||||
// border-radius: 15px;
|
||||
// box-shadow: 5px -2px 1px #a5a5a5;
|
||||
// margin-top: 30px;
|
||||
// li{
|
||||
// list-style: disc;
|
||||
// float: none;
|
||||
// line-height:6vh;
|
||||
// b{
|
||||
// color: green;
|
||||
// }
|
||||
// }
|
||||
// ul{
|
||||
// line-height: 0%;
|
||||
// }
|
||||
// /* padding: 10px; */
|
||||
|
||||
// .buttonStyle{
|
||||
// position: absolute;
|
||||
// /* left: 380px; */
|
||||
// /* bottom: 270px; */
|
||||
// right: 30px;
|
||||
// top: 15px;
|
||||
|
||||
// height: 36px;
|
||||
// border-radius: 16px;
|
||||
// md-icon-button{
|
||||
// float: left;
|
||||
// padding: 5px 13px 0px 17px;
|
||||
// color: white;
|
||||
// border-right: 1px solid;
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// /deep/ .mat-menu-panel.test{
|
||||
|
||||
// background-color: #b7b7b7;
|
||||
// width: 160px;
|
||||
// text-align: left;
|
||||
// color: #fff;
|
||||
|
||||
// }
|
||||
|
||||
// /deep/ .mat-menu-panel.test_1{
|
||||
|
||||
// background-color: #b7b7b7;
|
||||
// width: 160px;
|
||||
// text-align: left;
|
||||
// color: #fff;
|
||||
// margin-top:48px;
|
||||
// }
|
||||
|
||||
|
||||
.topDiv{
|
||||
padding-top: 59px;
|
||||
background: whitesmoke;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#toast {
|
||||
visibility: hidden;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
/*margin-left: -125px;*/
|
||||
margin: auto;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 60%;right:0;
|
||||
bottom: 80%;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#toast #img{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
float: left;
|
||||
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
#toast #desc{
|
||||
|
||||
|
||||
color: #fff;
|
||||
|
||||
padding: 16px;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#toast.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
|
||||
}
|
||||
|
||||
div[title="Stop drawing"] {
|
||||
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div[title="Draw a circle"] {
|
||||
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div[title="Draw a rectangle"] {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
25
src/app/route-set/route-set.component.spec.ts
Normal file
25
src/app/route-set/route-set.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RouteSetComponent } from './route-set.component';
|
||||
|
||||
describe('RouteSetComponent', () => {
|
||||
let component: RouteSetComponent;
|
||||
let fixture: ComponentFixture<RouteSetComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RouteSetComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RouteSetComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
577
src/app/route-set/route-set.component.ts
Normal file
577
src/app/route-set/route-set.component.ts
Normal file
|
|
@ -0,0 +1,577 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ContactService } from '../contact.service';
|
||||
import { PoiListComponent } from '../poi-list/poi-list.component';
|
||||
import { MdDialog } from '@angular/material';
|
||||
|
||||
declare var google: any;
|
||||
declare var $:any;
|
||||
@Component({
|
||||
selector: 'app-route-set',
|
||||
templateUrl: './route-set.component.html',
|
||||
styleUrls: ['./route-set.component.scss']
|
||||
})
|
||||
export class RouteSetComponent implements OnInit {
|
||||
superAdmin: any;
|
||||
speed_alert:boolean=true;
|
||||
speedAlert:any;
|
||||
destination_route: any;
|
||||
sourceRoute: any;
|
||||
before:any;
|
||||
fieldArr=[];
|
||||
logoutbut:boolean;
|
||||
cust:boolean=false;
|
||||
logo:any;
|
||||
auto:any;
|
||||
myControl:any;
|
||||
text:any;
|
||||
fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
|
||||
showImage:any;
|
||||
groups=[];
|
||||
group_info:any;
|
||||
routeName:any;
|
||||
deviceId:any;
|
||||
device_update:any;
|
||||
dbMap:any;
|
||||
options: any;
|
||||
deviceArr: any=[];
|
||||
count = 0;
|
||||
directionsDisplay: any;
|
||||
ll: { location: any; stopover: boolean; };
|
||||
wapointArray: any[];
|
||||
|
||||
constructor(private router: Router,private contactService: ContactService,public dialog: MdDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadropdown();
|
||||
// var inputId = 'address' + this.count++;
|
||||
// var t = {
|
||||
// aid: inputId
|
||||
// }
|
||||
|
||||
// this.fieldArr.push(t);
|
||||
// var temp = setTimeout(()=>{
|
||||
// this.fieldArr[0]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId))
|
||||
// clearTimeout(temp);
|
||||
// },5000)
|
||||
|
||||
this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
|
||||
this.logo=window.localStorage['logo'];
|
||||
this.text=window.localStorage['text'];
|
||||
window.localStorage['DataUpdate'] = 'True'
|
||||
|
||||
|
||||
this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
|
||||
this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
|
||||
this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
|
||||
this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
|
||||
this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
|
||||
this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
|
||||
|
||||
this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
|
||||
|
||||
if(this.custtype == true){
|
||||
this.cust = true;
|
||||
}
|
||||
|
||||
let foods = [ ];
|
||||
|
||||
if(this.mb.charAt(0)=="n"){
|
||||
this.mb = ' '
|
||||
}
|
||||
if( window.localStorage['Custumer'] == 'ON'){
|
||||
this.logoutbut = false
|
||||
this.dealer = true
|
||||
}
|
||||
else{
|
||||
this.logoutbut = true
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.contactService.getDevice(this.emailid,this.useridd).subscribe(
|
||||
|
||||
data => {
|
||||
var devicesss = data
|
||||
|
||||
this.options = [];
|
||||
|
||||
for(let i=0;i<devicesss.devices.length;i++){
|
||||
|
||||
// if(devicesss.devices[i].type_of_device =="Tracker"){
|
||||
let a ={
|
||||
value : devicesss.devices[i].Device_Name,
|
||||
viewValue:devicesss.devices[i].Device_Name,
|
||||
did:devicesss.devices[i].Device_ID,
|
||||
id:devicesss.devices[i]._id,
|
||||
user:devicesss.devices[i].user,
|
||||
// email: devicesss.devices[i].Email_ID,
|
||||
// deviceType: devicesss.devices[i].type_of_device,
|
||||
}
|
||||
a['selectedValue'] = devicesss.devices[i]._id ;
|
||||
|
||||
this.options.push(a);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
this.loadropdown();
|
||||
|
||||
|
||||
|
||||
// console.log("ignition option",this.options);
|
||||
let that = this;
|
||||
// setTimeout(()=>{
|
||||
// },100)
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.initMap();
|
||||
|
||||
}
|
||||
loadropdown() {
|
||||
var script = document.createElement("script");
|
||||
script.setAttribute("type", "text/javascript");
|
||||
script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
|
||||
setTimeout(() => {
|
||||
$('#dbselect').multipleSelect({
|
||||
width: 200,
|
||||
placeholder: 'Select Vehicle',
|
||||
filter: true,
|
||||
|
||||
})
|
||||
|
||||
|
||||
}, 100);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ===========================
|
||||
sourceAddress:any;
|
||||
autocompleteSource:any;
|
||||
inputDestination:any;
|
||||
autocompleteDestination:any;
|
||||
// directionsDisplay:any;
|
||||
// directionsService:any;
|
||||
source_address:any;
|
||||
destination_address:any;
|
||||
source_add:any;
|
||||
dest_add:any;
|
||||
polyArray=[];
|
||||
finlCoords=[];
|
||||
path=[];
|
||||
curr_position:any;
|
||||
initMap() {
|
||||
var outerThis=this;
|
||||
|
||||
if (navigator.geolocation) {
|
||||
|
||||
if(location.protocol != 'https:'){
|
||||
this.contactService.getlatLong().subscribe(res=>{
|
||||
console.log(res);
|
||||
outerThis.curr_position = {
|
||||
|
||||
lat: res.lat,
|
||||
lng: res.lon
|
||||
|
||||
};
|
||||
|
||||
outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
|
||||
center: {
|
||||
lat: outerThis.curr_position.lat,
|
||||
lng: outerThis.curr_position.lng
|
||||
},
|
||||
zoom: 18
|
||||
});
|
||||
|
||||
var infoWindow = new google.maps.InfoWindow;
|
||||
infoWindow.setPosition(outerThis.curr_position);
|
||||
infoWindow.setContent('Current location');
|
||||
infoWindow.open(outerThis.dbMap);
|
||||
outerThis.dbMap.setCenter(outerThis.curr_position);
|
||||
|
||||
})
|
||||
}
|
||||
else{
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
outerThis.curr_position = {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
}
|
||||
// console.log(outerThis.curr_position);
|
||||
|
||||
outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
|
||||
center: {lat: outerThis.curr_position.lat, lng: outerThis.curr_position.lng},
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
var infoWindow = new google.maps.InfoWindow;
|
||||
infoWindow.setPosition(outerThis.curr_position);
|
||||
infoWindow.setContent('Current location');
|
||||
infoWindow.open(outerThis.dbMap);
|
||||
outerThis.dbMap.setCenter(outerThis.curr_position);
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
|
||||
this.destination_address = new google.maps.places.Autocomplete(document.getElementById('txtDestination'));
|
||||
|
||||
google.maps.event.addListener(this.destination_address, 'place_changed', function() {
|
||||
console.log("inside place changed function");
|
||||
var latLng = outerThis.destination_address.getPlace().geometry.location;
|
||||
console.log('latLng',latLng);
|
||||
outerThis.ll ={
|
||||
location : new google.maps.LatLng(latLng.lat(),latLng.lng()),
|
||||
stopover:false
|
||||
}
|
||||
// outerThis.waypoints.push(ll);
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
acc_position:any;
|
||||
waypoints:any;
|
||||
getRoute(){
|
||||
this.waypoints =[];
|
||||
var outerThis=this;
|
||||
this.source_address = document.getElementById('txtSource');
|
||||
|
||||
debugger;
|
||||
console.log('this.fieldArr',this.fieldArr.length);
|
||||
if(this.fieldArr.length == 1){
|
||||
|
||||
this.waypoints.push(this.ll);
|
||||
}else{
|
||||
this.waypoints.push(this.ll);
|
||||
for(var k = 0; k<this.fieldArr.length-1 ;k++){
|
||||
|
||||
|
||||
if(this.fieldArr[k].latLng!=undefined){
|
||||
var pp = {
|
||||
location : new google.maps.LatLng(this.fieldArr[k].latLng.lat(),this.fieldArr[k].latLng.lng()),
|
||||
stopover:false
|
||||
}
|
||||
|
||||
outerThis.waypoints.push(pp);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
console.log('outerThis.waypoints',this.waypoints);
|
||||
// var destination_address= document.getElementById('txtDestination');
|
||||
var ds = document.getElementById('txtDestination');
|
||||
if(this.fieldArr.length >0){
|
||||
// this.destination_address = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
|
||||
var ps = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
|
||||
|
||||
}
|
||||
|
||||
this.sourceRoute=this.source_address.value;
|
||||
console.log(this.sourceRoute);
|
||||
this.destination_route = (this.fieldArr.length >0)?ps['value']:ds['value'];
|
||||
console.log(this.sourceRoute,this.destination_route)
|
||||
// this.way_point_value = this.waypoints_address.value;
|
||||
|
||||
// console.log
|
||||
// var current_add_1 = new google.maps.LatLng(outerThis.curr_position.lat, outerThis.curr_position.lng);
|
||||
var mapOptions = {
|
||||
center: {lat: this.curr_position.lat, lng: this.curr_position.lng},
|
||||
zoom: 15,
|
||||
|
||||
};
|
||||
|
||||
|
||||
var map = this.dbMap;
|
||||
if(outerThis.directionsDisplay != undefined) {
|
||||
|
||||
outerThis.directionsDisplay.setMap(null);
|
||||
outerThis.directionsDisplay = null;
|
||||
}
|
||||
var directionsService = new google.maps.DirectionsService;
|
||||
outerThis.directionsDisplay = new google.maps.DirectionsRenderer({
|
||||
draggable: true,
|
||||
map: map,
|
||||
});
|
||||
google.maps.event.addListener(outerThis.directionsDisplay, 'click', function(h) {
|
||||
// console.log(h.latLng.lat(),h.latLng.lng());
|
||||
});
|
||||
|
||||
outerThis.directionsDisplay.addListener('directions_changed', function() {
|
||||
outerThis.computeTotalDistance(outerThis.directionsDisplay.getDirections());
|
||||
});
|
||||
|
||||
this.displayRoute(this.sourceRoute, this.destination_route, directionsService,outerThis.directionsDisplay,map,this.waypoints)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
waypoints_path = [];
|
||||
overview_path_latlng = [];
|
||||
|
||||
// method for total display route
|
||||
|
||||
displayRoute(origin, destination, service, display,map,waypts) {
|
||||
console.log('origin=>',origin);
|
||||
console.log('destination=>',destination);
|
||||
|
||||
var outerThis = this;
|
||||
service.route({
|
||||
origin: origin,
|
||||
destination: destination,
|
||||
waypoints:waypts,
|
||||
travelMode: 'DRIVING',
|
||||
avoidTolls: true
|
||||
}, function(response, status) {
|
||||
if (status === 'OK') {
|
||||
outerThis.path=[];
|
||||
outerThis.overview_path_latlng=[];
|
||||
display.setDirections(response);
|
||||
// console.log(response);
|
||||
// var currentRoute = currentRouteArray.overview_path;
|
||||
var currentRouteArray = response.routes[0].overview_path;
|
||||
// console.log(currentRouteArray);
|
||||
for(var i = 0 ; i<currentRouteArray.length;i++){
|
||||
|
||||
var routePath = {
|
||||
lat:currentRouteArray[i].lat(),
|
||||
lng:currentRouteArray[i].lng()
|
||||
}
|
||||
outerThis.path.push(routePath);
|
||||
}
|
||||
outerThis.overview_path_latlng = outerThis.path;
|
||||
// console.log(outerThis.overview_path_latlng);
|
||||
|
||||
display.addListener('directions_changed', function() {
|
||||
// outerThis.addInfo();
|
||||
console.log("Inside Direction changed");
|
||||
var t = display.getDirections();
|
||||
// console.log(t);
|
||||
|
||||
var overview_path = t.routes[0].overview_path
|
||||
|
||||
// console.log(overview_path);
|
||||
|
||||
// console.log(t.request.waypoints);
|
||||
outerThis.waypoints_path=[];
|
||||
outerThis.overview_path_latlng=[];
|
||||
outerThis.wapointArray=[];
|
||||
|
||||
for(var j = 0 ; j<t.request.waypoints.length;j++){
|
||||
var waypointLatlng = {
|
||||
lat:t.request.waypoints[j].location.lat(),
|
||||
lng:t.request.waypoints[j].location.lng()
|
||||
}
|
||||
outerThis.waypoints_path.push(waypointLatlng);
|
||||
}
|
||||
console.log('outerThis.waypoints_path',outerThis.waypoints_path);
|
||||
|
||||
for(var k = 0 ; k<overview_path.length;k++){
|
||||
var pathLatLng = {
|
||||
lat:overview_path[k].lat(),
|
||||
lng:overview_path[k].lng()
|
||||
}
|
||||
|
||||
outerThis.overview_path_latlng.push(pathLatLng);
|
||||
}
|
||||
|
||||
console.log('outerThis.overview_path_latlng.push(pathLatLng)', outerThis.overview_path_latlng.push(pathLatLng));
|
||||
|
||||
// console.log("pathLatlng",outerThis.overview_path_latlng);
|
||||
|
||||
// console.log("Waypoints" ,outerThis.waypoints_path);
|
||||
});
|
||||
// function for get lat long array ends here
|
||||
|
||||
} else {
|
||||
// console.log('error in display route!!!')
|
||||
alert('Could not display directions due to: ' + status);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
// method for calculate total distance
|
||||
computeTotalDistance(result) {
|
||||
var total = 0;
|
||||
var myroute = result.routes[0];
|
||||
for (var i = 0; i < myroute.legs.length; i++) {
|
||||
total += myroute.legs[i].distance.value;
|
||||
}
|
||||
total = total / 1000;
|
||||
document.getElementById('total').innerHTML = total + ' km';
|
||||
}
|
||||
rName:any;
|
||||
data_descip:any;
|
||||
emmnerr:any;
|
||||
tost1(divid){
|
||||
if(divid == "routeErr"){
|
||||
this.data_descip = "Please select route "
|
||||
launch_toast();
|
||||
}
|
||||
else if(divid == "rnameErr"){
|
||||
this.data_descip = "Please type route name"
|
||||
launch_toast();
|
||||
}
|
||||
function launch_toast() {
|
||||
// console.log(divid);
|
||||
var x = document.getElementById("toast")
|
||||
//console.log(x);
|
||||
x.className = "show";
|
||||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
|
||||
}
|
||||
}
|
||||
|
||||
payloadArray=[];
|
||||
callDis(data){
|
||||
|
||||
this.contactService.addPOICol(data).subscribe(resp=>{
|
||||
// console.log("add poi",resp);
|
||||
|
||||
})
|
||||
}
|
||||
saveRoute(){
|
||||
let that = this;
|
||||
this.payloadArray=[];
|
||||
this.finlCoords=[];
|
||||
this.rName;
|
||||
// console.log(this.rName)
|
||||
this.sourceRoute;this.destination_route;
|
||||
if((this.sourceRoute==undefined)||(this.destination_route==undefined)||(this.sourceRoute==null)||(this.destination_route==null)){
|
||||
// console.log("Please select route !!!");
|
||||
this.tost1("routeErr");
|
||||
|
||||
}
|
||||
else if((this.rName==undefined)||(this.rName==null)){
|
||||
// console.log("Please select route name");
|
||||
this.tost1("rnameErr");
|
||||
}
|
||||
else{
|
||||
this.deviceArr=[];
|
||||
this.deviceArr = $('#dbselect').multipleSelect('getSelects','value');
|
||||
console.log(this.deviceArr);
|
||||
for(var j=0;j<this.overview_path_latlng.length;j++){
|
||||
var lattitude = this.overview_path_latlng[j].lat;
|
||||
var longitude = this.overview_path_latlng[j].lng;
|
||||
this.finlCoords.push([longitude,lattitude])
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.wapointArray=[];
|
||||
// debugger;
|
||||
console.log(this.waypoints);
|
||||
for(var z = 0 ; z<this.waypoints.length;z++){
|
||||
if(this.waypoints[z] != undefined){
|
||||
var lat = this.waypoints[z].location.lat();
|
||||
var long = this.waypoints[z].location.lng();
|
||||
var loc = { location : {
|
||||
lat : lat,
|
||||
lng : long
|
||||
}
|
||||
}
|
||||
this.wapointArray.push(loc);
|
||||
}
|
||||
|
||||
}
|
||||
console.log('this.wapointArraythis.wapointArray',this.wapointArray);
|
||||
|
||||
let routeDetail={
|
||||
"src":this.sourceRoute,
|
||||
"dest":this.destination_route,
|
||||
"name":this.rName,
|
||||
"user":this.useridd,
|
||||
"path":this.finlCoords,
|
||||
"poi":this.payloadArray,
|
||||
"status":"Active"
|
||||
};
|
||||
|
||||
|
||||
if(this.wapointArray.length>0){
|
||||
routeDetail['wayPoints'] = this.wapointArray;
|
||||
}
|
||||
if((this.speed_alert === true)&&(this.speedAlert != undefined)){
|
||||
routeDetail['speed_alert'] = this.speedAlert;
|
||||
}
|
||||
if(this.deviceArr.length != 0){
|
||||
routeDetail['device'] = this.deviceArr;
|
||||
|
||||
}
|
||||
console.log(routeDetail);
|
||||
|
||||
console.log('this is final payload',routeDetail)
|
||||
this.contactService.saveRoute(routeDetail)
|
||||
.subscribe(res => {
|
||||
this.router.navigateByUrl("vehicleRoute");
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
additionalRouteInfo:any;
|
||||
saveInfoObject=[];
|
||||
|
||||
addField(){
|
||||
|
||||
var inputId = 'address' + this.count++;
|
||||
var t = {
|
||||
aid: inputId,
|
||||
address:''
|
||||
}
|
||||
this.fieldArr.push(t);
|
||||
|
||||
var temp = setTimeout(()=>{
|
||||
this.fieldArr[this.fieldArr.length -1]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
|
||||
console.log('this.fieldArr',this.fieldArr);
|
||||
clearTimeout(temp);
|
||||
},2000)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
deleteAddressField(ind){
|
||||
console.log(ind);
|
||||
|
||||
this.fieldArr.splice(ind,1);
|
||||
console.log('this.fielArr',this.fieldArr);
|
||||
this.getRoute();
|
||||
}
|
||||
|
||||
|
||||
getClickEvent(i){
|
||||
var that = this;
|
||||
console.log("inside function");
|
||||
console.log(i);
|
||||
google.maps.event.addListener(this.fieldArr[i].address, 'place_changed', function() {
|
||||
console.log("inside place changed function");
|
||||
var latLng = that.fieldArr[i].address.getPlace().geometry.location;
|
||||
|
||||
that.fieldArr[i]['latLng'] = latLng;
|
||||
console.log(that.fieldArr);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue