Feature/lazy loading (#22)

* Implemented lazy loading. Improved icons. Fixed bugs. * Removing package-lock.json
Cumulocity-IoT · Mar 5, 2024 · c42831a · c42831a
1 parent 294b515
commit c42831a
Show file tree

Hide file tree

Showing 21 changed files with 265 additions and 40,110 deletions.
diff --git a/layered-map-widget-plugin/center-map/center-map-modal.component.html b/layered-map-widget-plugin/center-map/center-map-modal.component.html
@@ -31,12 +31,12 @@
     <div class="col-xs-4">
       <div class="form-group form-group-sm">
         <label for="zoomLevel" class="control-label">{{ 'Zoom level' | translate }}</label>
-        <c8y-range [(ngModel)]="manualCenter.zoomLevel" (change)="onUserChangedZoomLevel()">
+        <c8y-range [(ngModel)]="center.zoomLevel" (change)="onUserChangedZoomLevel()">
           <input
             id="zoomLevel"
             type="range"
-            min="1"
-            max="20"
+            min="2"
+            max="18"
             step="1"
           />
         </c8y-range>
@@ -46,8 +46,8 @@
         <div class="form-group form-group-sm m-b-8">
             <label translate>Center bound</label>
             <div class="input-group input-group-sm">
-              <input type="number" required placeholder="lat (required)" name="centerLat" class="form-control" [(ngModel)]="manualCenter.lat" >
-              <input type="number" required placeholder="lng (required)" name="centerLng" class="form-control" [(ngModel)]="manualCenter.long">
+              <input type="number" required placeholder="lat (required)" name="centerLat" class="form-control" [(ngModel)]="center.lat" >
+              <input type="number" required placeholder="lng (required)" name="centerLng" class="form-control" [(ngModel)]="center.long">
               <div class="input-group-btn">
                 <button
                   container="body" 
@@ -67,7 +67,6 @@
 
   <div class="form-group" style="height: 400px">
     <div
-      id="center-map-demo"
       class="map-container"
       [leafletOptions]="options"
       (leafletZoomChange)="onZoomChange($event)"

diff --git a/layered-map-widget-plugin/center-map/center-map-modal.component.ts b/layered-map-widget-plugin/center-map/center-map-modal.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, Input } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ModalLabels } from '@c8y/ngx-components';
 import { LatLng, latLng, Map as LMap, MapOptions, tileLayer } from 'leaflet';
@@ -22,69 +22,71 @@ export class CenterMapModalComponent implements AfterViewInit {
     cancel: 'Cancel',
   };
 
-  manualCenter = {
-    lat: 0,
-    long: 0,
-    zoomLevel: 10,
+  @Input() center: {
+    lat: number;
+    long: number;
+    zoomLevel: number;
   };
 
   options: MapOptions = {
     layers: [
       tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        opacity: 0.7,
         maxZoom: 22,
         detectRetina: true,
       }),
     ],
-    zoom: this.manualCenter.zoomLevel,
-    center: latLng(this.manualCenter.lat ?? 0, this.manualCenter.long ?? 0),
+    zoom: 10,
+    center: latLng(0, 0),
     attributionControl: false,
   };
   map: LMap;
 
   constructor(public bsModalRef: BsModalRef, private geo: LocationGeocoderService) {}
 
-  setCenter(center: { lat: number; long: number; zoomLevel: number }) {
-    this.manualCenter = center;
-    this.map.setView(latLng(center.lat, center.long), center.zoomLevel);
-    this.map.invalidateSize();
-  }
-
   ngAfterViewInit(): void {
-    this.map.invalidateSize();
+    if (this.map) {
+      const { lat, long, zoomLevel } = this.center;
+      if (lat && long && zoomLevel) {
+        const bounds = new LatLng(lat, long);
+        this.map.setView(bounds, zoomLevel);
+      }
+    }
   }
 
   onMapReady(map: LMap): void {
     this.map = map;
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 1000);
   }
 
   onZoomChange(zoom: number): void {
-    this.manualCenter.zoomLevel = zoom;
+    this.center.zoomLevel = zoom;
   }
 
   onCenterChange(center: LatLng): void {
-    this.manualCenter.lat = center.lat;
-    this.manualCenter.long = center.lng;
+    this.center.lat = center.lat;
+    this.center.long = center.lng;
   }
 
   onUserChangedZoomLevel(): void {
-    this.map.setZoom(this.manualCenter.zoomLevel);
+    this.map.setZoom(this.center.zoomLevel);
   }
 
   async navigateToAddress(address: string): Promise<void> {
-    const coords = await this.geo.geoCode(address);
-    if (coords !== null) {
-      this.map.flyTo(coords, this.manualCenter.zoomLevel, { duration: 1 });
+    const { lat, lon } = await this.geo.geoCode(address);
+    if (!isNaN(lat) && !isNaN(lon)) {
+      this.map.flyTo([lat, lon], this.center.zoomLevel, { duration: 1 });
     }
   }
 
   detectUserLocation(): void {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((position) => {
         const { latitude, longitude } = position.coords;
-        this.manualCenter.lat = latitude;
-        this.manualCenter.long = longitude;
-        this.map.flyTo([latitude, longitude], this.manualCenter.zoomLevel, { duration: 1 });
+        this.center.lat = latitude;
+        this.center.long = longitude;
+        this.map.flyTo([latitude, longitude], this.center.zoomLevel, { duration: 1 });
       });
     }
   }
