diff --git a/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.html b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.html new file mode 100644 index 0000000..bb26667 --- /dev/null +++ b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.html @@ -0,0 +1,110 @@ +
+ +
+ + + 경기시간 + +

{{ i }}

+ + + + + + 종목/리그 + +

{{ serviceCenter.title }}

+ + + + + + 홈팀승/핸디오버 + + +

010-3004-2001

+ + + + + + 무/기준점 + +

+ + 1,000,000 +

+ + + + + + 원정/패/핸디/언더 + +

+ + 5000 +

+ + + + + + 게임결과 + + +

+ + 브론즈 +

+ + + + + + 적중여부 + +

+ +

+ + + + + + + + +
+ +
diff --git a/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.scss b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.scss new file mode 100644 index 0000000..df76002 --- /dev/null +++ b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.scss @@ -0,0 +1,110 @@ +@import 'src/@fuse/scss/fuse'; + +app-bet-history-table { + #bet-history-tables { + .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; + } + } + } + } + + .bet-history-table { + flex: 1 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + overflow: auto; + -webkit-overflow-scrolling: touch; + + .mat-header-row { + min-height: 64px; + } + + .bet-history { + position: relative; + cursor: pointer; + height: 84px; + } + + .mat-cell { + min-width: 0; + display: flex; + align-items: center; + } + + .mat-column-id { + flex: 0 1 84px; + } + + .mat-column-image { + flex: 0 1 84px; + + .product-image { + width: 52px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.12); + } + } + + .mat-column-buttons { + flex: 0 1 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%; + } + } +} diff --git a/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.ts b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.ts new file mode 100644 index 0000000..1b78864 --- /dev/null +++ b/src/app/pages/games/game/component/bet-history-table/bet-history-table.component.ts @@ -0,0 +1,82 @@ +import { + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, + AfterViewInit +} from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; + +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; + +@Component({ + selector: 'app-bet-history-table', + templateUrl: './bet-history-table.component.html', + styleUrls: ['./bet-history-table.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations +}) +export class BetHistoryTableComponent + implements OnInit, OnDestroy, AfterViewInit { + // dataSource: ServiceCenterDataSource | null; + + displayedColumns = [ + 'idx', + 'title', + 'contents', + 'register', + 'createdAt', + 'contactStatus' + ]; + private unsubscribeAll: Subject; + + @ViewChild(MatPaginator, { static: true }) + paginator: MatPaginator; + + @ViewChild('filter', { static: true }) + filter: ElementRef; + + @ViewChild(MatSort, { static: true }) + sort: MatSort; + + constructor( + private fb: FormBuilder // private serviceCenterService: ServiceCenterService + ) { + // Set the private defaults + this.unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to update order on changes + // this.dataSource = new ServiceCenterDataSource( + // this.serviceCenterService, + // this.paginator, + // this.sort + // ); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this.unsubscribeAll.next(); + this.unsubscribeAll.complete(); + } + + ngAfterViewInit(): void {} +} diff --git a/src/app/pages/games/game/component/bet-history.component.html b/src/app/pages/games/game/component/bet-history.component.html index c30a705..03a06f5 100644 --- a/src/app/pages/games/game/component/bet-history.component.html +++ b/src/app/pages/games/game/component/bet-history.component.html @@ -1 +1,65 @@ -

bet-history works!

+
+ +
+ + + +
+ +
+ + + + + + + + +
+ + + + +
+ + + + + +
+ +
+ +
diff --git a/src/app/pages/games/game/component/bet-history.component.scss b/src/app/pages/games/game/component/bet-history.component.scss index e69de29..59072a4 100644 --- a/src/app/pages/games/game/component/bet-history.component.scss +++ b/src/app/pages/games/game/component/bet-history.component.scss @@ -0,0 +1,110 @@ +@import 'src/@fuse/scss/fuse'; + +app-bet-history { + #bet-history { + .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; + } + } + } + } + + .bet-history-table { + flex: 1 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + overflow: auto; + -webkit-overflow-scrolling: touch; + + .mat-header-row { + min-height: 64px; + } + + .bet-history { + position: relative; + cursor: pointer; + height: 84px; + } + + .mat-cell { + min-width: 0; + display: flex; + align-items: center; + } + + .mat-column-id { + flex: 0 1 84px; + } + + .mat-column-image { + flex: 0 1 84px; + + .product-image { + width: 52px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.12); + } + } + + .mat-column-buttons { + flex: 0 1 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%; + } + } +} diff --git a/src/app/pages/games/game/component/bet-history.component.ts b/src/app/pages/games/game/component/bet-history.component.ts index 68fae69..5fd5330 100644 --- a/src/app/pages/games/game/component/bet-history.component.ts +++ b/src/app/pages/games/game/component/bet-history.component.ts @@ -1,15 +1,81 @@ -import { Component, OnInit } from '@angular/core'; +import { + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, + AfterViewInit +} from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; + +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; @Component({ selector: 'app-bet-history', templateUrl: './bet-history.component.html', - styleUrls: ['./bet-history.component.scss'] + styleUrls: ['./bet-history.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations }) -export class BetHistoryComponent implements OnInit { +export class BetHistoryComponent implements OnInit, OnDestroy, AfterViewInit { + // dataSource: ServiceCenterDataSource | null; - constructor() { } + displayedColumns = [ + 'idx', + 'title', + 'contents', + 'register', + 'createdAt', + 'contactStatus' + ]; + private unsubscribeAll: Subject; - ngOnInit() { + @ViewChild(MatPaginator, { static: true }) + paginator: MatPaginator; + + @ViewChild('filter', { static: true }) + filter: ElementRef; + + @ViewChild(MatSort, { static: true }) + sort: MatSort; + + constructor( + private fb: FormBuilder // private serviceCenterService: ServiceCenterService + ) { + // Set the private defaults + this.unsubscribeAll = new Subject(); } + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to update order on changes + // this.dataSource = new ServiceCenterDataSource( + // this.serviceCenterService, + // this.paginator, + // this.sort + // ); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this.unsubscribeAll.next(); + this.unsubscribeAll.complete(); + } + + ngAfterViewInit(): void {} } diff --git a/src/app/pages/games/game/component/bet-history.data-source.ts b/src/app/pages/games/game/component/bet-history.data-source.ts new file mode 100644 index 0000000..bc6b46f --- /dev/null +++ b/src/app/pages/games/game/component/bet-history.data-source.ts @@ -0,0 +1,119 @@ +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 { BetHistory } from 'src/modules/infos/popup-set/model/popup-set.model'; +import { BetHistoryService } from 'src/modules/infos/popup-set/service/popup-set.service'; + +import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms'; + +const ELEMENT_DATA: BetHistory[] = [ + { + id: 1, + thumbNail: '/images/thumbname/1.jpg', + title: '오픈기념 이벤트', + imageWidth: 200, + imageHeight: 200, + imageX: 100, + imageY: 100, + openStatus: true, + updatedAt: null, + createdAt: null + }, + { + id: 2, + thumbNail: '/images/thumbname/2.jpg', + title: '첫충전 이벤트', + imageWidth: 200, + imageHeight: 200, + imageX: 100, + imageY: 100, + openStatus: true, + updatedAt: null, + createdAt: null + }, + { + id: 3, + thumbNail: '/images/thumbname/3.jpg', + title: '친구초대 이벤트', + imageWidth: 200, + imageHeight: 200, + imageX: 100, + imageY: 100, + openStatus: true, + updatedAt: null, + createdAt: null + } +]; + +export class PopupSetDataSource extends DataSource { + private _objectStore: BetHistory[] = []; + private _ObjectsSubject$ = new BehaviorSubject([]); + private _loadingSubject$ = new BehaviorSubject(false); + + public loading$ = this._loadingSubject$.asObservable(); + public formg: FormGroup; + + constructor(private fixBonusService: PopupSetService) { + super(); + } + + connect(collectionViewer: CollectionViewer): Observable { + // return this.fixBonusService.getAll().pipe( + // map(res => { + // res.forEach(m => this._objectStore.push(m as FixBonus)); + // this._ObjectsSubject$.next(this._objectStore); + // let fa = 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 PopupSet)); + this._ObjectsSubject$.next(this._objectStore); + let fa = this.formg.get('formarray'); + res.forEach(r => fa.push(this.createRowFormGroup(r))); + return res; + }) + ); + } + + // id: 3, + // thumbNail: '/images/thumbname/3.jpg', + // title: '친구초대 이벤트', + // imageWidth: 200, + // imageHeight: 200, + // imageX: 100, + // imageY: 100, + // openStatus: true, + // updatedAt: null, + // createdAt: null + createRowFormGroup(r: PopupSet): FormGroup { + let f = new FormGroup({ + title: this.createNewFormContorl(r, 'title'), + imageWidth: this.createNewFormContorl(r, 'imageWidth'), + imageHeight: this.createNewFormContorl(r, 'imageHeight'), + imageX: this.createNewFormContorl(r, 'imageX'), + imageY: this.createNewFormContorl(r, 'imageY'), + openStatus: this.createNewFormContorl(r, 'openStatus') + }); + return f; + } + + createNewFormContorl(r: PopupSet, 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(); + } +} diff --git a/src/app/pages/games/game/component/index.ts b/src/app/pages/games/game/component/index.ts index d3fc728..f9d98fc 100644 --- a/src/app/pages/games/game/component/index.ts +++ b/src/app/pages/games/game/component/index.ts @@ -8,6 +8,7 @@ import { SettlementComponent } from './settlement.component'; import { ItemManagementComponent } from './item-management.component'; import { LeagueManagementComponent } from './league-management.component'; import { ExceptAutoRegistComponent } from './except-auto-regist.component'; +import { BetHistoryTableComponent } from './bet-history-table/bet-history-table.component'; export const COMPONENTS = [ SportResultComponent, @@ -19,5 +20,6 @@ export const COMPONENTS = [ SettlementComponent, ItemManagementComponent, LeagueManagementComponent, - ExceptAutoRegistComponent + ExceptAutoRegistComponent, + BetHistoryTableComponent ]; diff --git a/src/app/pages/infos/info/component/service-center.component.scss b/src/app/pages/infos/info/component/service-center.component.scss index e65611c..356157e 100644 --- a/src/app/pages/infos/info/component/service-center.component.scss +++ b/src/app/pages/infos/info/component/service-center.component.scss @@ -49,13 +49,6 @@ app-service-center { } } - .mat-tab-group, - .mat-tab-body-wrapper, - .tab-content { - flex: 1 1 auto; - max-width: 100%; - } - .service-center-table { flex: 1 1 auto; border-bottom: 1px solid rgba(0, 0, 0, 0.12);