50 lines
2.1 KiB
HTML
50 lines
2.1 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>
|
|
</div>
|
|
|
|
<!-- <div class="text">{{song.text}}</div>-->
|
|
<app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [showSwitch]="true"
|
|
[text]="song.text"></app-song-text>
|
|
|
|
<mat-chip-list *appRole="['leader', 'contributor']" aria-label="Attribute">
|
|
<mat-chip *ngFor="let flag of getFlags(song.flags)">{{flag}}</mat-chip>
|
|
</mat-chip-list>
|
|
|
|
<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>
|
|
</app-button-row>
|
|
|
|
</app-card>
|
|
<ng-template *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-template>
|
|
</div>
|