benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

list songs

Browse Source
This commit is contained in:
Benjamin Ifland
2019-03-23 15:25:12 +01:00
parent 14a033a56c
commit 3b060ebf55
26 changed files with 294 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
WEB/src/app/app.component.spec.ts
View File

@@ -1,35 +0,0 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'wgenerator'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('wgenerator');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to wgenerator!');
});
});

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

@@ -1,5 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ODataModule } from 'odata-v4-ng';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -20,6 +21,7 @@ import { SongComponent } from './components/song/song.component';
BrowserModule,
AppRoutingModule,
HttpClientModule,
ODataModule,
MatCardModule,
MatTableModule,

2
WEB/src/app/components/song/song.component.html
View File

@@ -1,4 +1,4 @@
<mat-card>
<mat-card class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar>
<button mat-icon-button [routerLink]="['/songs']" >

1
WEB/src/app/components/song/song.component.less
View File

@@ -1,5 +1,6 @@
.mat-card {
width: 500px;
border-radius: 8px;
}
.mat-card-title {

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

@@ -1,8 +1,8 @@
import { DownloadService } from './../../data/download.service';
import { Component, OnInit } from '@angular/core';
import { SongDetailModel } from 'src/app/models/song-list-detail.model';
import { ActivatedRoute } from '@angular/router';
import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
import { Song } from 'src/app/models/song.model';
@Component({
selector: 'app-song',
@@ -10,7 +10,7 @@ import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
styleUrls: ['./song.component.less']
})
export class SongComponent implements OnInit {
public song: SongDetailModel;
public song: Song;
public faArrow = faLongArrowAltLeft;
constructor(
@@ -19,14 +19,13 @@ export class SongComponent implements OnInit {
) {}
ngOnInit() {
this.route.data.subscribe((data: { song: SongDetailModel }) => {
this.route.data.subscribe((data: { song: Song }) => {
this.song = data.song;
});
}
public onClickDownload(): void {
const id = this.song.Id;
const withKey = this.song.HasKeyFile;
this.downloadService.get(id, withKey);
const id = this.song.ID;
this.downloadService.get(id, false);
}
}

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

@@ -1,6 +1,6 @@
import { Song } from './../../models/song.model';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SongListModel } from 'src/app/models/song-list.model';
@Component({
selector: 'app-songs',
@@ -8,12 +8,12 @@ import { SongListModel } from 'src/app/models/song-list.model';
styleUrls: ['./songs.component.less']
})
export class SongsComponent implements OnInit {
public songs: SongListModel;
public songs: Song[];
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data.subscribe((data: { songs: SongListModel }) => {
this.route.data.subscribe((data: { songs: Song[] }) => {
this.songs = data.songs;
});
}

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

@@ -1,31 +1,43 @@
<table *ngIf="songs.SongList" mat-table [dataSource]="songs.SongList" class="mat-elevation-z8">
<div class="page-container mat-elevation-z8">
<div class="table-container">
<table
*ngIf="songs"
mat-table
[dataSource]="songs"
class="mat-elevation-z8"
>
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{ element.Number }}</td>
</ng-container>
<ng-container matColumnDef="Id">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{element.Id}}</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 mat-header-cell *matHeaderCellDef>Titel</th>
<td mat-cell *matCellDef="let element">{{element.Name}}</td>
</ng-container>
<ng-container matColumnDef="Key">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.Key }}</td>
</ng-container>
<ng-container matColumnDef="Key">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Key}}</td>
</ng-container>
<ng-container matColumnDef="SongType">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.SongType }}</td>
</ng-container>
<ng-container matColumnDef="Type">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Type}}</td>
</ng-container>
<ng-container matColumnDef="Tempo">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.Tempo }}</td>
</ng-container>
<ng-container matColumnDef="Velocity">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Velocity}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: columns;" [routerLink]="['/songs', row.Id]" routerLinkActive="router-link-active" ></tr>
</table>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; columns: columns"
[routerLink]="['/songs', row.ID]"
routerLinkActive="router-link-active"
></tr>
</table>
</div>
</div>

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

@@ -1,4 +1,15 @@
table {
width: 100%;
border-radius: 8px;
}
.page-container {
height: 400px;
overflow: hidden;
border-radius: 8px;
}
.table-container {
height: 100%;
overflow: auto;
}

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

@@ -1,5 +1,5 @@
import { Component, OnInit, Input } from '@angular/core';
import { SongListModel } from 'src/app/models/song-list.model';
import { Song } from 'src/app/models/song.model';
@Component({
selector: 'app-table',
@@ -7,13 +7,13 @@ import { SongListModel } from 'src/app/models/song-list.model';
styleUrls: ['./table.component.less']
})
export class TableComponent implements OnInit {
@Input() public songs: SongListModel;
@Input() public songs: Song[];
public columns = [
'Id',
'Number',
'Name',
'Key',
'Type',
'Velocity',
'SongType',
'Tempo',
];
constructor() { }

12
WEB/src/app/data/download.service.spec.ts
View File

@@ -1,12 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { DownloadService } from './download.service';
describe('DownloadService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: DownloadService = TestBed.get(DownloadService);
expect(service).toBeTruthy();
});
});

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

