benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

Cleanup Code

Browse Source
This commit is contained in:
benjamin
2019-06-02 18:52:15 +02:00
parent 5180b597d2
commit f88454caf7
45 changed files with 1071 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
WEB/src/app/app-routing.module.ts
View File

@@ -1,21 +1,22 @@
import { SongsComponent } from './components/songs/songs.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {SongsComponent} from './components/songs/songs.component';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{
path: 'songs',
component: SongsComponent
},
{
path: '',
redirectTo: 'songs',
pathMatch: 'full'
}
{
path: 'songs',
component: SongsComponent
},
{
path: '',
redirectTo: 'songs',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export class AppRoutingModule {
}

1
WEB/src/app/app.component.html
View File

@@ -1,2 +1 @@
<router-outlet></router-outlet>

11
WEB/src/app/app.component.ts
View File

@@ -1,8 +1,9 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent { }
export class AppComponent {
}

123
WEB/src/app/app.module.ts
View File

@@ -1,69 +1,70 @@
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ODataModule } from 'odata-v4-ng';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ODataModule} from 'odata-v4-ng';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HttpClientModule} from '@angular/common/http';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatChipsModule } from '@angular/material/chips';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import {MatChipsModule} from '@angular/material/chips';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { TableComponent } from './components/songs/table/table.component';
import { SongsComponent } from './components/songs/songs.component';
import { SongComponent } from './components/songs/song/song.component';
import { SongEditComponent } from './components/songs/song-edit/song-edit.component';
import { SongNewComponent } from './components/songs/song-new/song-new.component';
import { SongFormComponent } from './components/songs/song-form/song-form.component';
import { SongFilesComponent } from './components/songs/song-files/song-files.component';
import { FileUploadModule } from 'ng2-file-upload';
import { SongFileEditComponent } from './components/songs/song-file-edit/song-file-edit.component';
import {TableComponent} from './components/songs/table/table.component';
import {SongsComponent} from './components/songs/songs.component';
import {SongComponent} from './components/songs/song/song.component';
import {SongEditComponent} from './components/songs/song-edit/song-edit.component';
import {SongNewComponent} from './components/songs/song-new/song-new.component';
import {SongFormComponent} from './components/songs/song-form/song-form.component';
import {SongFilesComponent} from './components/songs/song-files/song-files.component';
import {FileUploadModule} from 'ng2-file-upload';
import {SongFileEditComponent} from './components/songs/song-file-edit/song-file-edit.component';
@NgModule({
declarations: [
AppComponent,
SongsComponent,
TableComponent,
SongComponent,
SongEditComponent,
SongNewComponent,
SongFormComponent,
SongFilesComponent,
SongFileEditComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
ODataModule,
declarations: [
AppComponent,
SongsComponent,
TableComponent,
SongComponent,
SongEditComponent,
SongNewComponent,
SongFormComponent,
SongFilesComponent,
SongFileEditComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
ODataModule,
MatInputModule,
MatCardModule,
MatTableModule,
MatButtonModule,
MatChipsModule,
MatRadioModule,
MatSelectModule,
MatTooltipModule,
MatProgressBarModule,
MatInputModule,
MatCardModule,
MatTableModule,
MatButtonModule,
MatChipsModule,
MatRadioModule,
MatSelectModule,
MatTooltipModule,
MatProgressBarModule,
FontAwesomeModule,
FileUploadModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
FontAwesomeModule,
FileUploadModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
export class AppModule {
}

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

@@ -1,24 +1,24 @@
<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>Titel bearbeiten</mat-card-title>
<mat-card-subtitle>
Daten werden nach der Eingabe automatisch gespeichert
</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)="onClickDownload()">Herunterladen</button>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
</button>
</mat-card-actions> -->
</mat-card>
<mat-card *ngIf="form" class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar>
<button (click)="onBack()" color="warn" mat-icon-button>
<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-header>
<mat-card-content>
<app-song-form [form]="form"></app-song-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>

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

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

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

@@ -1,38 +1,34 @@
import { SongsService } from 'src/app/data/songs.service';
import { FormGroup } from '@angular/forms';
import {
Component,
OnInit,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { EditSongService } from 'src/app/data/edit-song.service';
import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
import { State } from 'src/app/data/state';
import {SongsService} from 'src/app/data/songs.service';
import {FormGroup} from '@angular/forms';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
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
selector: 'app-song-edit',
templateUrl: './song-edit.component.html',
styleUrls: ['./song-edit.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SongEditComponent implements OnInit {
public form: FormGroup = null;
public faArrow = faLongArrowAltLeft;
public form: FormGroup = null;
public faArrow = faLongArrowAltLeft;
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) {}
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) {
}
ngOnInit() {
this.form = this.editSongService.initSongEditForm(true);
this.change.markForCheck();
}
ngOnInit() {
this.form = this.editSongService.initSongEditForm(true);
this.change.markForCheck();
}
public onBack(): void {
this.songsService.state = State.read;
}
public onBack(): void {
this.songsService.state = State.read;
}
}

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

@@ -1,17 +1,17 @@
<form *ngIf="form">
<mat-form-field>
<input
matInput
placeholder="Dateiname"
[formControl]="form.controls.Name"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Art</mat-label>
<mat-select [formControl]="form.controls.FileType">
<mat-option *ngFor="let type of fileTypes" [value]="type.value">
{{ type.text }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input
[formControl]="form.controls.Name"
matInput
placeholder="Dateiname"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Art</mat-label>
<mat-select [formControl]="form.controls.FileType">
<mat-option *ngFor="let type of fileTypes" [value]="type.value">
{{ type.text }}
</mat-option>
</mat-select>
</mat-form-field>
</form>

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

@@ -1,6 +1,6 @@
form {
display: grid;
grid-template-columns: 2fr 1fr;
grid-column-gap: 10px;
padding-top: 10px;
}
display: grid;
grid-template-columns: 2fr 1fr;
grid-column-gap: 10px;
padding-top: 10px;
}

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

@@ -1,50 +1,44 @@
import { SongsService } from './../../../data/songs.service';
import { FileType } from './../../../models/files-types.model.ts';
import { FormGroup } from '@angular/forms';
import {
Component,
OnInit,
OnDestroy,
Input,
Output,
EventEmitter
} from '@angular/core';
import { EditSongService } from 'src/app/data/edit-song.service';
import { Subscription } from 'rxjs';
import {SongsService} from '../../../data/songs.service';
import {FileType} from '../../../models/files-types.model.ts';
import {FormGroup} from '@angular/forms';
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {EditSongService} from 'src/app/data/edit-song.service';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-song-file-edit',
templateUrl: './song-file-edit.component.html',
styleUrls: ['./song-file-edit.component.less']
selector: 'app-song-file-edit',
templateUrl: './song-file-edit.component.html',
styleUrls: ['./song-file-edit.component.less']
})
export class SongFileEditComponent implements OnInit, OnDestroy {
@Input() fileId: number;
@Output() back = new EventEmitter();
public form: FormGroup;
public subscription: Subscription;
public fileTypes = [
{ value: FileType.None, text: null },
{ value: FileType.Sheet, text: 'Text' },
{ value: FileType.Chords, text: 'Text + Akkorde' },
{ value: FileType.MuseScore, text: 'MuseScore' }
];
@Input() fileId: number;
@Output() back = new EventEmitter();
public form: FormGroup;
public subscription: Subscription;
public fileTypes = [
{value: FileType.None, text: null},
{value: FileType.Sheet, text: 'Text'},
{value: FileType.Chords, text: 'Text + Akkorde'},
{value: FileType.MuseScore, text: 'MuseScore'}
];
constructor(
private editSongService: EditSongService,
private songService: SongsService
) {}
constructor(
private editSongService: EditSongService,
private songService: SongsService
) {
}
public ngOnInit(): void {
const form = this.editSongService.initFileEditForm(
this.songService.selectedSong.value.ID,
this.fileId
);
this.form = form.form;
this.subscription = form.changeSubscription;
}
public ngOnInit(): void {
const form = this.editSongService.initFileEditForm(
this.songService.selectedSong.value.ID,
this.fileId
);
this.form = form.form;
this.subscription = form.changeSubscription;
}
public ngOnDestroy(): void {
this.form = null;
this.subscription.unsubscribe();
}
public ngOnDestroy(): void {
this.form = null;
this.subscription.unsubscribe();
}
}

