fix linting
This commit is contained in:
@@ -1,148 +1,110 @@
|
||||
@if (show$ | async; as show) {
|
||||
<div>
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
<div>
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
heading="{{ show.showType | showType }}, {{
|
||||
show.date.toDate() | date: 'dd.MM.yyyy'
|
||||
}} - {{ getStatus(show) }}"
|
||||
>
|
||||
@if (!useSwiper) {
|
||||
<p class="show-meta">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
<ng-container *appOwner="show.owner">
|
||||
<app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
|
||||
@if (show.reportedType) {
|
||||
<app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
|
||||
}
|
||||
</ng-container>
|
||||
</p>
|
||||
}
|
||||
<div class="head">
|
||||
<div>
|
||||
@if (!useSwiper) {
|
||||
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div [class.floating]="useSwiper">
|
||||
<app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
|
||||
matTooltip="Verkleinern"></app-menu-button>
|
||||
<app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
|
||||
matTooltip="Vergrößern"></app-menu-button>
|
||||
<app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
|
||||
[icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
|
||||
matTooltip="Vollbild"></app-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
@if (showSongs && !useSwiper) {
|
||||
<div (cdkDropListDropped)="drop($event, show)"
|
||||
[cdkDropListDisabled]="show.published || showText"
|
||||
[style.--song-key-column-width]="getSongKeyColumnWidth(show)"
|
||||
[style.font-size]="textSize + 'em'"
|
||||
cdkDropList
|
||||
class="song-list">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<div cdkDrag class="song-row">
|
||||
<app-song
|
||||
[dragHandle]="!(show.published || showText)"
|
||||
[fullscreen]="useSwiper"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="showText"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (useSwiper) {
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide
|
||||
[style.font-size]="textSize + 'em'"
|
||||
class="song-swipe">
|
||||
<app-song
|
||||
[fullscreen]="true"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="true"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
<div class="time">{{ currentTime | date: 'HH:mm' }}</div>
|
||||
@if (getNextSong(orderedShowSongs(show), i); as next) {
|
||||
<div class="next-song">{{ next }}
|
||||
<fa-icon [icon]="faNextSong"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</swiper-slide>
|
||||
}
|
||||
</swiper-container>
|
||||
}
|
||||
@if (songs$ | async; as songs) {
|
||||
@if (songs && !show.published && !useSwiper) {
|
||||
<app-add-song
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs"
|
||||
></app-add-song>
|
||||
>
|
||||
@if (!useSwiper) {
|
||||
<p class="show-meta">
|
||||
{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
<ng-container *appOwner="show.owner">
|
||||
<app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
|
||||
@if (show.reportedType) {
|
||||
<app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
|
||||
}
|
||||
</ng-container>
|
||||
</p>
|
||||
}
|
||||
<div class="head">
|
||||
<div>
|
||||
@if (!useSwiper) {
|
||||
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div [class.floating]="useSwiper">
|
||||
<app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
|
||||
<app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon" matTooltip="Vergrößern"></app-menu-button>
|
||||
<app-menu-button
|
||||
(click)="useSwiper=!useSwiper;fullscreen(useSwiper)"
|
||||
@fade
|
||||
[icon]="useSwiper ? faRestore : faMaximize"
|
||||
class="btn-delete btn-icon"
|
||||
matTooltip="Vollbild"
|
||||
></app-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
@if (showSongs && !useSwiper) {
|
||||
<div
|
||||
(cdkDropListDropped)="drop($event, show)"
|
||||
[cdkDropListDisabled]="show.published || showText"
|
||||
[style.--song-key-column-width]="getSongKeyColumnWidth(show)"
|
||||
[style.font-size]="textSize + 'em'"
|
||||
cdkDropList
|
||||
class="song-list"
|
||||
>
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<div cdkDrag class="song-row">
|
||||
<app-song
|
||||
[dragHandle]="!(show.published || showText)"
|
||||
[fullscreen]="useSwiper"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="showText"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
</div>
|
||||
}
|
||||
@if (!useSwiper) {
|
||||
<app-button-row>
|
||||
<ng-container *appRole="['leader']">
|
||||
<ng-container *appOwner="show.owner">
|
||||
@if (!show.archived) {
|
||||
<app-button (click)="onArchive(true)" [icon]="faBox">
|
||||
Archivieren
|
||||
</app-button>
|
||||
}
|
||||
@if (show.archived) {
|
||||
<app-button (click)="onArchive(false)" [icon]="faBoxOpen">
|
||||
Wiederherstellen
|
||||
</app-button>
|
||||
}
|
||||
@if (!show.published) {
|
||||
<app-button (click)="onPublish(show, true)" [icon]="faPublish">
|
||||
Veröffentlichen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published) {
|
||||
<app-button (click)="onPublish(show, false)" [icon]="faUnpublish">
|
||||
Veröffentlichung zurückziehen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published) {
|
||||
<app-button (click)="onShare(show)" [icon]="faShare">
|
||||
Teilen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published && show.reportedType === 'pending') {
|
||||
<app-button (click)="onReport(show)" [icon]="faReport">
|
||||
Melden
|
||||
</app-button>
|
||||
}
|
||||
@if (!show.published) {
|
||||
<app-button (click)="onChange(show.id)" [icon]="faSliders">
|
||||
Ändern
|
||||
</app-button>
|
||||
}
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
|
||||
Herunterladen
|
||||
</app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<app-button (click)="onDownload()" [icon]="faUser">
|
||||
Ablauf für Lobpreisgruppe
|
||||
</app-button>
|
||||
<app-button (click)="onDownloadHandout()" [icon]="faUsers">
|
||||
Handout mit Copyright Infos
|
||||
</app-button>
|
||||
</mat-menu>
|
||||
</app-button-row>
|
||||
</div>
|
||||
} @if (useSwiper) {
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide [style.font-size]="textSize + 'em'" class="song-swipe">
|
||||
<app-song [fullscreen]="true" [index]="i" [showId]="showId" [showSong]="song" [showText]="true" [show]="show"></app-song>
|
||||
<div class="time">{{ currentTime | date: 'HH:mm' }}</div>
|
||||
@if (getNextSong(orderedShowSongs(show), i); as next) {
|
||||
<div class="next-song">
|
||||
{{ next }}
|
||||
<fa-icon [icon]="faNextSong"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</swiper-slide>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
</swiper-container>
|
||||
} @if (songs$ | async; as songs) { @if (songs && !show.published && !useSwiper) {
|
||||
<app-add-song [showSongs]="showSongs" [show]="show" [songs]="songs"></app-add-song>
|
||||
} } @if (!useSwiper) {
|
||||
<app-button-row>
|
||||
<ng-container *appRole="['leader']">
|
||||
<ng-container *appOwner="show.owner">
|
||||
@if (!show.archived) {
|
||||
<app-button (click)="onArchive(true)" [icon]="faBox"> Archivieren </app-button>
|
||||
} @if (show.archived) {
|
||||
<app-button (click)="onArchive(false)" [icon]="faBoxOpen"> Wiederherstellen </app-button>
|
||||
} @if (!show.published) {
|
||||
<app-button (click)="onPublish(show, true)" [icon]="faPublish"> Veröffentlichen </app-button>
|
||||
} @if (show.published) {
|
||||
<app-button (click)="onPublish(show, false)" [icon]="faUnpublish"> Veröffentlichung zurückziehen </app-button>
|
||||
} @if (show.published) {
|
||||
<app-button (click)="onShare(show)" [icon]="faShare"> Teilen </app-button>
|
||||
} @if (show.published && show.reportedType === 'pending') {
|
||||
<app-button (click)="onReport(show)" [icon]="faReport"> Melden </app-button>
|
||||
} @if (!show.published) {
|
||||
<app-button (click)="onChange(show.id)" [icon]="faSliders"> Ändern </app-button>
|
||||
}
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<app-button [icon]="faDownload" [matMenuTriggerFor]="menu"> Herunterladen </app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<app-button (click)="onDownload()" [icon]="faUser"> Ablauf für Lobpreisgruppe </app-button>
|
||||
<app-button (click)="onDownloadHandout()" [icon]="faUsers"> Handout mit Copyright Infos </app-button>
|
||||
</mat-menu>
|
||||
</app-button-row>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -188,9 +188,12 @@ export class ShowComponent implements OnInit, OnDestroy {
|
||||
width: '350px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().pipe(take(1)).subscribe((archive: boolean) => {
|
||||
if (archive && this.showId != null) void this.setArchiveState(true);
|
||||
});
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((archive: boolean) => {
|
||||
if (archive && this.showId != null) void this.setArchiveState(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,11 +233,14 @@ export class ShowComponent implements OnInit, OnDestroy {
|
||||
data: {songs},
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().pipe(take(1)).subscribe((reported: boolean) => {
|
||||
if (reported) {
|
||||
void this.showService.update$(show.id, {reportedType: 'reported'});
|
||||
}
|
||||
});
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((reported: boolean) => {
|
||||
if (reported) {
|
||||
void this.showService.update$(show.id, {reportedType: 'reported'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public getStatus(show: Show): string {
|
||||
|
||||
@@ -1,113 +1,81 @@
|
||||
@if (iSong && iSong && show) {
|
||||
<div>
|
||||
@if (show.published || fullscreen) {
|
||||
<div class="title published">
|
||||
<div class="key">{{ iSong.key }}</div>
|
||||
<div>{{ iSong.title }}</div>
|
||||
<div>
|
||||
@if (show.published || fullscreen) {
|
||||
<div class="title published">
|
||||
<div class="key">{{ iSong.key }}</div>
|
||||
<div>{{ iSong.title }}</div>
|
||||
</div>
|
||||
} @if (!show.published && !fullscreen) {
|
||||
<div class="song" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle && !edit">
|
||||
@if (dragHandle && !edit) {
|
||||
<button aria-label="Lied verschieben" cdkDragHandle class="drag-handle" type="button"></button>
|
||||
}
|
||||
<span class="title">{{ iSong.title }}</span>
|
||||
@if (!edit) {
|
||||
<div class="keys-container">
|
||||
<div (click)="openKeySelect()" class="keys">
|
||||
@if (iSong.keyOriginal !== iSong.key) {
|
||||
<span>{{ iSong.keyOriginal }} → </span>
|
||||
}
|
||||
<span>{{ iSong.key }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (!show.published && !fullscreen) {
|
||||
<div
|
||||
class="song"
|
||||
[class.show-text-layout]="!!showText"
|
||||
[class.compact-layout]="!showText"
|
||||
[class.with-drag]="dragHandle && !edit"
|
||||
>
|
||||
@if (dragHandle && !edit) {
|
||||
<button
|
||||
aria-label="Lied verschieben"
|
||||
cdkDragHandle
|
||||
class="drag-handle"
|
||||
type="button"
|
||||
></button>
|
||||
}
|
||||
<span class="title">{{ iSong.title }}</span>
|
||||
@if (!edit) {
|
||||
<div class="keys-container">
|
||||
<div (click)="openKeySelect()" class="keys">
|
||||
@if (iSong.keyOriginal !== iSong.key) {
|
||||
<span>{{ iSong.keyOriginal }} → </span>
|
||||
}
|
||||
<span>{{ iSong.key }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (!edit) {
|
||||
<app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
|
||||
matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
|
||||
}
|
||||
@if (!edit) {
|
||||
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
|
||||
matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
|
||||
}
|
||||
</div>
|
||||
@if (!edit) {
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="song select"
|
||||
[class.show-text-layout]="!!showText"
|
||||
[class.compact-layout]="!showText"
|
||||
[class.with-drag]="dragHandle"
|
||||
>
|
||||
@if (dragHandle) {
|
||||
<span class="drag-handle-placeholder"></span>
|
||||
}
|
||||
@if (!showText) {
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="title"></span>
|
||||
} @else {
|
||||
<span class="title"></span>
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
}
|
||||
<span class="btn-edit"></span>
|
||||
<span class="btn-delete"></span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@if (edit) {
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true"
|
||||
[formControl]="editSongControl"
|
||||
class="edit"
|
||||
matInput
|
||||
matTooltip="Tonart ändern"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (edit) {
|
||||
<div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
|
||||
}
|
||||
@if (edit) {
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
|
||||
<app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
|
||||
</app-button-row>
|
||||
}
|
||||
@if (!edit && (showText)) {
|
||||
<app-song-text
|
||||
(chordModeChanged)="onChordModeChanged($event)"
|
||||
[chordMode]="iSong.chordMode"
|
||||
[showSwitch]="!show.published"
|
||||
[text]="iSong.text"
|
||||
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
|
||||
></app-song-text>
|
||||
</div>
|
||||
} @if (!edit) {
|
||||
<app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
|
||||
} @if (!edit) {
|
||||
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
|
||||
}
|
||||
</div>
|
||||
@if (!edit) {
|
||||
<div aria-hidden="true" class="song select" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle">
|
||||
@if (dragHandle) {
|
||||
<span class="drag-handle-placeholder"></span>
|
||||
} @if (!showText) {
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="title"></span>
|
||||
} @else {
|
||||
<span class="title"></span>
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
}
|
||||
<span class="btn-edit"></span>
|
||||
<span class="btn-delete"></span>
|
||||
</div>
|
||||
} } @if (edit) {
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true" [formControl]="editSongControl" class="edit" matInput matTooltip="Tonart ändern"></textarea>
|
||||
</mat-form-field>
|
||||
} @if (edit) {
|
||||
<div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
|
||||
} @if (edit) {
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
|
||||
<app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
|
||||
</app-button-row>
|
||||
} @if (!edit && (showText)) {
|
||||
<app-song-text
|
||||
(chordModeChanged)="onChordModeChanged($event)"
|
||||
[chordMode]="iSong.chordMode"
|
||||
[showSwitch]="!show.published"
|
||||
[text]="iSong.text"
|
||||
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
|
||||
></app-song-text>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user