save current show in global store

firestore.rules

@@ -23,6 +23,11 @@ service cloud.firestore {
       allow write: if request.auth.uid != null;
     }
 
+    match /global/{global} {
+      allow read: if request.auth.uid != null;
+      allow write: if request.auth.uid != null;
+    }
+
   }
 }
 

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

@@ -1,10 +1,10 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
-import {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(
+    this.globalSettingsService.get$.pipe(
-      map(_ => _.showId),
+      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 {
+  public onShowChanged(change: string): void {
-    this.currentShowId = change.value;
+    this.globalSettingsService.set({currentShow: change});
-    this.showService.read$(change.value).subscribe(_ => this.show = _);
+    this.currentShowId = change;
-    this.showSongService.list$(change.value).subscribe(_ => {
+    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])

src/app/services/global-settings.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {GlobalSettingsService} from './global-settings.service';
+
+describe('GlobalSettingsService', () => {
+  let service: GlobalSettingsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GlobalSettingsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/global-settings.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {DbService} from './db.service';
+import {GlobalSettings} from './global-settings';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalSettingsService {
+  constructor(private db: DbService) {
+  }
+
+  public get get$(): Observable<GlobalSettings> {
+    return this.db.doc$<GlobalSettings>('global/static');
+  }
+
+  public async set(data: Partial<GlobalSettings>) {
+    await this.db.doc<GlobalSettings>('global/static').update(data);
+  }
+
+}

src/app/services/global-settings.ts

@@ -0,0 +1,3 @@
+export interface GlobalSettings {
+  currentShow: string
+}