@aggdirect/coolmap-services 1.0.4 → 1.0.5

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