174
WEB/src/app/components/songs/song-files/song-files.component.html
View File

@@ -1,90 +1,90 @@
<div class="song-detail-container files" *ngIf="song">
<mat-card class="mat-elevation-z8">
<mat-card-content>
<table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
Angehängte Dateien
</th>
<td mat-cell *matCellDef="let element">
<span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
<app-song-file-edit
[fileId]="element.ID"
(back)="onClickEdit(null)"
*ngIf="fileEditId === element.ID"
></app-song-file-edit>
</td>
</ng-container>
<div *ngIf="song" class="song-detail-container files">
<mat-card class="mat-elevation-z8">
<mat-card-content>
<table [dataSource]="song.Files" class="mat-elevation-z8" mat-table>
<ng-container matColumnDef="name">
<th *matHeaderCellDef mat-header-cell>
Angehängte Dateien
</th>
<td *matCellDef="let element" mat-cell>
<span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
<app-song-file-edit
(back)="onClickEdit(null)"
*ngIf="fileEditId === element.ID"
[fileId]="element.ID"
></app-song-file-edit>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>
<input
type="file"
ng2FileSelect
[uploader]="newFileUploader"
multiple
style="display:none"
#newFileUploaderRef
/>
<button
mat-icon-button
(click)="newFileUploaderRef.click()"
matTooltip="neue Datei hochladen"
matTooltipPosition="left"
>
<fa-icon [icon]="faFileUpload"></fa-icon>
</button>
</th>
<td mat-cell *matCellDef="let element">
<button
mat-icon-button
(click)="onClickEdit(element.ID)"
matTooltip="Eintrag bearbeiten"
matTooltipPosition="left"
*ngIf="fileEditId !== element.ID"
>
<fa-icon [icon]="faEdit"></fa-icon>
</button>
<button
mat-icon-button
(click)="onClickDownload(element.ID, element.Name)"
matTooltip="Datei herunterladen"
matTooltipPosition="left"
*ngIf="fileEditId !== element.ID"
>
<fa-icon [icon]="faDownload"></fa-icon>
</button>
<button
mat-icon-button
matTooltip="Zurück zur Tabelle"
matTooltipPosition="left"
(click)="onClickEdit(null)"
*ngIf="fileEditId === element.ID"
>
<fa-icon [icon]="faArrow"></fa-icon>
</button>
<button
mat-icon-button
matTooltip="Anhang löschen"
matTooltipPosition="left"
(click)="onClickDelete(element.ID)"
*ngIf="fileEditId === element.ID"
>
<fa-icon [icon]="faTrash"></fa-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th *matHeaderCellDef mat-header-cell>
<input
#newFileUploaderRef
[uploader]="newFileUploader"
multiple
ng2FileSelect
style="display:none"
type="file"
/>
<button
(click)="newFileUploaderRef.click()"
mat-icon-button
matTooltip="neue Datei hochladen"
matTooltipPosition="left"
>
<fa-icon [icon]="faFileUpload"></fa-icon>
</button>
</th>
<td *matCellDef="let element" mat-cell>
<button
(click)="onClickEdit(element.ID)"
*ngIf="fileEditId !== element.ID"
mat-icon-button
matTooltip="Eintrag bearbeiten"
matTooltipPosition="left"
>
<fa-icon [icon]="faEdit"></fa-icon>
</button>
<button
(click)="onClickDownload(element.ID, element.Name)"
*ngIf="fileEditId !== element.ID"
mat-icon-button
matTooltip="Datei herunterladen"
matTooltipPosition="left"
>
<fa-icon [icon]="faDownload"></fa-icon>
</button>
<button
(click)="onClickEdit(null)"
*ngIf="fileEditId === element.ID"
mat-icon-button
matTooltip="Zurück zur Tabelle"
matTooltipPosition="left"
>
<fa-icon [icon]="faArrow"></fa-icon>
</button>
<button
(click)="onClickDelete(element.ID)"
*ngIf="fileEditId === element.ID"
mat-icon-button
matTooltip="Anhang löschen"
matTooltipPosition="left"
>
<fa-icon [icon]="faTrash"></fa-icon>
</button>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="columns"
ng2FileDrop
[uploader]="newFileUploader"
(fileOver)="onFileOverNew($event)"
[class.file-over]="fileOverNew"
></tr>
<tr mat-row *matRowDef="let row; columns: columns"></tr>
</table>
</mat-card-content>
</mat-card>
<tr
(fileOver)="onFileOverNew($event)"
*matHeaderRowDef="columns"
[class.file-over]="fileOverNew"
[uploader]="newFileUploader"
mat-header-row
ng2FileDrop
></tr>
<tr *matRowDef="let row; columns: columns" mat-row></tr>
</table>
</mat-card-content>
</mat-card>
</div>

