totopia/totopia-backend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

리그 추가 및 수정

Browse Source
This commit is contained in:
byung eun park 2019-09-03 15:15:59 +09:00
parent c5869ebd0b
commit c4e7c23a5f
12 changed files with 330 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.module.ts
View File

@ -26,6 +26,7 @@ import { LayoutModule } from './layout/layout.module';
import { AuthModule } from 'src/modules/auth/auth.module';
import { DashboardModule } from 'src/modules/dashboard/dashboard.module';
import { UserModule } from 'src/modules/user/user.module';
import { GameModule } from 'src/modules/game/game.module';
import { from } from 'rxjs';
@NgModule({
@ -58,10 +59,10 @@ import { from } from 'rxjs';
AuthModule.forRoot(),
DashboardModule.forRoot(),
UserModule.forRoot(),
GameModule.forRoot()
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}

29
src/app/pages/games/component/league-management/league-management.component.html
View File

@ -38,32 +38,33 @@
class="league-table"
#table
[dataSource]="dataSource"
[@animateStagger]="{ value: '50' }"
matSort
>
<!-- Position Column -->
<ng-container matColumnDef="position">
<!-- Icon Column -->
<ng-container matColumnDef="icon">
<mat-header-cell *matHeaderCellDef>아이콘</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.position
}}</mat-cell>
<mat-cell *matCellDef="let league">icon</mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<!-- KorName Column -->
<ng-container matColumnDef="korName">
<mat-header-cell *matHeaderCellDef>리그명</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
<mat-cell *matCellDef="let league">{{ league.korName }}</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<!-- 추가방식 Column -->
<ng-container matColumnDef="addMethod">
<mat-header-cell *matHeaderCellDef>추가방식</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.weight }}</mat-cell>
<mat-cell *matCellDef="let league">파싱추가</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<!-- 종목 Column -->
<ng-container matColumnDef="sportsEntities">
<mat-header-cell *matHeaderCellDef>종목</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.symbol }}</mat-cell>
<mat-cell *matCellDef="let league">{{
league.sportsEntities[0].name
}}</mat-cell>
</ng-container>
<!-- Symbol Column -->

8
src/app/pages/games/component/league-management/league-management.component.scss
View File

