Commit 6a4cd0d54a00e09c9b115377d3c5def1345d81d7

Authored by Igor Kulikov
1 parent b2cb7c14

Add map widget loading indicator

@@ -39,7 +39,7 @@ import { BehaviorSubject, Observable, of } from 'rxjs'; @@ -39,7 +39,7 @@ import { BehaviorSubject, Observable, of } from 'rxjs';
39 import { filter } from 'rxjs/operators'; 39 import { filter } from 'rxjs/operators';
40 import { Polyline } from './polyline'; 40 import { Polyline } from './polyline';
41 import { Polygon } from './polygon'; 41 import { Polygon } from './polygon';
42 -import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; 42 +import { createLoadingDiv, createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
43 import { WidgetContext } from '@home/models/widget-component.models'; 43 import { WidgetContext } from '@home/models/widget-component.models';
44 import { DatasourceData } from '@shared/models/widget.models'; 44 import { DatasourceData } from '@shared/models/widget.models';
45 import { deepClone, isDefinedAndNotNull } from '@core/utils'; 45 import { deepClone, isDefinedAndNotNull } from '@core/utils';
@@ -60,6 +60,8 @@ export default abstract class LeafletMap { @@ -60,6 +60,8 @@ export default abstract class LeafletMap {
60 markersData: FormattedData[] = []; 60 markersData: FormattedData[] = [];
61 polygonsData: FormattedData[] = []; 61 polygonsData: FormattedData[] = [];
62 defaultMarkerIconInfo: { size: number[], icon: Icon }; 62 defaultMarkerIconInfo: { size: number[], icon: Icon };
  63 + loadingDiv: JQuery<HTMLElement>;
  64 + loading = false;
63 65
64 protected constructor(public ctx: WidgetContext, 66 protected constructor(public ctx: WidgetContext,
65 public $container: HTMLElement, 67 public $container: HTMLElement,
@@ -169,6 +171,24 @@ export default abstract class LeafletMap { @@ -169,6 +171,24 @@ export default abstract class LeafletMap {
169 } 171 }
170 } 172 }
171 173
  174 + public setLoading(loading: boolean) {
  175 + if (this.loading !== loading) {
  176 + this.loading = loading;
  177 + this.ready$.subscribe(() => {
  178 + if (this.loading) {
  179 + if (!this.loadingDiv) {
  180 + this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading'));
  181 + }
  182 + this.$container.append(this.loadingDiv[0]);
  183 + } else {
  184 + if (this.loadingDiv) {
  185 + this.loadingDiv.remove();
  186 + }
  187 + }
  188 + });
  189 + }
  190 + }
  191 +
172 public setMap(map: L.Map) { 192 public setMap(map: L.Map) {
173 this.map = map; 193 this.map = map;
174 if (this.options.useDefaultCenterPosition) { 194 if (this.options.useDefaultCenterPosition) {
@@ -85,6 +85,7 @@ export class MapWidgetController implements MapWidgetInterface { @@ -85,6 +85,7 @@ export class MapWidgetController implements MapWidgetInterface {
85 textSearch: null, 85 textSearch: null,
86 dynamic: true 86 dynamic: true
87 }; 87 };
  88 + this.map.setLoading(true);
88 this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null); 89 this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null);
89 } 90 }
90 91
@@ -279,6 +280,7 @@ export class MapWidgetController implements MapWidgetInterface { @@ -279,6 +280,7 @@ export class MapWidgetController implements MapWidgetInterface {
279 if (this.settings.draggableMarker) { 280 if (this.settings.draggableMarker) {
280 this.map.setDataSources(formattedData); 281 this.map.setDataSources(formattedData);
281 } 282 }
  283 + this.map.setLoading(false);
282 } 284 }
283 285
284 resize() { 286 resize() {
@@ -322,3 +322,28 @@ export function calculateNewPointCoordinate(coordinate: number, imageSize: numbe @@ -322,3 +322,28 @@ export function calculateNewPointCoordinate(coordinate: number, imageSize: numbe
322 } 322 }
323 return pointCoordinate; 323 return pointCoordinate;
324 } 324 }
  325 +
  326 +export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> {
  327 + return $(`
  328 + <div style="
  329 + z-index: 12;
  330 + position: absolute;
  331 + top: 0;
  332 + bottom: 0;
  333 + left: 0;
  334 + right: 0;
  335 + flex-direction: column;
  336 + align-content: center;
  337 + align-items: center;
  338 + justify-content: center;
  339 + display: flex;
  340 + background: rgba(255,255,255,0.7);
  341 + font-size: 16px;
  342 + font-family: Roboto;
  343 + font-weight: 400;
  344 + text-transform: uppercase;
  345 + ">
  346 + <span>${loadingText}</span>
  347 + </div>
  348 + `);
  349 +}