3
WEB/src/app/components/songs/song-files/song-files.component.less
View File

@@ -5,11 +5,12 @@
button {
font-size: 24px;
color: #aaa;
&:hover {
color: #000;
}
}
tr.file-over {
background: #f908;
background: #f908;
}

129
WEB/src/app/components/songs/song-files/song-files.component.ts
View File

@@ -1,74 +1,71 @@
import { switchMap } from 'rxjs/operators';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Song } from 'src/app/models/song.model';
import { SongsService } from 'src/app/data/songs.service';
import { DownloadService } from 'src/app/data/download.service';
import {
faFileUpload,
faDownload,
faEdit,
faLongArrowAltLeft,
faTrash
} from '@fortawesome/free-solid-svg-icons';
import { FileuploadFactory } from 'src/app/services/fileupload.factory';
import { FileUploader } from 'ng2-file-upload';
import {switchMap} from 'rxjs/operators';
import {ChangeDetectorRef, Component} from '@angular/core';
import {Song} from 'src/app/models/song.model';
import {SongsService} from 'src/app/data/songs.service';
import {DownloadService} from 'src/app/data/download.service';
import {faDownload, faEdit, faFileUpload, faLongArrowAltLeft, faTrash} from '@fortawesome/free-solid-svg-icons';
import {FileuploadFactory} from 'src/app/services/fileupload.factory';
import {FileUploader} from 'ng2-file-upload';
@Component({
selector: 'app-song-files',
templateUrl: './song-files.component.html',
styleUrls: ['./song-files.component.less']
selector: 'app-song-files',
templateUrl: './song-files.component.html',
styleUrls: ['./song-files.component.less']
})
export class SongFilesComponent {
public song: Song;
public selectedSongId = 0;
public faFileUpload = faFileUpload;
public faTrash = faTrash;
public faArrow = faLongArrowAltLeft;
public faDownload = faDownload;
public faEdit = faEdit;
public columns = ['name', 'action'];
public newFileUploader: FileUploader;
public fileEditId: number;
public song: Song;
public selectedSongId = 0;
public faFileUpload = faFileUpload;
public faTrash = faTrash;
public faArrow = faLongArrowAltLeft;
public faDownload = faDownload;
public faEdit = faEdit;
public columns = ['name', 'action'];
public newFileUploader: FileUploader;
public fileEditId: number;
public fileOverNew = false;
public fileOverNew = false;
constructor(
private downloadService: DownloadService,
private fileuploadFactory: FileuploadFactory,
private songService: SongsService,
change: ChangeDetectorRef
) {
songService.selectedSong.subscribe(_ => {
if (_) {
this.selectedSongId = _.ID;
this.song = _;
this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
this.newFileUploader.onCompleteItem = () =>
songService.selectSong(_.ID).subscribe();
this.newFileUploader.onProgressItem = () => change.markForCheck;
} else {
this.selectedSongId = 0;
this.song = null;
this.newFileUploader = null;
}
change.markForCheck();
});
}
constructor(
private downloadService: DownloadService,
private fileuploadFactory: FileuploadFactory,
private songService: SongsService,
change: ChangeDetectorRef
) {
songService.selectedSong.subscribe(_ => {
if (_) {
this.selectedSongId = _.ID;
this.song = _;
this.newFileUploader = FileuploadFactory.provideForNewFiles(_.ID);
this.newFileUploader.onCompleteItem = () =>
songService.selectSong(_.ID).subscribe();
this.newFileUploader.onProgressItem = () => change.markForCheck;
} else {
this.selectedSongId = 0;
this.song = null;
this.newFileUploader = null;
}
change.markForCheck();
});
}
public onClickDownload(fileId: number, filename): void {
this.downloadService.get(this.selectedSongId, fileId, filename);
}
public onFileOverNew(hover: boolean): void {
this.fileOverNew = hover;
}
public onClickEdit(fileId: number): void {
this.fileEditId = fileId;
}
public onClickDelete(fileId: number): void {
const songId = this.song.ID;
this.songService
.deleteFile$(songId, fileId)
.pipe(switchMap(() => this.songService.selectSong(songId)))
.subscribe();
}
public onClickDownload(fileId: number, filename): void {
this.downloadService.get(this.selectedSongId, fileId, filename);
}
public onFileOverNew(hover: boolean): void {
this.fileOverNew = hover;
}
public onClickEdit(fileId: number): void {
this.fileEditId = fileId;
}
public onClickDelete(fileId: number): void {
const songId = this.song.ID;
this.songService
.deleteFile$(songId, fileId)
.pipe(switchMap(() => this.songService.selectSong(songId)))
.subscribe();
}
}

2
WEB/src/app/components/songs/song-form/keys.ts
View File

@@ -33,4 +33,4 @@ export const keys = [
'A#',
'b',
'h'
];
];

82
WEB/src/app/components/songs/song-form/song-form.component.html
View File

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

15
WEB/src/app/components/songs/song-form/song-form.component.less
View File

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

