@aggdirect/coolmap-services 1.3.2 → 1.3.3

package/fesm2022/aggdirect-coolmap-services.mjs

@@ -140,36 +140,71 @@ class UtilsService {
     getDateFormat(strVal, seprater) {
         seprater = seprater ? seprater : '-';
         const mydate = strVal;
-        return mydate?.getFullYear() + seprater + ((mydate ? mydate.getMonth() : 0) + 1) + seprater + mydate?.getDate();
+        return (mydate?.getFullYear() +
+            seprater +
+            ((mydate ? mydate.getMonth() : 0) + 1) +
+            seprater +
+            mydate?.getDate());
+    }
+    getData(path) {
+        const url = this.http.get(`${this.analyticsRESTURL}${this.config.repository}/${path}`);
+        return url;
+    }
+    postdata(path, data) {
+        return this.http.post(`${this.analyticsRESTURL}${this.config.repository}/${path}`, data);
+    }
+    postDataWithRestUrl(path, data) {
+        return this.http.post(`${this.RESTURLPrefix}${path}`, data);
     }
-    getData(path) { return this.http.get(`${this.analyticsRESTURL}${this.config.repository}/${path}`); }
-    postdata(path, data) { return this.http.post(`${this.analyticsRESTURL}${this.config.repository}/${path}`, data); }
-    postDataWithRestUrl(path, data) { return this.http.post(`${this.RESTURLPrefix}${path}`, data); }
     fetchAutoCompleteLocations(keyword) {
         return this.http.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${keyword}.json?access_token=${this.config.mapboxAccessToken}&country=US`);
     }
     openSnackBar(message, className) {
         this.snackBar.open(message, '', {
-            duration: 5000, verticalPosition: 'top', horizontalPosition: 'center', panelClass: [className ? className : 'default']
+            duration: 5000,
+            verticalPosition: 'top',
+            horizontalPosition: 'center',
+            panelClass: [className ? className : 'default'],
         });
     }
     makeOptions(item) {
         if (item.order_number) {
-            (this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1) ? this.jcodeOptions.push({ job_code: item.order_number, job_id: item.job_id }) : null;
+            this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1
+                ? this.jcodeOptions.push({
+                    job_code: item.order_number,
+                    job_id: item.job_id,
+                })
+                : null;
             if (item.driver_list && item.driver_list?.length > 0) {
                 item.driver_list.forEach((driver) => {
-                    this.driverOption.findIndex(elem => elem === driver['driver_name']) === -1 ? this.driverOption.push(driver['driver_name']) : null;
-                    this.truckingCompanayOption.findIndex(elem => elem === driver['trucking_company']) === -1 ? this.truckingCompanayOption.push(driver['trucking_company']) : null;
+                    this.driverOption.findIndex((elem) => elem === driver['driver_name']) === -1
+                        ? this.driverOption.push(driver['driver_name'])
+                        : null;
+                    this.truckingCompanayOption.findIndex((elem) => elem === driver['trucking_company']) === -1
+                        ? this.truckingCompanayOption.push(driver['trucking_company'])
+                        : null;
                 });
             }
         }
-        ((this.pickupOptions.findIndex((elem) => elem === item.pickup_location)) === -1) ? this.pickupOptions.push(item.pickup_location) : null;
-        ((this.destOptions.findIndex((elem) => elem === item.delivery_location)) === -1) ? this.destOptions.push(item.delivery_location) : null;
-        (this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1) ? this.customerOptions.push(item.customer_name) : null;
-        (this.unitOptions.findIndex((elem) => elem === item.unit) === -1) ? this.unitOptions.push(item.unit) : null;
-        (this.materialOptions.findIndex((elem) => elem === item.material) === -1) ? this.materialOptions.push(item.material) : null;
+        this.pickupOptions.findIndex((elem) => elem === item.pickup_location) === -1
+            ? this.pickupOptions.push(item.pickup_location)
+            : null;
+        this.destOptions.findIndex((elem) => elem === item.delivery_location) === -1
+            ? this.destOptions.push(item.delivery_location)
+            : null;
+        this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1
+            ? this.customerOptions.push(item.customer_name)
+            : null;
+        this.unitOptions.findIndex((elem) => elem === item.unit) === -1
+            ? this.unitOptions.push(item.unit)
+            : null;
+        this.materialOptions.findIndex((elem) => elem === item.material) === -1
+            ? this.materialOptions.push(item.material)
+            : null;
         if (item.route_name)
-            this.routeNameOptions.findIndex(elem => elem === item.route_name) === -1 ? this.routeNameOptions.push(item.route_name) : null;
+            this.routeNameOptions.findIndex((elem) => elem === item.route_name) === -1
+                ? this.routeNameOptions.push(item.route_name)
+                : null;
     }
     filter(value, filters) {
         if (typeof value !== 'string') {
@@ -180,49 +215,65 @@ class UtilsService {
             return [];
         }
         const searchResults = [];
-        this.unitOptions.map(unit => {
+        this.unitOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "unit", "label": unit, "value": unit });
+                searchResults.push({ type: 'unit', label: unit, value: unit });
             }
         });
-        this.customerOptions.map(unit => {
+        this.customerOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "customer", "label": unit, "value": unit });
+                searchResults.push({ type: 'customer', label: unit, value: unit });
             }
         });
-        this.materialOptions.map(unit => {
+        this.materialOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "material", "label": unit, "value": unit });
+                searchResults.push({ type: 'material', label: unit, value: unit });
             }
         });
-        this.pickupOptions.map(unit => {
+        this.pickupOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "pickup location", "label": unit, "value": unit });
+                searchResults.push({
+                    type: 'pickup location',
+                    label: unit,
+                    value: unit,
+                });
             }
         });
-        this.destOptions.map(unit => {
+        this.destOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "destination location", "label": unit, "value": unit });
+                searchResults.push({
+                    type: 'destination location',
+                    label: unit,
+                    value: unit,
+                });
             }
         });
-        this.jcodeOptions.map(unit => {
+        this.jcodeOptions.map((unit) => {
             if (unit.job_code.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "job", "label": unit['job_code'], "value": unit });
+                searchResults.push({
+                    type: 'job',
+                    label: unit['job_code'],
+                    value: unit,
+                });
             }
         });
-        this.driverOption.map(unit => {
+        this.driverOption.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Driver", "label": unit, "value": unit });
+                searchResults.push({ type: 'Driver', label: unit, value: unit });
             }
         });
-        this.truckingCompanayOption.map(unit => {
+        this.truckingCompanayOption.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Trucking Company", "label": unit, "value": unit });
+                searchResults.push({
+                    type: 'Trucking Company',
+                    label: unit,
+                    value: unit,
+                });
             }
         });
-        this.routeNameOptions.map(unit => {
+        this.routeNameOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
-                searchResults.push({ "type": "Route name", "label": unit, "value": unit });
+                searchResults.push({ type: 'Route name', label: unit, value: unit });
             }
         });
         const searchDict = {};
@@ -230,8 +281,9 @@ class UtilsService {
             searchDict[filter['name'] + filter['type']] = filter;
         });
         const furtherFilter = [];
-        searchResults.map(search => {
-            if ((search['label'] + search['type']) in searchDict) { }
+        searchResults.map((search) => {
+            if (search['label'] + search['type'] in searchDict) {
+            }
             else {
                 furtherFilter.push(search);
             }
@@ -239,17 +291,19 @@ class UtilsService {
         return furtherFilter;
     }
     getSearchResults(list, filterval) {
-        return list.filter(element => {
+        return list.filter((element) => {
             const result_list_boolean = [];
             if (filterval.length > 0) {
                 if (filterval[0]['type'] === 'unit') {
-                    result_list_boolean.push(filterval[0]['name'] === element[filterval[0]['type']]);
+                    result_list_boolean.push(filterval[0]['name'] ===
+                        element[filterval[0]['type']]);
                 }
                 if (filterval[0]['type'] === 'customer') {
                     result_list_boolean.push(filterval[0]['name'] === element['customer_name']);
                 }
                 if (filterval[0]['type'] === 'material') {
-                    result_list_boolean.push(filterval[0]['name'] === element[filterval[0]['type']]);
+                    result_list_boolean.push(filterval[0]['name'] ===
+                        element[filterval[0]['type']]);
                 }
                 if (filterval[0]['type'] === 'pickup location') {
                     result_list_boolean.push(filterval[0]['name'] === element['pickup_location']);
@@ -264,12 +318,16 @@ class UtilsService {
                     result_list_boolean.push(filterval[0]['name'] === element['route_name']);
                 }
                 if (filterval[0]['type'] === 'Driver') {
-                    const index = element.driver_list?.findIndex(ele => { return filterval[0]['name'] === ele['driver_name']; });
+                    const index = element.driver_list?.findIndex((ele) => {
+                        return filterval[0]['name'] === ele['driver_name'];
+                    });
                     if (index !== -1)
                         result_list_boolean.push(true);
                 }
                 if (filterval[0]['type'] === 'Trucking Company') {
-                    const index = element.driver_list?.findIndex(ele => { return filterval[0]['name'] === ele['trucking_company']; });
+                    const index = element.driver_list?.findIndex((ele) => {
+                        return filterval[0]['name'] === ele['trucking_company'];
+                    });
                     if (index !== -1)
                         result_list_boolean.push(true);
                 }
@@ -300,7 +358,7 @@ class UtilsService {
         this.dict.delete(key);
     }
     conveySearchIcon(value) {
-        if (value && typeof (value) !== 'object')
+        if (value && typeof value !== 'object')
             return true;
         return false;
     }
@@ -322,11 +380,11 @@ class UtilsService {
     fetchMaterialsList() {
         return new Promise((resolve, reject) => {
             if (!this.materialsList) {
-                this.getData('material/list/view').subscribe(((res) => {
+                this.getData('material/list/view').subscribe((res) => {
                     res.data.sort((a, b) => a.material.localeCompare(b.material));
                     this.materialsList = res.data;
                     resolve(this.materialsList);
-                }));
+                });
             }
             else {
                 resolve(this.materialsList);
@@ -336,7 +394,7 @@ class UtilsService {
     fetchMaterialsListForCustomer() {
         return new Promise((resolve, reject) => {
             if (!this.materialsListForCustomer) {
-                this.getData('material/list/view').subscribe(((res) => {
+                this.getData('material/list/view').subscribe((res) => {
                     let meterialListDetails = [];
                     res.data.map((item) => {
                         if (item.sub.length > 0) {
@@ -353,7 +411,7 @@ class UtilsService {
                     meterialListDetails.sort((a, b) => a.label.localeCompare(b.label));
                     this.materialsListForCustomer = meterialListDetails;
                     resolve(this.materialsListForCustomer);
-                }));
+                });
             }
             else {
                 resolve(this.materialsListForCustomer);
@@ -375,10 +433,10 @@ class UtilsService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UtilsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.MatSnackBar }, { type: CoolmapConfigModel, decorators: [{
@@ -418,7 +476,10 @@ class CoolmapService {
                 container: el,
                 style: this.config.mapboxStyle,
                 center: [-77.036873, 38.907192],
-                zoom: 10, bearing: 0, pitch: 65, interactive: true,
+                zoom: 10,
+                bearing: 0,
+                pitch: 65,
+                interactive: true,
             });
             this.map.once('load', (res) => {
                 resolve(res);
@@ -429,14 +490,18 @@ class CoolmapService {
     loadMapProperty(pinRouteGeojson, index, unit, route, bottom) {
         return new Promise((resolve, reject) => {
             let origin = pinRouteGeojson.features[0].geometry.coordinates[0];
-            const linecolor = (unit === 'Ton') ? '#ff7272' : (unit === 'Load') ? '#a3c52e' : '#ae23d1';
+            const linecolor = unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1';
             let destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
             this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then((res) => {
                 const point = {
-                    'type': 'FeatureCollection',
-                    'features': [
-                        { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Point', 'coordinates': origin } }
-                    ]
+                    type: 'FeatureCollection',
+                    features: [
+                        {
+                            type: 'Feature',
+                            properties: {},
+                            geometry: { type: 'Point', coordinates: origin },
+                        },
+                    ],
                 };
                 const lineDistance = turf.length(pinRouteGeojson.features[0]);
                 const arc = [];
@@ -448,11 +513,17 @@ class CoolmapService {
                 pinRouteGeojson.features[0].geometry.coordinates = arc;
                 const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
                 const marker = new mapboxgl.Marker(document.createElement('div'))
-                    .setLngLat(pinRoute[0]).addTo(this.map).togglePopup();
+                    .setLngLat(pinRoute[0])
+                    .addTo(this.map)
+                    .togglePopup();
                 if (this.map.getSource(`line${index}`)) {
                     this.removeRouteAndMarker(index).then(() => { });
                 }
-                this.map.addSource(`line${index}`, { type: 'geojson', lineMetrics: true, data: pinRouteGeojson });
+                this.map.addSource(`line${index}`, {
+                    type: 'geojson',
+                    lineMetrics: true,
+                    data: pinRouteGeojson,
+                });
                 this.map.addLayer({
                     type: 'line',
                     source: `line${index}`,
@@ -463,18 +534,38 @@ class CoolmapService {
                             'interpolate',
                             ['linear'],
                             ['line-progress'],
-                            0, unit === 'Ton' ? '#d7f7e4' : unit === 'Load' ? '#c9d8f5' : '#f5dcc1',
-                            1, unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1',
-                        ]
+                            0,
+                            unit === 'Ton'
+                                ? '#d7f7e4'
+                                : unit === 'Load'
+                                    ? '#c9d8f5'
+                                    : '#f5dcc1',
+                            1,
+                            unit === 'Ton'
+                                ? '#ff7272'
+                                : unit === 'Load'
+                                    ? '#a3c52e'
+                                    : '#ae23d1',
+                        ],
                     },
-                    layout: { 'line-cap': 'round', 'line-join': 'round' }
+                    layout: { 'line-cap': 'round', 'line-join': 'round' },
                 });
                 const dataSetForMap = {
-                    counter: 0, pinRouteGeojson, steps,
-                    point, pointId: `point${index}`,
-                    marker, pinRoute, lineId: `line${index}`, index,
-                    origin, destination, lineDistance,
-                    linecolor, route, isViewRoute: true
+                    counter: 0,
+                    pinRouteGeojson,
+                    steps,
+                    point,
+                    pointId: `point${index}`,
+                    marker,
+                    pinRoute,
+                    lineId: `line${index}`,
+                    index,
+                    origin,
+                    destination,
+                    lineDistance,
+                    linecolor,
+                    route,
+                    isViewRoute: true,
                 };
                 this.createMarker(dataSetForMap);
                 this.map.on('mouseenter', `line${index}`, (e) => {
@@ -485,9 +576,13 @@ class CoolmapService {
                         pickup: route.pickup_location ? route.pickup_location : '',
                         drop: route.delivery_location ? route.delivery_location : '',
                         routeType: route.project ? 'Project' : 'Route',
-                        title: route.project ? route.project : route.route_name ? route.route_name : '',
+                        title: route.project
+                            ? route.project
+                            : route.route_name
+                                ? route.route_name
+                                : '',
                         material: route.materialLabel ? route.materialLabel : '',
-                        type: route.unit ? route.unit : ''
+                        type: route.unit ? route.unit : '',
                     };
                     this.createPopup(datasetForPopup);
                 });
@@ -508,12 +603,20 @@ class CoolmapService {
         let linecolor;
         let origin = cordinates[0];
         let destination = cordinates[cordinates.length - 1];
-        if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
+        if (origin[0] &&
+            origin[1] &&
+            destination &&
+            destination[0] &&
+            destination[1]) {
             linecolor = this.provideLineColor(route['unit'], routeType);
             if (enablefitbound) {
                 const padding = {
-                    top: this.padding.top + this.customTopForCustomer, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)),
-                    left: this.padding.left, right: this.padding.right
+                    top: this.padding.top + this.customTopForCustomer,
+                    bottom: this.padding.bottom +
+                        (this.windowActualHeightWidth.availHeight -
+                            (window.innerHeight - 65)),
+                    left: this.padding.left,
+                    right: this.padding.right,
                 };
                 this.map.fitBounds([origin, destination], { padding, pitch: 65 }, { fitboundCompleteJob: true });
             }
@@ -521,16 +624,26 @@ class CoolmapService {
                 this.removeRouteAndMarker(index).then(() => { });
             }
             this.map.addSource(`route-source-for-job-code${index}`, {
-                'type': 'geojson',
-                'data': { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'LineString', 'coordinates': cordinates } }
+                type: 'geojson',
+                data: {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: { type: 'LineString', coordinates: cordinates },
+                },
             });
             this.map.addLayer({
-                'id': `route-for-job-code${index}`, 'type': 'line', 'source': `route-source-for-job-code${index}`,
+                id: `route-for-job-code${index}`,
+                type: 'line',
+                source: `route-source-for-job-code${index}`,
                 paint: { 'line-color': linecolor, 'line-width': 2 },
-                layout: { 'line-cap': 'round', 'line-join': 'round' }
+                layout: { 'line-cap': 'round', 'line-join': 'round' },
             });
             const dataSetForMap = {
-                origin, destination, index, linecolor, route
+                origin,
+                destination,
+                index,
+                linecolor,
+                route,
             };
             this.createMarker(dataSetForMap);
             this.map.on('mouseenter', `route-for-job-code${index}`, (e) => {
@@ -546,9 +659,13 @@ class CoolmapService {
                     jobCode: route.project ? route.order_number : null,
                     customer: route.project ? route.customer_name : null,
                     routeType: route.project ? 'Project' : 'Route',
-                    title: route.project ? route.project : route.route_name ? route.route_name : '',
+                    title: route.project
+                        ? route.project
+                        : route.route_name
+                            ? route.route_name
+                            : '',
                     material: route.materialLabel ? route.materialLabel : '',
-                    type: route.unit ? route.unit : ''
+                    type: route.unit ? route.unit : '',
                 };
                 this.createPopup(datasetForPopup);
             });
@@ -561,16 +678,16 @@ class CoolmapService {
         }
     }
     provideLineColor(unitType, type) {
-        let checkType = (type && !['jobrouteList', 'addroute'].includes(type)) ? true : false;
+        let checkType = type && !['jobrouteList', 'addroute'].includes(type) ? true : false;
         let color;
         switch (unitType) {
-            case "Ton":
+            case 'Ton':
                 color = checkType ? '#39c471' : '#ff7272';
                 break;
-            case "Load":
+            case 'Load':
                 color = checkType ? '#326ad3' : '#a3c52e';
                 break;
-            case "Hourly":
+            case 'Hourly':
                 color = checkType ? '#ffad56' : '#ae23d1';
                 break;
         }
@@ -581,19 +698,38 @@ class CoolmapService {
             this.popup.remove();
             this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 2);
         }
-        if (arcDetails.color && this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
+        if (arcDetails.color &&
+            this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
             this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 5);
             this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-opacity', 1);
             const datasetForPopup = {
                 coordinate: arcDetails.coordinate,
-                pickup: arcDetails.layer.props.data.route.pickup_location ? arcDetails.layer.props.data.route.pickup_location : '',
-                drop: arcDetails.layer.props.data.route.delivery_location ? arcDetails.layer.props.data.route.delivery_location : '',
-                jobCode: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.order_number : '',
-                customer: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.customer_name : '',
-                routeType: arcDetails.layer.props.data.route.project ? 'Project' : 'Route',
-                title: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.project : arcDetails.layer.props.data.route.route_name ? arcDetails.layer.props.data.route.route_name : '',
-                material: arcDetails.layer.props.data.route.materialLabel ? arcDetails.layer.props.data.route.materialLabel : '',
-                type: arcDetails.layer.props.data.route.unit ? arcDetails.layer.props.data.route.unit : ''
+                pickup: arcDetails.layer.props.data.route.pickup_location
+                    ? arcDetails.layer.props.data.route.pickup_location
+                    : '',
+                drop: arcDetails.layer.props.data.route.delivery_location
+                    ? arcDetails.layer.props.data.route.delivery_location
+                    : '',
+                jobCode: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.order_number
+                    : '',
+                customer: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.customer_name
+                    : '',
+                routeType: arcDetails.layer.props.data.route.project
+                    ? 'Project'
+                    : 'Route',
+                title: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.project
+                    : arcDetails.layer.props.data.route.route_name
+                        ? arcDetails.layer.props.data.route.route_name
+                        : '',
+                material: arcDetails.layer.props.data.route.materialLabel
+                    ? arcDetails.layer.props.data.route.materialLabel
+                    : '',
+                type: arcDetails.layer.props.data.route.unit
+                    ? arcDetails.layer.props.data.route.unit
+                    : '',
             };
             this.createPopup(datasetForPopup);
         }
@@ -603,17 +739,22 @@ class CoolmapService {
             closeButton: false,
             closeOnClick: false,
             closeOnMove: true,
-            anchor: 'bottom-left'
+            anchor: 'bottom-left',
         });
-        this.popup.setLngLat(datasetForPopup.coordinate)
+        this.popup
+            .setLngLat(datasetForPopup.coordinate)
             .setHTML(`
       <div class="destination">
           <div class="duration">
             <p class="pickprt"><b>Pickup Location:</b> ${datasetForPopup.pickup}</p>
             <p class="dropprt"><b>Drop Location:</b> ${datasetForPopup.drop}</p>
           </div>
-          ${datasetForPopup.jobCode ? '<span><b>Job Code:</b> ' + datasetForPopup.jobCode + '</span>' : ''}
-          ${datasetForPopup.customer ? '<span><b>Customer:</b> ' + datasetForPopup.customer + '</span>' : ''}
+          ${datasetForPopup.jobCode
+            ? '<span><b>Job Code:</b> ' + datasetForPopup.jobCode + '</span>'
+            : ''}
+          ${datasetForPopup.customer
+            ? '<span><b>Customer:</b> ' + datasetForPopup.customer + '</span>'
+            : ''}
           <span><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
           <span><b>Material:</b> ${datasetForPopup.material}</span>
           <span><b>Type:</b> ${datasetForPopup.type}</span>
@@ -622,28 +763,47 @@ class CoolmapService {
             .addTo(this.map);
     }
     hexToRGB(hex) {
-        return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
-            .substring(1).match(/.{2}/g)
-            .map(x => parseInt(x, 16));
+        return hex
+            .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+            .substring(1)
+            .match(/.{2}/g)
+            .map((x) => parseInt(x, 16));
     }
     createMarker(routeDetails) {
-        if (routeDetails.origin[0] && routeDetails.origin[1] && routeDetails.destination[0] && routeDetails.destination[1]) {
+        if (routeDetails.origin[0] &&
+            routeDetails.origin[1] &&
+            routeDetails.destination[0] &&
+            routeDetails.destination[1]) {
             const popup = new mapboxgl.Popup({ closeButton: false }).setHTML('<b>Pickup: </b>' + routeDetails.route?.pickup_location);
-            const popupForDestination = new mapboxgl.Popup({ closeButton: false })
-                .setHTML('<b>Delivery: </b>' + routeDetails.route?.delivery_location);
+            const popupForDestination = new mapboxgl.Popup({
+                closeButton: false,
+            }).setHTML('<b>Delivery: </b>' + routeDetails.route?.delivery_location);
             const el = document.createElement('div');
             el.className = 'marker';
             el.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>P</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
             const originMarker = new mapboxgl.Marker(el)
-                .setPopup(popup).setLngLat(routeDetails.origin).addTo(this.map);
-            originMarker.getElement().addEventListener('mouseenter', () => originMarker.togglePopup());
-            originMarker.getElement().addEventListener('mouseleave', () => originMarker.togglePopup());
+                .setPopup(popup)
+                .setLngLat(routeDetails.origin)
+                .addTo(this.map);
+            originMarker
+                .getElement()
+                .addEventListener('mouseenter', () => originMarker.togglePopup());
+            originMarker
+                .getElement()
+                .addEventListener('mouseleave', () => originMarker.togglePopup());
             const elementForDestination = document.createElement('div');
             elementForDestination.className = 'marker';
             elementForDestination.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>D</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
-            const destinationMarker = new mapboxgl.Marker(elementForDestination).setPopup(popupForDestination).setLngLat(routeDetails.destination).addTo(this.map);
-            destinationMarker.getElement().addEventListener('mouseenter', () => destinationMarker.togglePopup());
-            destinationMarker.getElement().addEventListener('mouseleave', () => destinationMarker.togglePopup());
+            const destinationMarker = new mapboxgl.Marker(elementForDestination)
+                .setPopup(popupForDestination)
+                .setLngLat(routeDetails.destination)
+                .addTo(this.map);
+            destinationMarker
+                .getElement()
+                .addEventListener('mouseenter', () => destinationMarker.togglePopup());
+            destinationMarker
+                .getElement()
+                .addEventListener('mouseleave', () => destinationMarker.togglePopup());
             this.markerOriginList[routeDetails.index] = originMarker;
             this.markerDestinationList[routeDetails.index] = destinationMarker;
             const colorArray = this.hexToRGB(routeDetails.linecolor);
@@ -664,20 +824,37 @@ class CoolmapService {
     }
     async removeRouteAndMarker(index) {
         if (this.map) {
-            this.map.getLayer(`arc-layer${index}`) ? this.map.removeLayer(`arc-layer${index}`) : '';
-            this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : '';
-            this.map.getLayer(`custom_layer${index}`) ? this.map.removeLayer(`custom_layer${index}`) : '';
-            this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : '';
-            this.map.getLayer(`route-for-job-code${index}`) ? this.map.removeLayer(`route-for-job-code${index}`) : '';
-            this.map.getSource(`route-source-for-job-code${index}`) ? this.map.removeSource(`route-source-for-job-code${index}`) : '';
+            this.map.getLayer(`arc-layer${index}`)
+                ? this.map.removeLayer(`arc-layer${index}`)
+                : '';
+            this.map.getLayer(`line${index}`)
+                ? this.map.removeLayer(`line${index}`)
+                : '';
+            this.map.getLayer(`custom_layer${index}`)
+                ? this.map.removeLayer(`custom_layer${index}`)
+                : '';
+            this.map.getSource(`line${index}`)
+                ? this.map.removeSource(`line${index}`)
+                : '';
+            this.map.getLayer(`route-for-job-code${index}`)
+                ? this.map.removeLayer(`route-for-job-code${index}`)
+                : '';
+            this.map.getSource(`route-source-for-job-code${index}`)
+                ? this.map.removeSource(`route-source-for-job-code${index}`)
+                : '';
             this.findMarkerBound(index);
             this.markerOriginList[index] ? this.markerOriginList[index].remove() : '';
-            this.markerDestinationList[index] ? this.markerDestinationList[index].remove() : '';
+            this.markerDestinationList[index]
+                ? this.markerDestinationList[index].remove()
+                : '';
             await true;
         }
     }
     findMarkerBound(index) {
-        const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => (x[0][0].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lng.toFixed(6)) && (x[0][1].toFixed(6) == this.markerOriginList[index]?.getLngLat()?.lat.toFixed(6)));
+        const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => x[0][0].toFixed(6) ==
+            this.markerOriginList[index]?.getLngLat()?.lng.toFixed(6) &&
+            x[0][1].toFixed(6) ==
+                this.markerOriginList[index]?.getLngLat()?.lat.toFixed(6));
         if (indexOfCordinates >= 0) {
             this.originDestinationCordinates.splice(indexOfCordinates, 1);
         }
@@ -687,9 +864,10 @@ class CoolmapService {
             if (this.map.getLayer(`route-for-job-code${ID}`)) {
                 this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
                 const originM = this.markerOriginList[ID].getElement();
-                originM.style.display = ((visibility === 'visible') ? 'block' : visibility);
+                originM.style.display = visibility === 'visible' ? 'block' : visibility;
                 const destinationM = this.markerDestinationList[ID].getElement();
-                destinationM.style.display = ((visibility === 'visible') ? 'block' : visibility);
+                destinationM.style.display =
+                    visibility === 'visible' ? 'block' : visibility;
                 if (visibility === 'none' && showAllFitbound) {
                     this.findMarkerBound(ID);
                     this.extendReBound();
@@ -706,12 +884,19 @@ class CoolmapService {
             if (route) {
                 if (typeof route === 'string') {
                     let path = route.split(';');
-                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                    path.forEach((ele, index) => { if (ele.length === 1)
-                        path.splice(index, 1); });
+                    path = path.map((ele) => {
+                        return (ele = this.formateLatLong(ele));
+                    });
+                    path.forEach((ele, index) => {
+                        if (ele.length === 1)
+                            path.splice(index, 1);
+                    });
                     route = path;
                 }
-                if (route[0][0] && route[0][1] && route[route.length - 1][0] && route[route.length - 1][1]) {
+                if (route[0][0] &&
+                    route[0][1] &&
+                    route[route.length - 1][0] &&
+                    route[route.length - 1][1]) {
                     this.originDestinationCordinates.push(route);
                     route.map((item) => {
                         this.bounds.extend(item);
@@ -719,14 +904,15 @@ class CoolmapService {
                 }
             }
             if (showAllFitbound) {
-                const padding = { top: this.padding.top + this.customTopForCustomer, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
                 setTimeout(() => {
-                    if (showAllFitbound && (Object.keys(this.bounds).length > 0))
-                        this.map.fitBounds(this.bounds, { padding, pitch: 65 }, { fitboundComplete: true });
+                    if (showAllFitbound && Object.keys(this.bounds).length > 0)
+                        this.map.fitBounds(this.bounds, { pitch: 65 }, { fitboundComplete: true });
                 }, 100);
-                this.map.once('moveend', (event) => { if (event.fitboundComplete) {
-                    resolve(true);
-                } });
+                this.map.once('moveend', (event) => {
+                    if (event.fitboundComplete) {
+                        resolve(true);
+                    }
+                });
             }
         });
     }
@@ -738,8 +924,15 @@ class CoolmapService {
                     item.map((route) => {
                         this.bounds.extend(route);
                     });
-                    if (index === (this.originDestinationCordinates.length - 1)) {
-                        const padding = { top: this.padding.top + this.customTopForCustomer, bottom: (this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65))), left: this.padding.left, right: this.padding.right };
+                    if (index === this.originDestinationCordinates.length - 1) {
+                        const padding = {
+                            top: this.padding.top + this.customTopForCustomer,
+                            bottom: this.padding.bottom +
+                                (this.windowActualHeightWidth.availHeight -
+                                    (window.innerHeight - 65)),
+                            left: this.padding.left,
+                            right: this.padding.right,
+                        };
                         setTimeout(() => {
                             if (this.originDestinationCordinates.length > 0)
                                 this.map.fitBounds(this.bounds, { padding, pitch: 65 });
@@ -761,9 +954,13 @@ class CoolmapService {
                 this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res) => {
                     if (res['data']['route']) {
                         let path = res['data']['route'].split(';');
-                        path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                        path.forEach((ele, index) => { if (ele.length === 1)
-                            path.splice(index, 1); });
+                        path = path.map((ele) => {
+                            return (ele = this.formateLatLong(ele));
+                        });
+                        path.forEach((ele, index) => {
+                            if (ele.length === 1)
+                                path.splice(index, 1);
+                        });
                         route['path'] = path;
                         this.extendBound(route['path'], showAllFitbound);
                         if (route['path'] && route['path'].length > 0)
@@ -774,55 +971,88 @@ class CoolmapService {
                         this.extendBound(null, showAllFitbound);
                     }
                     resolve(true);
-                }, (err) => { if (err) {
-                    reject(false);
-                } });
+                }, (err) => {
+                    if (err) {
+                        reject(false);
+                    }
+                });
             }
             else if (['jobrouteList', 'addroute'].includes(type)) {
                 if (route['path'] && route['path'].length > 0) {
                     let path = route['path'].split(';');
-                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                    path.forEach((ele, index) => { if (ele.length === 1)
-                        path.splice(index, 1); });
+                    path = path.map((ele) => {
+                        return (ele = this.formateLatLong(ele));
+                    });
+                    path.forEach((ele, index) => {
+                        if (ele.length === 1)
+                            path.splice(index, 1);
+                    });
                     this.extendBound(path, showAllFitbound);
                     this.drawLine(path, i, route, enablefitbound, type);
                 }
-                ;
             }
         });
     }
-    clearBound() { this.bounds = new mapboxgl.LngLatBounds(); this.originDestinationCordinates = []; this.clearPadding(); }
-    formateLatLong(latlong) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
+    clearBound() {
+        this.bounds = new mapboxgl.LngLatBounds();
+        this.originDestinationCordinates = [];
+        this.clearPadding();
+    }
+    formateLatLong(latlong) {
+        return latlong
+            ? latlong
+                .split(',')
+                .map((x) => +x)
+                .reverse()
+            : null;
+    }
     clearBoundWithCordinates() {
         this.bounds = new mapboxgl.LngLatBounds();
         this.originDestinationCordinates = [];
     }
     onResize(event) {
         if (!this.bounds.isEmpty()) {
-            this.windowActualHeightWidth.availHeight = (window.innerHeight > window.screen.availHeight) ? window.innerHeight : window.screen.availHeight;
+            this.windowActualHeightWidth.availHeight =
+                window.innerHeight > window.screen.availHeight
+                    ? window.innerHeight
+                    : window.screen.availHeight;
             setTimeout(() => {
-                this.map.fitBounds(this.bounds, { padding: { top: this.padding.top + this.customTopForCustomer, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (event.target.innerHeight - 65)), left: this.padding.left, right: this.padding.right }, pitch: 65 });
+                this.map.fitBounds(this.bounds, {
+                    padding: {
+                        top: this.padding.top + this.customTopForCustomer,
+                        bottom: this.padding.bottom +
+                            (this.windowActualHeightWidth.availHeight -
+                                (event.target.innerHeight - 65)),
+                        left: this.padding.left,
+                        right: this.padding.right,
+                    },
+                    pitch: 65,
+                });
             }, 500);
         }
     }
     setWindowHeight(screen) {
         this.windowActualHeightWidth.availHeight = screen;
     }
-    setPadding(padding) { this.padding = padding; }
-    clearPadding() { this.padding = null; }
+    setPadding(padding) {
+        this.padding = padding;
+    }
+    clearPadding() {
+        this.padding = null;
+    }
     removeJobFromMap(data) {
         data.map((ele, index) => {
-            const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+            const id = ele['job_id'] ? ele['job_id'] : ele['route_id'];
             this.removeRouteAndMarker(id);
-            if (index === (data.length - 1)) {
+            if (index === data.length - 1) {
                 this.extendReBound();
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CoolmapService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CoolmapService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CoolmapService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CoolmapService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: UtilsService }, { type: i2$1.EventManager }, { type: CoolmapConfigModel, decorators: [{