Commit eb652b32 by Ajit Thakor

initial commit

1 parent d2ffb55c
Showing with 2768 additions and 0 deletions
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "primer"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/quill/dist/quill.snow.css",
"../node_modules/quill/dist/quill.bubble.css",
"../node_modules/dragula/dist/dragula.css",
"../node_modules/leaflet/dist/leaflet.css",
"../node_modules/angular-calendar/scss/angular-calendar.scss",
"../node_modules/@swimlane/ngx-datatable/release/index.css",
"../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
"assets/fonts/pe/css/pe-icon-set-weather.css",
"assets/fonts/data-table/icons.css",
"assets/styles/app.scss"
],
"scripts": [
"../node_modules/hammerjs/hammer.min.js",
"../node_modules/chart.js/dist/Chart.bundle.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
#System Files
.DS_Store
Thumbs.db
# Primer
Primer is a creative material design admin template built with Angular 2. It comes out of the box with AoT and lazy loading support, Language translation , RTL support and light and dark colour schemes. With this, you get all you need to start working on your SAAS, CRM, CMS or dashboard based project.
Once you've purchased Primer please consider giving a `5 star rating`, it helps in pushing out more updates and adding a lot more features.
####Key Features Include:
* LTR/RTL Support
* Angular 2
* Material design
* AoT compilation
* Fully responsive (Mobile, Tablet, Desktop)
* Well documented (Both online and offline)
* Easy to customise
* Language translation
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.32.3.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
import { AppPage } from './app.po';
describe('primer App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should expect true to be true', () => {
expect(true).toBe(true);
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
This diff could not be displayed because it is too large.
{
"name": "primer",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.9",
"@angular/cdk": "5.2.4",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/core": "5.2.9",
"@angular/flex-layout": "5.0.0-beta.13",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/material": "5.2.4",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@angular/router": "5.2.9",
"@asymmetrik/ngx-leaflet": "3.0.2",
"@ngx-loading-bar/router": "1.3.1",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"@swimlane/ngx-datatable": "11.2.0",
"angular-calendar": "0.23.7",
"angular-tree-component": "7.0.1",
"chart.js": "2.7.2",
"core-js": "2.5.3",
"d3": "4.13.0",
"dragula": "3.7.2",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"leaflet": "1.3.1",
"moment": "2.21.0",
"ng2-charts": "1.6.0",
"ng2-dragula": "1.5.0",
"ng2-file-upload": "1.3.0",
"ng2-validation": "4.2.0",
"ngx-perfect-scrollbar": "5.3.5",
"ngx-quill": "2.2.0",
"rxjs": "5.5.7",
"screenfull": "3.3.2",
"zone.js": "0.8.20"
},
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "5.2.9",
"@angular/language-service": "5.2.9",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.12.0",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
<h1>
{{title}}
</h1>
describe('App: Primer', () => {
it('should expect true to be true', () => {
expect(true).toBe(true);
});
});
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { RoutePartsService } from './services/route-parts/route-parts.service';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit{
private appTitle: string;
private pageTitle: string;
constructor(translate: TranslateService,private routePartsService: RoutePartsService,
private router: Router,
public title: Title,
private activeRoute: ActivatedRoute) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
ngOnInit() {
this.appTitle = 'BO-LIVEBILIANBET';
this.pageTitle = '';
this.changePageTitle();
}
changePageTitle() {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {debugger
var routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
if (!routeParts.length)
return this.title.setTitle(this.appTitle);
this.pageTitle = routeParts
.reverse()
.map((part) => part.title)
.reduce((partA, partI) => { return `${partA} > ${partI}` });
this.pageTitle += ` | ${this.appTitle}`;
this.title.setTitle(this.pageTitle);
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { AgmCoreModule } from '@agm/core';
import {
MatSidenavModule,
MatCardModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatSlideToggleModule,
MatSelectModule,
MatProgressBarModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import {BidiModule} from '@angular/cdk/bidi';
import {
MenuComponent,
HeaderComponent,
SidebarComponent,
AdminLayoutComponent,
AuthLayoutComponent,
AccordionAnchorDirective,
AccordionLinkDirective,
AccordionDirective} from './core';
import { AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
import { BreadcrumbComponent } from './core/breadcrumb/breadcrumb.component';
import { RoutePartsService } from './services/route-parts/route-parts.service';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true,
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
};
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SidebarComponent,
MenuComponent,
AdminLayoutComponent,
AuthLayoutComponent,
AccordionAnchorDirective,
AccordionLinkDirective,
AccordionDirective,
BreadcrumbComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(AppRoutes),
FormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
LoadingBarRouterModule,
MatSidenavModule,
MatCardModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatSlideToggleModule,
MatSelectModule,
MatProgressBarModule,
FlexLayoutModule,
BidiModule,
AgmCoreModule.forRoot({apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI'}),
PerfectScrollbarModule
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},
RoutePartsService
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Routes } from '@angular/router';
import { AdminLayoutComponent, AuthLayoutComponent } from './core';
export const AppRoutes: Routes = [{
path: '',
component: AdminLayoutComponent,
children: [{
path: '',
loadChildren: './components/dashboard/dashboard.module#DashboardModule',
data: { title: '', breadcrumb: 'DASHBOARD'}
}, {
path: 'search',
loadChildren: './components/search/search.module#SearchModule',
data: { title: 'SEARCH', breadcrumb: 'SEARCH'}
}, {
path: 'manage-players',
loadChildren: './components/players/players.module#PlayersModule',
data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS'}
}, {
path: 'manage-affiliates',
loadChildren: './components/affiliates/affiliates.module#AffiliatesModule',
data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES'}
}, {
path: 'manage-operators',
loadChildren: './components/operators/operators.module#OperatorsModule',
data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS'}
}, {
path: 'manage-payments',
loadChildren: './components/payments/payments.module#PaymentsModule',
data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'MANAGE-PAYMENTS'}
}]
}, {
path: '',
component: AuthLayoutComponent,
children: [{
path: 'session',
loadChildren: './components/session/session.module#SessionModule',
}]
}, {
path: '**',
redirectTo: 'session/404'
}];
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatInputModule, MatExpansionModule,MatDatepickerModule,MatNativeDateModule,MatSelectModule,MatButtonModule,MatButtonToggleModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { AffiliateRoutes } from './affiliates.routing';
import { ViewAffiliateComponent } from './view-affiliates/view-affiliate.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AffiliateRoutes),
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule
],
declarations: [
ViewAffiliateComponent,
]
})
export class AffiliatesModule { }
import { Routes } from '@angular/router';
import { ViewAffiliateComponent } from './view-affiliates/view-affiliate.component';
export const AffiliateRoutes: Routes = [
{
path: 'view-affiliates',
component: ViewAffiliateComponent,
data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'VIEW-AFFILIATES'}
}
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option>--</mat-option>
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<button mat-raised-button color="primary">Manual Balance Adjustment </button><br>
<ngx-datatable
class="material"
[rows]="rows"
[columns]="[{name:'Username'},
{name:'Wallet'},
{name:'Rate'},
{name:'Affiliate Level'},
{name:'CreateTime'},
{name:'UpdateTime'},
{name:'Last Login Time'},
{name:'Last Login Ip'},
{name:'Register IP'},
{name:'Withdraw Status'},
{name:'Withdraw Review'},
{name:'Status'},
{name:'Action'}]"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
templateUrl: './view-affiliate.component.html',
styleUrls: ['./view-affiliate.component.scss']
})
export class ViewAffiliateComponent {
}
<div fxLayout="row wrap">
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-teal">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>money</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>103</h2>
<p>Deposits</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-purple">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>money</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>230</h2>
<p>Withdrawals</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-indigo">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>870</h2>
<p>Players</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-red">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>323</h2>
<p>Affiliates</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-indigo">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>870</h2>
<p>Operators</p>
</div>
</div>
</mat-card>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutes } from './dashboard.routing';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(DashboardRoutes),
MatIconModule,
MatCardModule,
MatButtonModule,
MatListModule,
MatProgressBarModule,
MatMenuModule,
FlexLayoutModule
],
declarations: [ DashboardComponent ]
})
export class DashboardModule {}
import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
export const DashboardRoutes: Routes = [{
path: '',
component: DashboardComponent
}];
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DialogRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogRoutingModule } from './dialog-routing.module';
import { ManualBalanceAdjustmentComponent } from './manual-balance-adjustment/manual-balance-adjustment.component';
@NgModule({
imports: [
CommonModule,
DialogRoutingModule
],
declarations: [ManualBalanceAdjustmentComponent]
})
export class DialogModule { }
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-manual-balance-adjustment',
templateUrl: './manual-balance-adjustment.component.html',
styleUrls: ['./manual-balance-adjustment.component.scss']
})
export class ManualBalanceAdjustmentComponent implements OnInit {
ngOnInit() {
}
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<ManualBalanceAdjustmentComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatTabsModule,MatIconModule, MatCardModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { OperatorsRoutes } from './operators.routing';
import { ViewOperatorsComponent } from './view-operators/view-operator.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(OperatorsRoutes),
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule,
MatTabsModule,
MatIconModule,
MatCardModule
],
declarations: [
ViewOperatorsComponent,
]
})
export class OperatorsModule { }
import { Routes } from '@angular/router';
import { ViewOperatorsComponent } from './view-operators/view-operator.component';
export const OperatorsRoutes: Routes = [
{
path: 'view-operators',
component: ViewOperatorsComponent,
data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'VIEW-OPERATORS'}
}
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
<span fxFlex></span>
<button mat-raised-button color="primary" class="mr-1">Add Operator </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="CreateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="UpdateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.updateTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Ip">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Operator Role">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.operatorRole}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Modify" class="mibutton24" mat-icon-button mat-button-sm
(click)="edit(row.userId,row.userName,row.role,row.email,row.assignedNode)" [attr.aria-label]="edit"
color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
(click)="delete(row?.userId,row?.userName)" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">close</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
templateUrl: './view-operator.component.html',
styleUrls: ['./view-operator.component.scss']
})
export class ViewOperatorsComponent {
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-deposits',
templateUrl: './deposits.component.html',
styleUrls: ['./deposits.component.scss']
})
export class DepositsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepositsComponent } from './deposits/deposits.component';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
const routes: Routes = [
{
path: 'deposits',
component: DepositsComponent
}, {
path: 'withdrawals',
component: WithdrawalsComponent
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PaymentsRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaymentsRoutingModule } from './payments-routing.module';
import { DepositsComponent } from './deposits/deposits.component';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
@NgModule({
imports: [
CommonModule,
PaymentsRoutingModule
],
declarations: [DepositsComponent, WithdrawalsComponent]
})
export class PaymentsModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-withdrawals',
templateUrl: './withdrawals.component.html',
styleUrls: ['./withdrawals.component.scss']
})
export class WithdrawalsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<h1 matDialogTitle>Delete Dailog</h1>
<div mat-dialog-content>
<!-- <p>Delete: <b>{{ data.userName }}</b> ?</p> -->
<p>Delete: <b>Test User</b> ?</p>
</div>
<div mat-dialog-actions>
<button type="button" mat-raised-button color="primary" (click)="dialogRef.close(true)"
(click)="confirmDelete()">Delete</button>
&nbsp;
<span fxFlex></span>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">No Thanks!</button>
</div>
\ No newline at end of file
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-delete-dialog',
templateUrl: './delete-dialog.component.html',
styleUrls: ['./delete-dialog.component.scss']
})
export class DeleteDialogComponent implements OnInit {
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<DeleteDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
<mat-toolbar color="primary">
User Details
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex.gt-sm="55" fxFlex="100">
<mat-card class="mat-card-top">
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>User Info</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="user name">
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="Email address">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Email address">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-select placeholder="Timezone">
<mat-option value="Hawaii">(GMT-10:00) Hawaii</mat-option>
<mat-option value="Alaska">(GMT-09:00) Alaska</mat-option>
<mat-option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</mat-option>
<mat-option value="Arizona">(GMT-07:00) Arizona</mat-option>
<mat-option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)
</mat-option>
<mat-option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US &
Canada)</mat-option>
<mat-option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</mat-option>
<mat-option value="Indiana (East)">(GMT-05:00) Indiana (East)</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Username">
</mat-form-field>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none">Cancel</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none">Cancel</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Balances</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Payment Summary</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Bank A/C Summary</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Notes</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Level</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Document</ng-template>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>
\ No newline at end of file
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.scss']
})
export class EditDialogComponent implements OnInit {
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatTabsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule, MatNativeDateModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatToolbarModule, MatFormFieldModule } from '@angular/material';
import { RouterModule } from '@angular/router';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
import { PlayersRoutes } from './players.routing';
import { ViewPlayersComponent } from './view-players/view-player.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(PlayersRoutes),
MatCardModule,
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule,
MatProgressBarModule,
MatIconModule,
MatRadioModule,
MatToolbarModule,
MatDialogModule,
FormsModule,
MatFormFieldModule,
MatTabsModule,
MatCardModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatSelectModule,
MatProgressBarModule,
],
declarations: [
ViewPlayersComponent,
DeleteDialogComponent,
EditDialogComponent
],
entryComponents: [
DeleteDialogComponent,
EditDialogComponent
],
})
export class PlayersModule { }
import { Routes } from '@angular/router';
import { ViewPlayersComponent } from './view-players/view-player.component';
export const PlayersRoutes: Routes = [
{
path: 'view-players',
component: ViewPlayersComponent,
data: { title: 'MANAGE-PLAYERS', breadcrumb: 'VIEW-PLAYERS'}
},
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Affiliate Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option>--</mat-option>
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<br>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="pb-1">
<span fxFlex></span><button mat-raised-button color="primary" (click)="openManualDepositPopUp()">Manual Balance
Adjustment </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Wallet">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.wallet }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Level">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.level }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="CreateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="UpdateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.updateTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Ip">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Register IP">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.registerIP}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Withdraw Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.withdrawStatus }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Withdraw Review">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.withdrawReview}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Modify" class="mibutton24" mat-icon-button mat-button-sm
(click)="openEditDialog()" [attr.aria-label]="edit" color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
(click)="openDeleteDialog()" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">close</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
\ No newline at end of file
import { DOCUMENT } from '@angular/common';
import { Component, Inject, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
import { EditDialogComponent } from '../edit-dialog/edit-dialog.component';
const defaultDialogConfig = new MatDialogConfig();
@Component({
templateUrl: './view-player.component.html',
styleUrls: ['./view-player.component.scss'],
})
export class ViewPlayersComponent {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
config = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
},
};
numTemplateOpens = 0;
@ViewChild(TemplateRef) template: TemplateRef<any>;
constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) {
dialog.afterOpen.subscribe(() => {
if (!doc.body.classList.contains('no-scroll')) {
doc.body.classList.add('no-scroll');
}
});
dialog.afterAllClosed.subscribe(() => {
doc.body.classList.remove('no-scroll');
});
}
openEditDialog() {
this.dialogRef = this.dialog.open(EditDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
openDeleteDialog() {
this.dialogRef = this.dialog.open(DeleteDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
}
export interface DataElement {
userName: string;
wallet: number
level: number
createTime: string
updateTime: string
lastLoginTime: string
lastLoginIp: string
registerIP: string
withdrawStatus: number
withdrawReview: number
status: number
}
const ELEMENT_DATA: DataElement[] = [
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title> Operator Activity</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Action Type">
<mat-option value="Login">Login</mat-option>
<mat-option value="Change-Password">Change-Password</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Username'},
{name:'Action Type'},
{name:'Remote Ip'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-operation-log',
templateUrl: './operation-log.component.html',
styleUrls: ['./operation-log.component.scss']
})
export class OperationLogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {OperationLogComponent} from './operation-log/operation-log.component';
import {TransferHistoryComponent} from './transfer-history/transfer-history.component';
const routes: Routes = [
{
path:'operation-log',
component:OperationLogComponent,
data: { title: 'SEARCH', breadcrumb: 'OPERATION-LOG'}
},{
path:'transfer-history',
component:TransferHistoryComponent,
data: { title: 'SEARCH', breadcrumb: 'TRANSFER-HISTORY'}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SearchRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { MatInputModule, MatExpansionModule,MatDatepickerModule,MatNativeDateModule,MatSelectModule,MatButtonModule,MatButtonToggleModule } from '@angular/material';
import { SearchRoutingModule } from './search-routing.module';
import { TransferHistoryComponent } from './transfer-history/transfer-history.component';
import { OperationLogComponent } from './operation-log/operation-log.component';
@NgModule({
imports: [
CommonModule,
SearchRoutingModule,
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule
],
declarations: [TransferHistoryComponent, OperationLogComponent]
})
export class SearchModule { }
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Transfer History</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Transaction Type">
<mat-option value="MW > PT">MW > PT</mat-option>
<mat-option value="PT > MW">PT > MW</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Transfer ID'},
{name:'Username'},
{name:'Transaction Type'},
{name:'Amount'},
{name:'Before'},
{name:'After'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-transfer-history',
templateUrl: './transfer-history.component.html',
styleUrls: ['./transfer-history.component.scss']
})
export class TransferHistoryComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="session">
<div class="session-content text-xs-center">
<div>
<div class="error-title">500</div>
<div class="error-subtitle">We have an internal server error!</div>
<p class="mat-text-muted">Sorry, but the page you were trying to view does not exist. <a href="javascript:;">Report this error?</a></p>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-error',
templateUrl: './error.component.html',
styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Enter your email and we'll send you instructions on how to reset your password.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/signin']">Access your account</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
@Component({
selector: 'app-forgot',
templateUrl: './forgot.component.html',
styleUrls: ['./forgot.component.scss']
})
export class ForgotComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
email: [ null, Validators.compose( [ Validators.required, CustomValidators.email ] ) ]
} );
}
onSubmit() {
this.router.navigate ( ['/session/signin'] );
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="lockscreen-wrapper text-xs-center">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="lockscreen-avatar">
<img src="assets/images/avatar.jpg" class="radius-round" alt="user" title="user"/>
</div>
<p class="center-block mt-1">David Miller</p>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched" class="mat-text-warn">Username is required.</small>
</div>
<div> <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Unlock</button></div>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-lockscreen',
templateUrl: './lockscreen.component.html',
styleUrls: ['./lockscreen.component.scss']
})
export class LockscreenComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
uname: [ null, Validators.compose( [ Validators.required ] ) ]
} );
}
onSubmit() {
this.router.navigate ( ['/dashboard'] );
}
}
<div class="session">
<div class="session-content text-xs-center">
<div>
<div class="error-title">404</div>
<div class="error-subtitle">Page not found!</div>
<p class="mat-text-muted">Sorry, but the page you were trying to view does not exist. <a href="javascript:;">Report this error?</a></p>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-not-found',
templateUrl: './not-found.component.html',
styleUrls: ['./not-found.component.scss']
})
export class NotFoundComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatInputModule, MatCheckboxModule, MatButtonModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { SessionRoutes } from './session.routing';
import { NotFoundComponent } from './not-found/not-found.component';
import { ErrorComponent } from './error/error.component';
import { ForgotComponent } from './forgot/forgot.component';
import { LockscreenComponent } from './lockscreen/lockscreen.component';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(SessionRoutes),
MatIconModule,
MatCardModule,
MatInputModule,
MatCheckboxModule,
MatButtonModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
NotFoundComponent,
ErrorComponent,
ForgotComponent,
LockscreenComponent,
SigninComponent,
SignupComponent
]
})
export class SessionModule {}
import { Routes } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';
import { ErrorComponent } from './error/error.component';
import { ForgotComponent } from './forgot/forgot.component';
import { LockscreenComponent } from './lockscreen/lockscreen.component';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
export const SessionRoutes: Routes = [
{
path: '',
children: [{
path: '404',
component: NotFoundComponent
}, {
path: 'error',
component: ErrorComponent
}, {
path: 'forgot',
component: ForgotComponent
}, {
path: 'lockscreen',
component: LockscreenComponent
}, {
path: 'signin',
component: SigninComponent
}, {
path: 'signup',
component: SignupComponent
}]
}
];
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Sign in with your app id to continue.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched" class="mat-text-warn">Username is required.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput type="password" placeholder="Password" [formControl]="form.controls['password']">
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">Password is required.</small>
</div>
<div class="pb-1">
<mat-checkbox>Stay logged in</mat-checkbox>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/forgot']">Forgot password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account.</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
uname: [null , Validators.compose ( [ Validators.required ] )] , password: [null , Validators.compose ( [ Validators.required ] )]
} );
}
onSubmit() {
this.router.navigate ( [ '/dashboard' ] );
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Create an app id to continue.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput type="password" placeholder="Password" [formControl]="form.controls['password']">
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">You must include password.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']" type="password">
</mat-form-field>
<small *ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched" class="mat-text-warn">You must include confirm password.</small>
<small *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="mat-text-warn">Passwords do not math.</small>
</div>
<div class="pb-1">
<mat-checkbox>I have read and agree to the terms of service.</mat-checkbox>
</div>
<button mat-raised-button color="primary" class="btn-block" type="submit" [disabled]="!form.valid">Create your account</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/forgot']">Forgot password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signin']">Access your account.</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group( {
email: [null, Validators.compose([Validators.required, CustomValidators.email])],
password: password,
confirmPassword: confirmPassword
} );
}
onSubmit() {
this.router.navigate( ['/dashboard'] );
}
}
<div class="app mat-typography" [dir]="options.dir"
[ngClass]="{'app-dark': options.dark, 'boxed': options.boxed, 'collapsed-sidebar': options.collapsed, 'compact-sidebar': options.compact, 'side-panel-opened': sidePanelOpened, 'side-panel-closed': !sidePanelOpened }">
<ngx-loading-bar color="#009688"></ngx-loading-bar>
<app-header (toggleSidenav)="sidemenu.toggle()" (toggleNotificationSidenav)="notifications.toggle()"></app-header>
<mat-sidenav-container class="app-inner">
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'"
[opened]="!isOver()" (open)="sidePanelOpened = true" (close)="sidePanelOpened = false"
(mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()" [perfectScrollbar]="config"
[disabled]="mediaMatcher.matches">
<app-sidebar (click)="updatePS()"></app-sidebar>
</mat-sidenav>
<div [perfectScrollbar]="config" [disabled]="mediaMatcher.matches">
<app-breadcrumb #breadcrumb></app-breadcrumb><br>
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
</div>
\ No newline at end of file
import { Component, ElementRef, NgZone, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
import { TranslateService } from '@ngx-translate/core';
import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
const SMALL_WIDTH_BREAKPOINT = 960;
@Component({
selector: 'app-layout',
templateUrl: './admin-layout.component.html'
})
export class AdminLayoutComponent implements OnInit, OnDestroy {
private _router: Subscription;
mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
url: string;
sidePanelOpened;
options = {
collapsed: false,
compact: false,
boxed: false,
dark: false,
dir: 'ltr'
};
@ViewChild('sidemenu') sidemenu;
@ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
public config: PerfectScrollbarConfigInterface = {};
constructor(
private _element: ElementRef,
private router: Router,
zone: NgZone) {
this.mediaMatcher.addListener(mql => zone.run(() => {
this.mediaMatcher = mql;
}));
}
ngOnInit(): void {
this.url = this.router.url;
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
document.querySelector('.app-inner > .mat-drawer-content > div').scrollTop = 0;
this.url = event.url;
this.runOnRouteChange();
});
}
ngOnDestroy(): void {
this._router.unsubscribe();
}
runOnRouteChange(): void {
if (this.isOver()) {
this.sidemenu.close();
}
this.updatePS();
}
receiveOptions($event): void {
this.options = $event;
}
isOver(): boolean {
if (this.url === '/apps/messages' ||
this.url === '/apps/calendar' ||
this.url === '/apps/media' ||
this.url === '/maps/leaflet' ||
this.url === '/taskboard') {
return true;
} else {
return this.mediaMatcher.matches;
}
}
menuMouseOver(): void {
if (this.mediaMatcher.matches && this.options.collapsed) {
this.sidemenu.mode = 'over';
}
}
menuMouseOut(): void {
if (this.mediaMatcher.matches && this.options.collapsed) {
this.sidemenu.mode = 'side';
}
}
updatePS(): void {
if (!this.mediaMatcher.matches && !this.options.compact) {
setTimeout(() => {
this.directiveScroll.update();
}, 350);
}
}
}
<mat-sidenav-container>
<router-outlet></router-outlet>
</mat-sidenav-container>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-layout',
styles: [':host .mat-drawer-content {padding: 0;} .mat-drawer-container {z-index: 1000}'],
templateUrl: './auth-layout.component.html'
})
export class AuthLayoutComponent {}
.breadcrumb-bar {
position: relative;
width: 100%;
height: 40px !important;
min-height: 40px !important;
padding: 0 .666rem;
float: left;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.08), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 0 rgba(0,0,0,.05);
z-index: 9999;
}
.breadcrumb {
margin: 0;
padding: 0;
}
.breadcrumb li {
list-style: none;
float: left;
line-height: 40px;
}
.breadcrumb li:not(:first-child):before {
content: "/\A0";
padding: 0 8px;
}
.breadcrumb li a {
font-weight: 400;
font-size: 1rem;
}
\ No newline at end of file
<div class="breadcrumb-bar" *ngIf="isEnabled">
<ul class="breadcrumb">
<li *ngFor="let part of routeParts">{{part.breadcrumb}}</li>
</ul>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
import { RoutePartsService } from '../../services/route-parts/route-parts.service';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css']
})
export class BreadcrumbComponent implements OnInit {
routeParts:any[];
public isEnabled: boolean = true;
constructor(
private router: Router,
private routePartsService: RoutePartsService,
private activeRoute: ActivatedRoute
) {
debugger
this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {
this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
// generate url from parts
this.routeParts.reverse().map((item, i) => {
item.breadcrumb = this.parseText(item);
item.urlSegments.forEach((urlSegment, j) => {
if(j === 0)
return item.url = `${urlSegment.path}`;
item.url += `/${urlSegment.path}`
});
if(i === 0) {
debugger
return item;
}
// prepend previous part to current part
item.url = `${this.routeParts[i - 1].url}/${item.url}`;
return item;
});
});
}
ngOnInit() {}
parseText(part) {
part.breadcrumb = part.breadcrumb.replace(/{{([^{}]*)}}/g, function (a, b) {
var r = part.params[b];
return typeof r === 'string' ? r : a;
});
return part.breadcrumb;
}
}
<mat-toolbar class="main-header" color="primary">
<button (click)="toggleSidenav.emit()" mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<div class="branding">
<div class="logo"></div>
</div>
<div class="search-bar" fxFlex>
</div>
<button [matMenuTriggerFor]="user" mat-icon-button class="ml-xs">
<mat-icon>person</mat-icon>
</button>
<mat-menu #user="matMenu" x-position="before">
<button mat-menu-item>
<mat-icon>account_box</mat-icon>
Profile
</button>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
Sign Out
</button>
</mat-menu>
</mat-toolbar>
\ No newline at end of file
import { Component, EventEmitter, Output } from '@angular/core';
import * as screenfull from 'screenfull';
@Component({
selector: 'app-header',
templateUrl: './header.component.html'
})
export class HeaderComponent {
@Output() toggleSidenav = new EventEmitter<void>();
@Output() toggleNotificationSidenav = new EventEmitter<void>();
constructor() {
}
fullScreenToggle(): void {
if (screenfull.enabled) {
screenfull.toggle();
}
}
}
export * from './admin-layout/admin-layout.component';
export * from './auth-layout/auth-layout.component';
export * from './header/header.component';
export * from './sidebar/sidebar.component';
export * from './menu/menu.component';
export * from './menu-accordion';
import { Directive, OnInit, AfterViewInit, AfterContentChecked } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import { AccordionLinkDirective } from './accordionlink.directive';
@Directive({
selector: '[appAccordion]',
})
export class AccordionDirective implements AfterContentChecked {
protected navlinks: Array<AccordionLinkDirective> = [];
closeOtherLinks(openLink: AccordionLinkDirective): void {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link !== openLink) {
link.open = false;
}
});
}
addLink(link: AccordionLinkDirective): void {
this.navlinks.push(link);
}
removeGroup(link: AccordionLinkDirective): void {
const index = this.navlinks.indexOf(link);
if (index !== -1) {
this.navlinks.splice(index, 1);
}
}
checkOpenLinks() {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link.group) {
const routeUrl = this.router.url;
const currentUrl = routeUrl.split('/');
if (currentUrl.indexOf( link.group ) > 0) {
link.open = true;
this.closeOtherLinks(link);
}
}
});
}
ngAfterContentChecked(): void {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(e => this.checkOpenLinks());
}
constructor( private router: Router) {
setTimeout(() => this.checkOpenLinks());
}
}
import { Directive, HostListener, Inject } from '@angular/core';
import { AccordionLinkDirective } from './accordionlink.directive';
@Directive({
selector: '[appAccordionToggle]'
})
export class AccordionAnchorDirective {
protected navlink: AccordionLinkDirective;
constructor( @Inject(AccordionLinkDirective) navlink: AccordionLinkDirective) {
this.navlink = navlink;
}
@HostListener('click', ['$event'])
onClick(e: any) {
this.navlink.toggle();
}
}
import {
Directive, HostBinding, Inject, Input, OnInit, OnDestroy
} from '@angular/core';
import { AccordionDirective } from './accordion.directive';
@Directive({
selector: '[appAccordionLink]'
})
export class AccordionLinkDirective implements OnInit, OnDestroy {
@Input() public group: any;
@HostBinding('class.open')
@Input()
get open(): boolean {
return this._open;
}
set open(value: boolean) {
this._open = value;
if (value) {
this.nav.closeOtherLinks(this);
}
}
protected _open: boolean;
protected nav: AccordionDirective;
constructor(@Inject(AccordionDirective) nav: AccordionDirective) {
this.nav = nav;
}
ngOnInit(): any {
this.nav.addLink(this);
}
ngOnDestroy(): any {
this.nav.removeGroup(this);
}
toggle(): any {
this.open = !this.open;
}
}
export * from './accordionanchor.directive';
export * from './accordionlink.directive';
export * from './accordion.directive';
import { Component, NgZone, ViewChild, Output, EventEmitter } from '@angular/core';
import { MenuService } from './menu.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-menu',
template: `
<mat-nav-list appAccordion class="navigation">
<mat-list-item appAccordionLink *ngFor="let menuitem of menuService.getAll()" group="{{menuitem.state}}">
<a appAccordionToggle class="relative" [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="javascript:;" *ngIf="menuitem.type === 'sub'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
</a>
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative">{{ childitem.name | translate }}</a>
</mat-list-item>
</mat-nav-list>
</mat-list-item>
</mat-nav-list>`,
providers: [MenuService]
})
export class MenuComponent {
currentLang = 'en';
constructor(
public menuService: MenuService,
public translate: TranslateService) {
}
addMenuItem(): void {
this.menuService.add({
state: 'menu',
name: 'MENU',
type: 'sub',
icon: 'trending_flat',
children: [
{state: 'menu', name: 'MENU'},
{state: 'timeline', name: 'MENU'}
]
});
}
}
import { Injectable } from '@angular/core';
export interface BadgeItem {
type: string;
value: string;
}
export interface ChildrenItems {
state: string;
name: string;
type?: string;
}
export interface Menu {
state: string;
name: string;
type: string;
icon: string;
badge?: BadgeItem[];
children?: ChildrenItems[];
}
const MENUITEMS = [
{
state: '/',
name: 'Dashboard',
type: 'link',
icon: 'explore'
},
{
state: 'search',
name: 'Search',
type: 'sub',
icon: 'search',
children: [{ state: 'transfer-history', name: 'Transfer History' },
{ state: 'operation-log', name: 'Operation Logs' }]
},
{
state: 'manage-players',
name: 'Manage Players',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-players', name: 'View Players' },
]
},
{
state: 'manage-affiliates',
name: 'Manage Affiliates',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-affiliates', name: 'View Affiliates' }]
},
{
state: 'manage-operators',
name: 'Manage Operators',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-operators', name: 'View Operators' }]
},
{
state: 'manage-payments',
name: 'Manage Payments',
type: 'sub',
icon: 'payment',
children: [{ state: 'deposits', name: 'Deposits' },
{ state: 'withdrawals', name: 'Withdrawals' }]
},
];
@Injectable()
export class MenuService {
getAll(): Menu[] {
return MENUITEMS;
}
add(menu: Menu) {
MENUITEMS.push(menu);
}
}
<app-menu></app-menu>
\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
No preview for this file type
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!