benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

new song GUI

Browse Source
This commit is contained in:
Benjamin Ifland
2019-03-25 15:13:52 +01:00
parent 881729ed84
commit dc01c60e67
24 changed files with 293 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
WEB/src/app/components/songs/song-edit/song-edit.component.html
View File

@@ -1,61 +1,18 @@
<div class="song-detail-container">
<mat-card class="mat-elevation-z8" [@blend] *ngIf="form">
<mat-card class="mat-elevation-z8" *ngIf="form">
<mat-card-header>
<div mat-card-avatar>
<button mat-icon-button (click)="onBack()">
<button mat-icon-button (click)="onBack()" color="warn">
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
<mat-card-title>Titel bearbeiten</mat-card-title>
<mat-card-subtitle>Daten werden nach der Eingabe automatisch gespeichert</mat-card-subtitle>
<mat-card-subtitle>
Daten werden nach der Eingabe automatisch gespeichert
</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>
<mat-form-field>
<textarea
matInput
placeholder="Kommentare"
[formControl]="form.controls.Comments"
[matTextareaAutosize]="true"
></textarea>
</mat-form-field>
</form>
<app-song-form [form]="form"></app-song-form>
</mat-card-content>
<!-- <mat-card-actions>
<button mat-button (click)="onClickDownload()">Herunterladen</button>

12
WEB/src/app/components/songs/song-edit/song-edit.component.less
View File

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

46
WEB/src/app/components/songs/song-edit/song-edit.component.ts
View File

@@ -6,56 +6,20 @@ import {
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';
import { State } from 'src/app/data/state';
@Component({
selector: 'app-song-edit',
templateUrl: './song-edit.component.html',
styleUrls: ['./song-edit.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [blend]
changeDetection: ChangeDetectionStrategy.OnPush
})
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,
@@ -64,11 +28,11 @@ export class SongEditComponent implements OnInit {
) {}
ngOnInit() {
this.form = this.editSongService.initEditForm();
this.form = this.editSongService.initEditForm(true);
this.change.markForCheck();
}
public onBack(): void {
this.songsService.edit = false;
this.songsService.state = State.read;
}
}

36
WEB/src/app/components/songs/song-form/keys.ts Normal file
View File

@@ -0,0 +1,36 @@
export const 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'
];

53
WEB/src/app/components/songs/song-form/song-form.component.html Normal file
View File

@@ -0,0 +1,53 @@
<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>
<input
matInput
placeholder="Nummer"
[formControl]="form.controls.Number"
/>
</mat-form-field>
<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>
<mat-form-field>
<textarea
matInput
placeholder="Kommentare"
[formControl]="form.controls.Comments"
[matTextareaAutosize]="true"
></textarea>
</mat-form-field>
</form>

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

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

13
WEB/src/app/components/songs/song-form/song-form.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { FormGroup } from '@angular/forms';
import { Component, Input } from '@angular/core';
import { keys } from './keys';
@Component({
selector: 'app-song-form',
templateUrl: './song-form.component.html',
styleUrls: ['./song-form.component.less']
})
export class SongFormComponent {
@Input() public form: FormGroup;
public keys = keys;
}

22
WEB/src/app/components/songs/song-new/song-new.component.html Normal file
View File

@@ -0,0 +1,22 @@
<div class="song-detail-container">
<mat-card class="mat-elevation-z8" *ngIf="form">
<mat-card-header>
<div mat-card-avatar>
<button mat-icon-button (click)="onBack()" color="warn">
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
<mat-card-title>Neuen Titel anlegen</mat-card-title>
<mat-card-subtitle>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<app-song-form [form]="form"></app-song-form>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faSave"></fa-icon> Speichern
</button>
</mat-card-actions>
</mat-card>
</div>

3
WEB/src/app/components/songs/song-new/song-new.component.less Normal file
View File

@@ -0,0 +1,3 @@
:host {
display: block;
}

34
WEB/src/app/components/songs/song-new/song-new.component.ts Normal file
View File