@@ -1,6 +1,6 @@
import { base } from './urls';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { urlSongFiles } from './urls';
@Injectable({
@@ -11,7 +11,7 @@ export class DownloadService {
public get(id: number, withKey: boolean) {
return this.httpClient
.get(urlSongFiles + '/' + id + '?withKey=' + withKey, {
.get(base + '/' + id + '?withKey=' + withKey, {
responseType: 'blob' as 'json'
})
.subscribe(

29
WEB/src/app/data/odata.service.ts Normal file
View File

@@ -0,0 +1,29 @@
import { ODataService, ODataQuery } from 'odata-v4-ng';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { base } from './urls';
export class OdataService {
private url: string;
constructor(private odataService: ODataService, private entity: string) {
this.url = base + '/odata/';
}
public list<TResponse>(): Observable<TResponse[]> {
const query = new ODataQuery(this.odataService, this.url).entitySet(
this.entity
);
const get = query.get().pipe(map(_ => _.toPropertyValue<TResponse[]>()));
return get;
}
public get<TResponse>(id: number): Observable<TResponse> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id);
const get = query.get().pipe(map(_ => _.toEntity<TResponse>()));
return get;
}
}

12
WEB/src/app/data/song-resolver.service.spec.ts
View File

@@ -1,12 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { SongResolverService } from './song-resolver.service';
describe('SongResolverService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: SongResolverService = TestBed.get(SongResolverService);
expect(service).toBeTruthy();
});
});

12
WEB/src/app/data/song-resolver.service.ts
View File

@@ -2,19 +2,19 @@ import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { urlSongs } from './urls';
import { SongDetailModel } from '../models/song-list-detail.model';
import { Song } from '../models/song.model';
import { SongsService } from './songs.service';
@Injectable({
providedIn: 'root'
})
export class SongResolverService implements Resolve<SongDetailModel> {
export class SongResolverService implements Resolve<Song> {
constructor(private httpClient: HttpClient) { }
constructor(private songsService: SongsService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SongDetailModel> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Song> {
const id = route.params.id;
const get$ = this.httpClient.get<SongDetailModel>(urlSongs + '/' + id);
const get$ = this.songsService.get<Song>(id);
return get$;
}
}

12
WEB/src/app/data/songs-resolver.service.spec.ts
View File

@@ -1,12 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { SongsResolverService } from './songs-resolver.service';
describe('SongsResolverService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: SongsResolverService = TestBed.get(SongsResolverService);
expect(service).toBeTruthy();
});
});

13
WEB/src/app/data/songs-resolver.service.ts
View File

@@ -1,19 +1,18 @@
import { Song } from './../models/song.model';
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SongListModel } from '../models/song-list.model';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { urlSongs } from './urls';
import { SongsService } from './songs.service';
@Injectable({
providedIn: 'root'
})
export class SongsResolverService implements Resolve<SongListModel> {
export class SongsResolverService implements Resolve<Song[]> {
constructor(private httpClient: HttpClient) { }
constructor(private songsService: SongsService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SongListModel> {
const get$ = this.httpClient.get<SongListModel>(urlSongs);
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Song[]> {
const get$ = this.songsService.list<Song>();
return get$;
}
}

11
WEB/src/app/data/songs.service.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Injectable } from '@angular/core';
import { ODataService } from 'odata-v4-ng';
import { OdataService } from './odata.service';
@Injectable({
providedIn: 'root'
})
export class SongsService extends OdataService {
constructor(odataService: ODataService) {
super(odataService, 'songs');
}
}

5
WEB/src/app/data/urls.ts
View File

@@ -1,4 +1 @@
const base = 'http://test.benjamin-ifland.de/api/';
export const urlSongs = base + 'songs';
export const urlSongFiles = base + 'songFiles';
export const base = 'http://test.benjamin-ifland.de/';

3
WEB/src/app/models/song-id.model.ts
View File

@@ -1,3 +0,0 @@
export interface SongId {
Id: number;
}

9
WEB/src/app/models/song-list-detail.model.ts
View File

@@ -1,9 +0,0 @@
export interface SongDetailModel {
Text: string;
HasKeyFile: boolean;
Id: number;
Name: string;
Key: string;
Type: string;
Velocity?: number;
}

7
WEB/src/app/models/song-list-item.model.ts
View File

@@ -1,7 +0,0 @@
export interface SongListItemModel {
Id: number;
Name: string;
Key: string;
Type: string;
Velocity?: number;
}

7
WEB/src/app/models/song-list.model.ts
View File

@@ -1,7 +0,0 @@
import { SongListItemModel } from './song-list-item.model';
export interface SongListModel {
Page: number;
Pages: number;
SongList: SongListItemModel[];
}

11
WEB/src/app/models/song.model.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface Song {
ID: number;
Number: number;
Name: string;
Text: string;
Comments: string;
Key: string;
Tempo: number;
SongType: string;
Final: boolean;
}