18
WEB/src/app/components/songs/song-form/song-form.component.ts
View File

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

41
WEB/src/app/components/songs/song-new/song-new.component.html
View File

@@ -1,22 +1,23 @@
<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)="onClickAdd()">
<fa-icon [icon]="faSave"></fa-icon> neu anlegen
</button>
</mat-card-actions>
<mat-card *ngIf="form" class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar>
<button (click)="onBack()" color="warn" mat-icon-button>
<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 (click)="onClickAdd()" mat-button>
<fa-icon [icon]="faSave"></fa-icon>
neu anlegen
</button>
</mat-card-actions>
</mat-card>
</div>
</div>

59
WEB/src/app/components/songs/song-new/song-new.component.ts
View File

@@ -1,39 +1,40 @@
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';
import {EditSongService} from '../../../data/edit-song.service';
import {FormGroup} from '@angular/forms';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} 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
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;
public faArrow = faLongArrowAltLeft;
public faSave = faSave;
public form: FormGroup;
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) { }
constructor(
private editSongService: EditSongService,
private songsService: SongsService,
private change: ChangeDetectorRef
) {
}
ngOnInit() {
this.form = this.editSongService.initSongEditForm(false);
this.change.markForCheck();
}
ngOnInit() {
this.form = this.editSongService.initSongEditForm(false);
this.change.markForCheck();
}
public onBack(): void {
this.songsService.state = State.list;
this.songsService.resetSelectedSong();
}
public onBack(): void {
this.songsService.state = State.list;
this.songsService.resetSelectedSong();
}
public onClickAdd(): void {
this.songsService.saveNewSong$(this.form.value).subscribe();
}
public onClickAdd(): void {
this.songsService.saveNewSong$(this.form.value).subscribe();
}
}

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

