benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

edit song GUI

Browse Source
This commit is contained in:
Benjamin Ifland
2019-03-24 16:33:29 +01:00
parent 915caf23b0
commit a46dae93db
13 changed files with 215 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
WEB/src/app/components/songs/song-edit/song-edit.component.html Normal file
View File

@@ -0,0 +1,59 @@
<div class="song-detail-container">
<mat-card class="mat-elevation-z8" [@blend] *ngIf="form">
<mat-card-header>
<div mat-card-avatar>
<button mat-icon-button (click)="onBack()">
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
<mat-card-title>Titel bearbeiten</mat-card-title>
<!-- <mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle> -->
</mat-card-header>
<mat-card-content>
<form>
<mat-form-field>
<input
matInput
placeholder="Titel"
[formControl]="form.controls.Name"
/>
</mat-form-field>
<div class="row">
<mat-radio-group [formControl]="form.controls.SongType">
<mat-radio-button value="Praise">Lobpreis</mat-radio-button>
<mat-radio-button value="Worship">Anbetung</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<mat-label>Tonart</mat-label>
<mat-select [formControl]="form.controls.Key">
<mat-option *ngFor="let key of keys" [value]="key">
{{ key }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input
matInput
placeholder="Tempo"
[formControl]="form.controls.Tempo"
/>
</mat-form-field>
</div>
<mat-form-field>
<textarea
matInput
placeholder="Liedtext"
[formControl]="form.controls.Text"
[matTextareaAutosize]="true"
></textarea>
</mat-form-field>
</form>
</mat-card-content>
<!-- <mat-card-actions>
<button mat-button (click)="onClickDownload()">Herunterladen</button>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
</button>
</mat-card-actions> -->
</mat-card>
</div>

9
WEB/src/app/components/songs/song-edit/song-edit.component.less Normal file
View File

@@ -0,0 +1,9 @@
form {
display: flex;
flex-direction: column;
.row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-column-gap: 20px;
}
}

74
WEB/src/app/components/songs/song-edit/song-edit.component.ts Normal file
View File

@@ -0,0 +1,74 @@
import { SongsService } from 'src/app/data/songs.service';
import { FormGroup } from '@angular/forms';
import {
Component,
OnInit,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { blend } from 'src/app/services/animation';
import { EditSongService } from 'src/app/data/edit-song.service';
import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-song-edit',
templateUrl: './song-edit.component.html',
styleUrls: ['./song-edit.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [blend]
})
export class SongEditComponent implements OnInit {
public form: FormGroup = null;
public faArrow = faLongArrowAltLeft;
public keys = [
'C',
'C#',
'Db',
'D',
'D#',
'Eb',
'E',
'F',
'F#',
'Gb',
'G',
'G#',
'Ab',
'A',
'A#',
'B',
'H',
'c',
'c#',
'db',
'd',
'd#',
'eb',
'e',
'f',
'f#',
'gb',
'g',
'g#',
'ab',
'a',
'A#',
'b',
'h'
];
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) {}
ngOnInit() {
this.form = this.editSongService.initEditForm();
this.change.markForCheck();
}
public onBack(): void {
this.songsService.edit = false;
}
}

3
WEB/src/app/components/songs/song/song.component.html
View File

@@ -14,6 +14,9 @@
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="onClickDownload()">Herunterladen</button>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
</button>
</mat-card-actions>
</mat-card>
</div>

23
WEB/src/app/components/songs/song/song.component.ts
View File

@@ -4,33 +4,22 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
import { faLongArrowAltLeft, faEdit } from '@fortawesome/free-solid-svg-icons';
import { Song } from 'src/app/models/song.model';
import { DownloadService } from 'src/app/data/download.service';
import { trigger, transition, style, animate } from '@angular/animations';
import { blend } from 'src/app/services/animation';
@Component({
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('blend', [
transition(':enter', [
style({ opacity: 0 }),
animate('700ms', style({ opacity: 0 })),
animate('300ms', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }),
animate('300ms', style({ opacity: 0 }))
])
])
]
animations: [blend]
})
export class SongComponent {
public song: Song;
public faArrow = faLongArrowAltLeft;
public faEdit = faEdit;
public selectedSongId = 0;
constructor(
@@ -58,6 +47,10 @@ export class SongComponent {
this.downloadService.get(id, false);
}
public onClickEdit(): void {
this.songService.edit = true;
}
public get text(): string[] {
return this.song.Text.split(/\r?\n/).filter(_ => _ !== ' ');
}

3
WEB/src/app/components/songs/songs.component.html
View File

@@ -1,2 +1,3 @@
<app-table></app-table>
<app-song></app-song>
<app-song *ngIf="!songsService.edit"></app-song>
<app-song-edit *ngIf="songsService.edit"></app-song-edit>

4
WEB/src/app/components/songs/songs.component.ts
View File

@@ -7,7 +7,7 @@ import { SongsService } from 'src/app/data/songs.service';
styleUrls: ['./songs.component.less']
})
export class SongsComponent {
constructor(songService: SongsService) {
songService.loadSongList();
constructor(public songsService: SongsService) {
songsService.loadSongList();
}
}