menu added
This commit is contained in:
byung eun park
parent
b58711e254
commit
29313a6aff
|
|
@ -71,7 +71,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.SPORT_RESULT_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/sport-result',
|
||||
},
|
||||
{
|
||||
id: 'sportMixManagement',
|
||||
|
|
@ -79,7 +79,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.SPORT_MIX_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/sport-mix',
|
||||
},
|
||||
{
|
||||
id: 'miniGame',
|
||||
|
|
@ -87,7 +87,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.MINI_GAME.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/mini-game',
|
||||
},
|
||||
{
|
||||
id: 'miniGameManagement',
|
||||
|
|
@ -95,7 +95,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.MINI_GAME_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/mini-game-settings',
|
||||
},
|
||||
{
|
||||
id: 'excelRegist',
|
||||
|
|
@ -103,7 +103,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.EXCEL_REGIST.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/excel-regist',
|
||||
},
|
||||
{
|
||||
id: 'betHistory',
|
||||
|
|
@ -111,7 +111,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.BET_HISTORY.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/bet-history',
|
||||
},
|
||||
{
|
||||
id: 'settlement',
|
||||
|
|
@ -119,7 +119,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.SETTLEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/settlement',
|
||||
},
|
||||
{
|
||||
id: 'itemManagement',
|
||||
|
|
@ -127,15 +127,15 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.ITEM_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/item-management',
|
||||
},
|
||||
{
|
||||
id: 'leagueManagement',
|
||||
title: '종목관리',
|
||||
title: '리그관리',
|
||||
translate: 'NAV.LEAGUE_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management/league-management',
|
||||
},
|
||||
{
|
||||
id: 'exceptAutoRegist',
|
||||
|
|
@ -143,7 +143,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.EXCEPT_AUTO_REGIST.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/sample',
|
||||
url: '/pages/games/management//except-auto-regist',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div _ngcontent-yro-c52 class="content p-24">
|
||||
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
|
||||
<mat-button-toggle value="bold">Bold</mat-button-toggle>
|
||||
<mat-button-toggle value="italic">Italic</mat-button-toggle>
|
||||
<mat-button-toggle value="underline">Underline</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
<div class="example-button-row">
|
||||
<button mat-raised-button color="accent">Primary</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.example-button-row button,
|
||||
.example-button-row a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ExcelRegistComponent } from './excel-regist.component';
|
||||
|
||||
describe('ExcelRegistComponent', () => {
|
||||
let component: ExcelRegistComponent;
|
||||
let fixture: ComponentFixture<ExcelRegistComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ExcelRegistComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ExcelRegistComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-excel-regist',
|
||||
templateUrl: './excel-regist.component.html',
|
||||
styleUrls: ['./excel-regist.component.scss']
|
||||
})
|
||||
export class ExcelRegistComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
13
src/app/pages/games/component/index.ts
Normal file
13
src/app/pages/games/component/index.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { SportResultComponent } from './sport-result/sport-result.component';
|
||||
import { SportMixComponent } from '../component/sport-mix/sport-mix.component';
|
||||
import { MiniGameComponent } from '../component/mini-game/mini-game.component';
|
||||
import { MiniGameSettingsComponent } from '../component/mini-game-settings/mini-game-settings.component';
|
||||
import { ExcelRegistComponent } from '../component/excel-regist/excel-regist.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
SportResultComponent,
|
||||
SportMixComponent,
|
||||
MiniGameComponent,
|
||||
MiniGameSettingsComponent,
|
||||
ExcelRegistComponent
|
||||
];
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
|
||||
<mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{order.id}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reference Column -->
|
||||
<ng-container matColumnDef="reference">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{order.reference}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="customer">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{order.customer.firstName}}
|
||||
{{order.customer.lastName}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Price Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{order.total | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Payment Column -->
|
||||
<ng-container matColumnDef="payment">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.payment.method}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{order.status[0].name}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.date}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/orders/'+order.id">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
|
||||
</mat-paginator>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
e-commerce-orders {
|
||||
|
||||
#orders {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group,
|
||||
.mat-tab-body-wrapper,
|
||||
.tab-content {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mat-header-row {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.order {
|
||||
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, .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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MiniGameSettingsComponent } from './mini-game-settings.component';
|
||||
|
||||
describe('MiniGameSettingsComponent', () => {
|
||||
let component: MiniGameSettingsComponent;
|
||||
let fixture: ComponentFixture<MiniGameSettingsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MiniGameSettingsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MiniGameSettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { FuseUtils } from 'src/@fuse/utils';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-mini-game-settings',
|
||||
templateUrl: './mini-game-settings.component.html',
|
||||
styleUrls: ['./mini-game-settings.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MiniGameSettingsComponent implements OnInit, OnDestroy {
|
||||
|
||||
displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor() {
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
fromEvent(this.filter.nativeElement, 'keyup')
|
||||
.pipe(
|
||||
// takeUntil(this._unsubscribeAll),
|
||||
// debounceTime(150),
|
||||
// distinctUntilChanged()
|
||||
)
|
||||
.subscribe(() => {
|
||||
// if (!this.dataSource) {
|
||||
// return;
|
||||
// }
|
||||
// this.dataSource.filter = this.filter.nativeElement.value;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
}
|
||||
121
src/app/pages/games/component/mini-game/mini-game.component.html
Normal file
121
src/app/pages/games/component/mini-game/mini-game.component.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
|
||||
<mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{order.id}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reference Column -->
|
||||
<ng-container matColumnDef="reference">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{order.reference}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="customer">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{order.customer.firstName}}
|
||||
{{order.customer.lastName}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Price Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{order.total | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Payment Column -->
|
||||
<ng-container matColumnDef="payment">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.payment.method}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{order.status[0].name}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.date}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/orders/'+order.id">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
|
||||
</mat-paginator>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
122
src/app/pages/games/component/mini-game/mini-game.component.scss
Normal file
122
src/app/pages/games/component/mini-game/mini-game.component.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
e-commerce-orders {
|
||||
|
||||
#orders {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group,
|
||||
.mat-tab-body-wrapper,
|
||||
.tab-content {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mat-header-row {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.order {
|
||||
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, .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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MiniGameComponent } from './mini-game.component';
|
||||
|
||||
describe('MiniGameComponent', () => {
|
||||
let component: MiniGameComponent;
|
||||
let fixture: ComponentFixture<MiniGameComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MiniGameComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MiniGameComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { FuseUtils } from 'src/@fuse/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mini-game',
|
||||
templateUrl: './mini-game.component.html',
|
||||
styleUrls: ['./mini-game.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MiniGameComponent implements OnInit, OnDestroy {
|
||||
|
||||
displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor() {
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
fromEvent(this.filter.nativeElement, 'keyup')
|
||||
.pipe(
|
||||
// takeUntil(this._unsubscribeAll),
|
||||
// debounceTime(150),
|
||||
// distinctUntilChanged()
|
||||
)
|
||||
.subscribe(() => {
|
||||
// if (!this.dataSource) {
|
||||
// return;
|
||||
// }
|
||||
// this.dataSource.filter = this.filter.nativeElement.value;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
}
|
||||
121
src/app/pages/games/component/sport-mix/sport-mix.component.html
Normal file
121
src/app/pages/games/component/sport-mix/sport-mix.component.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
|
||||
<mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{order.id}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reference Column -->
|
||||
<ng-container matColumnDef="reference">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{order.reference}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="customer">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{order.customer.firstName}}
|
||||
{{order.customer.lastName}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Price Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{order.total | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Payment Column -->
|
||||
<ng-container matColumnDef="payment">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.payment.method}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{order.status[0].name}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.date}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/orders/'+order.id">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
|
||||
</mat-paginator>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
122
src/app/pages/games/component/sport-mix/sport-mix.component.scss
Normal file
122
src/app/pages/games/component/sport-mix/sport-mix.component.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
e-commerce-orders {
|
||||
|
||||
#orders {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group,
|
||||
.mat-tab-body-wrapper,
|
||||
.tab-content {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mat-header-row {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.order {
|
||||
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, .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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SportMixComponent } from './sport-mix.component';
|
||||
|
||||
describe('SportMixComponent', () => {
|
||||
let component: SportMixComponent;
|
||||
let fixture: ComponentFixture<SportMixComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SportMixComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SportMixComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { FuseUtils } from 'src/@fuse/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sport-mix',
|
||||
templateUrl: './sport-mix.component.html',
|
||||
styleUrls: ['./sport-mix.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SportMixComponent implements OnInit, OnDestroy {
|
||||
|
||||
displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor() {
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
fromEvent(this.filter.nativeElement, 'keyup')
|
||||
.pipe(
|
||||
// takeUntil(this._unsubscribeAll),
|
||||
// debounceTime(150),
|
||||
// distinctUntilChanged()
|
||||
)
|
||||
.subscribe(() => {
|
||||
// if (!this.dataSource) {
|
||||
// return;
|
||||
// }
|
||||
// this.dataSource.filter = this.filter.nativeElement.value;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
|
||||
<mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{order.id}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reference Column -->
|
||||
<ng-container matColumnDef="reference">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{order.reference}}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="customer">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{order.customer.firstName}}
|
||||
{{order.customer.lastName}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Price Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{order.total | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Payment Column -->
|
||||
<ng-container matColumnDef="payment">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.payment.method}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{order.status[0].name}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{order.date}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/orders/'+order.id">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
|
||||
</mat-paginator>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
e-commerce-orders {
|
||||
|
||||
#orders {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group,
|
||||
.mat-tab-body-wrapper,
|
||||
.tab-content {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mat-header-row {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.order {
|
||||
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, .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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SportResultComponent } from './sport-result.component';
|
||||
|
||||
describe('SportResultComponent', () => {
|
||||
let component: SportResultComponent;
|
||||
let fixture: ComponentFixture<SportResultComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SportResultComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SportResultComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { FuseUtils } from 'src/@fuse/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sport-result',
|
||||
templateUrl: './sport-result.component.html',
|
||||
styleUrls: ['./sport-result.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SportResultComponent implements OnInit, OnDestroy {
|
||||
|
||||
displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor() {
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
fromEvent(this.filter.nativeElement, 'keyup')
|
||||
.pipe(
|
||||
// takeUntil(this._unsubscribeAll),
|
||||
// debounceTime(150),
|
||||
// distinctUntilChanged()
|
||||
)
|
||||
.subscribe(() => {
|
||||
// if (!this.dataSource) {
|
||||
// return;
|
||||
// }
|
||||
// this.dataSource.filter = this.filter.nativeElement.value;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
15
src/app/pages/games/games-routing.module.ts
Normal file
15
src/app/pages/games/games-routing.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'management',
|
||||
loadChildren: './manage/manage.module#ManageModule'
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class GamesRoutingModule { }
|
||||
15
src/app/pages/games/games.module.ts
Normal file
15
src/app/pages/games/games.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||
import { GamesRoutingModule } from './games-routing.module';
|
||||
import { MiniGameSettingsComponent } from './component/mini-game-settings/mini-game-settings.component';
|
||||
import { ExcelRegistComponent } from './component/excel-regist/excel-regist.component';
|
||||
|
||||
@NgModule({
|
||||
|
||||
imports: [
|
||||
FuseSharedModule,
|
||||
GamesRoutingModule
|
||||
],
|
||||
|
||||
})
|
||||
export class GamesModule { }
|
||||
54
src/app/pages/games/manage/manage-routing.module.ts
Normal file
54
src/app/pages/games/manage/manage-routing.module.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { SportResultComponent } from '../component/sport-result/sport-result.component';
|
||||
import { SportMixComponent } from '../component/sport-mix/sport-mix.component';
|
||||
import { MiniGameComponent } from '../component/mini-game/mini-game.component';
|
||||
import { MiniGameSettingsComponent } from '../component/mini-game-settings/mini-game-settings.component';
|
||||
import { ExcelRegistComponent } from '../component/excel-regist/excel-regist.component';
|
||||
|
||||
const routes: Routes = [
|
||||
|
||||
{
|
||||
path: 'sport-result',
|
||||
component: SportResultComponent,
|
||||
},
|
||||
{
|
||||
path: 'sport-mix',
|
||||
component: SportMixComponent
|
||||
},
|
||||
{
|
||||
path: 'mini-game',
|
||||
component: MiniGameComponent
|
||||
},
|
||||
{
|
||||
path: 'mini-game-settings',
|
||||
component: MiniGameSettingsComponent
|
||||
},
|
||||
{
|
||||
path: 'excel-regist',
|
||||
component: ExcelRegistComponent
|
||||
},
|
||||
// {
|
||||
// path: 'connect',
|
||||
// component: UserConnectComponent
|
||||
// },
|
||||
// {
|
||||
// path: 'regist',
|
||||
// component: UserRegistComponent
|
||||
// },
|
||||
// {
|
||||
// path: 'fees',
|
||||
// component: UserFeesComponent
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// path: 'attendance',
|
||||
// component: UserAttendanceComponent
|
||||
// }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ManageRoutingModule { }
|
||||
64
src/app/pages/games/manage/manage.module.ts
Normal file
64
src/app/pages/games/manage/manage.module.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
|
||||
|
||||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||
import { ManageRoutingModule } from './manage-routing.module';
|
||||
import { COMPONENTS } from '../component';
|
||||
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatChipsModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatPaginatorModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSortModule,
|
||||
MatSnackBarModule,
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatStepperModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
|
||||
AngularCalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory
|
||||
}),
|
||||
|
||||
FuseSharedModule,
|
||||
ManageRoutingModule
|
||||
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
})
|
||||
export class ManageModule { }
|
||||
|
|
@ -5,6 +5,10 @@ const routes: Routes = [
|
|||
{
|
||||
path: 'users',
|
||||
loadChildren: './users/users.module#UsersModule'
|
||||
},
|
||||
{
|
||||
path: 'games',
|
||||
loadChildren: './games/games.module#GamesModule'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -22,10 +22,7 @@ import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-ca
|
|||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||
import { UserRoutingModule } from './user-routing.module';
|
||||
import { COMPONENTS } from './component';
|
||||
import { UserRegistComponent } from './component/user-regist/user-regist.component';
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { UserFeesComponent } from './component/user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
|
||||
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
|
||||
|
|
@ -59,7 +56,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
|||
|
||||
UserRoutingModule
|
||||
],
|
||||
declarations: [...COMPONENTS, UserRegistComponent, UserFeesComponent, UserAttendanceComponent],
|
||||
declarations: [...COMPONENTS],
|
||||
|
||||
})
|
||||
export class UserModule { }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user