@@ -1,29 +1,32 @@
<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()" color="warn">
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
<mat-card-title>{{ song.Name }}</mat-card-title>
<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>
<br />
<p *ngFor="let line of comments">{{ line }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="onClickEdit()">
<fa-icon [icon]="faEdit"></fa-icon> bearbeiten
</button>
</mat-card-actions>
</mat-card>
<div *ngIf="song" class="song-detail-container">
<mat-card class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar>
<button (click)="onBack()" color="warn" mat-icon-button>
<fa-icon [icon]="faArrow"></fa-icon>
</button>
</div>
<mat-card-title>{{ song.Name }}</mat-card-title>
<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>
<br/>
<p *ngFor="let line of comments">{{ line }}</p>
</mat-card-content>
<mat-card-actions>
<button (click)="onClickEdit()" mat-button>
<fa-icon [icon]="faEdit"></fa-icon>
bearbeiten
</button>
</mat-card-actions>
</mat-card>
</div>

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

@@ -1,62 +1,61 @@
import { SongsService } from 'src/app/data/songs.service';
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
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 { State } from 'src/app/data/state';
import {SongsService} from 'src/app/data/songs.service';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
import {faEdit, faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons';
import {Song} from 'src/app/models/song.model';
import {State} from 'src/app/data/state';
@Component({
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SongComponent {
public song: Song;
public faArrow = faLongArrowAltLeft;
public faEdit = faEdit;
public selectedSongId = 0;
public song: Song;
public faArrow = faLongArrowAltLeft;
public faEdit = faEdit;
public selectedSongId = 0;
constructor(
private songService: SongsService,
change: ChangeDetectorRef
) {
songService.selectedSong.subscribe(_ => {
if (_) {
this.selectedSongId = _.ID;
this.song = _;
} else {
this.selectedSongId = 0;
this.song = null;
}
change.markForCheck();
});
}
public onBack(): void {
this.songService.resetSelectedSong();
}
public onClickEdit(): void {
this.songService.state = State.edit;
}
public get text(): string[] {
return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
}
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;
constructor(
private songService: SongsService,
change: ChangeDetectorRef
) {
songService.selectedSong.subscribe(_ => {
if (_) {
this.selectedSongId = _.ID;
this.song = _;
} else {
this.selectedSongId = 0;
this.song = null;
}
change.markForCheck();
});
}
public get text(): string[] {
return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
}
public get comments(): string[] {
return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
}
public onBack(): void {
this.songService.resetSelectedSong();
}
public onClickEdit(): void {
this.songService.state = State.edit;
}
public renderSongType(songType: string) {
switch (songType) {
case 'Praise':
return {name: 'Lobpreis', color: '#99FFB8'};
case 'Worship':
return {name: 'Anbetung', color: '#C999FF'};
default:
return null;
}
}
}
}

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

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

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

@@ -1,17 +1,18 @@
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';
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'],
animations: [blend]
selector: 'app-songs',
templateUrl: './songs.component.html',
styleUrls: ['./songs.component.less'],
animations: [blend]
})
export class SongsComponent {
public State = State;
constructor(public songsService: SongsService) {
songsService.loadSongList$().subscribe();
}
public State = State;
constructor(public songsService: SongsService) {
songsService.loadSongList$().subscribe();
}
}

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

@@ -1,75 +1,75 @@
<div
class="page-container mat-elevation-z8"
[class.pinned]="songsService.state !== State.list"
[class.pinned]="songsService.state !== State.list"
class="page-container mat-elevation-z8"
>
<div class="table-container">
<button
mat-icon-button
(click)="onClickNew()"
class="button-new"
matTooltip="neuen Titel anlegen"
matTooltipPosition="left"
>
<fa-icon [icon]="faNew"></fa-icon>
</button>
<table
mat-table
[dataSource]="songsService.songs | async"
class="mat-elevation-z8"
>
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">
<mat-chip-list>
<mat-chip>{{ element.Number }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<div class="table-container">
<button
(click)="onClickNew()"
class="button-new"
mat-icon-button
matTooltip="neuen Titel anlegen"
matTooltipPosition="left"
>
<fa-icon [icon]="faNew"></fa-icon>
</button>
<table
[dataSource]="songsService.songs | async"
class="mat-elevation-z8"
mat-table
>
<ng-container matColumnDef="Number">
<th *matHeaderCellDef mat-header-cell>#</th>
<td *matCellDef="let element" mat-cell>
<mat-chip-list>
<mat-chip>{{ element.Number }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>Titel</th>
<td mat-cell *matCellDef="let element">{{ element.Name }}</td>
</ng-container>
<ng-container matColumnDef="Name">
<th *matHeaderCellDef mat-header-cell>Titel</th>
<td *matCellDef="let element" mat-cell>{{ element.Name }}</td>
</ng-container>
<ng-container matColumnDef="Key">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-chip-list *ngIf="element.Key">
<mat-chip>{{ element.Key }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<ng-container matColumnDef="Key">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let element" mat-cell>
<mat-chip-list *ngIf="element.Key">
<mat-chip>{{ element.Key }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<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>
</td>
</ng-container>
<ng-container matColumnDef="SongType">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let element" mat-cell>
<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>
<ng-container matColumnDef="Tempo">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-chip-list *ngIf="element.Tempo">
<mat-chip>{{ element.Tempo }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<ng-container matColumnDef="Tempo">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let element" mat-cell>
<mat-chip-list *ngIf="element.Tempo">
<mat-chip>{{ element.Tempo }}</mat-chip>
</mat-chip-list>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr
[class.selected]="selectedSongId === row.ID"
mat-row
*matRowDef="let row; columns: columns"
(click)="onClick(row.ID)"
></tr>
</table>
</div>
<tr *matHeaderRowDef="columns; sticky: true" mat-header-row></tr>
<tr
(click)="onClick(row.ID)"
*matRowDef="let row; columns: columns"
[class.selected]="selectedSongId === row.ID"
mat-row
></tr>
</table>
</div>
</div>

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

@@ -17,6 +17,7 @@ table {
font-size: 24px;
z-index: 1000;
color: #aaa;
&:hover {
color: #000;
}

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

@@ -1,56 +1,56 @@
import { SongsService } from './../../../data/songs.service';
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { State } from 'src/app/data/state';
import { faFileMedical } from '@fortawesome/free-solid-svg-icons';
import {SongsService} from '../../../data/songs.service';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
import {State} from 'src/app/data/state';
import {faFileMedical} from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
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.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
}
public selectedSongId = 0;
public State = State;
public faNew = faFileMedical;
public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo'];
public columnsPinned = ['Number', 'Name'];
constructor(
public songsService: SongsService,
private change: ChangeDetectorRef
) {
songsService.selectedSong.subscribe(_ => {
this.selectedSongId = _ ? _.ID : 0;
this.change.markForCheck();
}
);
}
public renderSongType(songType: string) {
switch (songType) {
case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
default: return null;
constructor(
public songsService: SongsService,
private change: ChangeDetectorRef
) {
songsService.selectedSong.subscribe(_ => {
this.selectedSongId = _ ? _.ID : 0;
this.change.markForCheck();
}
);
}
}
public onClick(id: number): void {
this.songsService.selectSong(id).subscribe();
this.change.detectChanges();
}
public get columns(): string[] {
return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
}
public onClickNew(): void {
this.songsService.selectSong(null).subscribe();
this.songsService.state = State.new;
this.change.detectChanges();
}
public renderSongType(songType: string) {
switch (songType) {
case 'Praise':
return {name: 'Lobpreis', color: '#99FFB8'};
case 'Worship':
return {name: 'Anbetung', color: '#C999FF'};
default:
return null;
}
}
public onClick(id: number): void {
this.songsService.selectSong(id).subscribe();
this.change.detectChanges();
}
public onClickNew(): void {
this.songsService.selectSong(null).subscribe();
this.songsService.state = State.new;
this.change.detectChanges();
}
}

53
WEB/src/app/data/download.service.ts
View File

@@ -1,32 +1,33 @@
import { base } from './urls';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {base} from './urls';
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class DownloadService {
constructor(private httpClient: HttpClient) {}
constructor(private httpClient: HttpClient) {
}
public get(songId: number, fileId: number, filename: string) {
return this.httpClient
.get(base + '/api/songs/' + songId + '/files/' + fileId, {
responseType: 'blob' as 'json',
observe: 'response'
})
.subscribe(
(response: any) => {
const contentType = response.headers.get('Content-Type');
const downloadLink = document.createElement('a');
const blob = new Blob([response.body], { type: contentType });
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.setAttribute('download', filename);
document.body.appendChild(downloadLink);
downloadLink.click();
},
error => {
console.log('download error:', JSON.stringify(error));
}
);
}
public get(songId: number, fileId: number, filename: string) {
return this.httpClient
.get(base + '/api/songs/' + songId + '/files/' + fileId, {
responseType: 'blob' as 'json',
observe: 'response'
})
.subscribe(
(response: any) => {
const contentType = response.headers.get('Content-Type');
const downloadLink = document.createElement('a');
const blob = new Blob([response.body], {type: contentType});
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.setAttribute('download', filename);
document.body.appendChild(downloadLink);
downloadLink.click();
},
error => {
console.log('download error:', JSON.stringify(error));
}
);
}
}

183
WEB/src/app/data/edit-song.service.ts
View File

@@ -1,105 +1,106 @@
import { FileType } from './../models/files-types.model.ts';
import { SongsService } from 'src/app/data/songs.service';
import { Injectable } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { switchMap } from 'rxjs/operators';
import { Song } from '../models/song.model';
import { Subscription } from 'rxjs';
import {SongsService} from 'src/app/data/songs.service';
import {Injectable} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {switchMap} from 'rxjs/operators';
import {Song} from '../models/song.model';
import {Subscription} from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class EditSongService {
constructor(private songsService: SongsService) {}
public initSongEditForm(attachSync: boolean): FormGroup {
const song = attachSync
? this.songsService.selectedSong.value
: this.defaultValues();
const form = new FormGroup({
Number: new FormControl(song.Number, {
updateOn: 'blur',
validators: [Validators.required, Validators.min(1)]
}),
Name: new FormControl(song.Name, {
updateOn: 'blur',
validators: Validators.required
}),
Text: new FormControl(song.Text, { updateOn: 'blur' }),
SongType: new FormControl(song.SongType, {
updateOn: 'blur',
validators: Validators.required
}),
Key: new FormControl(song.Key, {
updateOn: 'blur',
validators: Validators.required
}),
Tempo: new FormControl(song.Tempo, { updateOn: 'blur' }),
Comments: new FormControl(song.Comments, { updateOn: 'blur' })
});
if (attachSync) {
this.attachSync(form, song);
constructor(private songsService: SongsService) {
}
return form;
}
public initSongEditForm(attachSync: boolean): FormGroup {
const song = attachSync
? this.songsService.selectedSong.value
: this.defaultValues();
const form = new FormGroup({
Number: new FormControl(song.Number, {
updateOn: 'blur',
validators: [Validators.required, Validators.min(1)]
}),
Name: new FormControl(song.Name, {
updateOn: 'blur',
validators: Validators.required
}),
Text: new FormControl(song.Text, {updateOn: 'blur'}),
SongType: new FormControl(song.SongType, {
updateOn: 'blur',
validators: Validators.required
}),
Key: new FormControl(song.Key, {
updateOn: 'blur',
validators: Validators.required
}),
Tempo: new FormControl(song.Tempo, {updateOn: 'blur'}),
Comments: new FormControl(song.Comments, {updateOn: 'blur'})
});
public initFileEditForm(songId: number, fileId: number): {form: FormGroup, changeSubscription: Subscription } {
const file = this.songsService.selectedSong.value.Files.filter(
_ => _.ID === fileId
)[0];
const form = new FormGroup({
Name: new FormControl(file.Name, {
updateOn: 'blur',
validators: Validators.required
}),
FileType: new FormControl(file.FileType, {
updateOn: 'blur'
})
});
if (attachSync) {
this.attachSync(form, song);
}
const changeSubscription = form.valueChanges.pipe(
switchMap(_ => this.songsService.updateFile$(songId, fileId, _.Name, _.FileType)),
switchMap(() => this.songsService.selectSong(songId))
).subscribe();
return form;
}
return {form : form, changeSubscription: changeSubscription};
}
public initFileEditForm(songId: number, fileId: number): { form: FormGroup, changeSubscription: Subscription } {
const file = this.songsService.selectedSong.value.Files.filter(
_ => _.ID === fileId
)[0];
const form = new FormGroup({
Name: new FormControl(file.Name, {
updateOn: 'blur',
validators: Validators.required
}),
FileType: new FormControl(file.FileType, {
updateOn: 'blur'
})
});
private attachSync(form: FormGroup, song: Song) {
const controls = Object.keys(form.controls);
controls.forEach(control => {
form.controls[control].valueChanges
.pipe(
switchMap(value => this.songsService.patch$(song.ID, control, value)),
switchMap(() => this.songsService.selectSong(song.ID))
)
.subscribe();
});
}
const changeSubscription = form.valueChanges.pipe(
switchMap(_ => this.songsService.updateFile$(songId, fileId, _.Name, _.FileType)),
switchMap(() => this.songsService.selectSong(songId))
).subscribe();
private defaultValues(): Song {
const song: Song = {
ID: null,
Number: this.firstFreeNumber(),
Name: null,
Tempo: null,
Text: null,
SongType: null,
Key: null,
Comments: null,
Final: false,
Files: []
};
return {form: form, changeSubscription: changeSubscription};
}
return song;
}
private attachSync(form: FormGroup, song: Song) {
const controls = Object.keys(form.controls);
controls.forEach(control => {
form.controls[control].valueChanges
.pipe(
switchMap(value => this.songsService.patch$(song.ID, control, value)),
switchMap(() => this.songsService.selectSong(song.ID))
)
.subscribe();
});
}
private firstFreeNumber(): number {
let number = 0;
const numbers = this.songsService.songs.value.map(_ => _.Number);
while (numbers.indexOf(++number) !== -1) {}
return number;
}
private defaultValues(): Song {
const song: Song = {
ID: null,
Number: this.firstFreeNumber(),
Name: null,
Tempo: null,
Text: null,
SongType: null,
Key: null,
Comments: null,
Final: false,
Files: []
};
return song;
}
private firstFreeNumber(): number {
let number = 0;
const numbers = this.songsService.songs.value.map(_ => _.Number);
while (numbers.indexOf(++number) !== -1) {
}
return number;
}
}

104
WEB/src/app/data/odata.service.ts
View File

@@ -1,63 +1,63 @@
import { Song } from 'src/app/models/song.model';
import { ODataService, ODataQuery, Expand } from 'odata-v4-ng';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { base } from './urls';
import {Expand, ODataQuery, ODataService} from 'odata-v4-ng';
import {Observable} from 'rxjs';
import {map, tap} from 'rxjs/operators';
import {base} from './urls';
export class OdataService {
private url: string;
constructor(private odataService: ODataService, private entity: string) {
this.url = base + '/odata/';
}
private url: string;
public list$<TResponse>(properties: string[]): Observable<TResponse[]> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.select(properties);
const get = query.get().pipe(map(_ => _.toPropertyValue<TResponse[]>()));
constructor(private odataService: ODataService, private entity: string) {
this.url = base + '/odata/';
}
return get;
}
public list$<TResponse>(properties: string[]): Observable<TResponse[]> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.select(properties);
const get = query.get().pipe(map(_ => _.toPropertyValue<TResponse[]>()));
public get$<TResponse>(
id: number,
properties: string[],
expands: string[]
): Observable<TResponse> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id)
.expand(expands.map(_ => new Expand(_)))
.select(properties);
const get = query.get().pipe(map(_ => _.toEntity<TResponse>()));
return get;
}
return get;
}
public get$<TResponse>(
id: number,
properties: string[],
expands: string[]
): Observable<TResponse> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id)
.expand(expands.map(_ => new Expand(_)))
.select(properties);
const get = query.get().pipe(map(_ => _.toEntity<TResponse>()));
public patch$(id: number, control: string, value: any): Observable<boolean> {
const valueSet = { [control]: value };
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id);
const get = query.patch(valueSet).pipe(map(() => true));
return get;
}
return get;
}
public patch$(id: number, control: string, value: any): Observable<boolean> {
const valueSet = {[control]: value};
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id);
const get = query.patch(valueSet).pipe(map(() => true));
public post$<TResponse>(values: any): Observable<TResponse> {
const querry = new ODataQuery(this.odataService, this.url);
const post = querry
.entitySet(this.entity)
.post(values)
.pipe(
tap(_ => console.log(_)),
map(_ => {
const mapped = _.toEntity<TResponse>();
return mapped;
}),
tap(_ => console.log(_))
);
return get;
}
return post;
}
public post$<TResponse>(values: any): Observable<TResponse> {
const querry = new ODataQuery(this.odataService, this.url);
const post = querry
.entitySet(this.entity)
.post(values)
.pipe(
tap(_ => console.log(_)),
map(_ => {
const mapped = _.toEntity<TResponse>();
return mapped;
}),
tap(_ => console.log(_))
);
return post;
}
}

