-
-
-
-
-
- {{ song.Name }}
-
-
- {{ renderSongType(song.SongType).name }}
- Tonart: {{ song.Key }}
- Tempo: {{ song.Tempo }}
-
-
-
- {{ line }}
-
- {{ line }}
-
-
-
-
-
+
+
+
+
+
+
+ {{ song.Name }}
+
+
+ {{ renderSongType(song.SongType).name }}
+ Tonart: {{ song.Key }}
+ Tempo: {{ song.Tempo }}
+
+
+
+
+ {{ line }}
+
+ {{ line }}
+
+
+
+
+
diff --git a/WEB/src/app/components/songs/song/song.component.ts b/WEB/src/app/components/songs/song/song.component.ts
index f153a55..edc2074 100644
--- a/WEB/src/app/components/songs/song/song.component.ts
+++ b/WEB/src/app/components/songs/song/song.component.ts
@@ -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;
+ }
}
- }
}
diff --git a/WEB/src/app/components/songs/songs.component.html b/WEB/src/app/components/songs/songs.component.html
index 02059cb..fc668b7 100644
--- a/WEB/src/app/components/songs/songs.component.html
+++ b/WEB/src/app/components/songs/songs.component.html
@@ -1,5 +1,5 @@
-
-
-
-
+
+
+
+
diff --git a/WEB/src/app/components/songs/songs.component.ts b/WEB/src/app/components/songs/songs.component.ts
index b786264..ac3e697 100644
--- a/WEB/src/app/components/songs/songs.component.ts
+++ b/WEB/src/app/components/songs/songs.component.ts
@@ -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();
+ }
}
diff --git a/WEB/src/app/components/songs/table/table.component.html b/WEB/src/app/components/songs/table/table.component.html
index e81849e..59b414a 100644
--- a/WEB/src/app/components/songs/table/table.component.html
+++ b/WEB/src/app/components/songs/table/table.component.html
@@ -1,75 +1,75 @@
-
-
-
-
- | # |
-
-
- {{ element.Number }}
-
- |
-
+
+
+
+
+ | # |
+
+
+ {{ element.Number }}
+
+ |
+
-
- Titel |
- {{ element.Name }} |
-
+
+ Titel |
+ {{ element.Name }} |
+
-
- |
-
-
- {{ element.Key }}
-
- |
-
+
+ |
+
+
+ {{ element.Key }}
+
+ |
+
-
- |
-
-
- {{ renderSongType(element.SongType).name }}
-
- |
-
+
+ |
+
+
+ {{ renderSongType(element.SongType).name }}
+
+ |
+
-
- |
-
-
- {{ element.Tempo }}
-
- |
-
+
+ |
+
+
+ {{ element.Tempo }}
+
+ |
+
- |
- |
-
-
|
+ |
+
+
diff --git a/WEB/src/app/components/songs/table/table.component.less b/WEB/src/app/components/songs/table/table.component.less
index 9b669f4..6054036 100644
--- a/WEB/src/app/components/songs/table/table.component.less
+++ b/WEB/src/app/components/songs/table/table.component.less
@@ -17,6 +17,7 @@ table {
font-size: 24px;
z-index: 1000;
color: #aaa;
+
&:hover {
color: #000;
}
diff --git a/WEB/src/app/components/songs/table/table.component.ts b/WEB/src/app/components/songs/table/table.component.ts
index 2782b6b..435f06d 100644
--- a/WEB/src/app/components/songs/table/table.component.ts
+++ b/WEB/src/app/components/songs/table/table.component.ts
@@ -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();
+ }
}
diff --git a/WEB/src/app/data/download.service.ts b/WEB/src/app/data/download.service.ts
index b4178fb..9b2c185 100644
--- a/WEB/src/app/data/download.service.ts
+++ b/WEB/src/app/data/download.service.ts
@@ -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));
+ }
+ );
+ }
}
diff --git a/WEB/src/app/data/edit-song.service.ts b/WEB/src/app/data/edit-song.service.ts
index 7916d98..d1a9d0f 100644
--- a/WEB/src/app/data/edit-song.service.ts
+++ b/WEB/src/app/data/edit-song.service.ts
@@ -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;
+ }
}
diff --git a/WEB/src/app/data/odata.service.ts b/WEB/src/app/data/odata.service.ts
index 8cd27de..72a8b6f 100644
--- a/WEB/src/app/data/odata.service.ts
+++ b/WEB/src/app/data/odata.service.ts
@@ -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$
(properties: string[]): Observable {
- const query = new ODataQuery(this.odataService, this.url)
- .entitySet(this.entity)
- .select(properties);
- const get = query.get().pipe(map(_ => _.toPropertyValue()));
+ constructor(private odataService: ODataService, private entity: string) {
+ this.url = base + '/odata/';
+ }
- return get;
- }
+ public list$(properties: string[]): Observable {
+ const query = new ODataQuery(this.odataService, this.url)
+ .entitySet(this.entity)
+ .select(properties);
+ const get = query.get().pipe(map(_ => _.toPropertyValue()));
- public get$(
- id: number,
- properties: string[],
- expands: string[]
- ): Observable {
- 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()));
+ return get;
+ }
- return get;
- }
+ public get$(
+ id: number,
+ properties: string[],
+ expands: string[]
+ ): Observable {
+ 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()));
- public patch$(id: number, control: string, value: any): Observable {
- 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 {
+ 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$(values: any): Observable {
- const querry = new ODataQuery(this.odataService, this.url);
- const post = querry
- .entitySet(this.entity)
- .post(values)
- .pipe(
- tap(_ => console.log(_)),
- map(_ => {
- const mapped = _.toEntity();
- return mapped;
- }),
- tap(_ => console.log(_))
- );
+ return get;
+ }
- return post;
- }
+ public post$(values: any): Observable {
+ const querry = new ODataQuery(this.odataService, this.url);
+ const post = querry
+ .entitySet(this.entity)
+ .post(values)
+ .pipe(
+ tap(_ => console.log(_)),
+ map(_ => {
+ const mapped = _.toEntity();
+ return mapped;
+ }),
+ tap(_ => console.log(_))
+ );
+
+ return post;
+ }
}
diff --git a/WEB/src/app/data/songs.service.ts b/WEB/src/app/data/songs.service.ts
index cb6e2bc..2015df5 100644
--- a/WEB/src/app/data/songs.service.ts
+++ b/WEB/src/app/data/songs.service.ts
@@ -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 = new BehaviorSubject([]);
- public selectedSong: BehaviorSubject = new BehaviorSubject(null);
+ public songs: BehaviorSubject = new BehaviorSubject([]);
+ public selectedSong: BehaviorSubject = new BehaviorSubject(null);
- constructor(odataService: ODataService, private httpClient: HttpClient) {
- super(odataService, 'songs');
- }
-
- public loadSongList$(): Observable {
- const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
- const list = this.list$(properties).pipe(
- tap(_ => this.songs.next(_))
- );
- return list;
- }
-
- public loadSongListAndGoTo$(id: number): Observable {
- const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
- const list = this.list$(properties).pipe(
- tap(_ => {
- this.songs.next(_);
- }),
- switchMap(() => this.selectSong(id))
- );
-
- return list;
- }
-
- public selectSong(id: number): Observable {
- 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$(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => {
- song.Text = _.Text;
- song.Comments = _.Comments;
- song.Files = _.Files;
- this.selectedSong.next(song);
- }));
+ public loadSongList$(): Observable {
+ const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
+ const list = this.list$(properties).pipe(
+ tap(_ => this.songs.next(_))
+ );
+ return list;
+ }
- return get;
- }
+ public loadSongListAndGoTo$(id: number): Observable {
+ const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
+ const list = this.list$(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 {
- 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 {
+ 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$(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => {
+ song.Text = _.Text;
+ song.Comments = _.Comments;
+ song.Files = _.Files;
+ this.selectedSong.next(song);
+ }));
- public saveNewSong$(values: any): Observable {
- const newSong = super
- .post$(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 {
- 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 {
+ 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 {
- const url =
- base +
- '/api/songs/' +
- songId +
- '/files/' +
- fileId +
- '/delete';
- const get = this.httpClient.get(url);
- return get;
- }
+ return patch;
+ }
+
+ public saveNewSong$(values: any): Observable {
+ const newSong = super
+ .post$(values)
+ .pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID)));
+
+ return newSong;
+ }
+
+ public updateFile$(
+ songId: number,
+ fileId: number,
+ name: string,
+ fileType: FileType
+ ): Observable {
+ 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 {
+ const url =
+ base +
+ '/api/songs/' +
+ songId +
+ '/files/' +
+ fileId +
+ '/delete';
+ const get = this.httpClient.get(url);
+ return get;
+ }
}
diff --git a/WEB/src/app/data/state.ts b/WEB/src/app/data/state.ts
index 4f9f653..adfb8f5 100644
--- a/WEB/src/app/data/state.ts
+++ b/WEB/src/app/data/state.ts
@@ -1,6 +1,6 @@
export enum State {
- read,
- edit,
- new,
- list
+ read,
+ edit,
+ new,
+ list
}
diff --git a/WEB/src/app/models/file.model.ts b/WEB/src/app/models/file.model.ts
index 24076d7..8283ebd 100644
--- a/WEB/src/app/models/file.model.ts
+++ b/WEB/src/app/models/file.model.ts
@@ -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;
}
diff --git a/WEB/src/app/models/files-types.model.ts.ts b/WEB/src/app/models/files-types.model.ts.ts
index 5f6ba36..c1f2c7d 100644
--- a/WEB/src/app/models/files-types.model.ts.ts
+++ b/WEB/src/app/models/files-types.model.ts.ts
@@ -1,6 +1,6 @@
export enum FileType {
- None = 'None',
- Sheet = 'Sheet',
- Chords = 'Chords',
- MuseScore = 'MuseScore'
+ None = 'None',
+ Sheet = 'Sheet',
+ Chords = 'Chords',
+ MuseScore = 'MuseScore'
}
diff --git a/WEB/src/app/models/song.model.ts b/WEB/src/app/models/song.model.ts
index c64deee..b3acaa4 100644
--- a/WEB/src/app/models/song.model.ts
+++ b/WEB/src/app/models/song.model.ts
@@ -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[];
}
diff --git a/WEB/src/app/services/animation.ts b/WEB/src/app/services/animation.ts
index 9001239..fbbbf28 100644
--- a/WEB/src/app/services/animation.ts
+++ b/WEB/src/app/services/animation.ts
@@ -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'}))
])
- ]);
+]);
diff --git a/WEB/src/app/services/fileupload.factory.ts b/WEB/src/app/services/fileupload.factory.ts
index f542053..b6f94a5 100644
--- a/WEB/src/app/services/fileupload.factory.ts
+++ b/WEB/src/app/services/fileupload.factory.ts
@@ -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;
+ }
}
diff --git a/WEB/src/environments/environment.prod.ts b/WEB/src/environments/environment.prod.ts
index 3612073..5d08331 100644
--- a/WEB/src/environments/environment.prod.ts
+++ b/WEB/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
export const environment = {
- production: true
+ production: true
};
diff --git a/WEB/src/environments/environment.ts b/WEB/src/environments/environment.ts
index 7b4f817..6b32308 100644
--- a/WEB/src/environments/environment.ts
+++ b/WEB/src/environments/environment.ts
@@ -3,7 +3,7 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
+ production: false
};
/*
diff --git a/WEB/src/index.html b/WEB/src/index.html
index a36cc6e..bf7ce82 100644
--- a/WEB/src/index.html
+++ b/WEB/src/index.html
@@ -1,14 +1,14 @@
-
- Wgenerator
-
+
+ Wgenerator
+
-
-
+
+
-
+
diff --git a/WEB/src/karma.conf.js b/WEB/src/karma.conf.js
index b6e0042..c1b01ff 100644
--- a/WEB/src/karma.conf.js
+++ b/WEB/src/karma.conf.js
@@ -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
- });
-};
\ No newline at end of file
+ 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
+ });
+};
diff --git a/WEB/src/main.ts b/WEB/src/main.ts
index c7b673c..38c4486 100644
--- a/WEB/src/main.ts
+++ b/WEB/src/main.ts
@@ -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));
diff --git a/WEB/src/polyfills.ts b/WEB/src/polyfills.ts
index ee8b84d..3492469 100644
--- a/WEB/src/polyfills.ts
+++ b/WEB/src/polyfills.ts
@@ -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.
/***************************************************************************************************
diff --git a/WEB/src/styles.less b/WEB/src/styles.less
index 92e0749..4b3ed22 100644
--- a/WEB/src/styles.less
+++ b/WEB/src/styles.less
@@ -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;
- }
+ }
}
}
diff --git a/WEB/src/test.ts b/WEB/src/test.ts
index 1631789..ea75c8e 100644
--- a/WEB/src/test.ts
+++ b/WEB/src/test.ts
@@ -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$/);
diff --git a/WEB/src/tslint.json b/WEB/src/tslint.json
index 52e2c1a..aa7c3ee 100644
--- a/WEB/src/tslint.json
+++ b/WEB/src/tslint.json
@@ -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"
+ ]
+ }
}