@aggdirect/coolmap 1.0.4 → 1.0.5

package/fesm2020/aggdirect-coolmap.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, EventEmitter, Output, Input, Inject, NgModule } from '@angular/core';
-import { Subject, takeUntil, startWith, map } from 'rxjs';
+import { Subject, takeUntil, startWith, map, fromEvent, distinctUntilChanged, debounceTime } from 'rxjs';
 import * as i1 from 'coolmap-services';
 import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum } from 'coolmap-services';
 import * as i2 from '@angular/common';
@@ -17,6 +17,7 @@ import * as i3$1 from '@angular/forms';
 import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i8$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -890,6 +891,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
+class AddRouteComponent {
+    constructor(coolMapService, utils, dialog) {
+        this.coolMapService = coolMapService;
+        this.utils = utils;
+        this.dialog = dialog;
+        this.changeNav = new EventEmitter();
+        this.updateRouteList = new EventEmitter();
+        this.pickupOptions = [];
+        this.deliveryOptions = [];
+        this.requestParmsForRouteDetails = { pickup_lat_lng: '', delivery_lat_lng: '' };
+        this.customersList = [];
+        this.unitsList = [];
+        this.materialsList = [];
+        this.preventSave = false;
+        this.preventInitialSave = false;
+        this.destroyer$ = new Subject();
+        this.enablePopUp = false;
+        this.prevantPopupClose = false;
+        this.enableForm = false;
+        this.fetchCustomersList();
+        this.fetchUnitsList();
+        this.fetchMaterialsList();
+        this.formInit();
+        this.utils.getrouteDetailsUtility.subscribe(res => {
+            if (res) {
+                if (res['event'] !== 'click' && !this.prevantPopupClose) {
+                    this.enablePopUp = res['event'];
+                }
+                else if (this.enablePopUp && !this.prevantPopupClose) {
+                    this.prevantPopupClose = true;
+                }
+                if (res['event'] !== 'click' && !res['event'] && this.prevantPopupClose) {
+                    this.popupDetails = this.utils.getdictValue('route-detailsv2');
+                }
+                else {
+                    this.popupDetails = res['route'];
+                }
+                this.popupDetails['created_at'] = this.utils.getDateFormat(new Date(this.popupDetails['created_at']), '/');
+            }
+        });
+    }
+    filterCustomerList() {
+        this.customersList$ = this.addRouteForm.controls['customer_name'].valueChanges.pipe(startWith(''), map(value => this._filter(value || '')));
+    }
+    _filter(value) {
+        const filterValue = value.toLowerCase();
+        return this.customersList.filter((option) => option['customer_name'].toLowerCase().includes(filterValue));
+    }
+    ngOnChanges(changes) {
+        if (changes['routeData'] && !changes['routeData']['currentValue'])
+            this.inIt(null);
+    }
+    openDialog() {
+        const dialogRef = this.dialog.open(DialogComponent, {
+            data: { body: 'Are you sure you want to delete this route?' },
+        });
+        dialogRef.afterClosed().subscribe(res => { if (res) {
+            this.deleteRoute();
+        } });
+    }
+    editEvent() {
+        this.prevantPopupClose = false;
+        this.enableForm = true;
+        this.enablePopUp = false;
+        this.popupDetails['prevent'] = false;
+        this.utils.removeMapEntity.next(this.popupDetails);
+        this.inIt(this.popupDetails);
+    }
+    inIt(changes) {
+        if (changes) {
+            if (!changes['prevent']) {
+                this.preventSave = false;
+                this.formControlValue();
+                this.patchFormValue(changes);
+                this.checkAndFetchRouteInformation(true);
+            }
+        }
+        if (!changes) {
+            this.enableForm = true;
+            this.preventSave = true;
+            this.patchFormValue();
+            this.checkAndFetchRouteInformation();
+        }
+    }
+    ngOnInit() {
+        this.formControlValue();
+    }
+    ngAfterViewInit() {
+        fromEvent(this.filterPickup.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+            this.utils.fetchAutoCompleteLocations(this.filterPickup.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                this.pickupOptions = res.features;
+            });
+        });
+        fromEvent(this.filterDelivery.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+            this.utils.fetchAutoCompleteLocations(this.filterDelivery.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                this.deliveryOptions = res.features;
+            });
+        });
+    }
+    formControlValue() {
+        this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (this.addRouteForm.value.pickup_location && res !== this.addRouteForm.value.pickup_location) {
+                this.addRouteForm.patchValue({
+                    pickup_lat_lng: '',
+                });
+                this.addRouteForm.controls['pickup_lat_lng'].markAsTouched();
+            }
+        });
+        this.addRouteForm.controls['delivery_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (this.addRouteForm.value.delivery_location && res !== this.addRouteForm.value.delivery_location) {
+                this.addRouteForm.patchValue({
+                    delivery_lat_lng: '',
+                });
+                this.addRouteForm.controls['delivery_lat_lng'].markAsTouched();
+            }
+        });
+    }
+    formInit() {
+        this.addRouteForm = new FormGroup({
+            route_name: new FormControl('', [Validators.required]),
+            customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
+            materials_id: new FormControl('', [Validators.required]),
+            unit_id: new FormControl('', [Validators.required]),
+            path: new FormControl('', [Validators.required]),
+            pickup_location: new FormControl('', [Validators.required]),
+            pickup_lat_lng: new FormControl('', [Validators.required]),
+            delivery_location: new FormControl('', [Validators.required]),
+            delivery_lat_lng: new FormControl('', [Validators.required]),
+            estimated_distance: new FormControl('', [Validators.required]),
+            estimated_time: new FormControl('', [Validators.required]),
+            note: new FormControl('', [Validators.maxLength(2048)]),
+        });
+    }
+    patchFormValue(data) {
+        this.addRouteForm.reset();
+        this.addRouteForm.patchValue(data);
+        this.routeId = data?.route_id;
+        this.routeDetails = data ? { pickup_location: data.pickup_location, delivery_location: data.delivery_location } : null;
+        this.addRouteForm.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+            if (res) {
+                if (this.preventInitialSave)
+                    this.preventInitialSave = false;
+            }
+        });
+        this.filterCustomerList();
+    }
+    fetchCustomersList() {
+        this.utils.getData('coolmap/company/list/view').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.customersList = res.data;
+                this.filterCustomerList();
+                this.addRouteForm.controls['customer_name'].enable();
+            }
+        });
+    }
+    async fetchUnitsList() {
+        await this.utils.getData('coolmap/unit/list/view').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.unitsList = res.data;
+            }
+        });
+    }
+    fetchMaterialsList() {
+        this.utils.getData('coolmap/material/list/view').pipe(takeUntil(this.destroyer$)).subscribe(((res) => {
+            res.data.sort((a, b) => a.material.localeCompare(b.material));
+            this.materialsList = res.data;
+        }));
+    }
+    selectedLongLat(type, event) {
+        if (type === 'pickup') {
+            this.addRouteForm.patchValue({
+                pickup_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+            });
+            this.coolMapService.clearBoundWithCordinates();
+        }
+        else if (type === 'delivery') {
+            this.addRouteForm.patchValue({
+                delivery_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+            });
+        }
+        this.checkAndFetchRouteInformation();
+    }
+    checkAndFetchRouteInformation(isinitial) {
+        if (this.addRouteForm.value?.delivery_lat_lng?.length > 0 && this.addRouteForm.value?.pickup_lat_lng?.length > 0) {
+            const param = {
+                delivery_lat_lng: this.addRouteForm.value.delivery_lat_lng,
+                pickup_lat_lng: this.addRouteForm.value.pickup_lat_lng
+            };
+            this.utils.postdata('coolmap/calculate/routes/estimation', param).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                if (res && res['path']) {
+                    this.addRouteForm.patchValue({
+                        estimated_distance: res.dist, estimated_time: res.time, path: res.path
+                    });
+                    let path = res['path'].split(';');
+                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
+                    res['path'] = path;
+                    const element = {
+                        type: 'FeatureCollection',
+                        features: [{ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: res['path'] } }]
+                    };
+                    this.coolMapService.removeRouteAndMarker(1).then(() => {
+                        const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
+                        const materialDetails = this.materialsList.find((x) => x.material_id === this.addRouteForm.value.materials_id);
+                        this.coolMapService.loadMapProperty(element, 1, unit?.type, {
+                            pickup_location: this.addRouteForm.get('pickup_location')?.value,
+                            delivery_location: this.addRouteForm.get('delivery_location')?.value,
+                            route_name: this.addRouteForm.get('route_name')?.value,
+                            material: materialDetails?.material, unit: unit?.type
+                        }).then((res) => { this.preventSave = true; });
+                    });
+                }
+                else {
+                    this.coolMapService.removeRouteAndMarker(1);
+                    this.utils.openSnackBar(res['status'], 'error');
+                }
+                if (this.routeId && isinitial)
+                    this.preventInitialSave = true;
+            });
+        }
+        else {
+            this.coolMapService.removeRouteAndMarker(1);
+        }
+    }
+    formateLatLong(latlong) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
+    saveRoute() {
+        if (this.addRouteForm.valid) {
+            this.preventSave = false;
+            const data = this.addRouteForm.value;
+            const url = this.routeId ? this.utils.postdata('coolmap/update/routes', data) : this.utils.postdata('coolmap/add/routes', data);
+            if (this.routeId)
+                data['id'] = this.routeId;
+            url.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                if (res.success) {
+                    this.updateRouteList.emit(true);
+                    this.utils.openSnackBar(res.message, 'success');
+                    this.preventInitialSave = true;
+                    this.preventSave = true;
+                    if (!this.routeId)
+                        this.changeNav.next('Addroute');
+                }
+                else {
+                    this.utils.openSnackBar(res.message, 'error');
+                    this.preventSave = true;
+                }
+            }, (err) => { if (err) {
+                this.preventSave = true;
+            } });
+        }
+        else {
+            this.addRouteForm.markAllAsTouched();
+        }
+    }
+    deleteRoute() {
+        this.preventSave = false;
+        this.utils.postdata('coolmap/delete/routes', { uuid: this.routeId }).subscribe(res => {
+            if (res['data']['success']) {
+                this.utils.openSnackBar(res['data']['message'], 'success');
+                this.updateRouteList.emit(true);
+                this.changeNav.next('Addroute');
+                this.preventInitialSave = true;
+                this.preventSave = true;
+            }
+            else {
+                this.utils.openSnackBar('Somthing went wrong', 'error');
+                this.preventSave = true;
+            }
+        }, (err) => { this.preventSave = true; });
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+AddRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\r\n      </div>\r\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\r\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\r\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\r\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\r\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\r\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\r\n\r\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\r\n    </div>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\r\n      </div>\r\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\r\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\r\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\r\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\r\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\r\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\r\n\r\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\r\n    </div>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }]; }, propDecorators: { filterPickup: [{
+                type: ViewChild,
+                args: ['filterPickup']
+            }], filterDelivery: [{
+                type: ViewChild,
+                args: ['filterDelivery']
+            }], changeNav: [{
+                type: Output
+            }], updateRouteList: [{
+                type: Output
+            }], routeData: [{
+                type: Input
+            }] } });
+
 class CoolmapModule {
 }
 CoolmapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -906,7 +1199,8 @@ CoolmapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         JobRouteListComponent,
         JobcodeStatusComponent,
         JobcodeOverviewComponent,
