Merge pull request #421 from openITCOCKPIT/ITC-3634

ITC-3634 Refactor handline of map loading to not reload the entire pa…

Author: ibering

src/app/modules/map_module/pages/mapeditors/mapeditors-view/mapeditors-view.component.html

@@ -104,8 +104,7 @@ <h5 cCardTitle>
             @if (map) {
                 <!-- start map-editor -->
                 <div id="map-editor" class="map-editor">
-                    <oitc-map-view class="widget-body" [mapId]="map.Map.id" *ngIf="map">
-                    </oitc-map-view>
+                    <oitc-map-view class="widget-body" [mapId]="map.Map.id"></oitc-map-view>
                 </div>
                 <!-- end map-editor -->
             }

src/app/modules/map_module/pages/mapeditors/mapeditors-view/mapeditors-view.component.ts

@@ -8,7 +8,7 @@ import {
     OnInit
 } from '@angular/core';
 import { interval, Subscription } from 'rxjs';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { GenericValidationError } from '../../../../../generic-responses';
 import { PermissionsService } from '../../../../../permissions/permissions.service';
 import { MapeditorsService } from '../mapeditors.service';
@@ -27,7 +27,6 @@ import { PermissionDirective } from '../../../../../permissions/permission.direc
 import { BackButtonDirective } from '../../../../../directives/back-button.directive';
 import { NgClass, NgIf } from '@angular/common';
 import { XsButtonDirective } from '../../../../../layouts/coreui/xsbutton-directive/xsbutton.directive';
-import { parseInt } from 'lodash';
 import { MapViewComponent } from '../../../components/map-view/map-view.component';
 import { SidebarService } from '../../../../../layouts/coreui/coreui-navbar/sidebar.service';
 
@@ -61,14 +60,14 @@ export class MapeditorsViewComponent implements OnInit, OnDestroy, AfterViewInit
     private MapeditorsService: MapeditorsService = inject(MapeditorsService);
     public PermissionsService: PermissionsService = inject(PermissionsService);
     readonly sidebarService: SidebarService = inject(SidebarService);
-    private route = inject(ActivatedRoute);
+    public readonly route = inject(ActivatedRoute);
+    public readonly router = inject(Router);
     public errors: GenericValidationError | null = null;
     private cdr = inject(ChangeDetectorRef);
 
     public map!: MapeditorsViewMap;
-    private init = true;
     protected mapId: number = 0;
-    protected rotate: null | string | string[] = null;
+    protected rotate: string[] = [];
 
     protected fullscreen: boolean = false;
     private rotationInterval: number = 0;
@@ -79,49 +78,49 @@ export class MapeditorsViewComponent implements OnInit, OnDestroy, AfterViewInit
     private refreshInterval: number = 0;
 
     public ngOnInit(): void {
-        this.mapId = Number(this.route.snapshot.paramMap.get('id'));
-        this.fullscreen = (this.route.snapshot.paramMap.get('fullscreen') === 'true');
-        let rotationParam = this.route.snapshot.paramMap.get('rotation');
-        if (rotationParam != null) this.rotate = rotationParam;
-        let intervalParam = this.route.snapshot.paramMap.get('interval');
-        if (intervalParam != null) {
-            this.rotationInterval = parseInt(intervalParam, 10) * 1000;
-            this.intervalParam = parseInt(intervalParam, 10);
-        }
-        this.loadMapDetails();
 
-        if (this.rotate !== null && this.rotationInterval > 0) {
-            if (typeof this.rotate === "string") {
-                this.rotate = this.rotate.split(',');
+        this.subscriptions.add(this.route.params.subscribe(params => {
+            this.mapId = Number(params['id'] ?? 0);
+            this.fullscreen = (params['fullscreen'] ?? 'false') === 'true';
+
+            let rotationParam = params['rotation']
+            if (rotationParam) {
+                this.rotate = String(rotationParam).split(',');
             }
 
-            this.intervalSubscription = interval(this.rotationInterval).subscribe(() => {
-                this.rotationPosition++;
-                if (this.rotate != null && (this.rotationPosition > this.rotate.length)) {
-                    this.rotationPosition = 1;
-                }
+            let intervalParam = Number(params['interval'] ?? 0);
+            if (isNaN(intervalParam)) {
+                intervalParam = 90;
+            }
+            this.rotationInterval = intervalParam * 1000;
+
+
+            // Load the current map / first map of a rotation
+            this.loadMapDetails();
+            this.cdr.markForCheck();
+
+            if (this.rotate.length > 0) {
+                // Handle map rotations
+                this.intervalSubscription = interval(this.rotationInterval).subscribe(() => {
+                    this.rotationPosition++;
+                    if (this.rotate != null && (this.rotationPosition > this.rotate.length)) {
+                        this.rotationPosition = 1;
+                    }
 
-                if (this.rotate != null) {
                     this.mapId = Number(this.rotate[this.rotationPosition - 1]);
-                }
-                this.loadMapDetails();
-                this.cdr.markForCheck();
-            });
-        }
 
-        this.subscriptions.add(this.route.params.subscribe(params => {
-            // reload page to display new map
-            if (params['id'] !== undefined && params['id'] !== null && params['id'] !== '' && params['id'] !== this.mapId.toString()) {
-                window.location.reload();
+                    this.loadMapDetails();
+                    this.cdr.markForCheck();
+                });
             }
         }));
+
+
     }
 
     public ngOnDestroy(): void {
         this.subscriptions.unsubscribe();
-        if (this.intervalSubscription) {
-            this.intervalSubscription.unsubscribe();
-        }
+        this.intervalSubscription.unsubscribe();
         this.toggleFullscreenMode(false, true);
         this.cdr.markForCheck();
     }
@@ -138,7 +137,6 @@ export class MapeditorsViewComponent implements OnInit, OnDestroy, AfterViewInit
                 if (this.refreshInterval !== 0 && this.refreshInterval < 5000) {
                     this.refreshInterval = 5000;
                 }
-                this.init = false;
                 this.cdr.markForCheck();
             }));
     };
@@ -166,5 +164,4 @@ export class MapeditorsViewComponent implements OnInit, OnDestroy, AfterViewInit
         this.cdr.markForCheck();
     }
 
-    protected readonly Array = Array;
 }