@@ -98,6 +100,6 @@ export class CenterMapModalComponent implements AfterViewInit {
 
   // called if save is pressed
   onClose(): void {
-    this.closeSubject.next(this.manualCenter);
+    this.closeSubject.next(this.center);
   }
 }
diff --git a/layered-map-widget-plugin/draw-line-creator/draw-line-creator-modal.component.ts b/layered-map-widget-plugin/draw-line-creator/draw-line-creator-modal.component.ts
@@ -63,9 +63,9 @@ export class DrawLineCreatorModalComponent implements AfterViewInit {
   }
 
   async navigateToAddress(address: string): Promise<void> {
-    const coords = await this.geo.geoCode(address);
-    if (coords !== null) {
-      this.map.flyTo(coords, 17, { duration: 1 });
+    const { lat, lon } = await this.geo.geoCode(address);
+    if (!isNaN(lat) && !isNaN(lon)) {
+      this.map.flyTo([lat, lon], 17, { duration: 1 });
     }
   }
 

diff --git a/layered-map-widget-plugin/layered-map-widget-config.component.html b/layered-map-widget-plugin/layered-map-widget-config.component.html
@@ -26,8 +26,8 @@
           <input
             id="zoomLevel"
             type="range"
-            min="1"
-            max="20"
+            min="2"
+            max="18"
             step="1"
             [disabled]="config.autoCenter | stringToBool"
           />

diff --git a/layered-map-widget-plugin/layered-map-widget-config.component.ts b/layered-map-widget-plugin/layered-map-widget-config.component.ts
@@ -89,11 +89,10 @@ export class LayeredMapWidgetConfig implements OnInit, DynamicComponent, OnBefor
   }
 
   async openPopoverModal(layer: LayerConfig<BasicLayerConfig>) {
-    const modalRef = this.bsModalService.show(PopoverModalComponent, {});
-    if (layer.config.popoverConfig) {
-      modalRef.content?.setConfig(clone(layer.config.popoverConfig));
-    }
-
+    const initialState = {
+      cfg: cloneDeep(layer.config.popoverConfig),
+    };
+    const modalRef = this.bsModalService.show(PopoverModalComponent, { initialState });
     const close = modalRef.content?.closeSubject.pipe(take(1)).toPromise();
     const popoverConfig = await close;
     if (popoverConfig) {
@@ -102,14 +101,14 @@ export class LayeredMapWidgetConfig implements OnInit, DynamicComponent, OnBefor
   }
 
   async openCenterMapModal() {
-    const modalRef = this.bsModalService.show(CenterMapModalComponent, {});
-    if (this.config.manualCenter) {
-      modalRef.content!.setCenter(clone(this.config.manualCenter));
-    }
-    const modal = modalRef.content?.closeSubject.pipe(take(1)).toPromise();
-    const manualCenter = await modal;
-    if (manualCenter) {
-      this.config.manualCenter = manualCenter;
+    const initialState = {
+      center: cloneDeep(this.config.manualCenter),
+    };
+    const modalRef = this.bsModalService.show(CenterMapModalComponent, { initialState });
+    const modal = modalRef.content.closeSubject.pipe(take(1)).toPromise();
+    const center = await modal;
+    if (center) {
+      this.config.manualCenter = center;
     }
   }
 

diff --git a/layered-map-widget-plugin/layered-map-widget.component.html b/layered-map-widget-plugin/layered-map-widget.component.html
@@ -1,6 +1,5 @@
-<div class="map-container">
+<div class="c8y-map">
   <div
-    id="map"
     leaflet
     class="map-container"
     [leafletOptions]="options"