optimize styling definitions

.run/build.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="build"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>

.run/deploy.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="deploy" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="deploy"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>

angular.json

@@ -49,7 +49,9 @@
             "optimization": false,
             "namedChunks": true,
             "allowedCommonJsDependencies": [
-              "lodash", "docx"
+              "lodash",
+              "docx",
+              "qrcode"
             ]
           },
           "configurations": {
@@ -88,18 +90,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "wgenerator:build"
+            "buildTarget": "wgenerator:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "wgenerator:build:production"
+              "buildTarget": "wgenerator:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "wgenerator:build"
+            "buildTarget": "wgenerator:build"
           }
         },
         "test": {
@@ -147,5 +149,13 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

firestore.rules

@@ -17,6 +17,10 @@ service cloud.firestore {
       allow read: if request.auth.uid != null;
     }
 
+    match /guest/{guestId} {
+      allow read: if true;
+      allow write: if request.auth.uid != null;
+    }
     match /songs/{song} {
       allow read: if request.auth.uid != null;
       allow write: if request.auth.uid != null;

package.json

@@ -1,75 +1,70 @@
 {
   "name": "wgenerator",
-  "version": "1.3",
+  "version": "1.6",
   "scripts": {
     "start": "ng serve",
     "build": "ng build",
     "deploy": "ng build --configuration production && firebase deploy",
     "test": "ng test",
     "lint": "ng lint --fix",
-    "postinstall": "ngcc"
+    "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.10",
-    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.10",
-    "@angular/compiler": "^14.2.10",
-    "@angular/core": "^14.2.10",
-    "@angular/fire": "^7.4.1",
-    "@angular/forms": "^14.2.10",
-    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^14.2.10",
-    "@angular/platform-browser-dynamic": "^14.2.10",
-    "@angular/router": "^14.2.10",
-    "@angular/service-worker": "^14.2.10",
-    "@fortawesome/angular-fontawesome": "^0.11.1",
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "docx": "^7.4.1",
-    "firebase": "^9.6.10",
+    "@angular/animations": "^17.2.2",
+    "@angular/cdk": "^17.2.1",
+    "@angular/common": "^17.2.2",
+    "@angular/compiler": "^17.2.2",
+    "@angular/core": "^17.2.2",
+    "@angular/fire": "^17.0.1",
+    "@angular/forms": "^17.2.2",
+    "@angular/material": "^17.2.1",
+    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/router": "^17.2.2",
+    "@angular/service-worker": "^17.2.2",
+    "@fortawesome/angular-fontawesome": "^0.14.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "docx": "^8.5.0",
+    "firebase": "^10.8.0",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^4.2.1",
-    "ngx-perfect-scrollbar": "^10.1.1",
-    "rxfire": "^6.0.3",
-    "rxjs": "~7.5.6",
-    "swiper": "^9.3.2",
-    "tslib": "^2.4.0",
-    "uuid": "^8.3.2",
-    "zone.js": "~0.11.8"
+    "ngx-mat-select-search": "^7.0.5",
+    "qrcode": "^1.5.3",
+    "rxfire": "^6.0.5",
+    "rxjs": "~7.8.1",
+    "swiper": "^11.0.6",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1402.9",
-    "@angular-devkit/build-angular": "^14.2.9",
-    "@angular-eslint/builder": "14.1.2",
-    "@angular-eslint/eslint-plugin": "14.1.2",
-    "@angular-eslint/eslint-plugin-template": "14.1.2",
-    "@angular-eslint/schematics": "14.1.2",
-    "@angular-eslint/template-parser": "14.1.2",
-    "@angular/cli": "^14.2.9",
-    "@angular/compiler-cli": "^14.2.10",
-    "@angular/language-service": "^14.2.10",
-    "@types/jasmine": "~4.0.3",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/lodash": "^4.14.182",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "firebase-tools": "^11.6.0",
-    "fuzzy": "^0.1.3",
-    "inquirer": "^9.1.0",
-    "inquirer-autocomplete-prompt": "^2.0.0",
-    "jasmine-core": "~4.3.0",
+    "@angular-devkit/architect": "0.1702.1",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.2.2",
+    "@angular/language-service": "^17.2.2",
+    "@types/jasmine": "~5.1.4",
+    "@types/jasminewd2": "~2.0.13",
+    "@types/lodash": "^4.14.202",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "firebase-tools": "^13.3.1",
+    "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "^2.7.1",
-    "protractor": "~7.0.0",
-    "typescript": "~4.7.4"
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.3.3"
   }
 }

src/app/app-routing.module.ts

@@ -54,7 +54,8 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
-      relativeLinkResolution: 'legacy',
+      scrollPositionRestoration: 'enabled',
+      // relativeLinkResolution: 'legacy',
     }),
   ],
   exports: [RouterModule],

src/app/app.component.html

@@ -1,12 +1,6 @@
 <app-navigation></app-navigation>
-<perfect-scrollbar
-  #scrollbar
-  (psScrollY)="onScoll($event)"
-  [perfectScrollbar]
-  class="scroll"
-  style="max-height: calc(100vh); width: 100%; overflow: hidden"
->
-  <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+
+<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
     <router-outlet #o="outlet"></router-outlet>
   </div>
-</perfect-scrollbar>
+

src/app/app.component.less

@@ -1,10 +1,3 @@
 h1 {
   color: red;
 }
-
-
-.manager {
-  //display: grid;
-  //grid-template-columns: 1fr 1fr;
-  //transition: all 1s ease-in-out;
-}

src/app/app.component.ts

