save current show in global store

src/app/modules/presentation/monitor/monitor.component.ts

@@ -1,10 +1,10 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {map, switchMap, tap} from 'rxjs/operators';
+import {distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {SongService} from '../../songs/services/song.service';
 import {Section, TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Song} from '../../songs/services/song';
+import {GlobalSettingsService} from '../../../services/global-settings.service';
 
 @Component({
   selector: 'app-monitor',
@@ -18,16 +18,17 @@ export class MonitorComponent implements OnInit {
   private sections: Section[];
 
   constructor(
-    private activatedRoute: ActivatedRoute,
     private showService: ShowService,
     private songService: SongService,
     private textRenderingService: TextRenderingService,
+    private globalSettingsService: GlobalSettingsService,
   ) {
   }
 
   ngOnInit(): void {
-    this.activatedRoute.params.pipe(
-      map(_ => _.showId),
+    this.globalSettingsService.get$.pipe(
+      map(_ => _.currentShow),
+      distinctUntilChanged(),
       switchMap(_ => this.showService.read$(_)),
       tap(_ => this.index = _.presentationSection),
       tap(_ => this.zoom = _.presentationZoom ?? 30),

src/app/modules/presentation/presentation-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
     component: RemoteComponent
   },
   {
-    path: 'monitor/:showId',
+    path: 'monitor',
     component: MonitorComponent
   }
 ];

src/app/modules/presentation/presentation.module.ts

@@ -14,7 +14,7 @@ import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 
 
@@ -33,7 +33,8 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
     FontAwesomeModule,
     MatSliderModule,
     FormsModule,
-    AddSongModule
+    AddSongModule,
+    ReactiveFormsModule
   ]
 })
 export class PresentationModule {

src/app/modules/presentation/remote/remote.component.html

@@ -5,7 +5,7 @@
 
     <mat-form-field *ngIf="shows.length>0" appearance="outline">
       <mat-label>Veranstaltung</mat-label>
-      <mat-select (selectionChange)="onShowChanged($event)">
+      <mat-select [formControl]="showControl">
         <mat-option *ngFor="let show of shows" [value]="show.id">
           {{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}
         </mat-option>
@@ -27,7 +27,7 @@
     </div>
 
     <div *ngIf="show" class="div-bottom">
-      <a [routerLink]="'/presentation/monitor/' + currentShowId">
+      <a routerLink="/presentation/monitor" target="_blank">
         <fa-icon [icon]="faDesktop"></fa-icon>
       </a>
 

src/app/modules/presentation/remote/remote.component.ts

@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
 import {Show} from '../../shows/services/show';
-import {MatSelectChange} from '@angular/material/select';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -9,6 +8,9 @@ import {Section, TextRenderingService} from '../../songs/services/text-rendering
 import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
+import {GlobalSettingsService} from '../../../services/global-settings.service';
+import {FormControl} from '@angular/forms';
+import {distinctUntilChanged, map} from 'rxjs/operators';
 
 export interface PresentationSong {
   id: string;
@@ -30,21 +32,30 @@ export class RemoteComponent {
   public currentShowId: string;
 
   public faDesktop = faDesktop;
+  public showControl = new FormControl();
 
   constructor(
     private showService: ShowService,
     private showSongService: ShowSongService,
     private songService: SongService,
     private textRenderingService: TextRenderingService,
+    private globalSettingsService: GlobalSettingsService,
   ) {
     this.shows$ = showService.list$(true);
     songService.list$().subscribe(_ => this.songs = _);
+
+    globalSettingsService.get$.pipe(
+      map(_ => _.currentShow),
+      distinctUntilChanged()
+    ).subscribe(_ => this.showControl.setValue(_));
+    this.showControl.valueChanges.subscribe(value => this.onShowChanged(value));
   }
 
-  public onShowChanged(change: MatSelectChange): void {
-    this.currentShowId = change.value;
-    this.showService.read$(change.value).subscribe(_ => this.show = _);
-    this.showSongService.list$(change.value).subscribe(_ => {
+  public onShowChanged(change: string): void {
+    this.globalSettingsService.set({currentShow: change});
+    this.currentShowId = change;
+    this.showService.read$(change).subscribe(_ => this.show = _);
+    this.showSongService.list$(change).subscribe(_ => {
       this.showSongs = _;
       this.presentationSongs = _
         .map(song => this.songs.filter(f => f.id == song.songId)[0])