From a1c750b3c858f08ec7560e313a793a61d6697941 Mon Sep 17 00:00:00 2001 From: smuddyx Date: Sun, 22 Mar 2020 15:32:18 +0100 Subject: [PATCH] user preferences - chord type - apply in song and show-song --- .../modules/shows/services/show-song.service.ts | 7 +++++-- src/app/modules/shows/services/showSong.ts | 3 +++ .../modules/shows/show/song/song.component.html | 3 ++- src/app/modules/shows/show/song/song.component.ts | 5 ++++- src/app/modules/songs/song/song.component.html | 3 +-- src/app/modules/songs/song/song.component.ts | 5 +++++ src/app/modules/user/info/info.component.html | 2 +- .../components/song-text/song-text.component.html | 2 +- .../components/song-text/song-text.component.less | 9 +++++++-- .../components/song-text/song-text.component.ts | 14 ++++++++++---- 10 files changed, 39 insertions(+), 14 deletions(-) diff --git a/src/app/modules/shows/services/show-song.service.ts b/src/app/modules/shows/services/show-song.service.ts index 2ff102c..d744ce1 100644 --- a/src/app/modules/shows/services/show-song.service.ts +++ b/src/app/modules/shows/services/show-song.service.ts @@ -4,6 +4,7 @@ import {Observable} from 'rxjs'; import {ShowSong} from './showSong'; import {SongDataService} from '../../songs/services/song-data.service'; import {take} from 'rxjs/operators'; +import {UserService} from '../../../services/user.service'; @Injectable({ providedIn: 'root' @@ -12,13 +13,15 @@ export class ShowSongService { constructor( private showSongDataService: ShowSongDataService, - private songDataService: SongDataService + private songDataService: SongDataService, + private userService: UserService, ) { } public async new$(showId: string, songId: string, order: number): Promise { const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise(); - const data = {songId, order, key: song.key, keyOriginal: song.key}; + const user = await this.userService.user$.pipe(take(1)).toPromise(); + const data: Partial = {songId, order, key: song.key, keyOriginal: song.key, chordMode: user.chordMode}; return await this.showSongDataService.add(showId, data); } diff --git a/src/app/modules/shows/services/showSong.ts b/src/app/modules/shows/services/showSong.ts index 6075fdc..0a64d16 100644 --- a/src/app/modules/shows/services/showSong.ts +++ b/src/app/modules/shows/services/showSong.ts @@ -1,7 +1,10 @@ +import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component'; + export interface ShowSong { id: string; songId: string; key: string; keyOriginal: string; order: number; + chordMode: ChordMode } diff --git a/src/app/modules/shows/show/song/song.component.html b/src/app/modules/shows/show/song/song.component.html index 861ac0f..ce62647 100644 --- a/src/app/modules/shows/show/song/song.component.html +++ b/src/app/modules/shows/show/song/song.component.html @@ -13,5 +13,6 @@ - + diff --git a/src/app/modules/shows/show/song/song.component.ts b/src/app/modules/shows/show/song/song.component.ts index d2a6da3..5f941fc 100644 --- a/src/app/modules/shows/show/song/song.component.ts +++ b/src/app/modules/shows/show/song/song.component.ts @@ -7,6 +7,7 @@ import {ShowSongService} from '../../services/show-song.service'; import {ShowSong} from '../../services/showSong'; import {getScale} from '../../../songs/services/key.helper'; import {FormControl} from '@angular/forms'; +import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component'; @Component({ selector: 'app-song', @@ -77,5 +78,7 @@ export class SongComponent implements OnInit { await this.showSongService.update$(this.showId, toggleSong.id, {order: song.order}); } - + public async onChordModeChanged(value: ChordMode): Promise { + await this.showSongService.update$(this.showId, this.showSong.id, {chordMode: value}); + } } diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index 8a29577..23c6168 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -16,8 +16,7 @@ - - +
{{song.comment}}
diff --git a/src/app/modules/songs/song/song.component.ts b/src/app/modules/songs/song/song.component.ts index 933937e..a0a459a 100644 --- a/src/app/modules/songs/song/song.component.ts +++ b/src/app/modules/songs/song/song.component.ts @@ -6,6 +6,8 @@ import {Song} from '../services/song'; import {Observable} from 'rxjs'; import {FileDataService} from '../services/file-data.service'; import {File} from '../services/file'; +import {UserService} from '../../../services/user.service'; +import {User} from '../../../services/user'; @Component({ selector: 'app-song', @@ -15,12 +17,15 @@ import {File} from '../services/file'; export class SongComponent implements OnInit { public song$: Observable; public files$: Observable; + private user$: Observable; constructor( private activatedRoute: ActivatedRoute, private songService: SongService, private fileService: FileDataService, + private userService: UserService, ) { + this.user$ = userService.user$; } public ngOnInit(): void { diff --git a/src/app/modules/user/info/info.component.html b/src/app/modules/user/info/info.component.html index 5d13295..23c69f7 100644 --- a/src/app/modules/user/info/info.component.html +++ b/src/app/modules/user/info/info.component.html @@ -8,7 +8,7 @@ nur den Liedtext anzeigen in Strophen die Akkorde nur für die erste anzeigen - alle azeigen + alle anzeigen Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden. diff --git a/src/app/widget-modules/components/song-text/song-text.component.html b/src/app/widget-modules/components/song-text/song-text.component.html index 7616c68..4d46bbd 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.html +++ b/src/app/widget-modules/components/song-text/song-text.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/widget-modules/components/song-text/song-text.component.less b/src/app/widget-modules/components/song-text/song-text.component.less index 450b4a5..0a87c10 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.less +++ b/src/app/widget-modules/components/song-text/song-text.component.less @@ -29,7 +29,7 @@ position: absolute; right: 0; background: #eee; - border-radius: 8px; + border-radius: 50%; padding: 5px; width: 20px; height: 20px; @@ -38,7 +38,12 @@ align-items: center; transition: 300ms all ease-in-out; cursor: pointer; - opacity: 0; + opacity: 0.1; + + @media screen and (max-width: 860px) { + background: #0001; + opacity: 0.6; + } &:hover { background: #ddd; diff --git a/src/app/widget-modules/components/song-text/song-text.component.ts b/src/app/widget-modules/components/song-text/song-text.component.ts index cc47f0c..377886b 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.ts +++ b/src/app/widget-modules/components/song-text/song-text.component.ts @@ -17,7 +17,12 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst' }) export class SongTextComponent implements OnInit { public sections: Section[]; - public chordMode: ChordMode = 'hide'; + public _chordMode: ChordMode = 'hide'; + @Input() + public set chordMode(value: ChordMode) { + this._chordMode = value ?? 'hide'; + } + @Output() public chordModeChanged = new EventEmitter(); public faLines = faGripLines; @@ -37,7 +42,7 @@ export class SongTextComponent implements OnInit { return section.lines.filter(_ => { if (_.type !== LineType.chord) return true; - switch (this.chordMode) { + switch (this._chordMode) { case 'show': return true; case 'hide': @@ -50,12 +55,13 @@ export class SongTextComponent implements OnInit { public onChordClick(): void { const next = this.getNextChordMode(); + this.chordMode = next; - this.chordModeChanged.next(next); + this.chordModeChanged.emit(next); } private getNextChordMode(): ChordMode { - switch (this.chordMode) { + switch (this._chordMode) { case 'show': return 'hide'; case 'hide':