@@ -1,7 +1,6 @@
-import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
-import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
 import {register} from 'swiper/element/bundle';
 
 @Component({
@@ -12,12 +11,7 @@ import {register} from 'swiper/element/bundle';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
-
   public constructor(private scrollService: ScrollService) {
-    scrollService.restoreScrollPosition$.subscribe(pos => {
-      if (this.scrollbar && pos) this.scrollbar.directiveRef?.scrollTo(0, pos, 300);
-    });
     register();
   }
 

src/app/app.module.ts

@@ -15,7 +15,6 @@ import {AngularFireAuthModule} from '@angular/fire/compat/auth';
 import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [AppComponent],
@@ -37,7 +36,6 @@ import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
     FontAwesomeModule,
-    PerfectScrollbarModule,
   ],
   providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
   bootstrap: [AppComponent],

src/app/modules/brand/brand.component.html

@@ -1,4 +1,4 @@
 <div class="brand">
   <app-logo></app-logo>
-  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2024 - Benjamin Ifland</div>
 </div>

src/app/modules/guest/guest-show-data.service.ts

@@ -0,0 +1,23 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {DbService} from 'src/app/services/db.service';
+import {GuestShow} from './guest-show';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowDataService {
+  public list$: BehaviorSubject<GuestShow[]> = new BehaviorSubject<GuestShow[]>([]);
+  private collection = 'guest';
+
+  public constructor(private dbService: DbService) {
+    this.dbService.col$<GuestShow>(this.collection).subscribe(_ => this.list$.next(_));
+  }
+
+  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.list$.pipe(map(_ => _.find(s => s.id === id) || null));
+  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + id).update(data);
+  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
+  public delete: (id: string) => Promise<void> = async (id: string): Promise<void> => await this.dbService.doc(this.collection + '/' + id).delete();
+}

src/app/modules/guest/guest-show.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Show} from '../shows/services/show';
+import {Song} from '../songs/services/song';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ShowService} from '../shows/services/show.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowService {
+  public constructor(
+    private showService: ShowService,
+    private guestShowDataService: GuestShowDataService
+  ) {}
+
+  public async share(show: Show, songs: Song[]): Promise<string> {
+    const data = {
+      showType: show.showType,
+      date: show.date,
+      songs: songs,
+    };
+
+    if (!show.shareId) {
+      const shareId = await this.guestShowDataService.add(data);
+      await this.showService.update$(show.id, {shareId});
+    } else {
+      await this.guestShowDataService.update$(show.shareId, data);
+    }
+
+    return window.location.protocol + '//' + window.location.host + '/guest/' + show.shareId;
+  }
+}

src/app/modules/guest/guest-show.ts

@@ -0,0 +1,10 @@
+import firebase from 'firebase/compat/app';
+import {Song} from '../songs/services/song';
+import Timestamp = firebase.firestore.Timestamp;
+
+export interface GuestShow {
+  id: string;
+  showType: string;
+  date: Timestamp;
+  songs: Song[];
+}

src/app/modules/guest/guest.component.html

@@ -1,11 +1,25 @@
-<div *ngIf="songs$ | async as songs" class="view">
-<!--  <swiper>-->
-<!--    <div *ngFor="let song of songs" class="song">-->
-<!--      <app-song-text-->
-<!--        [showSwitch]="false"-->
-<!--        [text]="song"-->
-<!--        chordMode="hide"-->
-<!--      ></app-song-text>-->
-<!--    </div>-->
-<!--  </swiper>-->
+<div *ngIf="show$|async as show" class="page">
+  <div class="title">
+    <div class="left">{{ show.showType|showType }}</div>
+    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+  </div>
+
+  <div class="view">
+    <swiper-container scrollbar="true">
+      <swiper-slide *ngFor="let song of show.songs; let i = index; trackBy: trackBy"
+                    class="song-swipe">
+        <div class="song-title">{{ song.title }}</div>
+
+        <div class="legal">
+          <p *ngIf="song.artist">{{ song.artist }}</p>
+        </div>
+
+        <app-song-text
+          [text]="song.text"
+        ></app-song-text>
+      </swiper-slide>
+    </swiper-container>
+  </div>
 </div>
+
+

src/app/modules/guest/guest.component.less

@@ -1,12 +1,49 @@
+.page {
+  background: #0009;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(8px);
+
+  --swiper-scrollbar-bg-color: #fff3;
+  --swiper-scrollbar-drag-bg-color: #fff9;
+  --swiper-scrollbar-sides-offset: 20px;
+  --swiper-scrollbar-top: 100px;
+  --swiper-scrollbar-bottom: auto;
+}
+
+.title {
+  color: white;
+  padding: 70px 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left {
+    font-size: 1.8em;
+    color: #fff;
+  }
+}
+
+.song-title {
+  padding: 20px 20px 0;
+  font-size: 1.3em;
+}
+
+.legal {
+  padding: 0 20px;
+  font-size: 0.6em;
+  color: #fff9;
+}
+
 .view {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: #0003;
-  backdrop-filter: blur(10px);
-  z-index: 1;
   color: white;
 }
 
@@ -14,3 +51,9 @@ app-song-text {
   margin: 20px;
   display: block;
 }
+
+.song-swipe {
+  margin-top: 100px;
+  margin-bottom: 50px;
+  min-height: calc(100vh - 150px);
+}

src/app/modules/guest/guest.component.ts

@@ -1,11 +1,9 @@
 import {Component} from '@angular/core';
-import {SongService} from '../songs/services/song.service';
-import {GlobalSettingsService} from '../../services/global-settings.service';
-import {Observable} from 'rxjs';
-import {filter, map, switchMap} from 'rxjs/operators';
-import {ShowSongService} from '../shows/services/show-song.service';
-import {GlobalSettings} from '../../services/global-settings';
-import {ShowService} from '../shows/services/show.service';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ActivatedRoute} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+import {Song} from '../songs/services/song';
+import {ConfigService} from '../../services/config.service';
 
 @Component({
   selector: 'app-guest',
@@ -13,20 +11,17 @@ import {ShowService} from '../shows/services/show.service';
   styleUrls: ['./guest.component.less'],
 })
 export class GuestComponent {
-  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-    filter(_ => !!_),
-    map(_ => _ as GlobalSettings),
-    map(_ => _.currentShow),
-    switchMap(_ => this.showSongService.list$(_).pipe(map(l => ({showSongs: l, currentShow: _})))),
-    switchMap(_ => this.showService.read$(_.currentShow).pipe(map(l => ({showSongs: _.showSongs, show: l})))),
-    filter(_ => !!_.showSongs),
-    map(_ => (_?.show ? _.show.order.map(o => _.showSongs.find(f => f.id === o) ?? _.showSongs[0]).map(m => m.text) : []))
+  public show$ = this.currentRoute.params.pipe(
+    map(param => param.id as string),
+    switchMap(id => this.service.read$(id))
   );
+  public config$ = this.configService.get$();
 
   public constructor(
-    private songService: SongService,
-    private showService: ShowService,
-    private globalSettingsService: GlobalSettingsService,
-    private showSongService: ShowSongService
+    private currentRoute: ActivatedRoute,
+    private service: GuestShowDataService,
+    private configService: ConfigService
   ) {}
+
+  public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/guest/guest.module.ts

@@ -1,11 +1,23 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 
 @NgModule({
   declarations: [GuestComponent],
-  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: ':id',
+        component: GuestComponent,
+      },
+    ]),
+    SongTextModule,
+    ShowTypeTranslaterModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}

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

