Files
wgenerator/src/app/modules/songs/song/song.component.html
2024-06-09 22:28:18 +02:00

88 lines
2.9 KiB
HTML

<div class="split">
<app-card
*ngIf="song$ | async as song"
[heading]="song.number + ' - ' + song.title"
closeLink="../"
>
<div class="song">
<div>
<div *appRole="['leader', 'contributor']" class="detail">
<div>Typ: {{ song.type | songType }}</div>
<div>Tonart: {{ song.key }}</div>
<div>Tempo: {{ song.tempo }}</div>
<div>Status: {{ (song.status | status) || "entwurf" }}</div>
<div *ngIf="song.legalOwner">
Rechteinhaber: {{ song.legalOwner | legalOwner }}
</div>
<div *ngIf="song.legalOwnerId && song.legalOwner === 'CCLI'">
<a
href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
target="_blank"
>
CCLI Nummer: {{ song.legalOwnerId }}
</a>
</div>
<div *ngIf="song.legalOwnerId && song.legalOwner !== 'CCLI'">
Rechteinhaber ID: {{ song.legalOwnerId }}
</div>
<div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
<div *ngIf="song.label">Verlag: {{ song.label }}</div>
<div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
<div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
<div *ngIf="songCount$()|async as count">Wie oft verwendet: {{ count }}</div>
</div>
</div>
<app-song-text
*ngIf="user$ | async as user"
[chordMode]="user.chordMode"
[showSwitch]="true"
[text]="song.text"
></app-song-text>
<mat-chip-listbox
*appRole="['leader', 'contributor']"
aria-label="Attribute"
>
<mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
flag
}}
</mat-chip-option>
</mat-chip-listbox>
<div *appRole="['leader', 'contributor']" class="text">
{{ song.comment }}
</div>
</div>
<app-button-row>
<app-button
(click)="onDelete(song.id)"
*appRole="['admin']"
[icon]="faDelete"
>Löschen
</app-button>
<app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
>Bearbeiten
</app-button>
<ng-container *appRole="['leader']">
<app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
Zu Veranstaltung hinzufügen
</app-button>
<mat-menu #menu="matMenu">
<app-button (click)="addSongToShow(show, song)" *ngFor="let show of privateShows$|async">
{{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
</app-button>
</mat-menu>
</ng-container>
</app-button-row>
</app-card>
<ng-container *ngIf="files$ | async as files">
<app-card *ngIf="files.length > 0" heading="Anhänge">
<p *ngFor="let file of files$ | async">
<app-file [file]="file"></app-file>
</p>
</app-card>
</ng-container>
</div>