migrate angular 21
This commit is contained in:
@@ -1,109 +1,136 @@
|
||||
<div *ngIf="show$ | async as show">
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
@if (show$ | async; as show) {
|
||||
<div>
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
heading="{{ show.showType | showType }}, {{
|
||||
show.date.toDate() | date: 'dd.MM.yyyy'
|
||||
}} - {{ getStatus(show) }}"
|
||||
>
|
||||
<p *ngIf="!useSwiper">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
</p>
|
||||
<div class="head">
|
||||
<div>
|
||||
<mat-checkbox *ngIf="!useSwiper" [(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>
|
||||
<div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
|
||||
[cdkDropListDisabled]="show.published || showText"
|
||||
[style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
|
||||
[style.font-size]="textSize + 'em'"
|
||||
cdkDropList
|
||||
class="song-list">
|
||||
<div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
|
||||
<app-song
|
||||
[fullscreen]="useSwiper"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="showText"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
</div>
|
||||
</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'"
|
||||
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>
|
||||
<div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
|
||||
<fa-icon [icon]="faNextSong"></fa-icon>
|
||||
>
|
||||
@if (!useSwiper) {
|
||||
<p>{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
</p>
|
||||
}
|
||||
<div class="head">
|
||||
<div>
|
||||
@if (!useSwiper) {
|
||||
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
|
||||
<ng-container *ngIf="songs$ | async as songs">
|
||||
<app-add-song
|
||||
*ngIf="songs && !show.published && !useSwiper"
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs"
|
||||
></app-add-song>
|
||||
</ng-container>
|
||||
|
||||
<app-button-row *ngIf="!useSwiper">
|
||||
<ng-container *appRole="['leader']">
|
||||
<ng-container *appOwner="show.owner">
|
||||
<app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
|
||||
Archivieren
|
||||
<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.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
|
||||
[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
|
||||
[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) {
|
||||
<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(true)" [icon]="faPublish">
|
||||
Veröffentlichen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published) {
|
||||
<app-button (click)="onPublish(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) {
|
||||
<app-button (click)="onChange(show.id)" [icon]="faSliders">
|
||||
Ändern
|
||||
</app-button>
|
||||
}
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
|
||||
Herunterladen
|
||||
</app-button>
|
||||
<app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
|
||||
Wiederherstellen
|
||||
</app-button>
|
||||
<app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
|
||||
Veröffentlichen
|
||||
</app-button>
|
||||
<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)" *ngIf="!show.published" [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>
|
||||
<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>
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.co
|
||||
import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
|
||||
import {GuestShowService} from '../../guest/guest-show.service';
|
||||
import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
|
||||
import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
|
||||
import {AsyncPipe, DatePipe} from '@angular/common';
|
||||
import {CardComponent} from '../../../widget-modules/components/card/card.component';
|
||||
import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
|
||||
import {MatCheckbox} from '@angular/material/checkbox';
|
||||
@@ -56,7 +56,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
|
||||
animations: [fade],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [
|
||||
NgIf,
|
||||
CardComponent,
|
||||
UserNameComponent,
|
||||
MatCheckbox,
|
||||
@@ -65,7 +64,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
|
||||
MenuButtonComponent,
|
||||
MatTooltip,
|
||||
CdkDropList,
|
||||
NgFor,
|
||||
CdkDrag,
|
||||
SongComponent,
|
||||
FaIconComponent,
|
||||
|
||||
@@ -1,47 +1,69 @@
|
||||
<div *ngIf="iSong && iSong && show">
|
||||
<div *ngIf="show.published || fullscreen" class="title published">
|
||||
<div class="key">{{ iSong.key }}</div>
|
||||
<div>{{ iSong.title }}</div>
|
||||
</div>
|
||||
|
||||
<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 }} → </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>
|
||||
@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="song">
|
||||
<span class="title">{{ iSong.title }}</span>
|
||||
@if (!edit) {
|
||||
<span class="keys">
|
||||
@if (iSong.keyOriginal !== iSong.key) {
|
||||
<span>{{ iSong.keyOriginal }} → </span>
|
||||
}<span
|
||||
(click)="openKeySelect()">{{ iSong.key }}</span>
|
||||
@if (keys) {
|
||||
<mat-form-field (click)="option.open()" class="transpose">
|
||||
<mat-select #option [formControl]="keyFormControl">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
@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) {
|
||||
<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>
|
||||
</span>
|
||||
<app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
|
||||
matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
|
||||
<app-menu-button (click)="onDelete()" *ngIf="!edit" [icon]="faDelete" class="btn-delete btn-icon"
|
||||
matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
|
||||
}
|
||||
@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>
|
||||
|
||||
<mat-form-field *ngIf="edit" appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true"
|
||||
[formControl]="editSongControl"
|
||||
class="edit"
|
||||
matInput
|
||||
matTooltip="Tonart ändern"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
<div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
|
||||
<app-button-row *ngIf="edit">
|
||||
<app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
|
||||
<app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
|
||||
</app-button-row>
|
||||
|
||||
<app-song-text
|
||||
(chordModeChanged)="onChordModeChanged($event)"
|
||||
*ngIf="!edit && (showText )"
|
||||
[chordMode]="iSong.chordMode"
|
||||
[showSwitch]="!show.published"
|
||||
[text]="iSong.text"
|
||||
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
|
||||
></app-song-text>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ 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';
|
||||
import {NgFor, NgIf} from '@angular/common';
|
||||
|
||||
import {MatFormField, MatLabel} from '@angular/material/form-field';
|
||||
import {MatOption} from '@angular/material/core';
|
||||
import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
|
||||
@@ -24,11 +24,9 @@ import {ButtonComponent} from '../../../../widget-modules/components/button/butt
|
||||
styleUrls: ['./song.component.less'],
|
||||
animations: [fade],
|
||||
imports: [
|
||||
NgIf,
|
||||
MatFormField,
|
||||
MatSelect,
|
||||
ReactiveFormsModule,
|
||||
NgFor,
|
||||
MatOption,
|
||||
MenuButtonComponent,
|
||||
MatTooltip,
|
||||
|
||||
Reference in New Issue
Block a user