214
WEB/src/app/data/songs.service.ts
View File

@@ -1,124 +1,124 @@
import { HttpClient } from '@angular/common/http';
import { FileType } from './../models/files-types.model.ts';
import { Injectable } from '@angular/core';
import { ODataService } from 'odata-v4-ng';
import { OdataService } from './odata.service';
import { Song } from '../models/song.model';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap, switchMap } from 'rxjs/operators';
import { State } from './state';
import { base } from './urls';
import {HttpClient} from '@angular/common/http';
import {FileType} from './../models/files-types.model.ts';
import {Injectable} from '@angular/core';
import {ODataService} from 'odata-v4-ng';
import {OdataService} from './odata.service';
import {Song} from '../models/song.model';
import {BehaviorSubject, Observable} from 'rxjs';
import {switchMap, tap} from 'rxjs/operators';
import {State} from './state';
import {base} from './urls';
@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class SongsService extends OdataService {
public state = State.list;
public state = State.list;
public songs: BehaviorSubject<Song[]> = new BehaviorSubject<Song[]>([]);
public selectedSong: BehaviorSubject<Song> = new BehaviorSubject<Song>(null);
public songs: BehaviorSubject<Song[]> = new BehaviorSubject<Song[]>([]);
public selectedSong: BehaviorSubject<Song> = new BehaviorSubject<Song>(null);
constructor(odataService: ODataService, private httpClient: HttpClient) {
super(odataService, 'songs');
}
public loadSongList$(): Observable<Song[]> {
const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
const list = this.list$<Song>(properties).pipe(
tap(_ => this.songs.next(_))
);
return list;
}
public loadSongListAndGoTo$(id: number): Observable<Song> {
const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
const list = this.list$<Song>(properties).pipe(
tap(_ => {
this.songs.next(_);
}),
switchMap(() => this.selectSong(id))
);
return list;
}
public selectSong(id: number): Observable<Song> {
this.state = State.read;
const filter = this.songs.value.filter(_ => _.ID === id);
const song = filter.length === 1 ? filter[0] : null;
if (!song) {
return;
constructor(odataService: ODataService, private httpClient: HttpClient) {
super(odataService, 'songs');
}
const get = this.get$<Song>(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => {
song.Text = _.Text;
song.Comments = _.Comments;
song.Files = _.Files;
this.selectedSong.next(song);
}));
public loadSongList$(): Observable<Song[]> {
const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
const list = this.list$<Song>(properties).pipe(
tap(_ => this.songs.next(_))
);
return list;
}
return get;
}
public loadSongListAndGoTo$(id: number): Observable<Song> {
const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
const list = this.list$<Song>(properties).pipe(
tap(_ => {
this.songs.next(_);
}),
switchMap(() => this.selectSong(id))
);
public resetSelectedSong() {
this.state = State.list;
this.selectedSong.next(null);
}
return list;
}
public patch$(id: number, control: string, value: any): Observable<boolean> {
const patch = super.patch$(id, control, value).pipe(
tap(() => {
const songs = this.songs.value;
const song = songs.filter(_ => _.ID === id)[0];
song[control] = value;
this.songs.next(songs);
this.selectedSong.next(song);
})
);
public selectSong(id: number): Observable<Song> {
this.state = State.read;
const filter = this.songs.value.filter(_ => _.ID === id);
const song = filter.length === 1 ? filter[0] : null;
if (!song) {
return;
}
return patch;
}
const get = this.get$<Song>(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => {
song.Text = _.Text;
song.Comments = _.Comments;
song.Files = _.Files;
this.selectedSong.next(song);
}));
public saveNewSong$(values: any): Observable<Song> {
const newSong = super
.post$<Song>(values)
.pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID)));
return get;
}
return newSong;
}
public resetSelectedSong() {
this.state = State.list;
this.selectedSong.next(null);
}
public updateFile$(
songId: number,
fileId: number,
name: string,
fileType: FileType
): Observable<any> {
const url =
base +
'/api/songs/' +
songId +
'/files/' +
fileId +
'/edit?Name=' +
name +
'&FileType=' +
fileType;
const get = this.httpClient.get(url);
return get;
}
public patch$(id: number, control: string, value: any): Observable<boolean> {
const patch = super.patch$(id, control, value).pipe(
tap(() => {
const songs = this.songs.value;
const song = songs.filter(_ => _.ID === id)[0];
song[control] = value;
this.songs.next(songs);
this.selectedSong.next(song);
})
);
public deleteFile$(
songId: number,
fileId: number
): Observable<any> {
const url =
base +
'/api/songs/' +
songId +
'/files/' +
fileId +
'/delete';
const get = this.httpClient.get(url);
return get;
}
return patch;
}
public saveNewSong$(values: any): Observable<Song> {
const newSong = super
.post$<Song>(values)
.pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID)));
return newSong;
}
public updateFile$(
songId: number,
fileId: number,
name: string,
fileType: FileType
): Observable<any> {
const url =
base +
'/api/songs/' +
songId +
'/files/' +
fileId +
'/edit?Name=' +
name +
'&FileType=' +
fileType;
const get = this.httpClient.get(url);
return get;
}
public deleteFile$(
songId: number,
fileId: number
): Observable<any> {
const url =
base +
'/api/songs/' +
songId +
'/files/' +
fileId +
'/delete';
const get = this.httpClient.get(url);
return get;
}
}