-        DialogComponent], imports: [CommonModule,
+        DialogComponent,
+        AddRouteComponent], imports: [CommonModule,
         MatSnackBarModule,
         MatSidenavModule,
         DragDropModule,
@@ -939,7 +1233,8 @@ CoolmapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         JobRouteListComponent,
         JobcodeStatusComponent,
         JobcodeOverviewComponent,
-        DialogComponent] });
+        DialogComponent,
+        AddRouteComponent] });
 CoolmapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, imports: [CommonModule,
         MatSnackBarModule,
         MatSidenavModule,
@@ -978,7 +1273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         JobRouteListComponent,
                         JobcodeStatusComponent,
                         JobcodeOverviewComponent,
-                        DialogComponent
+                        DialogComponent,
+                        AddRouteComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1017,10 +1313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         JobRouteListComponent,
                         JobcodeStatusComponent,
                         JobcodeOverviewComponent,
-                        DialogComponent
+                        DialogComponent,
+                        AddRouteComponent
                     ],
                     entryComponents: [
-                        DialogComponent
+                        DialogComponent,
+                        JobCodeComponent,
+                        AddRouteComponent
                     ],
                     providers: []
                 }]
@@ -1034,5 +1333,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddRouteNavComponent, CoolmapComponent, CoolmapModule, DialogComponent, JobCodeComponent, JobCodeListCardComponent, JobCodeNavComponent, JobRouteListComponent, JobcodeOverviewComponent, JobcodeStatusComponent, MapComponent, NavComponent, RouteJobCodeListComponent, SmsCardDetailsOverviewComponent, ViewRouteListCardComponent };
+export { AddRouteComponent, AddRouteNavComponent, CoolmapComponent, CoolmapModule, DialogComponent, JobCodeComponent, JobCodeListCardComponent, JobCodeNavComponent, JobRouteListComponent, JobcodeOverviewComponent, JobcodeStatusComponent, MapComponent, NavComponent, RouteJobCodeListComponent, SmsCardDetailsOverviewComponent, ViewRouteListCardComponent };
 //# sourceMappingURL=aggdirect-coolmap.mjs.map