menu added

This commit is contained in:
byung eun park 2019-07-31 08:30:04 +09:00
parent b58711e254
commit 29313a6aff
28 changed files with 1556 additions and 15 deletions

View File

@ -71,7 +71,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.SPORT_RESULT_MANAGEMENT.TITLE', translate: 'NAV.SPORT_RESULT_MANAGEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/sport-result',
}, },
{ {
id: 'sportMixManagement', id: 'sportMixManagement',
@ -79,7 +79,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.SPORT_MIX_MANAGEMENT.TITLE', translate: 'NAV.SPORT_MIX_MANAGEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/sport-mix',
}, },
{ {
id: 'miniGame', id: 'miniGame',
@ -87,7 +87,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.MINI_GAME.TITLE', translate: 'NAV.MINI_GAME.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/mini-game',
}, },
{ {
id: 'miniGameManagement', id: 'miniGameManagement',
@ -95,7 +95,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.MINI_GAME_MANAGEMENT.TITLE', translate: 'NAV.MINI_GAME_MANAGEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/mini-game-settings',
}, },
{ {
id: 'excelRegist', id: 'excelRegist',
@ -103,7 +103,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.EXCEL_REGIST.TITLE', translate: 'NAV.EXCEL_REGIST.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/excel-regist',
}, },
{ {
id: 'betHistory', id: 'betHistory',
@ -111,7 +111,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.BET_HISTORY.TITLE', translate: 'NAV.BET_HISTORY.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/bet-history',
}, },
{ {
id: 'settlement', id: 'settlement',
@ -119,7 +119,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.SETTLEMENT.TITLE', translate: 'NAV.SETTLEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/settlement',
}, },
{ {
id: 'itemManagement', id: 'itemManagement',
@ -127,15 +127,15 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.ITEM_MANAGEMENT.TITLE', translate: 'NAV.ITEM_MANAGEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/item-management',
}, },
{ {
id: 'leagueManagement', id: 'leagueManagement',
title: '종목관리', title: '리그관리',
translate: 'NAV.LEAGUE_MANAGEMENT.TITLE', translate: 'NAV.LEAGUE_MANAGEMENT.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management/league-management',
}, },
{ {
id: 'exceptAutoRegist', id: 'exceptAutoRegist',
@ -143,7 +143,7 @@ export const navigation: FuseNavigation[] = [
translate: 'NAV.EXCEPT_AUTO_REGIST.TITLE', translate: 'NAV.EXCEPT_AUTO_REGIST.TITLE',
type: 'item', type: 'item',
icon: 'email', icon: 'email',
url: '/sample', url: '/pages/games/management//except-auto-regist',
} }
] ]
}, },

View File

@ -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>

View File

@ -0,0 +1,4 @@
.example-button-row button,
.example-button-row a {
margin-right: 8px;
}

View File

@ -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();
});
});

View File

@ -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() {
}
}

View 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
];

View 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>

View 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%;
}
}
}

View File

@ -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();
});
});

View File

@ -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();
}
}

View 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>

View 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%;
}
}
}

View File

@ -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();
});
});

View File

@ -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();
}
}

View 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>

View 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%;
}
}
}

View File

@ -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();
});
});

View File

@ -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();
}
}

View 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>

View 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%;
}
}
}

View File

@ -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();
});
});

View File

@ -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();
}
}

View 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 { }

View 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 { }

View 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 { }

View 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 { }

View File

@ -5,6 +5,10 @@ const routes: Routes = [
{ {
path: 'users', path: 'users',
loadChildren: './users/users.module#UsersModule' loadChildren: './users/users.module#UsersModule'
},
{
path: 'games',
loadChildren: './games/games.module#GamesModule'
} }
]; ];

View File

@ -22,10 +22,7 @@ import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-ca
import { FuseSharedModule } from 'src/@fuse/shared.module'; import { FuseSharedModule } from 'src/@fuse/shared.module';
import { UserRoutingModule } from './user-routing.module'; import { UserRoutingModule } from './user-routing.module';
import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
import { UserRegistComponent } from './component/user-regist/user-regist.component';
import { MatStepperModule } from '@angular/material/stepper'; 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'; import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@ -59,7 +56,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
UserRoutingModule UserRoutingModule
], ],
declarations: [...COMPONENTS, UserRegistComponent, UserFeesComponent, UserAttendanceComponent], declarations: [...COMPONENTS],
}) })
export class UserModule { } export class UserModule { }