룰렛쿠폰 페이지 디자인

This commit is contained in:
byung eun park 2019-09-20 21:48:48 +09:00
parent 658d5eb3d6
commit afefbcf699
10 changed files with 626 additions and 21 deletions

View File

@ -12,7 +12,7 @@
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">User Interface</span>
</div>
<div class="h1 mt-16">계좌분리 관리</div>
<div class="h1 mt-16">고정 보너스 관리</div>
</div>
</div>
<!-- / HEADER -->

View File

@ -7,19 +7,9 @@ import {
ViewChild,
ElementRef
} from '@angular/core';
import {
FormControl,
FormsModule,
ReactiveFormsModule,
FormGroup,
FormBuilder,
Validators,
NgControl,
NgForm,
FormArray
} from '@angular/forms';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { fuseAnimations } from 'src/@fuse/animations';
import { Observable, of, fromEvent, Subject, BehaviorSubject } from 'rxjs';
import { Subject } from 'rxjs';
import { FixBonusDataSource } from './fix-bonus.data-source';
import { FixBonusService } from 'src/modules/special/fix-bonus/service/fix-bonus.service';

View File

@ -1 +1,158 @@
<p>roulette-coupon works!</p>
<div id="fix-bonus" class="page-layout simple fullwidth" fxLayout="column">
<!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
<!-- HEADER -->
<div
class="header accent p-24 h-160"
fxLayout="row"
fxLayoutAlign="start center"
>
<div fxLayout="column" fxLayoutAlign="center start">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">User Interface</span>
</div>
<div class="h1 mt-16">룰렛쿠폰관리</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<div class="h1">
고정보너스
</div>
<div
class="mb-24"
fxLayout="column"
fxLayoutAlign="start"
fxLayout.gt-md="row"
>
<div
class="mat-elevation-z8 p-24 mr-24"
fxFlex="3 0 auto"
fxLayout="column"
>
<form
name="fixBonusForm"
[formGroup]="mtformgroup"
(ngSubmit)="fixBonusUpdate()"
novalidate
>
<mat-table
class="fix-bonus-table"
#table
[dataSource]="dataSource"
[@animateStagger]="{ value: '50' }"
matSort
formArrayName="formarray"
>
<!-- Game Type Column [formGroupName] -->
<ng-container matColumnDef="gameType">
<mat-header-cell *matHeaderCellDef>타입</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>{{ fixBonus.gameType }}</mat-cell
>
</ng-container>
<!-- Game Description Column -->
<ng-container matColumnDef="gameDescription">
<mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>
{{ fixBonus.gameDescription }}
</mat-cell>
</ng-container>
<!-- User Description Column -->
<ng-container matColumnDef="userDescription">
<mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>
<mat-form-field appearance="outline">
<input
name="inputUserDescription={{ fixBonus.userDescription }}"
matInput
type="text"
formControlName="userDescription"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<!-- Odds Column -->
<ng-container matColumnDef="odds">
<mat-header-cell *matHeaderCellDef>배당설정</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>
<mat-form-field appearance="outline">
<input
name="inputHolder={{ fixBonus.odds }}"
matInput
type="text"
formControlName="odds"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<!-- Folder Column -->
<ng-container matColumnDef="folder">
<mat-header-cell *matHeaderCellDef>폴더설정</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>
<mat-form-field appearance="outline">
<input
name="inputFolder={{ fixBonus.folder }}"
matInput
type="text"
formControlName="folder"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<!-- Allow Column -->
<ng-container matColumnDef="allow">
<mat-header-cell *matHeaderCellDef>허용불가</mat-header-cell>
<mat-cell
*matCellDef="let fixBonus; let i = index"
[formGroupName]="i"
>
<mat-form-field appearance="outline">
<input
name="inputFolder={{ fixBonus.allow }}"
matInput
type="text"
formControlName="allow"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"
></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"
class="fix-bonus"
matRipple
></mat-row>
</mat-table>
</form>
</div>
</div>
</div>
<!-- / CONTENT -->
</div>

View File

