@aggdirect/coolmap-services 1.2.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,799 +0,0 @@
1
- import { __awaiter } from 'tslib';
2
- import * as i0 from '@angular/core';
3
- import { Injectable, Inject } from '@angular/core';
4
- import * as mapboxgl from 'mapbox-gl';
5
- import * as turf from '@turf/turf';
6
- import { BehaviorSubject } from 'rxjs';
7
- import { MapboxLayer } from '@deck.gl/mapbox';
8
- import { ArcLayer } from '@deck.gl/layers';
9
- import * as i1 from '@angular/common/http';
10
- import * as i2 from '@angular/material/snack-bar';
11
- import * as i2$1 from '@angular/platform-browser';
12
-
13
- class Route {
14
- constructor() {
15
- this.index = 0;
16
- }
17
- }
18
- const EstinationData = ['estimated_distance', 'estimated_time'];
19
- var EstinationEnum;
20
- (function (EstinationEnum) {
21
- EstinationEnum["estimated_distance"] = "miles";
22
- EstinationEnum["estimated_time"] = "time";
23
- })(EstinationEnum || (EstinationEnum = {}));
24
- const JobCodeOverviewData = ['order_number', 'customer_name', 'project', 'unit', 'material', 'customer_contact', 'delivery_contact', 'pickup_location', 'delivery_location'];
25
- var JobCodeOverviewEnum;
26
- (function (JobCodeOverviewEnum) {
27
- JobCodeOverviewEnum["material"] = "Material";
28
- JobCodeOverviewEnum["order_number"] = "Job Code";
29
- JobCodeOverviewEnum["customer_name"] = "Customer";
30
- JobCodeOverviewEnum["customer_contact"] = "Customer Contact";
31
- JobCodeOverviewEnum["delivery_contact"] = "Delivery Contact";
32
- JobCodeOverviewEnum["project"] = "Project Name";
33
- JobCodeOverviewEnum["unit"] = "Job Type";
34
- JobCodeOverviewEnum["pickup_location"] = "Pickup";
35
- JobCodeOverviewEnum["delivery_location"] = "Delivery";
36
- })(JobCodeOverviewEnum || (JobCodeOverviewEnum = {}));
37
- const DriversmsCardKey = ['order_number', 'date', 'values', 'material', 'unit', 'pickup_location', 'delivery_location'];
38
- var DriverSmsCardEnum;
39
- (function (DriverSmsCardEnum) {
40
- DriverSmsCardEnum["order_number"] = "Jobcode";
41
- DriverSmsCardEnum["date"] = "Date";
42
- DriverSmsCardEnum["values"] = "Total tasks";
43
- DriverSmsCardEnum["material"] = "Material";
44
- DriverSmsCardEnum["unit"] = "Unit";
45
- DriverSmsCardEnum["pickup_location"] = "Pickup Address";
46
- DriverSmsCardEnum["delivery_location"] = "Delivery Address";
47
- })(DriverSmsCardEnum || (DriverSmsCardEnum = {}));
48
- class PopupData {
49
- }
50
- class CoolmapConfigModel {
51
- }
52
-
53
- class UtilsService {
54
- constructor(http, snackBar, config) {
55
- this.http = http;
56
- this.snackBar = snackBar;
57
- this.config = config;
58
- this.analyticsRESTURL = '';
59
- this.RESTURLPrefix = '';
60
- this.pickupOptions = [];
61
- this.destOptions = [];
62
- this.ownerOptions = [];
63
- this.customerOptions = [];
64
- this.unitOptions = [];
65
- this.materialOptions = [];
66
- this.jcodeOptions = [];
67
- this.driverOption = [];
68
- this.truckingCompanayOption = [];
69
- this.routeNameOptions = [];
70
- this.preventnavChange = new BehaviorSubject(false);
71
- this.navChangeObserve = this.preventnavChange.asObservable();
72
- this.clearViewRouteforJobCode = new BehaviorSubject(false);
73
- this.clearViewRouteforJobCodeObserve = this.clearViewRouteforJobCode.asObservable();
74
- this.preVentJobdetailclose = new BehaviorSubject(false);
75
- this.getpreVentJobdetailclose = this.preVentJobdetailclose.asObservable();
76
- this.routeDetailsUtility = new BehaviorSubject({});
77
- this.getrouteDetailsUtility = this.routeDetailsUtility.asObservable();
78
- this.removeMapEntity = new BehaviorSubject({});
79
- this.removeMapEntityUtility = this.removeMapEntity.asObservable();
80
- this.dict = new Map();
81
- this.analyticsRESTURL = config.analyticsRESTURL;
82
- this.RESTURLPrefix = config.RESTURLPrefix;
83
- }
84
- getDateFormat(strVal, seprater) {
85
- seprater = seprater ? seprater : '-';
86
- const mydate = strVal;
87
- return (mydate === null || mydate === void 0 ? void 0 : mydate.getFullYear()) + seprater + ((mydate ? mydate.getMonth() : 0) + 1) + seprater + (mydate === null || mydate === void 0 ? void 0 : mydate.getDate());
88
- }
89
- getData(path) { return this.http.get(`${this.analyticsRESTURL}${this.config.repository}/${path}`); }
90
- postdata(path, data) { return this.http.post(`${this.analyticsRESTURL}${this.config.repository}/${path}`, data); }
91
- postDataWithRestUrl(path, data) { return this.http.post(`${this.RESTURLPrefix}${path}`, data); }
92
- fetchAutoCompleteLocations(keyword) {
93
- return this.http.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${keyword}.json?access_token=${this.config.mapboxAccessToken}&country=US`);
94
- }
95
- openSnackBar(message, className) {
96
- this.snackBar.open(message, '', {
97
- duration: 5000, verticalPosition: 'top', horizontalPosition: 'center', panelClass: [className ? className : 'default']
98
- });
99
- }
100
- makeOptions(item) {
101
- var _a;
102
- if (item.order_number) {
103
- (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;
104
- if (item.driver_list && ((_a = item.driver_list) === null || _a === void 0 ? void 0 : _a.length) > 0) {
105
- item.driver_list.forEach((driver) => {
106
- this.driverOption.findIndex(elem => elem === driver['driver_name']) === -1 ? this.driverOption.push(driver['driver_name']) : null;
107
- this.truckingCompanayOption.findIndex(elem => elem === driver['trucking_company']) === -1 ? this.truckingCompanayOption.push(driver['trucking_company']) : null;
108
- });
109
- }
110
- }
111
- ((this.pickupOptions.findIndex((elem) => elem === item.pickup_location)) === -1) ? this.pickupOptions.push(item.pickup_location) : null;
112
- ((this.destOptions.findIndex((elem) => elem === item.delivery_location)) === -1) ? this.destOptions.push(item.delivery_location) : null;
113
- (this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1) ? this.customerOptions.push(item.customer_name) : null;
114
- (this.unitOptions.findIndex((elem) => elem === item.unit) === -1) ? this.unitOptions.push(item.unit) : null;
115
- (this.materialOptions.findIndex((elem) => elem === item.material) === -1) ? this.materialOptions.push(item.material) : null;
116
- if (item.route_name)
117
- this.routeNameOptions.findIndex(elem => elem === item.route_name) === -1 ? this.routeNameOptions.push(item.route_name) : null;
118
- }
119
- filter(value, filters) {
120
- if (typeof value !== 'string') {
121
- return [];
122
- }
123
- const filterValue = value.toLowerCase();
124
- if (filterValue === '') {
125
- return [];
126
- }
127
- const searchResults = [];
128
- this.unitOptions.map(unit => {
129
- if (unit.toLowerCase().includes(filterValue)) {
130
- searchResults.push({ "type": "unit", "label": unit, "value": unit });
131
- }
132
- });
133
- this.customerOptions.map(unit => {
134
- if (unit.toLowerCase().includes(filterValue)) {
135
- searchResults.push({ "type": "customer", "label": unit, "value": unit });
136
- }
137
- });
138
- this.materialOptions.map(unit => {
139
- if (unit.toLowerCase().includes(filterValue)) {
140
- searchResults.push({ "type": "material", "label": unit, "value": unit });
141
- }
142
- });
143
- this.pickupOptions.map(unit => {
144
- if (unit.toLowerCase().includes(filterValue)) {
145
- searchResults.push({ "type": "pickup location", "label": unit, "value": unit });
146
- }
147
- });
148
- this.destOptions.map(unit => {
149
- if (unit.toLowerCase().includes(filterValue)) {
150
- searchResults.push({ "type": "destination location", "label": unit, "value": unit });
151
- }
152
- });
153
- this.jcodeOptions.map(unit => {
154
- if (unit.job_code.toLowerCase().includes(filterValue)) {
155
- searchResults.push({ "type": "job", "label": unit['job_code'], "value": unit });
156
- }
157
- });
158
- this.driverOption.map(unit => {
159
- if (unit.toLowerCase().includes(filterValue)) {
160
- searchResults.push({ "type": "Driver", "label": unit, "value": unit });
161
- }
162
- });
163
- this.truckingCompanayOption.map(unit => {
164
- if (unit.toLowerCase().includes(filterValue)) {
165
- searchResults.push({ "type": "Trucking Company", "label": unit, "value": unit });
166
- }
167
- });
168
- this.routeNameOptions.map(unit => {
169
- if (unit.toLowerCase().includes(filterValue)) {
170
- searchResults.push({ "type": "Route name", "label": unit, "value": unit });
171
- }
172
- });
173
- const searchDict = {};
174
- filters.map((filter) => {
175
- searchDict[filter['name'] + filter['type']] = filter;
176
- });
177
- const furtherFilter = [];
178
- searchResults.map(search => {
179
- if ((search['label'] + search['type']) in searchDict) { }
180
- else {
181
- furtherFilter.push(search);
182
- }
183
- });
184
- return furtherFilter;
185
- }
186
- getSearchResults(list, filterval) {
187
- return list.filter(element => {
188
- var _a, _b;
189
- const result_list_boolean = [];
190
- if (filterval.length > 0) {
191
- if (filterval[0]['type'] === 'unit') {
192
- result_list_boolean.push(filterval[0]['name'] === element[filterval[0]['type']]);
193
- }
194
- if (filterval[0]['type'] === 'customer') {
195
- result_list_boolean.push(filterval[0]['name'] === element['customer_name']);
196
- }
197
- if (filterval[0]['type'] === 'material') {
198
- result_list_boolean.push(filterval[0]['name'] === element[filterval[0]['type']]);
199
- }
200
- if (filterval[0]['type'] === 'pickup location') {
201
- result_list_boolean.push(filterval[0]['name'] === element['pickup_location']);
202
- }
203
- if (filterval[0]['type'] === 'destination location') {
204
- result_list_boolean.push(filterval[0]['name'] === element['delivery_location']);
205
- }
206
- if (filterval[0]['type'] === 'job') {
207
- result_list_boolean.push(filterval[0]['name'] === element['order_number']);
208
- }
209
- if (filterval[0]['type'] === 'Route name') {
210
- result_list_boolean.push(filterval[0]['name'] === element['route_name']);
211
- }
212
- if (filterval[0]['type'] === 'Driver') {
213
- const index = (_a = element.driver_list) === null || _a === void 0 ? void 0 : _a.findIndex(ele => { return filterval[0]['name'] === ele['driver_name']; });
214
- if (index !== -1)
215
- result_list_boolean.push(true);
216
- }
217
- if (filterval[0]['type'] === 'Trucking Company') {
218
- const index = (_b = element.driver_list) === null || _b === void 0 ? void 0 : _b.findIndex(ele => { return filterval[0]['name'] === ele['trucking_company']; });
219
- if (index !== -1)
220
- result_list_boolean.push(true);
221
- }
222
- }
223
- if (result_list_boolean.length > 0) {
224
- return result_list_boolean.reduce((prev, curr) => prev && curr);
225
- }
226
- return false;
227
- });
228
- }
229
- clearOptions() {
230
- this.pickupOptions = [];
231
- this.destOptions = [];
232
- this.ownerOptions = [];
233
- this.customerOptions = [];
234
- this.unitOptions = [];
235
- this.materialOptions = [];
236
- this.jcodeOptions = [];
237
- this.routeNameOptions = [];
238
- }
239
- setdictValue(key, value) {
240
- this.dict.set(key, value);
241
- }
242
- getdictValue(key) {
243
- return JSON.parse(this.dict.get(key));
244
- }
245
- removedictValue(key) {
246
- this.dict.delete(key);
247
- }
248
- conveySearchIcon(value) {
249
- if (value && typeof (value) !== 'object')
250
- return true;
251
- return false;
252
- }
253
- fetchUnitsList() {
254
- return new Promise((resolve, reject) => {
255
- if (!this.unitsList) {
256
- this.getData('unit/list/view').subscribe((res) => {
257
- if (res) {
258
- this.unitsList = res.data;
259
- resolve(this.unitsList);
260
- }
261
- });
262
- }
263
- else {
264
- resolve(this.unitsList);
265
- }
266
- });
267
- }
268
- fetchMaterialsList() {
269
- return new Promise((resolve, reject) => {
270
- if (!this.materialsList) {
271
- this.getData('material/list/view').subscribe(((res) => {
272
- res.data.sort((a, b) => a.material.localeCompare(b.material));
273
- this.materialsList = res.data;
274
- resolve(this.materialsList);
275
- }));
276
- }
277
- else {
278
- resolve(this.materialsList);
279
- }
280
- });
281
- }
282
- fetchMaterialsListForCustomer() {
283
- return new Promise((resolve, reject) => {
284
- if (!this.materialsListForCustomer) {
285
- this.getData('material/list/view').subscribe(((res) => {
286
- let meterialListDetails = [];
287
- res.data.map((item) => {
288
- if (item.sub.length > 0) {
289
- item.sub.map((subItem) => {
290
- if (subItem.add_to_marketplace) {
291
- subItem.material = item.material;
292
- subItem.material_id = item.material_id;
293
- subItem.label = item.material + ' | ' + subItem.sub_material;
294
- meterialListDetails.push(subItem);
295
- }
296
- });
297
- }
298
- });
299
- meterialListDetails.sort((a, b) => a.label.localeCompare(b.label));
300
- this.materialsListForCustomer = meterialListDetails;
301
- resolve(this.materialsListForCustomer);
302
- }));
303
- }
304
- else {
305
- resolve(this.materialsListForCustomer);
306
- }
307
- });
308
- }
309
- fetchCustomersList() {
310
- return new Promise((resolve, reject) => {
311
- if (!this.customersList) {
312
- this.getData('company/list/view').subscribe((res) => {
313
- if (res) {
314
- this.customersList = res.data;
315
- resolve(this.customersList);
316
- }
317
- });
318
- }
319
- else {
320
- resolve(this.customersList);
321
- }
322
- });
323
- }
324
- }
325
- UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
326
- UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, providedIn: 'root' });
327
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
328
- type: Injectable,
329
- args: [{ providedIn: 'root' }]
330
- }], ctorParameters: function () {
331
- return [{ type: i1.HttpClient }, { type: i2.MatSnackBar }, { type: CoolmapConfigModel, decorators: [{
332
- type: Inject,
333
- args: ['memberData']
334
- }] }];
335
- } });
336
-
337
- class CoolmapService {
338
- constructor(utils, eventManager, config) {
339
- this.utils = utils;
340
- this.eventManager = eventManager;
341
- this.config = config;
342
- this.markerOriginList = [];
343
- this.markerDestinationList = [];
344
- this.initiatecoolmap = new BehaviorSubject(true);
345
- this.reintiatecoolmap = this.initiatecoolmap.asObservable();
346
- this.bounds = new mapboxgl.LngLatBounds();
347
- this.originDestinationCordinates = [];
348
- this.customTopForCustomer = this.config.repository === 'customer' ? 65 : 0;
349
- this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
350
- this.windowActualHeightWidth = { availHeight: 0 };
351
- }
352
- initiateMapForAddRoute(el) {
353
- return new Promise((resolve, reject) => {
354
- if (this.map)
355
- this.map.remove();
356
- this.map = new mapboxgl.Map({
357
- accessToken: this.config.mapboxAccessToken,
358
- container: el,
359
- style: this.config.mapboxStyle,
360
- center: [-77.036873, 38.907192],
361
- zoom: 10, bearing: 0, pitch: 65, interactive: true,
362
- });
363
- this.map.once('load', (res) => {
364
- resolve(res);
365
- });
366
- });
367
- }
368
- // Below method Load route with animation
369
- loadMapProperty(pinRouteGeojson, index, unit, route, bottom) {
370
- return new Promise((resolve, reject) => {
371
- let origin = pinRouteGeojson.features[0].geometry.coordinates[0];
372
- const linecolor = (unit === 'Ton') ? '#ff7272' : (unit === 'Load') ? '#a3c52e' : '#ae23d1';
373
- let destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
374
- this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then((res) => {
375
- const point = {
376
- 'type': 'FeatureCollection',
377
- 'features': [
378
- { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Point', 'coordinates': origin } }
379
- ]
380
- };
381
- const lineDistance = turf.length(pinRouteGeojson.features[0]);
382
- const arc = [];
383
- const steps = 10 * pinRouteGeojson.features[0].geometry.coordinates.length;
384
- for (let i = 0; i < lineDistance; i += lineDistance / steps) {
385
- const segment = turf.along(pinRouteGeojson.features[0], i);
386
- arc.push(segment.geometry.coordinates);
387
- }
388
- pinRouteGeojson.features[0].geometry.coordinates = arc;
389
- const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
390
- const marker = new mapboxgl.Marker(document.createElement('div'))
391
- .setLngLat(pinRoute[0]).addTo(this.map).togglePopup();
392
- if (this.map.getSource(`line${index}`)) {
393
- this.removeRouteAndMarker(index).then(() => { });
394
- }
395
- this.map.addSource(`line${index}`, { type: 'geojson', lineMetrics: true, data: pinRouteGeojson });
396
- this.map.addLayer({
397
- type: 'line',
398
- source: `line${index}`,
399
- id: `line${index}`,
400
- paint: {
401
- 'line-width': 2,
402
- 'line-gradient': [
403
- 'interpolate',
404
- ['linear'],
405
- ['line-progress'],
406
- 0, unit === 'Ton' ? '#d7f7e4' : unit === 'Load' ? '#c9d8f5' : '#f5dcc1',
407
- 1, unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1',
408
- ]
409
- },
410
- layout: { 'line-cap': 'round', 'line-join': 'round' }
411
- });
412
- const dataSetForMap = {
413
- counter: 0, pinRouteGeojson, steps,
414
- point, pointId: `point${index}`,
415
- marker, pinRoute, lineId: `line${index}`, index,
416
- origin, destination, lineDistance,
417
- linecolor, route, isViewRoute: true
418
- };
419
- this.createMarker(dataSetForMap);
420
- this.map.on('mouseenter', `line${index}`, (e) => {
421
- this.map.setPaintProperty(`line${index}`, 'line-width', 5);
422
- this.map.setPaintProperty(`line${index}`, 'line-opacity', 1);
423
- const datasetForPopup = {
424
- coordinate: [e.lngLat.lng, e.lngLat.lat],
425
- pickup: route.pickup_location ? route.pickup_location : '',
426
- drop: route.delivery_location ? route.delivery_location : '',
427
- routeType: route.project ? 'Project' : 'Route',
428
- title: route.project ? route.project : route.route_name ? route.route_name : '',
429
- material: route.materialLabel ? route.materialLabel : '',
430
- type: route.unit ? route.unit : ''
431
- };
432
- this.createPopup(datasetForPopup);
433
- });
434
- this.map.on('mouseleave', `line${index}`, (e) => {
435
- this.map.setPaintProperty(`line${index}`, 'line-width', 2);
436
- if (this.popup) {
437
- this.popup.remove();
438
- }
439
- });
440
- });
441
- this.map.once('idle', (res) => {
442
- resolve(true);
443
- });
444
- });
445
- }
446
- // Below method Load route without animation
447
- drawLine(cordinates, index, route, enablefitbound, routeType) {
448
- let linecolor;
449
- let origin = cordinates[0];
450
- let destination = cordinates[cordinates.length - 1];
451
- if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
452
- linecolor = this.provideLineColor(route['unit'], routeType);
453
- if (enablefitbound) {
454
- const padding = {
455
- top: this.padding.top + this.customTopForCustomer, bottom: this.padding.bottom + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)),
456
- left: this.padding.left, right: this.padding.right
457
- };
458
- this.map.fitBounds([origin, destination], { padding, pitch: 65 }, { fitboundCompleteJob: true });
459
- }
460
- if (this.map.getSource(`route-source-for-job-code${index}`)) {
461
- this.removeRouteAndMarker(index).then(() => { });
462
- }
463
- this.map.addSource(`route-source-for-job-code${index}`, {
464
- 'type': 'geojson',
465
- 'data': { 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'LineString', 'coordinates': cordinates } }
466
- });
467
- this.map.addLayer({
468
- 'id': `route-for-job-code${index}`, 'type': 'line', 'source': `route-source-for-job-code${index}`,
469
- paint: { 'line-color': linecolor, 'line-width': 2 },
470
- layout: { 'line-cap': 'round', 'line-join': 'round' }
471
- });
472
- const dataSetForMap = {
473
- origin, destination, index, linecolor, route
474
- };
475
- this.createMarker(dataSetForMap);
476
- this.map.on('mouseenter', `route-for-job-code${index}`, (e) => {
477
- if (this.popup) {
478
- this.popup.remove();
479
- }
480
- this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 5);
481
- this.map.setPaintProperty(`route-for-job-code${index}`, 'line-opacity', 1);
482
- const datasetForPopup = {
483
- coordinate: [e.lngLat.lng, e.lngLat.lat],
484
- pickup: route.pickup_location ? route.pickup_location : '',
485
- drop: route.delivery_location ? route.delivery_location : '',
486
- jobCode: route.project ? route.order_number : null,
487
- customer: route.project ? route.customer_name : null,
488
- routeType: route.project ? 'Project' : 'Route',
489
- title: route.project ? route.project : route.route_name ? route.route_name : '',
490
- material: route.materialLabel ? route.materialLabel : '',
491
- type: route.unit ? route.unit : ''
492
- };
493
- this.createPopup(datasetForPopup);
494
- });
495
- this.map.on('mouseleave', `route-for-job-code${index}`, (e) => {
496
- this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 2);
497
- if (this.popup) {
498
- this.popup.remove();
499
- }
500
- });
501
- }
502
- }
503
- provideLineColor(unitType, type) {
504
- let checkType = (type && !['jobrouteList', 'addroute'].includes(type)) ? true : false;
505
- let color;
506
- switch (unitType) {
507
- case "Ton":
508
- color = checkType ? '#39c471' : '#ff7272';
509
- break;
510
- case "Load":
511
- color = checkType ? '#326ad3' : '#a3c52e';
512
- break;
513
- case "Hourly":
514
- color = checkType ? '#ffad56' : '#ae23d1';
515
- break;
516
- }
517
- return color;
518
- }
519
- showRoutePopup(arcDetails, event, isViewRoute) {
520
- if (this.popup) {
521
- this.popup.remove();
522
- this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 2);
523
- }
524
- if (arcDetails.color && this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
525
- this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 5);
526
- this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-opacity', 1);
527
- const datasetForPopup = {
528
- coordinate: arcDetails.coordinate,
529
- pickup: arcDetails.layer.props.data.route.pickup_location ? arcDetails.layer.props.data.route.pickup_location : '',
530
- drop: arcDetails.layer.props.data.route.delivery_location ? arcDetails.layer.props.data.route.delivery_location : '',
531
- jobCode: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.order_number : '',
532
- customer: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.customer_name : '',
533
- routeType: arcDetails.layer.props.data.route.project ? 'Project' : 'Route',
534
- 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 : '',
535
- material: arcDetails.layer.props.data.route.materialLabel ? arcDetails.layer.props.data.route.materialLabel : '',
536
- type: arcDetails.layer.props.data.route.unit ? arcDetails.layer.props.data.route.unit : ''
537
- };
538
- this.createPopup(datasetForPopup);
539
- }
540
- }
541
- createPopup(datasetForPopup) {
542
- this.popup = new mapboxgl.Popup({
543
- closeButton: false,
544
- closeOnClick: false,
545
- closeOnMove: true,
546
- anchor: 'bottom-left'
547
- });
548
- this.popup.setLngLat(datasetForPopup.coordinate)
549
- .setHTML(`
550
- <div class="destination">
551
- <div class="duration">
552
- <p class="pickprt"><b>Pickup Location:</b> ${datasetForPopup.pickup}</p>
553
- <p class="dropprt"><b>Drop Location:</b> ${datasetForPopup.drop}</p>
554
- </div>
555
- ${datasetForPopup.jobCode ? '<span><b>Job Code:</b> ' + datasetForPopup.jobCode + '</span>' : ''}
556
- ${datasetForPopup.customer ? '<span><b>Customer:</b> ' + datasetForPopup.customer + '</span>' : ''}
557
- <span><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
558
- <span><b>Material:</b> ${datasetForPopup.material}</span>
559
- <span><b>Type:</b> ${datasetForPopup.type}</span>
560
- </div>
561
- `)
562
- .addTo(this.map);
563
- }
564
- hexToRGB(hex) {
565
- return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
566
- .substring(1).match(/.{2}/g)
567
- .map(x => parseInt(x, 16));
568
- }
569
- createMarker(routeDetails) {
570
- var _a, _b;
571
- if (routeDetails.origin[0] && routeDetails.origin[1] && routeDetails.destination[0] && routeDetails.destination[1]) {
572
- const popup = new mapboxgl.Popup({ closeButton: false }).setHTML('<b>Pickup: </b>' + ((_a = routeDetails.route) === null || _a === void 0 ? void 0 : _a.pickup_location));
573
- const popupForDestination = new mapboxgl.Popup({ closeButton: false })
574
- .setHTML('<b>Delivery: </b>' + ((_b = routeDetails.route) === null || _b === void 0 ? void 0 : _b.delivery_location));
575
- const el = document.createElement('div');
576
- el.className = 'marker';
577
- el.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>P</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
578
- const originMarker = new mapboxgl.Marker(el)
579
- .setPopup(popup).setLngLat(routeDetails.origin).addTo(this.map);
580
- originMarker.getElement().addEventListener('mouseenter', () => originMarker.togglePopup());
581
- originMarker.getElement().addEventListener('mouseleave', () => originMarker.togglePopup());
582
- const elementForDestination = document.createElement('div');
583
- elementForDestination.className = 'marker';
584
- elementForDestination.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>D</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
585
- const destinationMarker = new mapboxgl.Marker(elementForDestination).setPopup(popupForDestination).setLngLat(routeDetails.destination).addTo(this.map);
586
- destinationMarker.getElement().addEventListener('mouseenter', () => destinationMarker.togglePopup());
587
- destinationMarker.getElement().addEventListener('mouseleave', () => destinationMarker.togglePopup());
588
- this.markerOriginList[routeDetails.index] = originMarker;
589
- this.markerDestinationList[routeDetails.index] = destinationMarker;
590
- const colorArray = this.hexToRGB(routeDetails.linecolor);
591
- const arcLayer = new MapboxLayer({
592
- id: 'arc-layer' + routeDetails.index,
593
- type: ArcLayer,
594
- pickable: true,
595
- data: { route: routeDetails.route, index: routeDetails.index },
596
- getWidth: 1,
597
- getSourcePosition: routeDetails.origin,
598
- getTargetPosition: routeDetails.destination,
599
- getTargetColor: [255, 255, 255],
600
- getSourceColor: [colorArray[0], colorArray[1], colorArray[2]],
601
- onHover: (info, event) => this.showRoutePopup(info, event, routeDetails.isViewRoute),
602
- });
603
- this.map.addLayer(arcLayer);
604
- }
605
- }
606
- removeRouteAndMarker(index) {
607
- return __awaiter(this, void 0, void 0, function* () {
608
- if (this.map) {
609
- this.map.getLayer(`arc-layer${index}`) ? this.map.removeLayer(`arc-layer${index}`) : '';
610
- this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : '';
611
- this.map.getLayer(`custom_layer${index}`) ? this.map.removeLayer(`custom_layer${index}`) : '';
612
- this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : '';
613
- this.map.getLayer(`route-for-job-code${index}`) ? this.map.removeLayer(`route-for-job-code${index}`) : '';
614
- this.map.getSource(`route-source-for-job-code${index}`) ? this.map.removeSource(`route-source-for-job-code${index}`) : '';
615
- this.findMarkerBound(index);
616
- this.markerOriginList[index] ? this.markerOriginList[index].remove() : '';
617
- this.markerDestinationList[index] ? this.markerDestinationList[index].remove() : '';
618
- yield true;
619
- }
620
- });
621
- }
622
- findMarkerBound(index) {
623
- const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => { var _a, _b, _c, _d; return (x[0][0].toFixed(6) == ((_b = (_a = this.markerOriginList[index]) === null || _a === void 0 ? void 0 : _a.getLngLat()) === null || _b === void 0 ? void 0 : _b.lng.toFixed(6))) && (x[0][1].toFixed(6) == ((_d = (_c = this.markerOriginList[index]) === null || _c === void 0 ? void 0 : _c.getLngLat()) === null || _d === void 0 ? void 0 : _d.lat.toFixed(6))); });
624
- if (indexOfCordinates >= 0) {
625
- this.originDestinationCordinates.splice(indexOfCordinates, 1);
626
- }
627
- }
628
- filterRoute(ID, visibility, showAllFitbound) {
629
- return __awaiter(this, void 0, void 0, function* () {
630
- if (ID) {
631
- if (this.map.getLayer(`route-for-job-code${ID}`)) {
632
- this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
633
- const originM = this.markerOriginList[ID].getElement();
634
- originM.style.display = ((visibility === 'visible') ? 'block' : visibility);
635
- const destinationM = this.markerDestinationList[ID].getElement();
636
- destinationM.style.display = ((visibility === 'visible') ? 'block' : visibility);
637
- if (visibility === 'none' && showAllFitbound) {
638
- this.findMarkerBound(ID);
639
- this.extendReBound();
640
- }
641
- }
642
- if (this.map.getLayer(`arc-layer${ID}`)) {
643
- this.map.setLayoutProperty(`arc-layer${ID}`, 'visibility', visibility);
644
- }
645
- }
646
- yield true;
647
- });
648
- }
649
- extendBound(route, showAllFitbound) {
650
- return new Promise((resolve, reject) => {
651
- if (route) {
652
- if (typeof route === 'string') {
653
- let path = route.split(';');
654
- path = path.map((ele) => { return ele = this.formateLatLong(ele); });
655
- path.forEach((ele, index) => {
656
- if (ele.length === 1)
657
- path.splice(index, 1);
658
- });
659
- route = path;
660
- }
661
- if (route[0][0] && route[0][1] && route[route.length - 1][0] && route[route.length - 1][1]) {
662
- this.originDestinationCordinates.push(route);
663
- route.map((item) => {
664
- this.bounds.extend(item);
665
- });
666
- }
667
- }
668
- if (showAllFitbound) {
669
- 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 };
670
- setTimeout(() => {
671
- if (showAllFitbound && (Object.keys(this.bounds).length > 0))
672
- this.map.fitBounds(this.bounds, { padding, pitch: 65 }, { fitboundComplete: true });
673
- }, 100);
674
- this.map.once('moveend', (event) => {
675
- if (event.fitboundComplete) {
676
- resolve(true);
677
- }
678
- });
679
- }
680
- });
681
- }
682
- extendReBound(bottom) {
683
- return new Promise((resolve, reject) => {
684
- this.bounds = new mapboxgl.LngLatBounds();
685
- if (this.originDestinationCordinates.length >= 0) {
686
- this.originDestinationCordinates.map((item, index) => {
687
- item.map((route) => {
688
- this.bounds.extend(route);
689
- });
690
- if (index === (this.originDestinationCordinates.length - 1)) {
691
- 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 };
692
- setTimeout(() => {
693
- if (this.originDestinationCordinates.length > 0)
694
- this.map.fitBounds(this.bounds, { padding, pitch: 65 });
695
- }, 500);
696
- resolve(true);
697
- }
698
- });
699
- }
700
- else {
701
- resolve(true);
702
- }
703
- });
704
- }
705
- plotRoute(route, i, type, enablefitbound, showAllFitbound) {
706
- return new Promise((resolve, reject) => {
707
- let param = {};
708
- if (['jobcode'].includes(type)) {
709
- param['job'] = route['job_id'];
710
- this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res) => {
711
- if (res['data']['route']) {
712
- let path = res['data']['route'].split(';');
713
- path = path.map((ele) => { return ele = this.formateLatLong(ele); });
714
- path.forEach((ele, index) => {
715
- if (ele.length === 1)
716
- path.splice(index, 1);
717
- });
718
- route['path'] = path;
719
- this.extendBound(route['path'], showAllFitbound);
720
- if (route['path'] && route['path'].length > 0)
721
- this.drawLine(route['path'], i, route, enablefitbound, type);
722
- route['index'] = i;
723
- }
724
- else {
725
- this.extendBound(null, showAllFitbound);
726
- }
727
- resolve(true);
728
- }, (err) => {
729
- if (err) {
730
- reject(false);
731
- }
732
- });
733
- }
734
- else if (['jobrouteList', 'addroute'].includes(type)) {
735
- if (route['path'] && route['path'].length > 0) {
736
- let path = route['path'].split(';');
737
- path = path.map((ele) => { return ele = this.formateLatLong(ele); });
738
- path.forEach((ele, index) => {
739
- if (ele.length === 1)
740
- path.splice(index, 1);
741
- });
742
- this.extendBound(path, showAllFitbound);
743
- this.drawLine(path, i, route, enablefitbound, type);
744
- }
745
- ;
746
- }
747
- });
748
- }
749
- clearBound() { this.bounds = new mapboxgl.LngLatBounds(); this.originDestinationCordinates = []; this.clearPadding(); }
750
- formateLatLong(latlong) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
751
- clearBoundWithCordinates() {
752
- this.bounds = new mapboxgl.LngLatBounds();
753
- this.originDestinationCordinates = [];
754
- }
755
- onResize(event) {
756
- if (!this.bounds.isEmpty()) {
757
- this.windowActualHeightWidth.availHeight = (window.innerHeight > window.screen.availHeight) ? window.innerHeight : window.screen.availHeight;
758
- setTimeout(() => {
759
- 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 });
760
- }, 500);
761
- }
762
- }
763
- setWindowHeight(screen) {
764
- this.windowActualHeightWidth.availHeight = screen;
765
- }
766
- setPadding(padding) { this.padding = padding; }
767
- clearPadding() { this.padding = null; }
768
- removeJobFromMap(data) {
769
- data.map((ele, index) => {
770
- const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
771
- this.removeRouteAndMarker(id);
772
- if (index === (data.length - 1)) {
773
- this.extendReBound();
774
- }
775
- });
776
- }
777
- }
778
- CoolmapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
779
- CoolmapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoolmapService, providedIn: 'root' });
780
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoolmapService, decorators: [{
781
- type: Injectable,
782
- args: [{ providedIn: 'root' }]
783
- }], ctorParameters: function () {
784
- return [{ type: UtilsService }, { type: i2$1.EventManager }, { type: CoolmapConfigModel, decorators: [{
785
- type: Inject,
786
- args: ['memberData']
787
- }] }];
788
- } });
789
-
790
- /*
791
- * Public API Surface of @aggdirect/coolmap-services
792
- */
793
-
794
- /**
795
- * Generated bundle index. Do not edit.
796
- */
797
-
798
- export { CoolmapConfigModel, CoolmapService, DriverSmsCardEnum, DriversmsCardKey, EstinationData, EstinationEnum, JobCodeOverviewData, JobCodeOverviewEnum, PopupData, Route, UtilsService };
799
- //# sourceMappingURL=aggdirect-coolmap-services.mjs.map