Merge pull request water-fountains#494 from tegonal/shared-location

water-fountains#491 loc / water-fountains#493 map.resize / water-fountains#489 switch between cities

package.json

@@ -45,7 +45,7 @@
     "haversine": "^1.1.0",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",
-    "mapbox-gl": "^2.5.1",
+    "mapbox-gl": "^2.6.1",
     "rxjs": "^6.6.7",
     "tassign": "^1.0.0",
     "ts-md5": "^1.2.8",
@@ -68,11 +68,11 @@
     "@types/haversine": "^1.1.0",
     "@types/jasmine": "^3.10.1",
     "@types/jasminewd2": "^2.0.9",
-    "@types/leaflet": "^1.7.0",
     "@types/js-md5": "^0.4.3",
-    "@types/node": "^14.0.0",
-    "@types/mapbox-gl": "^2.4.2",
+    "@types/leaflet": "^1.7.0",
     "@types/lodash": "^4.14.175",
+    "@types/mapbox-gl": "^2.6.0",
+    "@types/node": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "4.23.0",
     "@typescript-eslint/parser": "4.23.0",
     "eslint": "^7.32.0",

src/app/app.component.html

@@ -52,7 +52,10 @@
         >
           <mat-icon>arrow_back</mat-icon> <span translate>action.return</span>
         </button>
-        <div class="detail-from-bottom" *ngIf="mode === 'details' && (fountainSelectorObservable | async) !== null">
+        <div
+          class="detail-from-bottom"
+          *ngIf="mode === 'details' && (fountainSelectorObservable | async) !== undefined"
+        >
           <div class="centering">
             <button mat-mini-fab color="basic" (click)="returnToMap()" class="mat-elevation-z4">
               <mat-icon>close</mat-icon>

src/app/app.component.ts

@@ -19,8 +19,8 @@ import { IssueService } from './issues/issue.service';
 import { SubscriptionService } from './core/subscription.service';
 import { LayoutService } from './core/layout.service';
 import { FountainService } from './fountain/fountain.service';
-import { of } from 'rxjs';
 import { MatSidenav } from '@angular/material/sidenav';
+import { filterUndefined } from './shared/ObservableExtensions';
 
 @Component({
   selector: 'app-root',
@@ -109,24 +109,21 @@ export class AppComponent implements OnInit {
         }
       }),
       this.fountainService.selectedProperty
-        .switchMap(p => {
-          if (p !== null) {
-            if (!this.propertyDialogIsOpen) {
-              this.propertyDialog = this.dialog.open(FountainPropertyDialogComponent, {
-                maxWidth: 1000,
-                width: '800px',
-              });
-              this.propertyDialogIsOpen = true;
-            }
-            return this.propertyDialog.afterClosed().tap(() => {
-              this.fountainService.deselectProperty();
-              this.propertyDialogIsOpen = false;
+        .pipe(filterUndefined())
+        .switchMap(_ => {
+          if (!this.propertyDialogIsOpen) {
+            this.propertyDialog = this.dialog.open(FountainPropertyDialogComponent, {
+              maxWidth: 1000,
+              width: '800px',
             });
-          } else {
-            return of(undefined);
+            this.propertyDialogIsOpen = true;
           }
+          return this.propertyDialog.afterClosed().tap(() => {
+            this.fountainService.deselectProperty();
+            this.propertyDialogIsOpen = false;
+          });
         })
-        .subscribe(_ => undefined /* nothing to do in addition as side effect happens in tap */)
+        .subscribe(_ => undefined /* nothing to do in addition as side effect happens in switchMap and tap */)
     );
 
     // intro dialog for

src/app/app.module.ts

@@ -57,7 +57,7 @@ import { LayoutService } from './core/layout.service';
 import { DirectionsService } from './directions/directions.service';
 import { FountainService } from './fountain/fountain.service';
 import { ConfigBasedParserService } from './core/config-based-parser.service';
-import { CityService } from './city/city.service';
+import { MapService } from './city/map.service';
 import { CitySelectorComponent } from './city/city-selector.component';
 import { LanguageSelectorComponent } from './core/language-selector.component';
 
@@ -149,7 +149,7 @@ import { LanguageSelectorComponent } from './core/language-selector.component';
     LayoutService,
     DirectionsService,
     FountainService,
-    CityService,
+    MapService,
     ConfigBasedParserService,
   ],
   bootstrap: [AppComponent],

src/app/city/city-selector.component.html

@@ -4,4 +4,5 @@
   [options]="cities"
   [valueObservable]="cityObservable"
   [changeHook]="changeCity.bind(this)"
+  pleaseSelectKey="selectCity"
 ></app-select>

src/app/city/city-selector.component.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { LayoutService } from '../core/layout.service';
 import { DataService } from '../data.service';
 import { City } from '../locations';
-import { CityService } from './city.service';
+import { MapService } from './map.service';
 
 @Component({
   selector: 'app-city-selector',
@@ -13,14 +13,10 @@ import { CityService } from './city.service';
 export class CitySelectorComponent {
   @Input() tooltipText!: string;
 
-  constructor(
-    private dataService: DataService,
-    private cityService: CityService,
-    private layoutService: LayoutService
-  ) {}
+  constructor(private dataService: DataService, private mapService: MapService, private layoutService: LayoutService) {}
 
   public cities: City[] = this.dataService.getLocationMetadata()[1];
-  public cityObservable: Observable<City | undefined> = this.cityService.city;
+  public cityObservable: Observable<City | undefined> = this.mapService.city;
 
   changeCity(city: City): void {
     this.layoutService.flyToCity(city);