@@ -77,7 +77,7 @@
 
       <div *ngIf="show" class="div-bottom">
 
-        <button routerLink="/presentation/monitor" mat-button>
+        <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
           <fa-icon [icon]="faDesktop"></fa-icon>
           Präsentation starten
         </button>
@@ -98,17 +98,19 @@
         </mat-form-field>
 
         <mat-slider
-          (ngModelChange)="onZoom($event, show.id)"
           [max]="100"
           [min]="10"
-          [ngModel]="show.presentationZoom"
           [step]="2"
-          [thumbLabel]="true"
           color="primary"
           class="zoom-slider"
-        >
+          #slider
+          ngDefaultControl
+        ><input (ngModelChange)="onZoom($event, show.id)"
+                [ngModel]="show.presentationZoom"
+                matSliderThumb>
         </mat-slider>
 
+
       </div>
 
       <app-add-song

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

@@ -47,21 +47,17 @@
   outline: 0.5px solid #eee;
 
   &:hover {
-    .card-1;
-    outline: 0 solid transparent;
+    outline: 0.5px solid var(--color-primary-light);
   }
 
   &.active {
-    .card-2;
-    outline: 0 solid transparent;
+    outline: 0.5px solid var(--color-primary);
 
     .head {
-      background: #4286f4;
+      background-color: var(--color-primary);
       color: white;
     }
 
-    .fragment {
-    }
   }
 }
 
