@c8y/ngx-components 1018.0.211 → 1018.0.213
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.
- package/esm2020/ecosystem/application-properties/subscription-modal/subscription-modal.component.mjs +3 -3
- package/esm2020/map/cluster-map.mjs +8 -3
- package/esm2020/map/map.component.mjs +3 -3
- package/esm2020/map/map.model.mjs +1 -19
- package/esm2020/map/map.service.mjs +24 -1
- package/fesm2015/c8y-ngx-components-ecosystem.mjs +2 -2
- package/fesm2015/c8y-ngx-components-ecosystem.mjs.map +1 -1
- package/fesm2015/c8y-ngx-components-map.mjs +135 -125
- package/fesm2015/c8y-ngx-components-map.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-ecosystem.mjs +2 -2
- package/fesm2020/c8y-ngx-components-ecosystem.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-map.mjs +135 -125
- package/fesm2020/c8y-ngx-components-map.mjs.map +1 -1
- package/map/map.model.d.ts +0 -1
- package/map/map.service.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1,35 +1,17 @@
|
|
|
1
1
|
import { __awaiter } from 'tslib';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken,
|
|
3
|
+
import { InjectionToken, Injectable, Directive, EventEmitter, Component, Optional, Inject, ViewChild, ContentChild, Input, Output, SimpleChange, NgModule } from '@angular/core';
|
|
4
4
|
import * as i1$1 from '@c8y/ngx-components';
|
|
5
5
|
import { gettext, sortByPriority, ManagedObjectRealtimeService, CommonModule as CommonModule$1, FormsModule as FormsModule$1, RealtimeModule } from '@c8y/ngx-components';
|
|
6
6
|
import { Subject, fromEvent, BehaviorSubject, NEVER, interval, of, merge, from } from 'rxjs';
|
|
7
7
|
import { takeUntil, map, switchMap, tap, filter, first, debounceTime, mergeMap } from 'rxjs/operators';
|
|
8
|
-
import { flatten, cloneDeep } from 'lodash-es';
|
|
9
8
|
import * as i1 from '@c8y/client';
|
|
9
|
+
import { flatten, cloneDeep } from 'lodash-es';
|
|
10
10
|
import * as i3 from '@ngx-translate/core';
|
|
11
11
|
import * as i1$2 from '@angular/common';
|
|
12
12
|
import { CommonModule } from '@angular/common';
|
|
13
13
|
import { FormsModule } from '@angular/forms';
|
|
14
14
|
|
|
15
|
-
function getStatus(device) {
|
|
16
|
-
if (!device.c8y_ActiveAlarmsStatus) {
|
|
17
|
-
return 'text-muted';
|
|
18
|
-
}
|
|
19
|
-
if (device.c8y_ActiveAlarmsStatus.critical) {
|
|
20
|
-
return 'status critical';
|
|
21
|
-
}
|
|
22
|
-
if (device.c8y_ActiveAlarmsStatus.major) {
|
|
23
|
-
return 'status major';
|
|
24
|
-
}
|
|
25
|
-
if (device.c8y_ActiveAlarmsStatus.warning) {
|
|
26
|
-
return 'status warning';
|
|
27
|
-
}
|
|
28
|
-
if (device.c8y_ActiveAlarmsStatus.minor) {
|
|
29
|
-
return 'status minor';
|
|
30
|
-
}
|
|
31
|
-
return 'text-muted';
|
|
32
|
-
}
|
|
33
15
|
function getC8yMarker(marker, asset) {
|
|
34
16
|
marker.asset = asset;
|
|
35
17
|
return marker;
|
|
@@ -58,109 +40,6 @@ const defaultMapConfig = {
|
|
|
58
40
|
zoomLevel: 2
|
|
59
41
|
};
|
|
60
42
|
|
|
61
|
-
class ClusterMap {
|
|
62
|
-
constructor(iterable, addAssetCallback, translateService) {
|
|
63
|
-
this.iterable = iterable;
|
|
64
|
-
this.addAssetCallback = addAssetCallback;
|
|
65
|
-
this.translateService = translateService;
|
|
66
|
-
this.markers = [];
|
|
67
|
-
this.positions = [];
|
|
68
|
-
this.iterableDiffer = this.iterable.find(this.positions).create(this.trackBy);
|
|
69
|
-
}
|
|
70
|
-
set clusterMarker(item) {
|
|
71
|
-
this.removeClusterToBigMarker();
|
|
72
|
-
this._clusterMarker = item;
|
|
73
|
-
}
|
|
74
|
-
get clusterMarker() {
|
|
75
|
-
return this._clusterMarker;
|
|
76
|
-
}
|
|
77
|
-
set rect(item) {
|
|
78
|
-
if (this._rect) {
|
|
79
|
-
this._rect.remove();
|
|
80
|
-
}
|
|
81
|
-
this._rect = item;
|
|
82
|
-
}
|
|
83
|
-
get rect() {
|
|
84
|
-
return this._rect;
|
|
85
|
-
}
|
|
86
|
-
render(map) {
|
|
87
|
-
if (this._rect) {
|
|
88
|
-
this._rect.addTo(map);
|
|
89
|
-
}
|
|
90
|
-
this.updateChanges(map);
|
|
91
|
-
if (this._clusterMarker) {
|
|
92
|
-
this._clusterMarker.addTo(map);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
clear(map) {
|
|
96
|
-
this.removeClusterToBigMarker();
|
|
97
|
-
this._rect.remove();
|
|
98
|
-
this.positions = [];
|
|
99
|
-
this.updateChanges(map);
|
|
100
|
-
}
|
|
101
|
-
removeClusterToBigMarker() {
|
|
102
|
-
if (this._clusterMarker) {
|
|
103
|
-
this._clusterMarker.remove();
|
|
104
|
-
this._clusterMarker = null;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
addMarkerToMap(device, map) {
|
|
108
|
-
const marker = this.addAssetCallback(device);
|
|
109
|
-
this.markers.push(marker);
|
|
110
|
-
marker.addTo(map);
|
|
111
|
-
}
|
|
112
|
-
setClusterToBigMarker(map, count, leaflet) {
|
|
113
|
-
const bound = this.rect.getBounds();
|
|
114
|
-
const text = this.translateService.instant(gettext('Zoom in'));
|
|
115
|
-
const divMarker = leaflet.divIcon({
|
|
116
|
-
html: `<div class="c8y-map-marker-count" data-count="${count}" title="${text}"></div>`
|
|
117
|
-
});
|
|
118
|
-
const labelIcon = leaflet.marker(bound.getCenter(), {
|
|
119
|
-
icon: divMarker
|
|
120
|
-
});
|
|
121
|
-
labelIcon.addTo(map);
|
|
122
|
-
labelIcon.on('click', () => {
|
|
123
|
-
map.fitBounds(bound);
|
|
124
|
-
});
|
|
125
|
-
this.clusterMarker = labelIcon;
|
|
126
|
-
}
|
|
127
|
-
updateChanges(map) {
|
|
128
|
-
const changes = this.iterableDiffer.diff(this.positions);
|
|
129
|
-
if (changes) {
|
|
130
|
-
changes.forEachRemovedItem((record) => {
|
|
131
|
-
this.removeMarkerFromMap(record.item);
|
|
132
|
-
});
|
|
133
|
-
changes.forEachAddedItem((record) => {
|
|
134
|
-
this.addMarkerToMap(record.item, map);
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
trackBy(index, item) {
|
|
139
|
-
const trackItems = [item.id, item.c8y_Position.lat, item.c8y_Position.lng, getStatus(item)];
|
|
140
|
-
return trackItems.join('');
|
|
141
|
-
}
|
|
142
|
-
removeMarkerFromMap(device) {
|
|
143
|
-
const markers = this.markers.filter((marker) => { var _a; return ((_a = marker.asset) === null || _a === void 0 ? void 0 : _a.id) === device.id; });
|
|
144
|
-
markers.forEach(marker => marker.remove());
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
class MapPopupDirective {
|
|
149
|
-
constructor(template, elementRef, viewContainer) {
|
|
150
|
-
this.template = template;
|
|
151
|
-
this.elementRef = elementRef;
|
|
152
|
-
this.viewContainer = viewContainer;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
MapPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
156
|
-
MapPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: MapPopupDirective, selector: "[c8yMapPopup]", ngImport: i0 });
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapPopupDirective, decorators: [{
|
|
158
|
-
type: Directive,
|
|
159
|
-
args: [{
|
|
160
|
-
selector: '[c8yMapPopup]'
|
|
161
|
-
}]
|
|
162
|
-
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
|
|
163
|
-
|
|
164
43
|
class MapService {
|
|
165
44
|
constructor(inventory) {
|
|
166
45
|
this.inventory = inventory;
|
|
@@ -174,6 +53,29 @@ class MapService {
|
|
|
174
53
|
*/
|
|
175
54
|
this.CLUSTER_LEVEL_THRESHOLD = 500;
|
|
176
55
|
}
|
|
56
|
+
/**
|
|
57
|
+
* Returns asset icon status for highest alarm severity found in device object.
|
|
58
|
+
* @param device Device that contains alarms information.
|
|
59
|
+
* @returns Status string according to alarm severity
|
|
60
|
+
*/
|
|
61
|
+
static getStatus(device) {
|
|
62
|
+
if (!device.c8y_ActiveAlarmsStatus) {
|
|
63
|
+
return 'text-muted';
|
|
64
|
+
}
|
|
65
|
+
if (device.c8y_ActiveAlarmsStatus.critical) {
|
|
66
|
+
return 'status critical';
|
|
67
|
+
}
|
|
68
|
+
if (device.c8y_ActiveAlarmsStatus.major) {
|
|
69
|
+
return 'status major';
|
|
70
|
+
}
|
|
71
|
+
if (device.c8y_ActiveAlarmsStatus.minor) {
|
|
72
|
+
return 'status minor';
|
|
73
|
+
}
|
|
74
|
+
if (device.c8y_ActiveAlarmsStatus.warning) {
|
|
75
|
+
return 'status warning';
|
|
76
|
+
}
|
|
77
|
+
return 'text-muted';
|
|
78
|
+
}
|
|
177
79
|
/**
|
|
178
80
|
* Returns the leaflet instance used by the cumulocity core.
|
|
179
81
|
*/
|
|
@@ -280,6 +182,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
280
182
|
}]
|
|
281
183
|
}], ctorParameters: function () { return [{ type: i1.InventoryService }]; } });
|
|
282
184
|
|
|
185
|
+
class ClusterMap {
|
|
186
|
+
constructor(iterable, addAssetCallback, translateService) {
|
|
187
|
+
this.iterable = iterable;
|
|
188
|
+
this.addAssetCallback = addAssetCallback;
|
|
189
|
+
this.translateService = translateService;
|
|
190
|
+
this.markers = [];
|
|
191
|
+
this.positions = [];
|
|
192
|
+
this.iterableDiffer = this.iterable.find(this.positions).create(this.trackBy);
|
|
193
|
+
}
|
|
194
|
+
set clusterMarker(item) {
|
|
195
|
+
this.removeClusterToBigMarker();
|
|
196
|
+
this._clusterMarker = item;
|
|
197
|
+
}
|
|
198
|
+
get clusterMarker() {
|
|
199
|
+
return this._clusterMarker;
|
|
200
|
+
}
|
|
201
|
+
set rect(item) {
|
|
202
|
+
if (this._rect) {
|
|
203
|
+
this._rect.remove();
|
|
204
|
+
}
|
|
205
|
+
this._rect = item;
|
|
206
|
+
}
|
|
207
|
+
get rect() {
|
|
208
|
+
return this._rect;
|
|
209
|
+
}
|
|
210
|
+
render(map) {
|
|
211
|
+
if (this._rect) {
|
|
212
|
+
this._rect.addTo(map);
|
|
213
|
+
}
|
|
214
|
+
this.updateChanges(map);
|
|
215
|
+
if (this._clusterMarker) {
|
|
216
|
+
this._clusterMarker.addTo(map);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
clear(map) {
|
|
220
|
+
this.removeClusterToBigMarker();
|
|
221
|
+
this._rect.remove();
|
|
222
|
+
this.positions = [];
|
|
223
|
+
this.updateChanges(map);
|
|
224
|
+
}
|
|
225
|
+
removeClusterToBigMarker() {
|
|
226
|
+
if (this._clusterMarker) {
|
|
227
|
+
this._clusterMarker.remove();
|
|
228
|
+
this._clusterMarker = null;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
addMarkerToMap(device, map) {
|
|
232
|
+
const marker = this.addAssetCallback(device);
|
|
233
|
+
this.markers.push(marker);
|
|
234
|
+
marker.addTo(map);
|
|
235
|
+
}
|
|
236
|
+
setClusterToBigMarker(map, count, leaflet) {
|
|
237
|
+
const bound = this.rect.getBounds();
|
|
238
|
+
const text = this.translateService.instant(gettext('Zoom in'));
|
|
239
|
+
const divMarker = leaflet.divIcon({
|
|
240
|
+
html: `<div class="c8y-map-marker-count" data-count="${count}" title="${text}"></div>`
|
|
241
|
+
});
|
|
242
|
+
const labelIcon = leaflet.marker(bound.getCenter(), {
|
|
243
|
+
icon: divMarker
|
|
244
|
+
});
|
|
245
|
+
labelIcon.addTo(map);
|
|
246
|
+
labelIcon.on('click', () => {
|
|
247
|
+
map.fitBounds(bound);
|
|
248
|
+
});
|
|
249
|
+
this.clusterMarker = labelIcon;
|
|
250
|
+
}
|
|
251
|
+
updateChanges(map) {
|
|
252
|
+
const changes = this.iterableDiffer.diff(this.positions);
|
|
253
|
+
if (changes) {
|
|
254
|
+
changes.forEachRemovedItem((record) => {
|
|
255
|
+
this.removeMarkerFromMap(record.item);
|
|
256
|
+
});
|
|
257
|
+
changes.forEachAddedItem((record) => {
|
|
258
|
+
this.addMarkerToMap(record.item, map);
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
trackBy(index, item) {
|
|
263
|
+
const trackItems = [
|
|
264
|
+
item.id,
|
|
265
|
+
item.c8y_Position.lat,
|
|
266
|
+
item.c8y_Position.lng,
|
|
267
|
+
MapService.getStatus(item)
|
|
268
|
+
];
|
|
269
|
+
return trackItems.join('');
|
|
270
|
+
}
|
|
271
|
+
removeMarkerFromMap(device) {
|
|
272
|
+
const markers = this.markers.filter((marker) => { var _a; return ((_a = marker.asset) === null || _a === void 0 ? void 0 : _a.id) === device.id; });
|
|
273
|
+
markers.forEach(marker => marker.remove());
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
class MapPopupDirective {
|
|
278
|
+
constructor(template, elementRef, viewContainer) {
|
|
279
|
+
this.template = template;
|
|
280
|
+
this.elementRef = elementRef;
|
|
281
|
+
this.viewContainer = viewContainer;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
MapPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
285
|
+
MapPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: MapPopupDirective, selector: "[c8yMapPopup]", ngImport: i0 });
|
|
286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapPopupDirective, decorators: [{
|
|
287
|
+
type: Directive,
|
|
288
|
+
args: [{
|
|
289
|
+
selector: '[c8yMapPopup]'
|
|
290
|
+
}]
|
|
291
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
|
|
292
|
+
|
|
283
293
|
class MapComponent {
|
|
284
294
|
constructor(moRealtimeService, mapService, layers, defaultConfig, translateService) {
|
|
285
295
|
this.moRealtimeService = moRealtimeService;
|
|
@@ -370,7 +380,7 @@ class MapComponent {
|
|
|
370
380
|
getAssetIcon(asset) {
|
|
371
381
|
var _a;
|
|
372
382
|
const assetTypeIcon = this.config.icon || ((_a = asset.icon) === null || _a === void 0 ? void 0 : _a.name);
|
|
373
|
-
const status = getStatus(asset);
|
|
383
|
+
const status = MapService.getStatus(asset);
|
|
374
384
|
const color = this.config.color ? `style='color: ${this.config.color};'` : '';
|
|
375
385
|
const icon = this.leaflet.divIcon({
|
|
376
386
|
html: `<div class="dlt-c8y-icon-marker icon-3x ${status}" ${color}><i class="dlt-c8y-icon-${assetTypeIcon || 'data-transfer'}" /></div>`,
|
|
@@ -954,5 +964,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
954
964
|
* Generated bundle index. Do not edit.
|
|
955
965
|
*/
|
|
956
966
|
|
|
957
|
-
export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, defaultLayer, defaultMapConfig, getC8yMarker
|
|
967
|
+
export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, defaultLayer, defaultMapConfig, getC8yMarker };
|
|
958
968
|
//# sourceMappingURL=c8y-ngx-components-map.mjs.map
|