@ -0,0 +1,140 @@
@import 'src/@fuse/scss/fuse';
app-fix-bonus {
#fix-bonus {
.top-bg {
@include media-breakpoint('xs') {
height: 224px;
}
}
> .center {
> .header {
.search-wrapper {
width: 100%;
max-width: 480px;
border-radius: 28px;
overflow: hidden;
@include mat-elevation(1);
@include media-breakpoint('xs') {
width: 100%;
}
.search {
width: 100%;
height: 48px;
line-height: 48px;
padding: 0 18px;
input {
width: 100%;
height: 48px;
min-height: 48px;
max-height: 48px;
padding: 0 16px;
border: none;
outline: none;
}
}
}
@include media-breakpoint('xs') {
padding: 8px 0;
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
}
}
}
}
.fix-bonus-table {
color: black;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.301);
overflow: auto;
// -webkit-overflow-scrolling: touch;
.fix-bonus {
position: relative;
cursor: pointer;
// height: 84px;
}
.mat-cell {
min-width: 0;
display: flex;
align-items: center;
}
//First column and header
// .mat-header-cell:first-child,
// .mat-cell:first-child {
// flex: 10%;
// }
// //Second column and header
// .mat-header-cell:nth-child(2),
// .mat-cell:nth-child(2) {
// flex: 30%;
// }
// .mat-header-cell:nth-child(3),
// .mat-cell:nth-child(2) {
// flex: 20%;
// }
// .mat-header-cell:nth-child(4),
// .mat-cell:nth-child(2) {
// flex: 15%;
// }
// //Last column and header
// .mat-header-cell:last-child,
// .mat-cell:last-child {
// flex: 15%;
// }
.mat-column-icon {
max-width: 11%;
// justify-content: start;
}
.mat-column-korName {
max-width: 22%;
}
.mat-column-addMethod {
max-width: 22%;
}
.mat-column-sportsEntities {
max-width: 22%;
}
.mat-column-test {
max-width: 22%;
// justify-content: flex-end;
}
.mat-column-image {
flex: 1 0 84px;
.product-image {
width: 52px;
height: 52px;
border: 1px solid rgba(0, 0, 0, 0.12);
}
}
.mat-column-buttons {
flex: 0 0 80px;
}
.quantity-indicator {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
border-radius: 4px;
margin-right: 8px;
& + span {
display: inline-block;
vertical-align: middle;
}
}
.active-icon {
border-radius: 50%;
}
}
}

View File

