137 lines
4.8 KiB
HTML
137 lines
4.8 KiB
HTML
@if (show$ | async; as show) {
|
|
<div>
|
|
<app-card
|
|
[fullscreen]="useSwiper"
|
|
closeLink="../"
|
|
heading="{{ show.showType | showType }}, {{
|
|
show.date.toDate() | date: 'dd.MM.yyyy'
|
|
}} - {{ getStatus(show) }}"
|
|
>
|
|
@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>
|
|
<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.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) {
|
|
<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>
|
|
<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>
|
|
}
|