new song sync

This commit is contained in:
Benjamin Ifland
2019-03-25 18:04:30 +01:00
parent dc01c60e67
commit 42e9936b6c
9 changed files with 94 additions and 27 deletions

View File

@@ -14,8 +14,8 @@
<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-button (click)="onClickAdd()">
<fa-icon [icon]="faSave"></fa-icon> neu anlegen
</button>
</mat-card-actions>
</mat-card>

View File

@@ -31,4 +31,8 @@ export class SongNewComponent implements OnInit {
this.songsService.state = State.list;
}
public onClickAdd(): void {
this.songsService.saveNewSong$(this.form.value).subscribe();
}
}

View File

@@ -7,7 +7,13 @@
</button>
</div>
<mat-card-title>{{ song.Name }}</mat-card-title>
<mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle>
<mat-card-subtitle>
<mat-chip-list>
<mat-chip *ngIf="renderSongType(song.SongType)" [style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
<mat-chip *ngIf="song.Key">Tonart: {{ song.Key }}</mat-chip>
<mat-chip *ngIf="song.Tempo">Tempo: {{ song.Tempo }}</mat-chip>
</mat-chip-list></mat-card-subtitle
>
</mat-card-header>
<mat-card-content>
<p *ngFor="let line of text">{{ line }}</p>
@@ -16,7 +22,7 @@
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
<fa-icon [icon]="faEdit"></fa-icon> bearbeiten
</button>
</mat-card-actions>
</mat-card>

View File

@@ -57,4 +57,12 @@ export class SongComponent {
public get comments(): string[] {
return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
}
public renderSongType(songType: string) {
switch (songType) {
case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
default: return null;
}
}
}

View File

@@ -12,6 +12,6 @@ import { State } from 'src/app/data/state';
export class SongsComponent {
public State = State;
constructor(public songsService: SongsService) {
songsService.loadSongList();
songsService.loadSongList$().subscribe();
}
}

View File

@@ -3,7 +3,9 @@
[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>
<button mat-icon-button (click)="onClickNew()" class="button-new">
<fa-icon [icon]="faNew"></fa-icon>
</button>
<table
mat-table
[dataSource]="songsService.songs | async"
@@ -11,7 +13,11 @@
>
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{ element.Number }}</td>
<td mat-cell *matCellDef="let element">
<mat-chip-list>
<mat-chip>{{ element.Number }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<ng-container matColumnDef="Name">
@@ -31,8 +37,13 @@
<ng-container matColumnDef="SongType">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-chip-list *ngIf="element.SongType && element.SongType!=='None'">
<mat-chip [style.background-color]="renderSongType(element.SongType).color">{{ renderSongType(element.SongType).name }}</mat-chip>
<mat-chip-list
*ngIf="element.SongType && element.SongType !== 'None'"
>
<mat-chip
[style.background-color]="renderSongType(element.SongType).color"
>{{ renderSongType(element.SongType).name }}</mat-chip
>
</mat-chip-list>
</td>
</ng-container>