8
WEB/src/app/data/state.ts
View File

@@ -1,6 +1,6 @@
export enum State {
read,
edit,
new,
list
read,
edit,
new,
list
}

9
WEB/src/app/models/file.model.ts
View File

@@ -1,6 +1,7 @@
import { FileType } from './files-types.model.ts';
import {FileType} from './files-types.model.ts';
export interface File {
ID: number;
Name: string;
FileType: FileType;
ID: number;
Name: string;
FileType: FileType;
}

8
WEB/src/app/models/files-types.model.ts.ts
View File

@@ -1,6 +1,6 @@
export enum FileType {
None = 'None',
Sheet = 'Sheet',
Chords = 'Chords',
MuseScore = 'MuseScore'
None = 'None',
Sheet = 'Sheet',
Chords = 'Chords',
MuseScore = 'MuseScore'
}

22
WEB/src/app/models/song.model.ts
View File

@@ -1,14 +1,14 @@
import { File } from './file.model';
import {File} from './file.model';
export interface Song {
ID: number;
Number: number;
Name: string;
Text: string;
Comments: string;
Key: string;
Tempo: number;
SongType: string;
Final: boolean;
Files: File[];
ID: number;
Number: number;
Name: string;
Text: string;
Comments: string;
Key: string;
Tempo: number;
SongType: string;
Final: boolean;
Files: File[];
}