@@ -79,7 +75,11 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: min-content min-content auto;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .btn-start-presentation {
+    height: 56px;
+  }
 
   @media screen and (max-width: 860px) {
     gap: 10px;

src/app/modules/shows/dialog/share-dialog/share-dialog.component.html

@@ -0,0 +1,13 @@
+<div mat-dialog-content>
+  <a [href]="data.url">{{ data.url }}</a>
+  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
+  </div>
+</div>
+<div mat-dialog-actions>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
+    Schließen
+  </button>
+  <button (click)="share()" mat-button>
+    Teilen
+  </button>
+</div>

src/app/modules/shows/dialog/share-dialog/share-dialog.component.less

@@ -0,0 +1,7 @@
+.qrcode {
+  width: 300px;
+  height: 300px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts

@@ -1,17 +1,17 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {SongUsedComponent} from './song-used.component';
+import {ShareDialogComponent} from './share-dialog.component';
 
-describe('SongUsedComponent', () => {
-  let component: SongUsedComponent;
-  let fixture: ComponentFixture<SongUsedComponent>;
+describe('ShareDialogComponent', () => {
+  let component: ShareDialogComponent;
+  let fixture: ComponentFixture<ShareDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SongUsedComponent],
+      imports: [ShareDialogComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(SongUsedComponent);
+    fixture = TestBed.createComponent(ShareDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts

@@ -0,0 +1,49 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
+import QRCode from 'qrcode';
+import {AsyncPipe} from '@angular/common';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {Show} from '../../services/show';
+
+export interface ShareDialogData {
+  url: string;
+  show: Show;
+}
+
+@Component({
+  selector: 'app-share-dialog',
+  standalone: true,
+  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, AsyncPipe],
+  templateUrl: './share-dialog.component.html',
+  styleUrl: './share-dialog.component.less',
+})
+export class ShareDialogComponent {
+  public qrCode: string;
+
+  public constructor(@Inject(MAT_DIALOG_DATA) public data: ShareDialogData) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    QRCode.toDataURL(data.url, {
+      type: 'image/jpeg',
+      quality: 0.92,
+      width: 1280,
+      height: 1280,
+      color: {
+        dark: '#010414',
+        light: '#ffffff',
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return
+    }).then(_ => (this.qrCode = _));
+  }
+
+  public async share() {
+    if (navigator.clipboard) await navigator.clipboard.writeText(this.data.url);
+
+    if (navigator.share)
+      await navigator.share({
+        title: new ShowTypePipe().transform(this.data.show.showType),
+        text: new ShowTypePipe().transform(this.data.show.showType) + ' am ' + this.data.show.date.toDate().toLocaleString('de'),
+        url: this.data.url,
+      });
+  }
+}

src/app/modules/shows/edit/edit.component.ts

@@ -7,6 +7,8 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
+import firebase from 'firebase/compat/app';
+import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
   selector: 'app-edit',
@@ -56,7 +58,7 @@ export class EditComponent implements OnInit {
     await this.showService.update$(
       this.form.value.id as string,
       {
-        date: this.form.value.date,
+        date: Timestamp.fromDate(this.form.value.date),
         showType: this.form.value.showType,
       } as Partial<Show>
     );

src/app/modules/shows/list/filter/filter-values.ts

@@ -1,3 +1,5 @@
 export interface FilterValues {
   time: number;
+  owner: string;
+  showType: string;
 }

src/app/modules/shows/list/filter/filter.component.html

@@ -10,6 +10,34 @@
       </mat-select>
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-label>Ersteller</mat-label>
+      <mat-select formControlName="owner">
+        <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
+            owner.value
+          }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Art der Veranstaltung</mat-label>
+      <mat-select formControlName="showType">
+        <mat-optgroup label="öffentlich">
+          <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
+        <mat-optgroup label="privat">
+          <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </mat-form-field>
+
   </div>
 
   <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>

src/app/modules/shows/list/filter/filter.component.less

@@ -1,5 +1,5 @@
 .third {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   column-gap: 20px;
 }

src/app/modules/shows/list/filter/filter.component.ts

@@ -4,6 +4,12 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
+import {ShowService} from '../../services/show.service';
+import {distinctUntilChanged, map} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
+import {UserService} from '../../../../services/user/user.service';
+import {isEqual} from 'lodash';
 
 @Component({
   selector: 'app-filter',
@@ -14,6 +20,9 @@ export class FilterComponent {
   @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
 
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+
   public filterFormGroup: UntypedFormGroup;
   public times: KeyValue<number, string>[] = [
     {key: 1, value: 'letzter Monat'},
@@ -22,9 +31,19 @@ export class FilterComponent {
     {key: 99999, value: 'alle'},
   ];
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public owners: {key: string; value: string}[] = [];
+
+  public constructor(
+    private router: Router,
+    private showService: ShowService,
+    private userService: UserService,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
     this.filterFormGroup = fb.group({
       time: 1,
+      owner: null,
+      showType: null,
     });
 
     activatedRoute.queryParams.subscribe(params => {
@@ -33,8 +52,34 @@ export class FilterComponent {
     });
 
     this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
+    this.filterFormGroup.controls.owner.valueChanges.subscribe(_ => void this.filerValueChanged('owner', _ as string));
+    this.filterFormGroup.controls.showType.valueChanges.subscribe(_ => void this.filerValueChanged('showType', _ as string));
+
+    this.owners$().subscribe(owners => (this.owners = owners));
   }
 
+  public owners$ = (): Observable<{key: string; value: string}[]> => {
+    return combineLatest([
+      this.showService.list$().pipe(
+        map(shows => {
+          return shows.map(show => show.owner).filter(onlyUnique);
+        })
+      ),
+      this.userService.users$,
+    ]).pipe(
+      map(([owners, users]) => {
+        return owners
+          .map(ownerId => ({
+            key: ownerId,
+            value: users.find(user => user.id === ownerId)?.name,
+          }))
+          .sort(dynamicSort('value'));
+      }),
+      distinctUntilChanged(isEqual),
+      map(_ => _ as {key: string; value: string}[])
+    );
+  };
+
   private async filerValueChanged<T>(key: string, value: T): Promise<void> {
     const route = this.router.createUrlTree([this.route], {
       queryParams: {[key]: value},

src/app/modules/shows/list/list.component.html

@@ -9,7 +9,7 @@
       <app-card
         *ngIf="shows.length > 0"
         [padding]="false"
-        heading="meine Veranstaltungen"
+        heading="Meine Veranstaltungen"
       >
         <app-list-item
           *ngFor="let show of shows | sortBy: 'desc':'date'"
@@ -24,7 +24,7 @@
     <app-card
       *ngIf="shows.length > 0"
       [padding]="false"
-      heading="veröffentlichte Veranstaltungen"
+      heading="Veröffentlichte Veranstaltungen"
     >
       <app-list-item
         *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"

src/app/modules/shows/list/list.component.ts

@@ -23,18 +23,29 @@ export class ListComponent {
       return +filterValues.time;
     })
   );
+  public owner$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      return filterValues?.owner;
+    })
+  );
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(_ =>
-      _[0].filter(f => {
-        const d = new Date();
-        d.setMonth(d.getMonth() - _[1]);
-        return f.published && f.date.toDate() >= d;
-      })
+  public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$]).pipe(
+    map(([shows, lastMonths, owner]) =>
+      shows
+        .filter(f => {
+          const d = new Date();
+          d.setMonth(d.getMonth() - lastMonths);
+          return f.published && f.date.toDate() >= d;
+        })
+        .filter(show => !owner || show.owner === owner)
     )
   );
 
-  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
+  public constructor(
+    private showService: ShowService,
+    private activatedRoute: ActivatedRoute
+  ) {}
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

src/app/modules/shows/new/new.component.ts

@@ -22,7 +22,11 @@ export class NewComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router
+  ) {
     this.shows$ = showDataService.list$;
   }
 

src/app/modules/shows/services/show-data.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
 import {map} from 'rxjs/operators';
@@ -14,9 +14,8 @@ export class ShowDataService {
     this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
   }
 
+  public listRaw$ = () => this.dbService.col$<Show>(this.collection);
   public list$ = new BehaviorSubject<Show[]>([]);
-  public list = () => firstValueFrom(this.dbService.col$<Show>(this.collection));
-
   public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
 
   // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);

src/app/modules/shows/services/show-song-data.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
-import {firstValueFrom, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
@@ -14,8 +14,6 @@ export class ShowSongDataService {
   public constructor(private dbService: DbService) {}
 
   public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
-  public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
-
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);

src/app/modules/shows/services/show-song.service.ts

@@ -1,12 +1,10 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
-import {firstValueFrom, forkJoin, mergeMap, Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
-import {map, switchMap} from 'rxjs/operators';
-import {ShowDataService} from './show-data.service';
 
 @Injectable({
   providedIn: 'root',
@@ -16,8 +14,7 @@ export class ShowSongService {
     private showSongDataService: ShowSongDataService,
     private songDataService: SongDataService,
     private userService: UserService,
-    private showService: ShowService,
-    private showDataService: ShowDataService
+    private showService: ShowService
   ) {}
 
   public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
@@ -32,6 +29,7 @@ export class ShowSongService {
       chordMode: user.chordMode,
       addedLive,
     };
+    await this.userService.incSongCount(songId);
     return await this.showSongDataService.add(showId, data);
   }
 
@@ -41,47 +39,15 @@ export class ShowSongService {
   public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId);
   public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
-  public async delete$(showId: string, songId: string, index: number): Promise<void> {
-    await this.showSongDataService.delete(showId, songId);
+  public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
+    const showSong = await this.read(showId, showSongId);
+    await this.showSongDataService.delete(showId, showSongId);
     const show = await firstValueFrom(this.showService.read$(showId));
     if (!show) return;
     const order = show.order;
     order.splice(index, 1);
     await this.showService.update$(showId, {order});
-  }
-
-  public countSongUsage$(songId: string) {
-    return this.userService.user$.pipe(
-      switchMap(user =>
-        this.showService.list$().pipe(
-          map(shows => {
-            const myShows = shows.filter(_ => _.owner === user?.id);
-            return myShows.map(show => this.list$(show.id));
-          }),
-          mergeMap(songs => forkJoin(songs)),
-          map(songs => songs.reduce((pn, u) => [...pn, ...u], [])),
-          map(songs => songs.reduce((count, song) => (song.songId === songId ? 1 : 0), 0))
-        )
-      )
-    );
-  }
-
-  public async countSongUsage(songId: string) {
-    // return 0; // todo
-
-    const user = await this.userService.currentUser();
-    const userId = user?.id;
-    if (!userId) return null;
-    const shows = await this.showDataService.list();
-    let count = 0;
-    for (const show of shows.filter(_ => _.owner === userId)) {
-      const songs = await this.showSongDataService.list(show.id);
-      for (const song of songs) {
-        if (song.songId === songId) count++;
-      }
-    }
-
-    return count;
+    await this.userService.decSongCount(showSong.songId);
   }
 
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);

src/app/modules/shows/services/show.ts

@@ -13,6 +13,7 @@ export interface Show {
   published: boolean;
   archived: boolean;
   order: string[];
+  shareId: string;
 
   presentationSongId: string;
   presentationDynamicCaption: string;

src/app/modules/shows/show/show.component.html

@@ -6,7 +6,7 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
   >
-    <p *ngIf="!useSwiper">{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
+    <p *ngIf="!useSwiper">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
     </p>
     <div class="head">
@@ -41,7 +41,8 @@
     </div>
 
     <swiper-container *ngIf="useSwiper" scrollbar="true">
-      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" [style.font-size]="textSize + 'em'"
+      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy"
+                    [style.font-size]="textSize + 'em'"
                     class="song-swipe">
         <app-song
           [fullscreen]="true"
@@ -76,6 +77,9 @@
           <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
             Veröffentlichung zurückziehen
           </app-button>
+          <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
+            Teilen
+          </app-button>
           <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
             Ändern
           </app-button>

src/app/modules/shows/show/show.component.ts

@@ -19,6 +19,7 @@ import {
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
+  faShare,
   faSliders,
   faUser,
   faUsers,
@@ -28,6 +29,8 @@ import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
+import {GuestShowService} from '../../guest/guest-show.service';
+import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
 
 @Component({
   selector: 'app-show',
@@ -46,14 +49,13 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faBoxOpen = faBoxOpen;
   public faPublish = faExternalLinkAlt;
   public faUnpublish = faLock;
+  public faShare = faShare;
   public faDownload = faFileDownload;
   public faSliders = faSliders;
   public faUser = faUser;
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
   public faZoomOut = faMagnifyingGlassMinus;
-  public faPage = faFile;
-  public faLines = faFileLines;
   private subs: Subscription[] = [];
   public useSwiper = false;
 
@@ -65,7 +67,8 @@ export class ShowComponent implements OnInit, OnDestroy {
     private docxService: DocxService,
     private router: Router,
     private cRef: ChangeDetectorRef,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private guestShowService: GuestShowService
   ) {}
 
   public ngOnInit(): void {
@@ -128,6 +131,11 @@ export class ShowComponent implements OnInit, OnDestroy {
     if (this.showId != null) await this.showService.update$(this.showId, {published});
   }
 
+  public onShare = async (show: Show): Promise<void> => {
+    const url = await this.guestShowService.share(show, this.orderedShowSongs(show));
+    this.dialog.open(ShareDialogComponent, {data: {url, show}});
+  };
+
   public getStatus(show: Show): string {
     if (show.published) {
       return 'veröffentlicht';
@@ -162,7 +170,7 @@ export class ShowComponent implements OnInit, OnDestroy {
     return show.order.map(_ => list.filter(f => f.id === _)[0]);
   }
 
-  public trackBy = (index: number, show: ShowSong) => show.id;
+  public trackBy = (_: number, show: ShowSong) => show.id;
 
   public async onChange(showId: string) {
     await this.router.navigateByUrl('/shows/' + showId + '/edit');

src/app/modules/shows/show/song/song.component.html

@@ -7,9 +7,10 @@
   <div *ngIf="!show.published && !fullscreen" class="song">
     <span class="title">{{ iSong.title }}</span>
     <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
-        <mat-select [formControl]="keyFormControl">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+      (click)="openKeySelect()">{{ iSong.key }}</span>
+      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+        <mat-select #option [formControl]="keyFormControl">
           <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>
@@ -23,6 +24,7 @@
   <mat-form-field *ngIf="edit" appearance="outline">
     <mat-label>Songtext</mat-label>
     <textarea matTooltip="Tonart ändern"
+              class="edit"
               [cdkTextareaAutosize]="true"
               [formControl]="editSongControl"
               matInput

src/app/modules/shows/show/song/song.component.less

@@ -17,8 +17,18 @@
 }
 
 .keys {
-  width: 40px;
-  margin: -24px 0 -20px 0;
+  position: relative;
+  margin-right: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.transpose {
+  height: 0;
+  position: absolute;
 }
 
 .btn-up {
@@ -54,6 +64,7 @@
   grid-area: delete;
   justify-content: flex-end;
 }
+
 .btn-edit {
   grid-area: edit;
   justify-content: flex-end;
@@ -67,6 +78,6 @@ button {
 
 }
 
-textarea {
+textarea.edit {
   font-family: 'Ubuntu Mono', monospace;
 }

src/app/modules/shows/show/song/song.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -7,6 +7,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
+import {MatSelect} from '@angular/material/select';
 
 @Component({
   selector: 'app-song',
@@ -21,6 +22,8 @@ export class SongComponent implements OnInit {
   @Input() public index = -1;
   @Input() public fullscreen = false;
 
+  @ViewChild('option') private keyOptions: MatSelect;
+
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -75,4 +78,8 @@ export class SongComponent implements OnInit {
       chordMode: value,
     });
   }
+
+  public openKeySelect(): void {
+    this.keyOptions.open();
+  }
 }

src/app/modules/songs/services/song-list.resolver.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Resolve} from '@angular/router';
+
 import {Observable} from 'rxjs';
 import {SongService} from './song.service';
 import {Song} from './song';
@@ -8,7 +8,7 @@ import {filter} from 'rxjs/operators';
 @Injectable({
   providedIn: 'root',
 })
-export class SongListResolver implements Resolve<Song[]> {
+export class SongListResolver {
   public constructor(private songService: SongService) {}
 
   public resolve(): Observable<Song[]> {

src/app/modules/songs/services/song.service.ts

@@ -25,7 +25,10 @@ export class SongService {
 
   // private list: Song[];
 
-  public constructor(private songDataService: SongDataService, private userService: UserService) {
+  public constructor(
+    private songDataService: SongDataService,
+    private userService: UserService
+  ) {
     // importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }
 

src/app/modules/songs/song-list/song-list.component.ts

@@ -29,7 +29,7 @@ export class SongListComponent implements OnInit, OnDestroy {
       const songs = _[1];
       const filter = _[0];
       this.anyFilterActive = this.checkIfFilterActive(filter);
-      return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title.localeCompare(b.title));
+      return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title?.localeCompare(b.title));
     })
   );
   public anyFilterActive = false;

src/app/modules/songs/song/edit/edit-song.guard.ts

@@ -1,12 +1,12 @@
 import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {EditComponent} from './edit.component';
 
 @Injectable({
   providedIn: 'root',
 })
-export class EditSongGuard implements CanDeactivate<EditComponent> {
+export class EditSongGuard {
   public canDeactivate(
     component: EditComponent,
     currentRoute: ActivatedRouteSnapshot,

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -95,16 +95,15 @@
     </mat-form-field>
 
     <mat-form-field appearance="outline">
-      <mat-chip-list #chipList>
-        <mat-chip
+      <mat-chip-grid #chipList>
+        <mat-chip-row
           (removed)="removeFlag(flag)"
           *ngFor="let flag of flags"
           [removable]="true"
-          [selectable]="false"
         >
           {{ flag }}&nbsp;
           <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
-        </mat-chip>
+        </mat-chip-row>
         <input
           (matChipInputTokenEnd)="addFlag($event)"
           [matChipInputAddOnBlur]="true"
@@ -112,7 +111,7 @@
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           placeholder="Attribute"
         />
-      </mat-chip-list>
+      </mat-chip-grid>
     </mat-form-field>
 
     <div class="half">

src/app/modules/songs/song/song-used/song-used.component.html

@@ -1,3 +0,0 @@
-<ng-container *ngIf="count>0">Verwendet: {{count}}x</ng-container>
-
-

src/app/modules/songs/song/song-used/song-used.component.ts

@@ -1,18 +0,0 @@
-import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
-import {ShowSongService} from '../../../shows/services/show-song.service';
-
-@Component({
-  selector: 'app-song-used',
-  templateUrl: './song-used.component.html',
-  styleUrls: ['./song-used.component.less'],
-})
-export class SongUsedComponent implements OnInit {
-  @Input() public songId: string | null = null;
-  public count = 0;
-
-  public constructor(private service: ShowSongService, private cref: ChangeDetectorRef) {}
-
-  public async ngOnInit() {
-    this.count = (await this.service.countSongUsage(this.songId ?? '')) ?? 0;
-  }
-}

src/app/modules/songs/song/song.component.html

@@ -29,13 +29,10 @@
           <div *ngIf="song.label">Verlag: {{ song.label }}</div>
           <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
           <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
-          <div>
-            <app-song-used [songId]="song.id"></app-song-used>
-          </div>
+          <div *ngIf="songCount$()|async as count">Wie oft verwendet: {{ count }}</div>
         </div>
       </div>
 
-      <!-- <div class="text">{{song.text}}</div>-->
       <app-song-text
         *ngIf="user$ | async as user"
         [chordMode]="user.chordMode"
@@ -43,14 +40,15 @@
         [text]="song.text"
       ></app-song-text>
 
-      <mat-chip-list
+      <mat-chip-listbox
         *appRole="['leader', 'contributor']"
         aria-label="Attribute"
       >
-        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{
+        <mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
           flag
-          }}</mat-chip>
-      </mat-chip-list>
+          }}
+        </mat-chip-option>
+      </mat-chip-listbox>
 
       <div *appRole="['leader', 'contributor']" class="text">
         {{ song.comment }}
@@ -68,8 +66,7 @@
       >Bearbeiten
       </app-button>
       <ng-container *appRole="['leader']">
-
-      <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
+        <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
           Zu Veranstaltung hinzufügen
         </app-button>
         <mat-menu #menu="matMenu">

src/app/modules/songs/song/song.component.ts

@@ -1,9 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {SongService} from '../services/song.service';
-import {map, switchMap} from 'rxjs/operators';
+import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
 import {Song} from '../services/song';
-import {Observable} from 'rxjs';
+import {combineLatest, Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
@@ -71,4 +71,12 @@ export class SongComponent implements OnInit {
     await this.showService.update$(show?.id, {order: [...show.order, newId ?? '']});
     await this.router.navigateByUrl('/shows/' + show.id);
   }
+
+  public songCount$ = () =>
+    combineLatest([this.user$, this.song$]).pipe(
+      map(([user, song]) => {
+        return user.songUsage[song.id];
+      }),
+      distinctUntilChanged()
+    );
 }

src/app/modules/songs/song/song.module.ts

@@ -15,10 +15,9 @@ import {ButtonModule} from '../../../widget-modules/components/button/button.mod
 import {FileComponent} from './file/file.component';
 import {MatMenuModule} from '@angular/material/menu';
 import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module';
-import {SongUsedComponent} from './song-used/song-used.component';
 
 @NgModule({
-  declarations: [SongComponent, FileComponent, SongUsedComponent],
+  declarations: [SongComponent, FileComponent],
   exports: [SongComponent],
   imports: [
     CommonModule,

src/app/services/db.service.ts

@@ -21,7 +21,7 @@ export class DbService {
     return typeof ref === 'string' ? this.afs.doc<T>(ref) : ref;
   }
 
-  public doc$<T>(ref: DocumentPredicate<T>): Observable<(T & {id: string}) | null> {
+  public doc$<T>(ref: DocumentPredicate<T>): Observable<(NonNullable<T> & {id?: string}) | null> {
     return this.doc(ref)
       .valueChanges({idField: 'id'})
       .pipe(map(_ => (_ ? _ : null)));

src/app/services/filter.helper.ts

@@ -13,3 +13,20 @@ export function filterSong(song: Song, filterValue: string): boolean {
 function normalize(input: string): string {
   return input?.toLowerCase().replace(/[\s?!.,']/g, '');
 }
+
+export const onlyUnique = <T>(value: T, index: number, array: T[]) => array.indexOf(value) === index;
+
+export function dynamicSort(property: string) {
+  let sortOrder = 1;
+  if (property[0] === '-') {
+    sortOrder = -1;
+    property = property.substr(1);
+  }
+  return function (a: unknown, b: unknown) {
+    /* next line works with strings and numbers,
+     * and you may want to customize it to your needs
+     */
+    const result = a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
+    return result * sortOrder;
+  };
+}

src/app/services/user/user.service.ts

@@ -6,6 +6,8 @@ import {User} from './user';
 import {DbService} from '../db.service';
 import {environment} from '../../../environments/environment';
 import {Router} from '@angular/router';
+import {ShowDataService} from '../../modules/shows/services/show-data.service';
+import {ShowSongDataService} from '../../modules/shows/services/show-song-data.service';
 
 @Injectable({
   providedIn: 'root',
@@ -14,18 +16,7 @@ export class UserService {
   private iUserId$ = new BehaviorSubject<string | null>(null);
   private iUser$ = new BehaviorSubject<User | null>(null);
 
-  public constructor(private afAuth: AngularFireAuth, private db: DbService, private router: Router) {
-    this.afAuth.authState
-      .pipe(
-        filter(auth => !!auth),
-        map(auth => auth?.uid ?? ''),
-        tap(uid => this.iUserId$.next(uid)),
-        switchMap(uid => this.readUser$(uid))
-      )
-      .subscribe(_ => this.iUser$.next(_));
-
-    this.db.col$<User>('users/').subscribe(_ => this.users$.next(_));
-  }
+  public users$ = new BehaviorSubject<User[]>([]);
 
   public get userId$(): Observable<string | null> {
     return this.iUserId$.asObservable();
@@ -37,7 +28,24 @@ export class UserService {
 
   public currentUser = async (): Promise<User | null> => firstValueFrom(this.user$);
 
-  private users$ = new BehaviorSubject<User[]>([]);
+  public constructor(
+    private afAuth: AngularFireAuth,
+    private db: DbService,
+    private router: Router,
+    private showDataService: ShowDataService,
+    private showSongDataService: ShowSongDataService
+  ) {
+    this.afAuth.authState
+      .pipe(
+        filter(auth => !!auth),
+        map(auth => auth?.uid ?? ''),
+        tap(uid => this.iUserId$.next(uid)),
+        switchMap(uid => this.readUser$(uid))
+      )
+      .subscribe(_ => this.iUser$.next(_));
+
+    this.db.col$<User>('users/').subscribe(_ => this.users$.next(_));
+  }
   public getUserbyId = (userId: string): Promise<User | null> => firstValueFrom(this.getUserbyId$(userId));
   public getUserbyId$ = (userId: string): Observable<User | null> => this.users$.pipe(map(_ => _.find(f => f.id === userId) || null));
 
@@ -45,6 +53,7 @@ export class UserService {
     const aUser = await this.afAuth.signInWithEmailAndPassword(user, password);
     if (!aUser.user) return null;
     const dUser = await this.readUser(aUser.user.uid);
+    await this.initSongUsage(dUser);
     this.iUser$.next(dUser);
     this.iUserId$.next(aUser.user.uid);
 
@@ -80,6 +89,40 @@ export class UserService {
     await this.router.navigateByUrl('/brand/new-user');
   }
 
+  public incSongCount = (songId: string) => this.updateSongUsage(songId, 1);
+  public decSongCount = (songId: string) => this.updateSongUsage(songId, -1);
+
+  private async updateSongUsage(songId: string, direction: number) {
+    const user = await firstValueFrom(this.user$);
+    if (!user) return null;
+
+    const songUsage = user?.songUsage ?? {};
+    let currentSongCount = songUsage[songId];
+    if (currentSongCount === null || currentSongCount === undefined) currentSongCount = 0;
+    else currentSongCount = currentSongCount + direction;
+    songUsage[songId] = Math.max(0, currentSongCount);
+
+    await this.update$(user.id, {songUsage});
+  }
+
+  private async initSongUsage(user: User) {
+    if (user.songUsage) return;
+
+    const shows = await firstValueFrom(this.showDataService.listRaw$());
+    const myShows = shows.filter(show => show.owner === user.id);
+    const songUsage: {[songId: string]: number} = {};
+    for (const show of myShows) {
+      const showSongs = await firstValueFrom(this.showSongDataService.list$(show.id));
+      for (const showSong of showSongs) {
+        const current = songUsage[showSong.songId] ?? 0;
+        songUsage[showSong.songId] = current + 1;
+      }
+    }
+
+    await this.update$(user.id, {songUsage});
+    return;
+  }
+
   private readUser$ = (uid: string) => this.db.doc$<User>('users/' + uid);
   private readUser: (uid: string) => Promise<User | null> = (uid: string) => firstValueFrom(this.readUser$(uid));
 }

src/app/services/user/user.ts

@@ -5,4 +5,5 @@ export interface User {
   name: string;
   role: string;
   chordMode: ChordMode;
+  songUsage: {[songId: string]: number};
 }

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -21,13 +21,7 @@
     ></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
-  <div class="actions">
-    <app-filter *appRole="['user', 'presenter', 'leader']"></app-filter>
-    <app-link
-      *ngIf="userService.userId$|async"
-      [icon]="faLogout"
-      link="/user/logout"
-    ></app-link>
+  <div *appRole="['user', 'presenter', 'leader']" class="actions">
+    <app-filter></app-filter>
   </div>
-
 </nav>

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -32,7 +32,7 @@ nav {
   display: flex;
   height: 100%;
   align-items: center;
-  // padding-right: 20px;
+  padding-right: 20px;
 }
 
 

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -1,9 +1,7 @@
 import {Component} from '@angular/core';
-import {faChalkboard, faMusic, faPersonBooth, faRightFromBracket, faUserCog} from '@fortawesome/free-solid-svg-icons';
+import {faChalkboard, faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
 import {fromEvent, Observable} from 'rxjs';
 import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
-import {UserService} from '../../../../services/user/user.service';
-import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-navigation',
@@ -15,9 +13,6 @@ export class NavigationComponent {
   public faShows = faPersonBooth;
   public faUser = faUserCog;
   public faPresentation = faChalkboard;
-  public faLogout = faRightFromBracket;
-
-  public constructor(public userService: UserService, private router: Router) {}
 
   public readonly windowScroll$: Observable<number> = fromEvent(window, 'scroll').pipe(
     map(() => window.scrollY),
@@ -27,9 +22,4 @@ export class NavigationComponent {
   );
 
   public isNavigationHidden = (scroll: number | null): boolean => (scroll ?? 0) > 60;
-
-  public async logout(): Promise<void> {
-    await this.userService.logout();
-    await this.router.navigateByUrl('/');
-  }
 }

src/app/widget-modules/components/card/card.component.less

@@ -3,12 +3,11 @@
 .card {
   margin: 20px;
   border-radius: 8px;
-  background: #fff;
-  backdrop-filter: blur(12px);
+  background: #fffc;
+  backdrop-filter: blur(15px);
   overflow: hidden;
   width: 800px;
   position: relative;
-  transition: all 150ms ease-in-out;
 
   @media screen and (max-width: 860px) {
     width: 100vw;

src/app/widget-modules/guards/role.guard.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanActivate, Router, UrlTree} from '@angular/router';
+import {ActivatedRouteSnapshot, Router, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {UserService} from '../../services/user/user.service';
 import {map} from 'rxjs/operators';
@@ -7,7 +7,7 @@ import {map} from 'rxjs/operators';
 @Injectable({
   providedIn: 'root',
 })
-export class RoleGuard implements CanActivate {
+export class RoleGuard {
   public constructor(private userService: UserService, private router: Router) {}
 
   public canActivate(next: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {

src/custom-theme.scss

@@ -7,6 +7,15 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
 @include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
@@ -34,6 +43,15 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
 @include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
@@ -60,22 +78,13 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
 @include mat.core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$wgenerator-primary: mat.define-palette(mat.$indigo-palette);
-$wgenerator-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$wgenerator-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($wgenerator-theme);
-

src/index.html

@@ -11,7 +11,7 @@
   <link href="favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
   <link color="#4286f4" href="safari-pinned-tab.svg" rel="mask-icon">
   <meta content="#4286f4" name="msapplication-TileColor">
-  <meta content="#222222" name="theme-color">
+  <meta content="#4286f4" name="theme-color">
 
   <link href="manifest.webmanifest" rel="manifest">
   <meta content="#4286f4" name="theme-color">

src/styles/styles.less

@@ -4,23 +4,26 @@
 
 @transition: all 300ms ease-in-out;
 
-//html, body {
-//  height: 100%;
-//}
+:root {
+  --color-primary: #4286f4;
+  --color-primary-light: #639af3;
+}
+
 html {
   scroll-behavior: smooth;
+  overflow: hidden;
 }
 
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-size: 14px;
-  overscroll-behavior-y: none;
   color: #333;
 
-  background-attachment: fixed;
   background-image: url("/assets/background.jpg");
   background-size: cover;
+  background-position: center;
+  overflow: auto;
 }
 
 p {
@@ -37,17 +40,11 @@ a {
   color: inherit;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   width: 100%;
 }
 
-.mat-form-field .mat-form-field-infix {
-  width: unset;
-}
 
-.mat-form-field.mat-form-field-appearance-standard .mat-form-field-underline {
-  height: 0;
-}
 
 
 .content > *:not(router-outlet) {
@@ -71,7 +68,7 @@ a {
 }
 
 html, body {
-  height: 100%;
+  height: 100vh;
 }
 
 body {
@@ -79,49 +76,6 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-perfect-scrollbar.scroll > .ps.ps--scrolling-y > .ps__rail-y,
-perfect-scrollbar.scroll > .ps .ps__rail-y:hover {
-  background-color: #222;
-  opacity: .3;
-}
-
-.mat-chip.mat-standard-chip {
-  background: #fffa;
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px #0000 inset;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-mat-dialog-container.mat-dialog-container {
-  background: #fffb;
-  backdrop-filter: blur(8px);
-  border-radius: 8px;
-}
-
-.mat-form-field-outline {
-  background: #fff4;
-  border-radius: 4px;
-}
-
-.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
-  border-top-color: inherit !important;
-}
-
-.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
-.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-  transform: translateY(-1.0em) scale(0.75);
-}
-
 
 body {
   .swiper-button-next, .swiper-button-prev {
@@ -131,4 +85,7 @@ body {
   .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
     opacity: 0;
   }
+
+  --mat-form-field-container-text-line-height: 16px;
+  --mat-form-field-container-text-size: 16px;
 }

src/test.ts

@@ -5,11 +5,6 @@ import {getTestBed} from '@angular/core/testing';
 import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 
 type req = {keys: () => {map: (context: req) => void}};
-declare const require: {context: (a: string, b: boolean, c: RegExp) => req};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -11,15 +11,16 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
-    "strict": true,
+    "target": "ES2022",
+    "strict": false,
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,