From de6b503c60b24483405298a5a0598947ba194a9e Mon Sep 17 00:00:00 2001
From: Lars <29163322+Drumber@users.noreply.github.com>
Date: Mon, 20 May 2024 14:14:00 +0200
Subject: [PATCH] FE-#0: Fix mapType is reset when focussing location and focus
 first location in list on init

---
 .../maps-widget/maps-widget.component.html    |  1 +
 .../maps-widget/maps-widget.component.ts      | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/widgets/maps-widget/maps-widget.component.html b/frontend/src/app/widgets/maps-widget/maps-widget.component.html
index 4528ea5..51aa0c1 100644
--- a/frontend/src/app/widgets/maps-widget/maps-widget.component.html
+++ b/frontend/src/app/widgets/maps-widget/maps-widget.component.html
@@ -45,6 +45,7 @@
 
   <mat-drawer-content>
     <google-map
+      #googleMap
       [options]="mapOptions"
       width="100%">
       @for (position of mapsMarkerPositions; track position.lng + "," + position.lat) {
diff --git a/frontend/src/app/widgets/maps-widget/maps-widget.component.ts b/frontend/src/app/widgets/maps-widget/maps-widget.component.ts
index e4805d0..98177f5 100644
--- a/frontend/src/app/widgets/maps-widget/maps-widget.component.ts
+++ b/frontend/src/app/widgets/maps-widget/maps-widget.component.ts
@@ -9,6 +9,7 @@ import {AddLocationDialogComponent} from "./add-location-dialog/add-location-dia
 import {MatDialog} from "@angular/material/dialog";
 import {MatDrawer} from "@angular/material/sidenav";
 import {BaseWidget} from "../../../model/common-widget";
+import {GoogleMap} from "@angular/google-maps";
 
 @Component({
   selector: 'app-maps-widget',
@@ -28,8 +29,7 @@ export class MapsWidgetComponent implements OnInit {
   @Input()
   eventId!: string;
 
-  @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget})
-  widget!: MapWidget;
+  private _widget!: MapWidget;
 
   @Output()
   onWidgetUpdated = new EventEmitter<MapWidget>();
@@ -37,9 +37,13 @@ export class MapsWidgetComponent implements OnInit {
   @ViewChild("drawer")
   private drawer!: MatDrawer;
 
+  @ViewChild("googleMap")
+  private googleMap!: GoogleMap;
+
   mapOptions: google.maps.MapOptions = {
     fullscreenControl: false,
     streetViewControl: false,
+    mapTypeId: "roadmap",
     zoom: 12,
     center: {
       lat: 49.02632,
@@ -63,6 +67,19 @@ export class MapsWidgetComponent implements OnInit {
     });
   }
 
+  @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget})
+  set widget(value: MapWidget) {
+    const hasChanged = value !== this._widget;
+    this._widget = value;
+    if (hasChanged && value.locations.length > 0) {
+      this.focusLocation(value.locations[0]);
+    }
+  }
+
+  get widget(): MapWidget {
+    return this._widget;
+  }
+
   openAddLocationDialog() {
     const dialogRef = this.dialog.open(AddLocationDialogComponent, {width: "400px"});
     dialogRef.afterClosed().subscribe(addCommand => {
@@ -87,7 +104,8 @@ export class MapsWidgetComponent implements OnInit {
     this.mapOptions = {
       ...this.mapOptions,
       zoom: 17,
-      center: this.locationToLatLngLiteral(location)
+      center: this.locationToLatLngLiteral(location),
+      mapTypeId: this.googleMap ? this.googleMap.getMapTypeId() : this.mapOptions.mapTypeId
     };
 
     if (this.isSmallLayout) {