new song sync
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -31,4 +31,8 @@ export class SongNewComponent implements OnInit {
|
||||
this.songsService.state = State.list;
|
||||
}
|
||||
|
||||
public onClickAdd(): void {
|
||||
this.songsService.saveNewSong$(this.form.value).subscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user