diff --git a/src/app/modules/shows/show/song/song.component.html b/src/app/modules/shows/show/song/song.component.html
index 3c9655a..2b5242c 100644
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -1,29 +1,37 @@
-
{{ iSong.title }}
+
{{ iSong.title }}
-
+
{{ iSong.title }}
-
- {{ iSong.keyOriginal }} →
-
+
+ {{ iSong.keyOriginal }} →
+
- {{
- key
- }}
+ {{ key }}
-
+
+
+
+
+ Songtext
+
+
+
Es wird nur der Liedtext für dieser Veranstaltung geändert.
+
+ Speichern
+ Verwerfen
+
+
* {
display: flex;
@@ -16,7 +16,7 @@
overflow: hidden;
}
-mat-form-field {
+.keys {
width: 40px;
margin: -24px 0 -20px 0;
}
@@ -47,6 +47,10 @@ mat-form-field {
grid-area: delete;
justify-content: flex-end;
}
+.btn-edit {
+ grid-area: edit;
+ justify-content: flex-end;
+}
.menu {
display: flex;
@@ -55,3 +59,7 @@ mat-form-field {
button {
}
+
+textarea {
+ font-family: 'Ubuntu Mono', monospace;
+}
diff --git a/src/app/modules/shows/show/song/song.component.ts b/src/app/modules/shows/show/song/song.component.ts
index d0020e4..dff3aca 100644
--- a/src/app/modules/shows/show/song/song.component.ts
+++ b/src/app/modules/shows/show/song/song.component.ts
@@ -6,11 +6,16 @@ import {getScale} from '../../../songs/services/key.helper';
import {FormControl} from '@angular/forms';
import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
import {Show} from '../../services/show';
+import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faEraser} from '@fortawesome/free-solid-svg-icons/faEraser';
+import {fade} from '../../../../animations';
@Component({
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
+ animations: [fade],
})
export class SongComponent implements OnInit {
@Input() public show: Show | null = null;
@@ -20,8 +25,13 @@ export class SongComponent implements OnInit {
public keys: string[] = [];
public faDelete = faTrash;
+ public faEdit = faPenToSquare;
+ public faSave = faSave;
+ public faEraser = faEraser;
public keyFormControl: FormControl = new FormControl();
public iSong: ShowSong | null = null;
+ public edit = false;
+ public editSongControl = new FormControl();
public constructor(private showSongService: ShowSongService) {}
@@ -40,6 +50,22 @@ export class SongComponent implements OnInit {
});
}
+ public onEdit(): void {
+ if (this.iSong) this.editSongControl.setValue(this.iSong.text);
+ this.edit = true;
+ }
+
+ public onDiscard(): void {
+ this.editSongControl.setValue(null);
+ this.edit = false;
+ }
+
+ public onSave(): void {
+ if (this.showId && this.iSong) void this.showSongService.update$(this.showId, this.iSong.id, {text: this.editSongControl.value as string});
+ this.editSongControl.setValue(null);
+ this.edit = false;
+ }
+
public async onDelete(): Promise {
if (!this.showId || !this.iSong || this.index === -1) return;
await this.showSongService.delete$(this.showId, this.iSong.id, this.index);