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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user