@ -90,17 +90,17 @@ app-league-management {
// flex: 15%;
// }
.mat-column-position {
.mat-column-icon {
max-width: 10%;
// justify-content: start;
}
.mat-column-name {
.mat-column-korName {
max-width: 50%;
}
.mat-column-weight {
.mat-column-addMethod {
max-width: 15%;
}
.mat-column-symbol {
.mat-column-sportsEntities {
max-width: 10%;
}
.mat-column-test {

221
src/app/pages/games/component/league-management/league-management.component.ts
View File

@ -1,8 +1,23 @@
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
Component,
ElementRef,
OnDestroy,
OnInit,
ViewChild,
ViewEncapsulation,
AfterViewInit
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { FuseUtils } from 'src/@fuse/utils';
import { takeUntil } from 'rxjs/internal/operators';
import { fuseAnimations } from 'src/@fuse/animations';
import { LeagueDataSource } from './league-management.data-source';
import { LeagueService } from 'src/modules/game/service/league.service';
@Component({
selector: 'app-league-management',
@ -11,88 +26,138 @@ import { fuseAnimations } from 'src/@fuse/animations';
animations: fuseAnimations,
encapsulation: ViewEncapsulation.None
})
export class LeagueManagementComponent implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'test'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
export class LeagueManagementComponent
implements OnInit, OnDestroy, AfterViewInit {
dataSource: LeagueDataSource | null;
displayedColumns = [
// 'engName',
'icon',
'korName',
// 'sevenName',
// 'engCountry',
// 'korCountry',
'addMethod',
'sportsEntities',
'test'
];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor() {}
@ViewChild('filter', { static: true })
filter: ElementRef;
@ViewChild(MatSort, { static: true })
sort: MatSort;
// Private
private _unsubscribeAll: Subject<any>;
constructor(private leagueService: LeagueService) {
this._unsubscribeAll = new Subject();
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource = new LeagueDataSource(
this.leagueService,
this.paginator,
this.sort
);
console.log(this.dataSource);
// fromEvent(this.filter.nativeElement, 'keyup')
// .pipe(
// takeUntil(this._unsubscribeAll),
// debounceTime(150),
// distinctUntilChanged()
// )
// .subscribe(() => {
// if (!this.dataSource) {
// return;
// }
// this.dataSource.filter = this.filter.nativeElement.value;
// });
}
/**
* On destroy
*/
ngOnDestroy(): void {
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
ngAfterViewInit(): void {}
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
test: string;
}
// export interface PeriodicElement {
// name: string;
// position: number;
// weight: number;
// symbol: string;
// test: string;
// }
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
{
position: 4,
name: 'Beryllium',
weight: 9.0122,
symbol: 'Be',
test: 'test'
},
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
{ position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
{
position: 12,
name: 'Magnesium',
weight: 24.305,
symbol: 'Mg',
test: 'test'
},
{
position: 13,
name: 'Aluminum',
weight: 26.9815,
symbol: 'Al',
test: 'test'
},
{
position: 14,
name: 'Silicon',
weight: 28.0855,
symbol: 'Si',
test: 'test'
},
{
position: 15,
name: 'Phosphorus',
weight: 30.9738,
symbol: 'P',
test: 'test'
},
{ position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
{
position: 17,
name: 'Chlorine',
weight: 35.453,
symbol: 'Cl',
test: 'test'
},
{ position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
{
position: 19,
name: 'Potassium',
weight: 39.0983,
symbol: 'K',
test: 'test'
},
{ position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
];
// const ELEMENT_DATA: PeriodicElement[] = [
// { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
// { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
// { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
// {
// position: 4,
// name: 'Beryllium',
// weight: 9.0122,
// symbol: 'Be',
// test: 'test'
// },
// { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
// { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
// { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
// { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
// { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
// { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
// { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
// {
// position: 12,
// name: 'Magnesium',
// weight: 24.305,
// symbol: 'Mg',
// test: 'test'
// },
// {
// position: 13,
// name: 'Aluminum',
// weight: 26.9815,
// symbol: 'Al',
// test: 'test'
// },
// {
// position: 14,
// name: 'Silicon',
// weight: 28.0855,
// symbol: 'Si',
// test: 'test'
// },
// {
// position: 15,
// name: 'Phosphorus',
// weight: 30.9738,
// symbol: 'P',
// test: 'test'
// },
// { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
// {
// position: 17,
// name: 'Chlorine',
// weight: 35.453,
// symbol: 'Cl',
// test: 'test'
// },
// { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
// {
// position: 19,
// name: 'Potassium',
// weight: 39.0983,
// symbol: 'K',
// test: 'test'
// },
// { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
// ];

73
src/app/pages/games/component/league-management/league-management.data-source.ts Normal file
View File

@ -0,0 +1,73 @@
import { DataSource } from '@angular/cdk/table';
import { BehaviorSubject, Observable, merge } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { CollectionViewer } from '@angular/cdk/collections';
import { League } from 'src/modules/game/model/league.model';
import { LeagueService } from 'src/modules/game/service/league.service';
import { Page } from 'src/modules/common/data/model/page';
export class LeagueDataSource extends DataSource<League> {
private filterSubject = new BehaviorSubject('');
private pageSubject = new BehaviorSubject<Page<League>>({});
constructor(
private leagueService: LeagueService,
private paginator: MatPaginator,
private sort: MatSort
) {
super();
}
// Filter
get filter(): string {
return this.filterSubject.value;
}
set filter(filter: string) {
this.filterSubject.next(filter);
}
get page(): Page<League> {
return this.pageSubject.value;
}
set page(value: Page<League>) {
this.pageSubject.next(value);
}
connect(
collectionViewer: CollectionViewer
): Observable<League[] | readonly League[]> {
const displayDataChanges = [
this.paginator.page,
this.sort.sortChange,
this.filterSubject
];
return merge(...displayDataChanges).pipe(
switchMap(() => {
const filter = this.filter;
const sortActive = this.sort.active;
const sortDirection = this.sort.direction;
const pageIndex = this.paginator.pageIndex;
const pageSize = this.paginator.pageSize;
return this.leagueService.getAllLeague().pipe(
map(page => {
this.page = page;
return page.content;
})
);
})
);
}
disconnect(collectionViewer: CollectionViewer): void {
this.filterSubject.complete();
}
}

0
src/app/pages/games/resolver/index.ts Normal file
View File

22
src/modules/common/data/model/page.ts
View File

@ -13,15 +13,15 @@ export interface Pageable {
}
export interface Page<T> {
content: T[] | null;
empty: boolean;
first: boolean;
last: boolean;
number: number;
numberOfElements: number;
pageable: Pageable;
size: number;
sort: Sort;
totalElements: number;
totalPages: number;
content?: T[] | null;
empty?: boolean;
first?: boolean;
last?: boolean;
number?: number;
numberOfElements?: number;
pageable?: Pageable;
size?: number;
sort?: Sort;
totalElements?: number;
totalPages?: number;
}

23
src/modules/game/game.module.ts Normal file
View File

@ -0,0 +1,23 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SERVICES } from './service';
@NgModule({
imports: [],
exports: []
})
export class GameRootModule {}
@NgModule({
declarations: [],
imports: [CommonModule],
exports: []
})
export class GameModule {
public static forRoot(): ModuleWithProviders<GameRootModule> {
return {
ngModule: GameRootModule,
providers: [SERVICES]
};
}
}

2
src/modules/game/model/league.model.ts
View File

@ -8,5 +8,5 @@ export interface League extends DateAudit {
sevenName?: string;
engCountry?: string;
korCountry?: string;
sportsEntities?: Sports;
sportsEntities?: Sports[];
}

4
src/modules/game/model/sports.model.ts
View File

@ -12,6 +12,6 @@ export enum SportsName {
}
export interface Sports extends DateAudit {
id: number;
name: SportsName;
id?: number;
name?: SportsName;
}

3
src/modules/game/service/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { LeagueService } from './league.service';
export const SERVICES = [LeagueService];

52
src/modules/game/service/league.service.ts
View File

@ -16,4 +16,56 @@ export class LeagueService {
public getAllLeague(): Observable<Page<League>> {
return this.httpClient.get<Page<League>>(`${this.apiBaseUrl}/league`, {});
}
public regist(league: League): Observable<League> {
const engName = league.engName;
const korName = league.korName;
const sevenName = league.sevenName;
const engCountry = league.engCountry;
const korCountry = league.korCountry;
const sportsEntities = league.sportsEntities;
return this.httpClient
.post<any>(`${this.apiBaseUrl}/league`, {
engName,
korName,
sevenName,
engCountry,
korCountry,
sportsEntities
})
.pipe(
map(res => {
console.log('league regist response: ' + res);
return res;
})
);
}
public updateLeague(league: League): Observable<League> {
const id = league.id;
const engName = league.engName;
const korName = league.korName;
const sevenName = league.sevenName;
const engCountry = league.engCountry;
const korCountry = league.korCountry;
const sportsEntities = league.sportsEntities;
return this.httpClient
.put<any>(`${this.apiBaseUrl}/league/${id}`, {
id,
engName,
korName,
sevenName,
engCountry,
korCountry,
sportsEntities
})
.pipe(
map(res => {
console.log('league update response: ' + res);
return res;
})
);
}
}