Skip to content

Ajit Thakor / bo-livebillionbet-ui

Go to a project
Commit cfbce1e8 by Ajit Thakor
Options

added manage role and update dashboard ui

1 parent 610b7499
Inline Side-by-side
Showing with 627 additions and 199 deletions
.vscode/launch.json 0 → 100644
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/4201",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/dist/out-tsc/**/*.js"
]
}
]
}
\ No newline at end of file
src/app/app.module.ts
...@@ -4,7 +4,8 @@ import { HttpClient, HttpClientModule } from '@angular/common/http'; ...@@ -4,7 +4,8 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule } from '@angular/material'; import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
...@@ -58,6 +59,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { ...@@ -58,6 +59,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
} }
}), }),
LoadingBarRouterModule, LoadingBarRouterModule,
MatInputModule,
MatSidenavModule, MatSidenavModule,
MatCardModule, MatCardModule,
MatMenuModule, MatMenuModule,
...@@ -75,6 +77,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { ...@@ -75,6 +77,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
MatDialogModule, MatDialogModule,
AgmCoreModule.forRoot({ apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI' }), AgmCoreModule.forRoot({ apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI' }),
PerfectScrollbarModule, PerfectScrollbarModule,
ChartsModule,
], ],
entryComponents: [ entryComponents: [
ProfileComponent ProfileComponent
......
src/app/components/affiliates/edit-dialog/edit-dialog.component.html
...@@ -7,31 +7,35 @@ ...@@ -7,31 +7,35 @@
<ng-template matTabLabel>Affiliate Info</ng-template> <ng-template matTabLabel>Affiliate Info</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name"> <input matInput placeholder="First name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name"> <input matInput placeholder="Last name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name"> <input matInput placeholder="User Name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> </div>
</div>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Email address"> <input matInput placeholder="Email address">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Mobile"> <input matInput placeholder="Mobile">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Rate">
</mat-form-field>
</div> </div>
</div> </div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 45%">
<input matInput placeholder="Rate">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-select placeholder="Affiliate Level"> <mat-select placeholder="Affiliate Level">
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option value="add">NEW MEMBER</mat-option> <mat-option value="add">NEW MEMBER</mat-option>
...@@ -40,18 +44,19 @@ ...@@ -40,18 +44,19 @@
<mat-option value="deduct">SILVER</mat-option> <mat-option value="deduct">SILVER</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<label>Gender</label> <mat-form-field fxFlex style="width: 45%">
<mat-radio-group> <mat-select placeholder="Gender">
<mat-radio-button value="male">Male</mat-radio-button> <mat-option>--</mat-option>
<mat-radio-button value="female">Female</mat-radio-button> <mat-option value="male">Male</mat-option>
</mat-radio-group> <mat-option value="female">Female</mat-option>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
<hr> <hr>
<mat-card-actions> <mat-card-actions>
<button mat-raised-button color="primary">Update</button> <button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent" <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
...@@ -59,24 +64,36 @@ ...@@ -59,24 +64,36 @@
<mat-tab> <mat-tab>
<ng-template matTabLabel>Reset Password</ng-template> <ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form [formGroup]="form" fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="New password" type="password"> <input matInput placeholder="New password" [formControl]="form.controls['password']" type="password"
required>
<mat-error
*ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn">You must include password.</mat-error>
</mat-form-field> </mat-form-field>
</div>
<mat-form-field class="mb-1"> </div>
<input matInput placeholder="Confirm new password" type="password"> <div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']"
type="password" required>
<mat-error
*ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched"
class="mat-text-warn">You must include confirm password.</mat-error>
<mat-error *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="mat-text-warn">Passwords
do not match.</mat-error>
</mat-form-field> </mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div> </div>
</div> </div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-tab> </mat-tab>
...@@ -86,7 +103,7 @@ ...@@ -86,7 +103,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username"> <ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
...@@ -165,34 +182,37 @@ ...@@ -165,34 +182,37 @@
<ng-template matTabLabel>Main Wallet Adjustment</ng-template> <ng-template matTabLabel>Main Wallet Adjustment</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name"> <input matInput placeholder="User Name">
</mat-form-field> </mat-form-field>
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Current Balance"> <input matInput placeholder="Current Balance">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<mat-select placeholder="Adjustment Type"> <mat-select placeholder="Adjustment Type">
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option value="add">Add</mat-option> <mat-option value="add">Add</mat-option>
<mat-option value="deduct">Deduct</mat-option> <mat-option value="deduct">Deduct</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class=""> </div>
</div>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Amount"> <input matInput placeholder="Amount">
</mat-form-field> </mat-form-field>
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Remark"> <input matInput placeholder="Remark">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<hr> <hr>
<mat-card-actions> <mat-card-actions>
<button mat-raised-button color="primary">Save</button> <button mat-raised-button color="primary">Save</button>
<button mat-raised-button color="accent" <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
...@@ -203,7 +223,7 @@ ...@@ -203,7 +223,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="noteDataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="noteDataSource" [columns]="columns">
<ngx-datatable-column name="User ID"> <ngx-datatable-column name="User ID">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }} {{ row?.userId }}
......
src/app/components/affiliates/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const defaultDialogConfig = new MatDialogConfig(); const defaultDialogConfig = new MatDialogConfig();
const password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({ @Component({
selector: 'app-edit-dialog', selector: 'app-edit-dialog',
...@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit { ...@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit {
right: '' right: ''
}, },
}; };
public form: FormGroup;
constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { } constructor(private fb: FormBuilder, public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void { togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle; this._dimesionToggle = !this._dimesionToggle;
...@@ -48,6 +52,10 @@ export class EditDialogComponent implements OnInit { ...@@ -48,6 +52,10 @@ export class EditDialogComponent implements OnInit {
} }
} }
ngOnInit() { ngOnInit() {
this.form = this.fb.group({
password: password,
confirmPassword: confirmPassword
});
} }
} }
......
src/app/components/affiliates/view-affiliates/view-affiliate.component.ts
...@@ -38,8 +38,8 @@ export class ViewAffiliateComponent { ...@@ -38,8 +38,8 @@ export class ViewAffiliateComponent {
panelClass: 'custom-overlay-pane-class', panelClass: 'custom-overlay-pane-class',
hasBackdrop: true, hasBackdrop: true,
backdropClass: '', backdropClass: '',
width: '', width: '1200px',
height: '', height: '550px',
minWidth: '', minWidth: '',
minHeight: '', minHeight: '',
maxWidth: defaultDialogConfig.maxWidth, maxWidth: defaultDialogConfig.maxWidth,
...@@ -103,8 +103,6 @@ export class ViewAffiliateComponent { ...@@ -103,8 +103,6 @@ export class ViewAffiliateComponent {
this.dialogRef = null; this.dialogRef = null;
}); });
} }
} }
export interface AffiliateDataElement { export interface AffiliateDataElement {
userName: string; userName: string;
......
src/app/components/dashboard/dashboard.component.html
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100"> <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-teal"> <mat-card class="card-widget mat-teal">
<div mat-card-widget> <div mat-card-widget>
<div mat-card-float-icon> <div mat-card-float-icon>
<mat-icon>money</mat-icon> <mat-icon>money</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>103</h2>
<p>Deposits</p>
</div>
</div> </div>
</mat-card> <div class="pl-0">
</div> <h2 mat-card-widget-title>103</h2>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100"> <p>Deposits</p>
<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> </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>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100"> </mat-card>
<mat-card class="card-widget mat-red"> </div>
<div mat-card-widget> <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<div mat-card-float-icon> <mat-card class="card-widget mat-purple">
<mat-icon>person</mat-icon> <div mat-card-widget>
</div> <div mat-card-float-icon>
<div class="pl-0"> <mat-icon>money</mat-icon>
<h2 mat-card-widget-title>323</h2>
<p>Affiliates</p>
</div>
</div> </div>
</mat-card> <div class="pl-0">
</div> <h2 mat-card-widget-title>230</h2>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100"> <p>Withdrawals</p>
<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> </div>
</mat-card> </div>
</div> </mat-card>
</div> </div>
\ No newline at end of file <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>
<!-- bar Player | Affiliates -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<mat-card>
<mat-card-title>Playesrs | Affiliates</mat-card-title>
<!-- <mat-card-subtitle>Playesrs | Affiliates</mat-card-subtitle> -->
<mat-card-content>
<canvas height="200" baseChart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartStackedOptions"
[colors]="lineChartColors"
[legend]="barChartLegend"
[chartType]="barChartType"></canvas>
</mat-card-content>
</mat-card>
</div>
<!-- line Payment -> Deposits | Withdrawals -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<mat-card>
<mat-card-title>Payment</mat-card-title>
<mat-card-subtitle>Deposits | Withdrawals</mat-card-subtitle>
<mat-card-content>
<canvas height="200" baseChart class="chart"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"></canvas>
</mat-card-content>
</mat-card>
</div>
</div>
\ No newline at end of file
src/app/components/dashboard/dashboard.component.ts
...@@ -6,4 +6,189 @@ import { Component } from '@angular/core'; ...@@ -6,4 +6,189 @@ import { Component } from '@angular/core';
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent { export class DashboardComponent {
globalChartOptions: any = {
responsive: true,
legend: {
display: false,
position: 'bottom'
}
};
// Bar
barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7'];
barChartType = 'bar';
barChartLegend = true;
barChartData: any[] = [{
data: [6, 5, 8, 8, 5, 5, 4],
label: 'Series Affiliates',
borderWidth: 0
}, {
data: [5, 4, 4, 2, 6, 2, 5],
label: 'Series Plyares',
borderWidth: 0
}];
barChartOptions: any = Object.assign({
scaleShowVerticalLines: false,
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
},
position: 'left',
ticks: {
beginAtZero: true,
suggestedMax: 9
}
}]
}
}, this.globalChartOptions);
// Bar Chart Players | Affiliates
barChartStackedOptions: any = Object.assign({
scaleShowVerticalLines: false,
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
},
stacked: true,
ticks: {
beginAtZero: true
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
},
stacked: true
}]
}
}, this.globalChartOptions);
// Line Chart For Payment -> Deposit | Withdrawals
lineChartData: Array<any> = [{
data: [6, 5, 8, 8, 5, 5, 4],
label: 'Series Deposit',
borderWidth: 1
}, {
data: [5, 4, 4, 2, 6, 2, 5],
label: 'Series Withdrawals',
borderWidth: 1
}];
lineChartLabels: Array<any> = ['1', '2', '3', '4', '5', '6', '7'];
lineChartOptions: any = Object.assign({
animation: false,
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
},
ticks: {
beginAtZero: true,
suggestedMax: 9,
}
}]
}
}, this.globalChartOptions);
lineChartColors: Array<any> = [{ // grey
backgroundColor: '#7986cb',
borderColor: '#3f51b5',
pointBackgroundColor: '#3f51b5',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}, { // dark grey
backgroundColor: '#eeeeee',
borderColor: '#e0e0e0',
pointBackgroundColor: '#e0e0e0',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
}, { // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];
lineChartLegend = true;
lineChartType = 'line';
lineChartSteppedData: Array<any> = [{
data: [6, 5, 8, 8, 5, 5, 4],
label: 'Series A',
borderWidth: 1,
fill: false,
steppedLine: true
}, {
data: [5, 4, 4, 2, 6, 2, 5],
label: 'Series B',
borderWidth: 1,
fill: false,
steppedLine: true
}];
lineChartPointsData: Array<any> = [{
data: [6, 5, 8, 8, 5, 5, 4],
label: 'Series Deposit',
borderWidth: 1,
fill: false,
pointRadius: 10,
pointHoverRadius: 15,
showLine: false
}, {
data: [5, 4, 4, 2, 6, 2, 5],
label: 'Series withdraw',
borderWidth: 1,
fill: false,
pointRadius: 10,
pointHoverRadius: 15,
showLine: false
}];
lineChartPointsOptions: any = Object.assign({
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0,0,0,0.02)',
zeroLineColor: 'rgba(0,0,0,0.02)'
},
ticks: {
beginAtZero: true,
suggestedMax: 9,
}
}]
},
elements: {
point: {
pointStyle: 'rectRot',
}
}
}, this.globalChartOptions);
} }
src/app/components/dashboard/dashboard.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material'; import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
...@@ -17,7 +18,8 @@ import { DashboardRoutes } from './dashboard.routing'; ...@@ -17,7 +18,8 @@ import { DashboardRoutes } from './dashboard.routing';
MatListModule, MatListModule,
MatProgressBarModule, MatProgressBarModule,
MatMenuModule, MatMenuModule,
FlexLayoutModule FlexLayoutModule,
ChartsModule
], ],
declarations: [ DashboardComponent ] declarations: [ DashboardComponent ]
}) })
......
src/app/components/operators/edit-dialog/edit-dialog.component.html
...@@ -7,25 +7,25 @@ ...@@ -7,25 +7,25 @@
<ng-template matTabLabel>Operator Info</ng-template> <ng-template matTabLabel>Operator Info</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name"> <input matInput placeholder="First name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name"> <input matInput placeholder="Last name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name"> <input matInput placeholder="User Name">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 45%">
<input matInput placeholder="Email address"> <input matInput placeholder="Email address">
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="Role"> <mat-select placeholder="Role">
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option value="SUPERADMIN">Super Admin</mat-option> <mat-option value="SUPERADMIN">Super Admin</mat-option>
...@@ -49,29 +49,39 @@ ...@@ -49,29 +49,39 @@
<mat-tab> <mat-tab>
<ng-template matTabLabel>Reset Password</ng-template> <ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form [formGroup]="form" fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="New password" type="password"> <input matInput placeholder="New password" [formControl]="form.controls['password']" type="password"
required>
<mat-error
*ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn">You must include password.</mat-error>
</mat-form-field> </mat-form-field>
</div>
<mat-form-field class="mb-1"> </div>
<input matInput placeholder="Confirm new password" type="password"> <div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']"
type="password" required>
<mat-error
*ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched"
class="mat-text-warn">You must include confirm password.</mat-error>
<mat-error *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="mat-text-warn">Passwords
do not match.</mat-error>
</mat-form-field> </mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div> </div>
</div> </div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-tab> </mat-tab>
<mat-tab>
<ng-template matTabLabel>Operator Access</ng-template>
</mat-tab>
</mat-tab-group> </mat-tab-group>
</mat-card> </mat-card>
</div> </div>
......
src/app/components/operators/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material';
import { FormControl, Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const defaultDialogConfig = new MatDialogConfig(); const defaultDialogConfig = new MatDialogConfig();
const password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({ @Component({
selector: 'app-edit-dialog', selector: 'app-edit-dialog',
...@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit { ...@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit {
right: '' right: ''
}, },
}; };
public form: FormGroup;
constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { } constructor(private fb: FormBuilder, public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void { togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle; this._dimesionToggle = !this._dimesionToggle;
...@@ -49,8 +53,9 @@ export class EditDialogComponent implements OnInit { ...@@ -49,8 +53,9 @@ export class EditDialogComponent implements OnInit {
} }
} }
ngOnInit() { ngOnInit() {
this.form = this.fb.group({
password: password,
confirmPassword: confirmPassword
});
} }
} }
\ No newline at end of file
src/app/components/players/balance-adjustment-dialog/balance-adjustment-dialog.component.html
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
<hr> <hr>
<mat-card-actions> <mat-card-actions>
<button mat-raised-button matTooltip="Save" color="primary">Save</button> <button mat-raised-button matTooltip="Save" color="primary">Save</button>
<button mat-raised-button matTooltip="Close" color="accent" (click)="dialogRef.close(false)">Close</button> <button mat-raised-button matTooltip="Close" color="accent"
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
......
src/app/components/players/edit-dialog/edit-dialog.component.html
...@@ -7,38 +7,43 @@ ...@@ -7,38 +7,43 @@
<ng-template matTabLabel>User Info</ng-template> <ng-template matTabLabel>User Info</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class=""> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name"> <input matInput placeholder="First name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name"> <input matInput placeholder="Last name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name"> <input matInput placeholder="User Name">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> </div>
</div>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Email address"> <input matInput placeholder="Email address">
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Mobile number"> <input matInput placeholder="Mobile number">
</mat-form-field> </mat-form-field>
</div> <mat-form-field fxFlex style="width: 30%">
</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">
<mat-select placeholder="Gender"> <mat-select placeholder="Gender">
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option value="male">Male</mat-option> <mat-option value="male">Male</mat-option>
<mat-option value="female">Female</mat-option> <mat-option value="female">Female</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> </div>
<input matInput placeholder="Address"> </div>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field style="width: 45%">
<textarea matInput maxlength="256" placeholder="Address" matTextareaAutosize matAutosizeMinRows="2"
matAutosizeMaxRows="5"></textarea>
</mat-form-field> </mat-form-field>
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="User Level Type"> <mat-select placeholder="User Level Type">
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option value="add">NEW MEMBER</mat-option> <mat-option value="add">NEW MEMBER</mat-option>
...@@ -60,23 +65,36 @@ ...@@ -60,23 +65,36 @@
<mat-tab> <mat-tab>
<ng-template matTabLabel>Reset Password</ng-template> <ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form [formGroup]="form" fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1"> <div fxLayout="row wrap">
<div class="pb-1"> <div class="pb-1">
<mat-form-field class="mb-1"> <mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="New password" type="password"> <input matInput placeholder="New password" [formControl]="form.controls['password']" type="password"
required>
<mat-error
*ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn">You must include password.</mat-error>
</mat-form-field> </mat-form-field>
</div>
<mat-form-field class="mb-1"> </div>
<input matInput placeholder="Confirm new password" type="password"> <div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 40%">
<input matInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']"
type="password" required>
<mat-error
*ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched"
class="mat-text-warn">You must include confirm password.</mat-error>
<mat-error *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="mat-text-warn">Passwords
do not match.</mat-error>
</mat-form-field> </mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div> </div>
</div> </div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-tab> </mat-tab>
...@@ -96,7 +114,7 @@ ...@@ -96,7 +114,7 @@
</div> </div>
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Wallet Name"> <ngx-datatable-column name="Wallet Name">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
...@@ -122,7 +140,7 @@ ...@@ -122,7 +140,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="paymentDataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="paymentDataSource" [columns]="columns">
<ngx-datatable-column name="Deposits"> <ngx-datatable-column name="Deposits">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
...@@ -154,7 +172,7 @@ ...@@ -154,7 +172,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="bankDataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="bankDataSource" [columns]="columns">
<ngx-datatable-column name="Account Name"> <ngx-datatable-column name="Account Name">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
...@@ -190,7 +208,7 @@ ...@@ -190,7 +208,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="noteDataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="noteDataSource" [columns]="columns">
<ngx-datatable-column name="User ID"> <ngx-datatable-column name="User ID">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }} {{ row?.userId }}
...@@ -224,7 +242,7 @@ ...@@ -224,7 +242,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="documentDataSource" [columns]="columns"> [rowHeight]="50" [limit]="5" [rows]="documentDataSource" [columns]="columns">
<ngx-datatable-column name="User ID"> <ngx-datatable-column name="User ID">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }} {{ row?.userId }}
......
src/app/components/players/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material';
import { BalanceAdjustmentDialogComponent } from '../balance-adjustment-dialog/balance-adjustment-dialog.component'; import { BalanceAdjustmentDialogComponent } from '../balance-adjustment-dialog/balance-adjustment-dialog.component';
import { Validators, FormControl, FormBuilder, FormGroup } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const defaultDialogConfig = new MatDialogConfig(); const defaultDialogConfig = new MatDialogConfig();
const password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({ @Component({
selector: 'app-edit-dialog', selector: 'app-edit-dialog',
...@@ -38,8 +42,8 @@ export class EditDialogComponent implements OnInit { ...@@ -38,8 +42,8 @@ export class EditDialogComponent implements OnInit {
right: '' right: ''
}, },
}; };
public form: FormGroup;
constructor(public dialog: MatDialog, constructor(private fb: FormBuilder, public dialog: MatDialog,
public dialogRef: MatDialogRef<EditDialogComponent>, public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { } @Inject(MAT_DIALOG_DATA) public data: any) { }
...@@ -57,6 +61,10 @@ export class EditDialogComponent implements OnInit { ...@@ -57,6 +61,10 @@ export class EditDialogComponent implements OnInit {
} }
} }
ngOnInit() { ngOnInit() {
this.form = this.fb.group({
password: password,
confirmPassword: confirmPassword
});
} }
openBalanceAdjustmentDialog() { openBalanceAdjustmentDialog() {
......
src/app/components/players/players.module.ts
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatTooltipModule,MatSlideToggleModule,MatTabsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule, MatNativeDateModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatToolbarModule, MatFormFieldModule } from '@angular/material'; import { MatTooltipModule,MatSlideToggleModule,MatTabsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule, MatNativeDateModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatToolbarModule, MatFormFieldModule } from '@angular/material';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...@@ -30,6 +30,7 @@ import { BalanceAdjustmentDialogComponent } from './balance-adjustment-dialog/ba ...@@ -30,6 +30,7 @@ import { BalanceAdjustmentDialogComponent } from './balance-adjustment-dialog/ba
MatToolbarModule, MatToolbarModule,
MatDialogModule, MatDialogModule,
FormsModule, FormsModule,
ReactiveFormsModule,
MatFormFieldModule, MatFormFieldModule,
MatTabsModule, MatTabsModule,
MatCardModule, MatCardModule,
......
src/app/components/players/view-players/view-player.component.ts
...@@ -24,8 +24,8 @@ export class ViewPlayersComponent { ...@@ -24,8 +24,8 @@ export class ViewPlayersComponent {
panelClass: 'custom-overlay-pane-class', panelClass: 'custom-overlay-pane-class',
hasBackdrop: true, hasBackdrop: true,
backdropClass: '', backdropClass: '',
width: '', width: '1200px',
height: '', height: '600px',
minWidth: '', minWidth: '',
minHeight: '', minHeight: '',
maxWidth: defaultDialogConfig.maxWidth, maxWidth: defaultDialogConfig.maxWidth,
......
src/app/components/role/role-access/role-access.component.html
...@@ -21,42 +21,37 @@ ...@@ -21,42 +21,37 @@
<div fxLayout="row" fxLayoutWrap="wrap"> <div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100"> <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="0"
[rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns"> [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [rows]="roleAccessDataSource">
<ngx-datatable-column name="Role Name">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Menu"> <ngx-datatable-column name="Menu">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }} <mat-checkbox (change)="current_item = row.id; triggerCheckBoxEventrow($event, 1)">{{ row?.menu }}
</mat-checkbox>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Child Menu"> <ngx-datatable-column name="Child Menu">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.updateTime}} <mat-checkbox [disabled]="row.isDisabled < 2" (change)="current_item = row.id; triggerCheckBoxEventrow($event, 2)">{{ row?.childMenu}}</mat-checkbox>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Status"> <ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}} <mat-checkbox [disabled]="row.isDisabled < 3"></mat-checkbox>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Operation"> <ngx-datatable-column name="Operation">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}} <mat-checkbox [disabled]="row.isDisabled < 3" >{{ row?.operation}}</mat-checkbox>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Action"> <ngx-datatable-column name="Action">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }} <mat-checkbox [disabled]="row.isDisabled < 3">{{ row?.action }}</mat-checkbox>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
......
src/app/components/role/role-access/role-access.component.ts
...@@ -7,9 +7,106 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +7,106 @@ import { Component, OnInit } from '@angular/core';
}) })
export class RoleAccessComponent implements OnInit { export class RoleAccessComponent implements OnInit {
roleAccessDataSource = ROLE_ACCESS_DATA;
current_item = 0;
constructor() { } constructor() { }
ngOnInit() { ngOnInit() { }
triggerCheckBoxEventrow(event, n: number) {
let data = this.roleAccessDataSource.find(i => i.id === this.current_item)
if (event.checked) {
data.isDisabled = n + 1;
} else {
data.isDisabled = n;
}
return;
} }
}
export interface RoleAccessDataElement {
id: number;
menu: string;
childMenu: string;
status: number;
operation: string;
action: string;
isDisabled: number;
} }
const ROLE_ACCESS_DATA: RoleAccessDataElement[] = [
{
id: 1,
menu: "Search",
childMenu: "Operation Log",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 2,
menu: "Search",
childMenu: "Transfer History",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 3,
menu: "Manage Player",
childMenu: "View Player",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 4,
menu: "Manage Payment",
childMenu: "Deposits",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 5,
menu: "Manage Payment",
childMenu: "Withdrawals",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 6,
menu: "Manage Operator",
childMenu: "View Operator",
status: 0,
operation: "Add",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 7,
menu: "Manage Affiliate",
childMenu: "View Affiliates",
status: 0,
operation: "Add",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 8,
menu: "Manage Role",
childMenu: "View Roles",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}, {
id: 9,
menu: "Manage Role",
childMenu: "Role Access",
status: 0,
operation: "",
action: "Edit | Delete",
isDisabled: 1
}
];
src/app/components/role/role.module.ts
...@@ -4,7 +4,7 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable'; ...@@ -4,7 +4,7 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { RoleRoutingModule } from './role-routing.module'; import { RoleRoutingModule } from './role-routing.module';
import { ViewRolesComponent } from './view-roles/view-roles.component'; import { ViewRolesComponent } from './view-roles/view-roles.component';
import { RoleAccessComponent } from './role-access/role-access.component'; import { RoleAccessComponent } from './role-access/role-access.component';
import { MatButtonModule, MatExpansionModule, MatSelectModule, MatDialogModule, MatCardModule, MatInputModule, MatToolbarModule } from '@angular/material'; import { MatButtonModule, MatExpansionModule, MatSelectModule, MatDialogModule, MatCardModule, MatInputModule, MatToolbarModule, MatSlideToggleModule, MatCheckboxModule } from '@angular/material';
import { AddRoleDialogComponent } from './add-role-dialog/add-role-dialog.component'; import { AddRoleDialogComponent } from './add-role-dialog/add-role-dialog.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...@@ -20,7 +20,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ...@@ -20,7 +20,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
MatCardModule, MatCardModule,
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatToolbarModule,FormsModule,ReactiveFormsModule MatToolbarModule,FormsModule,ReactiveFormsModule,
MatSlideToggleModule,
MatCheckboxModule
], ],
declarations: [ declarations: [
ViewRolesComponent, ViewRolesComponent,
......
src/app/components/role/view-roles/view-roles.component.html
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</div> </div>
<div class="mat-box-shadow"> <div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns"> [rowHeight]="50" [limit]="10" [rows]="roleDataSOurce" [columns]="columns">
<ngx-datatable-column name="Role ID"> <ngx-datatable-column name="Role ID">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
...@@ -16,13 +16,14 @@ ...@@ -16,13 +16,14 @@
<ngx-datatable-column name="Role Name"> <ngx-datatable-column name="Role Name">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }} {{ row?.roleName }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Status"> <ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template> <ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}} <!-- {{ row?.status}} -->
<mat-slide-toggle></mat-slide-toggle>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
......
src/app/components/role/view-roles/view-roles.component.ts
import { Component, OnInit, ViewChild, TemplateRef, Inject } from '@angular/core';
import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { AddRoleDialogComponent } from '../add-role-dialog/add-role-dialog.component'; import { AddRoleDialogComponent } from '../add-role-dialog/add-role-dialog.component';
const defaultDialogConfig = new MatDialogConfig(); const defaultDialogConfig = new MatDialogConfig();
...@@ -12,6 +12,8 @@ const defaultDialogConfig = new MatDialogConfig(); ...@@ -12,6 +12,8 @@ const defaultDialogConfig = new MatDialogConfig();
}) })
export class ViewRolesComponent implements OnInit { export class ViewRolesComponent implements OnInit {
roleDataSOurce=ROLE_DATA;
dialogRef: MatDialogRef<any> | null; dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string; lastAfterClosedResult: string;
lastBeforeCloseResult: string; lastBeforeCloseResult: string;
...@@ -64,3 +66,33 @@ export class ViewRolesComponent implements OnInit { ...@@ -64,3 +66,33 @@ export class ViewRolesComponent implements OnInit {
} }
} }
export interface RoleDataElement {
roleId: number;
roleName: string;
status: number;
}
const ROLE_DATA: RoleDataElement[] = [
{
roleId: 1,
roleName: "CS",
status: 0
}, {
roleId: 2,
roleName: "ADMIN",
status: 0
}, {
roleId: 3,
roleName: "SUPER ADMIN",
status: 0
}, {
roleId: 4,
roleName: "OPERATOR",
status: 0
}, {
roleId: 5,
roleName: "DEVELOPER",
status: 0
},
];
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!