user preferences - chord type

firebase.json

@@ -27,5 +27,16 @@
         ]
       }
     ]
+  },
+  "emulators": {
+    "firestore": {
+      "port": 8080
+    },
+    "database": {
+      "port": 9000
+    },
+    "hosting": {
+      "port": 5000
+    }
   }
 }

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

@@ -2,12 +2,15 @@
   <app-card
     heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
 
+    <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+
     <div *ngIf="showSongs && songs" class="song-list">
       <app-song *ngFor="let song of showSongs"
                 [showId]="showId"
                 [showSong]="song"
                 [showSongs]="showSongs"
                 [song]="getSong(song.songId)"
+                [showText]="showText"
       ></app-song>
     </div>
 

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

@@ -20,6 +20,7 @@ export class ShowComponent implements OnInit {
   public songs: Song[];
   public showSongs: ShowSong[];
   public showId: string;
+  public showText: boolean;
 
   constructor(
     private activatedRoute: ActivatedRoute,

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

@@ -1,8 +1,9 @@
-<div *ngIf="_song" class="song">
-  <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
-  <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
-  <span class="title">{{_song.title}}</span>
-  <span class="keys">
+<div *ngIf="_song" class="row">
+  <div class="song">
+    <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
+    <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
+    <span class="title">{{_song.title}}</span>
+    <span class="keys">
     <span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;→&nbsp;</span>
     <mat-form-field *ngIf="keys" appearance="standard">
         <mat-select [formControl]="keyFormControl">
@@ -10,5 +11,7 @@
         </mat-select>
       </mat-form-field>
   </span>
-  <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
+    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
+  </div>
+  <app-song-text *ngIf="showText" [text]="_song.text"></app-song-text>
 </div>

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

@@ -1,5 +1,9 @@
-.song {
+.row {
   border-bottom: 1px solid #ccc;
+}
+
+
+.song {
   display: grid;
   grid-template-columns: 20px 20px auto 70px 25px;
   @media screen and (max-width: 860px) {

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

@@ -15,10 +15,12 @@ import {FormControl} from '@angular/forms';
 })
 export class SongComponent implements OnInit {
   @Input() public showSong: ShowSong;
-
-  @Input() public showId: string;
-  public keys: string[];
   @Input() public showSongs: ShowSong[];
+  @Input() public showId: string;
+  @Input() public showText: boolean;
+
+
+  public keys: string[];
   public faDelete = faTrash;
   public faUp = faCaretUp;
   public faDown = faCaretDown;

src/app/modules/shows/shows.module.ts

@@ -5,7 +5,7 @@ import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
@@ -21,6 +21,7 @@ import {ShowComponent} from './show/show.component';
 import {SongComponent} from './show/song/song.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 
 
 @NgModule({
@@ -41,7 +42,9 @@ import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu
     MatSelectModule,
     ShowTypeTranslaterModule,
     FontAwesomeModule,
-    MenuButtonModule
+    MenuButtonModule,
+    FormsModule,
+    SongTextModule
   ]
 })
 export class ShowsModule {

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

@@ -12,6 +12,6 @@ export class SongDataService {
 
   public list$ = (): Observable<Song[]> => this.dbService.col$('songs');
   public read$ = (songId: string): Observable<Song | undefined> => this.dbService.doc$('songs/' + songId);
-  public update = async (songId: string, data: any): Promise<void> => await this.dbService.doc('songs/' + songId).update(data);
+  public update$ = async (songId: string, data: any): Promise<void> => await this.dbService.doc('songs/' + songId).update(data);
 }
 

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

@@ -26,8 +26,8 @@ export class SongService {
   public list$ = (): Observable<Song[]> => this.songDataService.list$().pipe(tap(_ => this.list = _));
   public read = (songId: string): Observable<Song | undefined> => this.songDataService.read$(songId);
 
-  public async update(songId: string, data: any): Promise<void> {
-    await this.songDataService.update(songId, data);
+  public async update$(songId: string, data: Partial<Song>): Promise<void> {
+    await this.songDataService.update$(songId, data);
   }
 
 // https://www.csvjson.com/csv2json
@@ -48,11 +48,12 @@ export class SongService {
       if (mappedSongs.length === 1) {
         const mappedSong = mappedSongs[0];
         const id = _.id;
-        return await this.update(id, mappedSong);
+        return await this.update$(id, mappedSong);
       }
     });
 
     await Promise.all(promises);
   }
 
+
 }

src/app/modules/songs/services/text-rendering.service.ts

@@ -57,7 +57,6 @@ export class TextRenderingService {
       array[array.length - 1].lines.push(this.getLineOfLineText(line));
       return array;
     }, [] as Section[]);
-    console.log(indices);
 
     return sections;
   }
@@ -90,8 +89,8 @@ export class TextRenderingService {
     let match;
     const chords: Chord[] = [];
 
-    // https://regex101.com/r/68jMB8/3
-    const regex = /\b(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h)(\/(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h))?(\d+|maj7)?\s?\b/mg;
+    // https://regex101.com/r/68jMB8/5
+    const regex = /\b(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h)(\/(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h))?(\d+|maj7)?\b\s/mg;
 
     while ((match = regex.exec(chordLine)) !== null) {
       const chord: Chord = {

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

@@ -41,7 +41,7 @@ export class EditSongComponent implements OnInit {
 
   public async onSave(): Promise<void> {
     const data = this.form.value;
-    await this.songService.update(this.song.id, data);
+    await this.songService.update$(this.song.id, data);
     await this.router.navigateByUrl('songs/' + this.song.id);
   }
 

src/app/modules/user/info/info.component.html

@@ -1,6 +1,18 @@
 <app-card *ngIf="user$|async as user">
   <h2>Hallo {{user.name}}</h2>
   <p>{{user.role|role}}</p>
+
+  <mat-form-field appearance="outline">
+    <mat-label>bevorzugte Anzeige der Akkorde</mat-label>
+    <mat-select (ngModelChange)="onChordModeChanged(user.id, $event)" [ngModel]="user.chordMode">
+      <mat-option [value]="null"></mat-option>
+      <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
+      <mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen</mat-option>
+      <mat-option value="show">alle azeigen</mat-option>
+    </mat-select>
+    <mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden.</mat-hint>
+  </mat-form-field>
+
   <app-button-row>
     <button mat-button routerLink="../logout">Abmelden</button>
   </app-button-row>

src/app/modules/user/info/info.component.less

@@ -0,0 +1,3 @@
+.mat-form-field {
+  width: 100%;
+}

src/app/modules/user/info/info.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {UserService} from '../../../services/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user';
+import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 
 @Component({
   selector: 'app-info',
@@ -18,4 +19,8 @@ export class InfoComponent implements OnInit {
     this.user$ = this.userService.user$;
   }
 
+  public async onChordModeChanged(uid: string, value: ChordMode): Promise<void> {
+    await this.userService.update$(uid, {chordMode: value});
+  }
+
 }

src/app/modules/user/user.module.ts

@@ -4,7 +4,7 @@ import {LoginComponent} from './login/login.component';
 import {UserRoutingModule} from './user-routing.module';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
 import {MatButtonModule} from '@angular/material/button';
@@ -12,6 +12,7 @@ import {AuthMessagePipe} from './login/auth-message.pipe';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
 import {RolePipe} from './info/role.pipe';
+import {MatSelectModule} from '@angular/material/select';
 
 
 @NgModule({
@@ -25,6 +26,8 @@ import {RolePipe} from './info/role.pipe';
     MatInputModule,
     ButtonRowModule,
     MatButtonModule,
+    MatSelectModule,
+    FormsModule,
 
 
   ]

src/app/services/user.service.ts

@@ -18,4 +18,8 @@ export class UserService {
       switchMap(auth => this.db.doc$<User>('user/' + auth.uid))
     );
   }
+
+  public async update$(uid: string, data: Partial<User>): Promise<void> {
+    await this.db.doc<User>('user/' + uid).update(data);
+  }
 }

src/app/services/user.ts

@@ -1,5 +1,8 @@
+import {ChordMode} from '../widget-modules/components/song-text/song-text.component';
+
 export interface User {
   id: string;
   name: string;
   role: 'admin';
+  chordMode: ChordMode
 }

src/app/widget-modules/components/song-text/song-text.component.less

@@ -2,8 +2,22 @@
   white-space: pre-wrap;
   position: relative;
 
+
   &.chords {
     font-family: 'Ubuntu Mono', monospace;
+
+    @media screen and (max-width: 600px) {
+      font-size: 11px;
+    }
+    @media screen and (max-width: 500px) {
+      font-size: 9px;
+    }
+    @media screen and (max-width: 400px) {
+      font-size: 8px;
+    }
+    @media screen and (max-width: 350px) {
+      font-size: 7px;
+    }
   }
 
   &:hover .menu {

src/index.html

@@ -15,6 +15,7 @@
 <body>
 <app-root></app-root>
 <script>importCCLI = {}</script>
+<script>setStrophe = {}</script>
 <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>