@@ -0,0 +1,34 @@
import { EditSongService } from './../../../data/edit-song.service';
import { FormGroup } from '@angular/forms';
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { faLongArrowAltLeft, faSave } from '@fortawesome/free-solid-svg-icons';
import { State } from 'src/app/data/state';
import { SongsService } from 'src/app/data/songs.service';
@Component({
selector: 'app-song-new',
templateUrl: './song-new.component.html',
styleUrls: ['./song-new.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SongNewComponent implements OnInit {
public faArrow = faLongArrowAltLeft;
public faSave = faSave;
public form: FormGroup;
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) { }
ngOnInit() {
this.form = this.editSongService.initEditForm(false);
this.change.markForCheck();
}
public onBack(): void {
this.songsService.state = State.list;
}
}

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

@@ -1,8 +1,8 @@
<div class="song-detail-container">
<mat-card class="mat-elevation-z8" [@blend] *ngIf="selectedSongId !== 0">
<div class="song-detail-container" *ngIf="song">
<mat-card class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar>
<button mat-icon-button (click)="onBack()">
<button mat-icon-button (click)="onBack()" color="warn">
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
@@ -15,7 +15,6 @@
<p *ngFor="let line of comments">{{ line }}</p>
</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>

6
WEB/src/app/components/songs/song/song.component.less
View File

@@ -1,4 +1,8 @@
p {
margin: 0;
min-height: 10px;
}
}
:host {
display: block;
}

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

@@ -7,14 +7,13 @@ import {
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 { blend } from 'src/app/services/animation';
import { State } from 'src/app/data/state';
@Component({
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [blend]
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SongComponent {
public song: Song;
@@ -48,14 +47,14 @@ export class SongComponent {
}
public onClickEdit(): void {
this.songService.edit = true;
this.songService.state = State.edit;
}
public get text(): string[] {
return this.song.Text ? this.song.Text.split(/\r?\n/) : [];
return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
}
public get comments(): string[] {
return this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
}
}

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

@@ -1,3 +1,4 @@
<app-table></app-table>
<app-song *ngIf="!songsService.edit"></app-song>
<app-song-edit *ngIf="songsService.edit"></app-song-edit>
<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
<app-song-edit [@blend] *ngIf="songsService.state === State.edit"></app-song-edit>
<app-song-new [@blend] *ngIf="songsService.state === State.new"></app-song-new>

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

@@ -1,12 +1,16 @@
import { blend } from 'src/app/services/animation';
import { Component } from '@angular/core';
import { SongsService } from 'src/app/data/songs.service';
import { State } from 'src/app/data/state';
@Component({
selector: 'app-songs',
templateUrl: './songs.component.html',
styleUrls: ['./songs.component.less']
styleUrls: ['./songs.component.less'],
animations: [blend]
})
export class SongsComponent {
public State = State;
constructor(public songsService: SongsService) {
songsService.loadSongList();
}

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

@@ -1,8 +1,9 @@
<div
class="page-container mat-elevation-z8"
[class.pinned]="selectedSongId !== 0"
[class.pinned]="songsService.state !== State.list"
>
<div class="table-container">
<button mat-icon-button (click)="onClickNew()" class="button-new"><fa-icon [icon]="faNew"></fa-icon></button>
<table
mat-table
[dataSource]="songsService.songs | async"

12
WEB/src/app/components/songs/table/table.component.less
View File

@@ -10,4 +10,16 @@ table {
overflow: auto;
}
.button-new {
position: absolute;
right: 5px;
top: 5px;
font-size: 2em;
z-index: 1000;
color: #aaa;
&:hover {
color: #000;
}
}

13
WEB/src/app/components/songs/table/table.component.ts
View File

@@ -4,6 +4,8 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { State } from 'src/app/data/state';
import { faFileMedical } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-table',
@@ -13,10 +15,12 @@ import {
})
export class TableComponent {
public selectedSongId = 0;
public State = State;
public faNew = faFileMedical;
public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo'];
public columnsPinned = ['Number', 'Name'];
public get columns(): string[] {
return this.selectedSongId === 0 ? this.columnsFull : this.columnsPinned;
return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
}
constructor(
@@ -42,4 +46,11 @@ export class TableComponent {
this.songsService.selectSong(id);
this.change.detectChanges();
}
public onClickNew(): void {
this.songsService.selectSong(null);
this.songsService.state = State.new;
this.change.detectChanges();
}
}