dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map widget loading indicator

Browse Source
This commit is contained in:
Igor Kulikov 2020-08-07 18:26:06 +03:00
parent b2cb7c141c
commit 6a4cd0d54a
3 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -39,7 +39,7 @@ import { BehaviorSubject, Observable, of } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Polyline } from './polyline';
import { Polygon } from './polygon';
import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
import { createLoadingDiv, createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
import { WidgetContext } from '@home/models/widget-component.models';
import { DatasourceData } from '@shared/models/widget.models';
import { deepClone, isDefinedAndNotNull } from '@core/utils';
@ -60,6 +60,8 @@ export default abstract class LeafletMap {
markersData: FormattedData[] = [];
polygonsData: FormattedData[] = [];
defaultMarkerIconInfo: { size: number[], icon: Icon };
loadingDiv: JQuery<HTMLElement>;
loading = false;
protected constructor(public ctx: WidgetContext,
public $container: HTMLElement,
@ -169,6 +171,24 @@ export default abstract class LeafletMap {
}
}
public setLoading(loading: boolean) {
if (this.loading !== loading) {
this.loading = loading;
this.ready$.subscribe(() => {
if (this.loading) {
if (!this.loadingDiv) {
this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading'));
}
this.$container.append(this.loadingDiv[0]);
} else {
if (this.loadingDiv) {
this.loadingDiv.remove();
}
}
});
}
}
public setMap(map: L.Map) {
this.map = map;
if (this.options.useDefaultCenterPosition) {

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -85,6 +85,7 @@ export class MapWidgetController implements MapWidgetInterface {
textSearch: null,
dynamic: true
};
this.map.setLoading(true);
this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null);
}
@ -279,6 +280,7 @@ export class MapWidgetController implements MapWidgetInterface {
if (this.settings.draggableMarker) {
this.map.setDataSources(formattedData);
}
this.map.setLoading(false);
}
resize() {

25
ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View File

@ -322,3 +322,28 @@ export function calculateNewPointCoordinate(coordinate: number, imageSize: numbe
}
return pointCoordinate;
}
export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> {
return $(`
<div style="
z-index: 12;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
display: flex;
background: rgba(255,255,255,0.7);
font-size: 16px;
font-family: Roboto;
font-weight: 400;
text-transform: uppercase;
">
<span>${loadingText}</span>
</div>
`);
}