114 lines
3.8 KiB
HTML
114 lines
3.8 KiB
HTML
@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"
|
|
[class.show-text-layout]="!!showText"
|
|
[class.compact-layout]="!showText"
|
|
[class.with-drag]="dragHandle && !edit"
|
|
>
|
|
@if (dragHandle && !edit) {
|
|
<button
|
|
aria-label="Lied verschieben"
|
|
cdkDragHandle
|
|
class="drag-handle"
|
|
type="button"
|
|
></button>
|
|
}
|
|
<span class="title">{{ iSong.title }}</span>
|
|
@if (!edit) {
|
|
<div class="keys-container">
|
|
<div (click)="openKeySelect()" class="keys">
|
|
@if (iSong.keyOriginal !== iSong.key) {
|
|
<span>{{ iSong.keyOriginal }} → </span>
|
|
}
|
|
<span>{{ iSong.key }}</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
@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) {
|
|
<div
|
|
aria-hidden="true"
|
|
class="song select"
|
|
[class.show-text-layout]="!!showText"
|
|
[class.compact-layout]="!showText"
|
|
[class.with-drag]="dragHandle"
|
|
>
|
|
@if (dragHandle) {
|
|
<span class="drag-handle-placeholder"></span>
|
|
}
|
|
@if (!showText) {
|
|
<span class="keys">
|
|
<mat-form-field class="keys-select">
|
|
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
|
@for (key of keys; track key) {
|
|
<mat-option [value]="key">{{ key }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</span>
|
|
<span class="title"></span>
|
|
} @else {
|
|
<span class="title"></span>
|
|
<span class="keys">
|
|
<mat-form-field class="keys-select">
|
|
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
|
@for (key of keys; track key) {
|
|
<mat-option [value]="key">{{ key }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</span>
|
|
}
|
|
<span class="btn-edit"></span>
|
|
<span class="btn-delete"></span>
|
|
</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>
|
|
}
|
|
@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>
|
|
}
|