@ -1,12 +1,75 @@
import { Component, OnInit } from '@angular/core';
import {
Component,
OnInit,
OnDestroy,
ViewEncapsulation,
AfterViewInit,
ViewChild,
ElementRef
} from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { fuseAnimations } from 'src/@fuse/animations';
import { Subject } from 'rxjs';
import { RouletteCouponDataSource } from './roulette-coupon.data-source';
import { RouletteCouponService } from 'src/modules/special/roulette-coupon/service/roulette-coupon.service';
@Component({
selector: 'app-roulette-coupon',
templateUrl: './roulette-coupon.component.html',
styleUrls: ['./roulette-coupon.component.scss']
styleUrls: ['./roulette-coupon.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: fuseAnimations
})
export class RouletteCouponComponent implements OnInit {
constructor() {}
ngOnInit() {}
export class RouletteCouponComponent
implements OnInit, OnDestroy, AfterViewInit {
displayedColumns = [
'gameType',
'gameDescription',
'userDescription',
'odds',
'folder',
'allow'
];
constructor(
private fb: FormBuilder,
private rouletteCouponService: RouletteCouponService
) {
this._unsubscribeAll = new Subject();
}
dataSource: RouletteCouponDataSource = new RouletteCouponDataSource(
this.rouletteCouponService
);
public inputChange$: Subject<string> = new Subject<string>();
// public ClickedRow: cObject; currentRow: cObject;
public mtformgroup: FormGroup;
public mtformarray: FormArray;
@ViewChild('filter', { static: true })
filter: ElementRef;
// Private
private _unsubscribeAll: Subject<any>;
ngOnInit() {
this.mtformarray = this.fb.array([]);
this.mtformgroup = this.fb.group({ formarray: this.mtformarray });
this.dataSource.formg = this.mtformgroup;
}
/**
* On destroy
*/
ngOnDestroy(): void {
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
ngAfterViewInit(): void {}
fixBonusfoUpdate(): void {}
}

View File

@ -0,0 +1,216 @@
import { DataSource } from '@angular/cdk/table';
import { BehaviorSubject, Observable, merge, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { CollectionViewer } from '@angular/cdk/collections';
import { RouletteCoupon } from 'src/modules/special/roulette-coupon/model/roulette-coupon.model';
import { RouletteCouponService } from 'src/modules/special/roulette-coupon/service/roulette-coupon.service';
import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
const ELEMENT_DATA: RouletteCoupon[] = [
{
gameType: 'gameType1',
gameDescription: '크로스',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType2',
gameDescription: '크로스',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType3',
gameDescription: '크로스',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType4',
gameDescription: '가상축구',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType5',
gameDescription: '가상축구',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType6',
gameDescription: '가상축구',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType7',
gameDescription: '스페셜',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType8',
gameDescription: '스페셜',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType9',
gameDescription: '스페셜',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType10',
gameDescription: '실시간',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType11',
gameDescription: '실시간',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType12',
gameDescription: '실시간',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
},
{
gameType: 'gameType13',
gameDescription: '개경주',
userDescription:
'[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
odds: '1.03',
folder: 3,
allow: false,
createdAt: null,
updatedAt: null
}
];
export class RouletteCouponDataSource extends DataSource<RouletteCoupon> {
private _objectStore: RouletteCoupon[] = [];
private _ObjectsSubject$ = new BehaviorSubject<RouletteCoupon[]>([]);
private _loadingSubject$ = new BehaviorSubject<boolean>(false);
public loading$ = this._loadingSubject$.asObservable();
public formg: FormGroup;
constructor(private RouletteCouponService: RouletteCouponService) {
super();
}
connect(collectionViewer: CollectionViewer): Observable<RouletteCoupon[]> {
// return this.RouletteCouponService.getAll().pipe(
// map(res => {
// res.forEach(m => this._objectStore.push(m as RouletteCoupon));
// this._ObjectsSubject$.next(this._objectStore);
// let fa = <FormArray>this.formg.get('formarray');
// res.forEach(r => fa.push(this.createRowFormGroup(r)));
// return res;
// })
// );
return of(ELEMENT_DATA).pipe(
map(res => {
res.forEach(m => this._objectStore.push(m as RouletteCoupon));
this._ObjectsSubject$.next(this._objectStore);
let fa = <FormArray>this.formg.get('formarray');
res.forEach(r => fa.push(this.createRowFormGroup(r)));
return res;
})
);
}
createRowFormGroup(r: RouletteCoupon): FormGroup {
let f = new FormGroup({
gameType: this.createNewFormContorl(r, 'gameType'),
gameDescription: this.createNewFormContorl(r, 'gameDescription'),
userDescription: this.createNewFormContorl(r, 'userDescription'),
odds: this.createNewFormContorl(r, 'odds'),
folder: this.createNewFormContorl(r, 'folder'),
allow: this.createNewFormContorl(r, 'allow')
});
return f;
}
createNewFormContorl(r: RouletteCoupon, propName: string): FormControl {
let m = new FormControl(r[propName], Validators.required);
m.valueChanges.subscribe(val => {
r[propName] = val;
});
return m;
}
disconnect(collectionViewer: CollectionViewer): void {
this._ObjectsSubject$.complete();
this._loadingSubject$.complete();
}
}

View File

@ -0,0 +1,11 @@
import { DateAudit } from 'src/modules/common/data/model/audit';
export interface RouletteCoupon extends DateAudit {
id?: number;
gameType?: string;
gameDescription?: string;
userDescription?: string;
odds?: string;
folder?: number;
allow?: boolean;
}

View File

@ -0,0 +1,3 @@
import { RouletteCouponService } from './roulette-coupon.service';
export const ROULETTE_COUPON_SERVICES = [RouletteCouponService];

View File

@ -0,0 +1,25 @@
import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { RouletteCoupon } from '../model/roulette-coupon.model';
import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
import { FormArray } from '@angular/forms';
@Injectable({
providedIn: 'root'
})
export class RouletteCouponService {
constructor(
@Inject(API_BASE_URL) private apiBaseUrl: string,
private httpClient: HttpClient
) {}
public getAll(): Observable<RouletteCoupon[]> {
return this.httpClient.get<RouletteCoupon[]>(
`${this.apiBaseUrl}/roulette_coupon`,
{}
);
}
}

View File

@ -1,7 +1,7 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FIX_BONUS_SERVICES } from './fix-bonus/service';
import { ROULETTE_COUPON_SERVICES } from './roulette-coupon/service';
@NgModule({
imports: [],
exports: []
@ -17,7 +17,7 @@ export class SpecialModule {
public static forRoot(): ModuleWithProviders<SpecialRootModule> {
return {
ngModule: SpecialRootModule,
providers: [FIX_BONUS_SERVICES]
providers: [FIX_BONUS_SERVICES, ROULETTE_COUPON_SERVICES]
};
}
}