add song usage (experimental)

angular.json

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

package.json

@@ -6,56 +6,58 @@
     "build": "ng build",
     "deploy": "ng build --configuration production && firebase deploy",
     "test": "ng test",
-    "lint": "ng lint --fix"
+    "lint": "ng lint --fix",
+    "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.1.3",
-    "@angular/cdk": "^17.1.2",
-    "@angular/common": "^17.1.3",
-    "@angular/compiler": "^17.1.3",
-    "@angular/core": "^17.1.3",
-    "@angular/fire": "^17.0.1",
-    "@angular/forms": "^17.1.3",
-    "@angular/material": "^17.1.2",
-    "@angular/platform-browser": "^17.1.3",
-    "@angular/platform-browser-dynamic": "^17.1.3",
-    "@angular/router": "^17.1.3",
-    "@angular/service-worker": "^17.1.3",
-    "@fortawesome/angular-fontawesome": "^0.13.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@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": "^10.0.0",
+    "firebase": "^9.6.10",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^7.0.5",
+    "ngx-mat-select-search": "^4.2.1",
+    "ngx-perfect-scrollbar": "^10.1.1",
     "rxfire": "^6.0.3",
-    "rxjs": "~7.8.1",
+    "rxjs": "~7.5.6",
     "swiper": "^9.3.2",
     "tslib": "^2.4.0",
     "uuid": "^8.3.2",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1701.3",
-    "@angular-devkit/build-angular": "^17.1.3",
-    "@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.1.3",
-    "@angular/compiler-cli": "^17.1.3",
-    "@angular/language-service": "^17.1.3",
+    "@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": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
+    "@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": "^13.2.1",
+    "firebase-tools": "^11.6.0",
     "fuzzy": "^0.1.3",
     "inquirer": "^9.1.0",
     "inquirer-autocomplete-prompt": "^2.0.0",
@@ -68,6 +70,6 @@
     "karma-jasmine-html-reporter": "^2.0.0",
     "prettier": "^2.7.1",
     "protractor": "~7.0.0",
-    "typescript": "~5.3.3"
+    "typescript": "~4.7.4"
   }
 }

src/app/app-routing.module.ts

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

src/app/app.component.html

@@ -1,6 +1,12 @@
 <app-navigation></app-navigation>
-
-<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+<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">
     <router-outlet #o="outlet"></router-outlet>
   </div>
-
+</perfect-scrollbar>

src/app/app.component.less

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

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, ViewChild} 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({
@@ -11,7 +12,12 @@ 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,6 +15,7 @@ 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],
@@ -36,6 +37,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     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 - 2024 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
 </div>

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

@@ -77,7 +77,7 @@
 
       <div *ngIf="show" class="div-bottom">
 
-        <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
+        <button routerLink="/presentation/monitor" mat-button>
           <fa-icon [icon]="faDesktop"></fa-icon>
           Präsentation starten
         </button>
@@ -98,19 +98,17 @@
         </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,17 +47,21 @@
   outline: 0.5px solid #eee;
 
   &:hover {
-    outline: 0.5px solid var(--color-primary-light);
+    .card-1;
+    outline: 0 solid transparent;
   }
 
   &.active {
-    outline: 0.5px solid var(--color-primary);
+    .card-2;
+    outline: 0 solid transparent;
 
     .head {
-      background-color: var(--color-primary);
+      background: #4286f4;
       color: white;
     }
 
+    .fragment {
+    }
   }
 }
 