14
WEB/src/app/services/animation.ts
View File

@@ -1,13 +1,13 @@
import { trigger, transition, style, animate } from '@angular/animations';
import {animate, style, transition, trigger} from '@angular/animations';
export const blend = trigger('blend', [
transition(':enter', [
style({ opacity: 0, display: 'none' }),
animate('400ms', style({ opacity: 0 , display: 'none'})),
animate('300ms', style({ opacity: 1, display: 'block' }))
style({opacity: 0, display: 'none'}),
animate('400ms', style({opacity: 0, display: 'none'})),
animate('300ms', style({opacity: 1, display: 'block'}))
]),
transition(':leave', [
style({ opacity: 1, display: 'block' }),
animate('300ms', style({ opacity: 0, display: 'none' }))
style({opacity: 1, display: 'block'}),
animate('300ms', style({opacity: 0, display: 'none'}))
])
]);
]);

24
WEB/src/app/services/fileupload.factory.ts
View File

@@ -1,18 +1,18 @@
import { base } from './../data/urls';
import { Injectable } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import {base} from '../data/urls';
import {Injectable} from '@angular/core';
import {FileUploader} from 'ng2-file-upload';
@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class FileuploadFactory {
public provideForNewFiles(songId: number): FileUploader {
const uploader = new FileUploader({
url: base + '/api/songs/' + songId + '/files',
autoUpload: true,
isHTML5: true
});
public static provideForNewFiles(songId: number): FileUploader {
const uploader = new FileUploader({
url: base + '/api/songs/' + songId + '/files',
autoUpload: true,
isHTML5: true
});
return uploader;
}
return uploader;
}
}

2
WEB/src/environments/environment.prod.ts
View File

@@ -1,3 +1,3 @@
export const environment = {
production: true
production: true
};

2
WEB/src/environments/environment.ts
View File

@@ -3,7 +3,7 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
production: false
};
/*

12
WEB/src/index.html
View File

@@ -1,14 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wgenerator</title>
<base href="/">
<meta charset="utf-8">
<title>Wgenerator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
</head>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</html>

54
WEB/src/karma.conf.js
View File

@@ -2,30 +2,30 @@
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

12
WEB/src/main.ts
View File

@@ -1,12 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
if (environment.production) {
enableProdMode();
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
.catch(err => console.error(err));

16
WEB/src/polyfills.ts
View File

@@ -59,20 +59,20 @@
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************

16
WEB/src/styles.less
View File

@@ -19,17 +19,21 @@ html {
overflow: hidden;
border-radius: 8px;
transition: all 300ms ease-in-out;
.mat-table tbody {
background: none;
}
th.mat-header-cell:first-of-type {
border-top-left-radius: 8px;
transition: all 300ms ease-in-out;
}
th.mat-header-cell:last-of-type {
border-top-right-radius: 8px;
transition: all 300ms ease-in-out;
}
.mat-table thead {
border-top-right-radius: 8px;
border-top-left-radius: 8px;
@@ -40,13 +44,16 @@ html {
tr.selected {
background-color: #0002;
}
tr:hover {
cursor: pointer;
background-color: #0001;
td {
color: #ff9900;
}
}
td.mat-cell {
padding: 0 5px;
}
@@ -58,14 +65,17 @@ html {
bottom: 0;
right: 70vw;
border-radius: 0px;
th.mat-header-cell:first-of-type {
border-top-left-radius: 0px;
transition: all 300ms ease-in-out;
}
th.mat-header-cell:last-of-type {
border-top-right-radius: 0px;
transition: all 300ms ease-in-out;
}
.mat-table thead {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
@@ -95,9 +105,11 @@ html {
.song-detail-container {
margin-left: 30vw;
.mat-form-field-infix {
width: 80px;
}
.mat-radio-button {
margin: 15px 10px 0 10px;
}
@@ -106,15 +118,17 @@ html {
.mat-card {
padding: 0;
}
table {
width: 100%;
background: none;
box-shadow: none;
}
td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type, th.mat-header-cell:last-of-type {
padding-right: 8px;
text-align: right;
}
}
}
}

11
WEB/src/test.ts
View File

@@ -1,18 +1,15 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import {getTestBed} from '@angular/core/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);

30
WEB/src/tslint.json
View File

@@ -1,17 +1,17 @@
{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}