@@ -75,11 +79,7 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  .btn-start-presentation {
-    height: 56px;
-  }
+  grid-template-columns: min-content min-content auto;
 
   @media screen and (max-width: 860px) {
     gap: 10px;

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

@@ -7,8 +7,6 @@ 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',
@@ -58,7 +56,7 @@ export class EditComponent implements OnInit {
     await this.showService.update$(
       this.form.value.id as string,
       {
-        date: Timestamp.fromDate(this.form.value.date),
+        date: this.form.value.date,
         showType: this.form.value.showType,
       } as Partial<Show>
     );

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

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
 import {map} from 'rxjs/operators';
@@ -15,6 +15,8 @@ export class ShowDataService {
   }
 
   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 {Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
@@ -14,6 +14,8 @@ 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,10 +1,12 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
-import {firstValueFrom, Observable} from 'rxjs';
+import {firstValueFrom, forkJoin, mergeMap, 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',
@@ -14,7 +16,8 @@ export class ShowSongService {
     private showSongDataService: ShowSongDataService,
     private songDataService: SongDataService,
     private userService: UserService,
-    private showService: ShowService
+    private showService: ShowService,
+    private showDataService: ShowDataService
   ) {}
 
   public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
@@ -47,5 +50,39 @@ export class ShowSongService {
     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;
+  }
+
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
 }

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

@@ -7,10 +7,9 @@
   <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><span
-      (click)="openKeySelect()">{{ iSong.key }}</span>
-      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
-        <mat-select #option [formControl]="keyFormControl">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
+        <mat-select [formControl]="keyFormControl">
           <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>

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

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

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -7,7 +7,6 @@ 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',
@@ -22,8 +21,6 @@ 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;
@@ -78,8 +75,4 @@ 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 {
+export class SongListResolver implements Resolve<Song[]> {
   public constructor(private songService: SongService) {}
 
   public resolve(): Observable<Song[]> {

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

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

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

@@ -95,15 +95,16 @@
     </mat-form-field>
 
     <mat-form-field appearance="outline">
-      <mat-chip-grid #chipList>
-        <mat-chip-row
+      <mat-chip-list #chipList>
+        <mat-chip
           (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-row>
+        </mat-chip>
         <input
           (matChipInputTokenEnd)="addFlag($event)"
           [matChipInputAddOnBlur]="true"
@@ -111,7 +112,7 @@
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           placeholder="Attribute"
         />
-      </mat-chip-grid>
+      </mat-chip-list>
     </mat-form-field>
 
     <div class="half">

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

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

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

@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SongUsedComponent} from './song-used.component';
+
+describe('SongUsedComponent', () => {
+  let component: SongUsedComponent;
+  let fixture: ComponentFixture<SongUsedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SongUsedComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SongUsedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+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,6 +29,9 @@
           <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>
       </div>
 
@@ -40,15 +43,14 @@
         [text]="song.text"
       ></app-song-text>
 
-      <mat-chip-listbox
+      <mat-chip-list
         *appRole="['leader', 'contributor']"
         aria-label="Attribute"
       >
-        <mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
+        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{
           flag
-          }}
-        </mat-chip-option>
-      </mat-chip-listbox>
+          }}</mat-chip>
+      </mat-chip-list>
 
       <div *appRole="['leader', 'contributor']" class="text">
         {{ song.comment }}
@@ -66,7 +68,8 @@
       >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.module.ts

@@ -15,9 +15,10 @@ 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],
+  declarations: [SongComponent, FileComponent, SongUsedComponent],
   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<(NonNullable<T> & {id?: string}) | null> {
+  public doc$<T>(ref: DocumentPredicate<T>): Observable<(T & {id: string}) | null> {
     return this.doc(ref)
       .valueChanges({idField: 'id'})
       .pipe(map(_ => (_ ? _ : null)));

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

@@ -21,7 +21,13 @@
     ></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
-  <div *appRole="['user', 'presenter', 'leader']" class="actions">
-    <app-filter></app-filter>
+  <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>
+
 </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,7 +1,9 @@
 import {Component} from '@angular/core';
-import {faChalkboard, faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
+import {faChalkboard, faMusic, faPersonBooth, faRightFromBracket, 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',
@@ -13,6 +15,9 @@ 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),
@@ -22,4 +27,9 @@ 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,7 +3,7 @@
 .card {
   margin: 20px;
   border-radius: 8px;
-  background: #fffc;
+  background: #fff;
   backdrop-filter: blur(12px);
   overflow: hidden;
   width: 800px;

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

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, Router, UrlTree} from '@angular/router';
+import {ActivatedRouteSnapshot, CanActivate, 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 {
+export class RoleGuard implements CanActivate {
   public constructor(private userService: UserService, private router: Router) {}
 
   public canActivate(next: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {

src/custom-theme.scss

@@ -7,15 +7,6 @@
 // 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
@@ -43,15 +34,6 @@ $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
@@ -78,15 +60,6 @@ $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

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="#4286f4" name="theme-color">
+  <meta content="#222222" name="theme-color">
 
   <link href="manifest.webmanifest" rel="manifest">
   <meta content="#4286f4" name="theme-color">

src/styles/styles.less

@@ -4,11 +4,9 @@
 
 @transition: all 300ms ease-in-out;
 
-:root {
-  --color-primary: #4286f4;
-  --color-primary-light: #639af3;
-}
-
+//html, body {
+//  height: 100%;
+//}
 html {
   scroll-behavior: smooth;
 }
@@ -39,11 +37,17 @@ a {
   color: inherit;
 }
 
-.mat-mdc-form-field {
+.mat-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) {
@@ -75,6 +79,49 @@ 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 {
@@ -84,7 +131,4 @@ 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,6 +5,11 @@ 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,16 +11,15 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "ES2022",
-    "strict": false,
+    "target": "es2020",
+    "strict": true,
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
-    ],
-    "useDefineForClassFields": false
+    ]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,