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 569 additions and 140 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';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
......@@ -58,6 +59,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
}
}),
LoadingBarRouterModule,
MatInputModule,
MatSidenavModule,
MatCardModule,
MatMenuModule,
......@@ -75,6 +77,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
MatDialogModule,
AgmCoreModule.forRoot({ apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI' }),
PerfectScrollbarModule,
ChartsModule,
],
entryComponents: [
ProfileComponent
......
src/app/components/affiliates/edit-dialog/edit-dialog.component.html
......@@ -7,31 +7,35 @@
<ng-template matTabLabel>Affiliate Info</ng-template>
<mat-card-content>
<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">
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name">
</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">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Mobile">
</mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Rate">
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="Rate">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="Affiliate Level">
<mat-option>--</mat-option>
<mat-option value="add">NEW MEMBER</mat-option>
......@@ -40,18 +44,19 @@
<mat-option value="deduct">SILVER</mat-option>
</mat-select>
</mat-form-field>
<label>Gender</label>
<mat-radio-group>
<mat-radio-button value="male">Male</mat-radio-button>
<mat-radio-button value="female">Female</mat-radio-button>
</mat-radio-group>
<mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="Gender">
<mat-option>--</mat-option>
<mat-option value="male">Male</mat-option>
<mat-option value="female">Female</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
......@@ -59,24 +64,36 @@
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<form [formGroup]="form" fxLayout="column">
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
<mat-form-field fxFlex style="width: 40%">
<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 class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</div>
</div>
<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>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
<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>
</div>
</div>
</form>
</mat-card-content>
</mat-tab>
......@@ -86,7 +103,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<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">
[rowHeight]="50" [limit]="5" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -165,25 +182,29 @@
<ng-template matTabLabel>Main Wallet Adjustment</ng-template>
<mat-card-content>
<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">
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name">
</mat-form-field>
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Current Balance">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<mat-select placeholder="Adjustment Type">
<mat-option>--</mat-option>
<mat-option value="add">Add</mat-option>
<mat-option value="deduct">Deduct</mat-option>
</mat-select>
</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">
</mat-form-field>
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Remark">
</mat-form-field>
</div>
......@@ -191,8 +212,7 @@
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Save</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
......@@ -203,7 +223,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }}
......
src/app/components/affiliates/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core';
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 password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({
selector: 'app-edit-dialog',
......@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit {
right: ''
},
};
constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
public form: FormGroup;
constructor(private fb: FormBuilder, public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
......@@ -48,6 +52,10 @@ export class EditDialogComponent implements OnInit {
}
}
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 {
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
width: '1200px',
height: '550px',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
......@@ -103,8 +103,6 @@ export class ViewAffiliateComponent {
this.dialogRef = null;
});
}
}
export interface AffiliateDataElement {
userName: string;
......
src/app/components/dashboard/dashboard.component.html
......@@ -51,17 +51,37 @@
</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>
<!-- 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';
styleUrls: ['./dashboard.component.scss']
})
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 { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
......@@ -17,7 +18,8 @@ import { DashboardRoutes } from './dashboard.routing';
MatListModule,
MatProgressBarModule,
MatMenuModule,
FlexLayoutModule
FlexLayoutModule,
ChartsModule
],
declarations: [ DashboardComponent ]
})
......
src/app/components/operators/edit-dialog/edit-dialog.component.html
......@@ -7,25 +7,25 @@
<ng-template matTabLabel>Operator Info</ng-template>
<mat-card-content>
<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">
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<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 fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 45%">
<input matInput placeholder="Email address">
</mat-form-field>
<mat-form-field>
<mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="Role">
<mat-option>--</mat-option>
<mat-option value="SUPERADMIN">Super Admin</mat-option>
......@@ -49,29 +49,39 @@
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<form [formGroup]="form" fxLayout="column">
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
<mat-form-field fxFlex style="width: 40%">
<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 class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</div>
</div>
<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>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<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>
</div>
</div>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Operator Access</ng-template>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
......
src/app/components/operators/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core';
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 password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({
selector: 'app-edit-dialog',
......@@ -32,8 +36,8 @@ export class EditDialogComponent implements OnInit {
right: ''
},
};
constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
public form: FormGroup;
constructor(private fb: FormBuilder, public dialog: MatDialog, public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
......@@ -49,8 +53,9 @@ export class EditDialogComponent implements OnInit {
}
}
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 @@
<hr>
<mat-card-actions>
<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>
</form>
</mat-card-content>
......
src/app/components/players/edit-dialog/edit-dialog.component.html
......@@ -7,38 +7,43 @@
<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 fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name">
</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">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Mobile number">
</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">
<mat-form-field fxFlex style="width: 30%">
<mat-select placeholder="Gender">
<mat-option>--</mat-option>
<mat-option value="male">Male</mat-option>
<mat-option value="female">Female</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Address">
</div>
</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 class="mb-1">
<mat-form-field fxFlex style="width: 45%">
<mat-select placeholder="User Level Type">
<mat-option>--</mat-option>
<mat-option value="add">NEW MEMBER</mat-option>
......@@ -60,23 +65,36 @@
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<form [formGroup]="form" fxLayout="column">
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
<mat-form-field fxFlex style="width: 40%">
<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 class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</div>
</div>
<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>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<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>
</div>
</div>
</form>
</mat-card-content>
</mat-tab>
......@@ -96,7 +114,7 @@
</div>
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -122,7 +140,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -154,7 +172,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -190,7 +208,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }}
......@@ -224,7 +242,7 @@
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userId }}
......
src/app/components/players/edit-dialog/edit-dialog.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material';
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 password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({
selector: 'app-edit-dialog',
......@@ -38,8 +42,8 @@ export class EditDialogComponent implements OnInit {
right: ''
},
};
constructor(public dialog: MatDialog,
public form: FormGroup;
constructor(private fb: FormBuilder, public dialog: MatDialog,
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
......@@ -57,6 +61,10 @@ export class EditDialogComponent implements OnInit {
}
}
ngOnInit() {
this.form = this.fb.group({
password: password,
confirmPassword: confirmPassword
});
}
openBalanceAdjustmentDialog() {
......
src/app/components/players/players.module.ts
import { CommonModule } from '@angular/common';
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 { RouterModule } from '@angular/router';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
......@@ -30,6 +30,7 @@ import { BalanceAdjustmentDialogComponent } from './balance-adjustment-dialog/ba
MatToolbarModule,
MatDialogModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatTabsModule,
MatCardModule,
......
src/app/components/players/view-players/view-player.component.ts
......@@ -24,8 +24,8 @@ export class ViewPlayersComponent {
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
width: '1200px',
height: '600px',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
......
src/app/components/role/role-access/role-access.component.html
......@@ -21,42 +21,37 @@
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns">
<ngx-datatable-column name="Role Name">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="0"
[rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [rows]="roleAccessDataSource">
<ngx-datatable-column name="Menu">
<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>
</ngx-datatable-column>
<ngx-datatable-column name="Child Menu">
<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>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
<mat-checkbox [disabled]="row.isDisabled < 3"></mat-checkbox>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Operation">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}}
<mat-checkbox [disabled]="row.isDisabled < 3" >{{ row?.operation}}</mat-checkbox>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
<mat-checkbox [disabled]="row.isDisabled < 3">{{ row?.action }}</mat-checkbox>
</ng-template>
</ngx-datatable-column>
......
src/app/components/role/role-access/role-access.component.ts
......@@ -7,9 +7,106 @@ import { Component, OnInit } from '@angular/core';
})
export class RoleAccessComponent implements OnInit {
roleAccessDataSource = ROLE_ACCESS_DATA;
current_item = 0;
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';
import { RoleRoutingModule } from './role-routing.module';
import { ViewRolesComponent } from './view-roles/view-roles.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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
......@@ -20,7 +20,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
MatCardModule,
MatInputModule,
MatButtonModule,
MatToolbarModule,FormsModule,ReactiveFormsModule
MatToolbarModule,FormsModule,ReactiveFormsModule,
MatSlideToggleModule,
MatCheckboxModule
],
declarations: [
ViewRolesComponent,
......
src/app/components/role/view-roles/view-roles.component.html
......@@ -6,7 +6,7 @@
</div>
<div class="mat-box-shadow">
<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">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -16,13 +16,14 @@
<ngx-datatable-column name="Role Name">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
{{ row?.roleName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
<!-- {{ row?.status}} -->
<mat-slide-toggle></mat-slide-toggle>
</ng-template>
</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 { 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';
const defaultDialogConfig = new MatDialogConfig();
......@@ -12,6 +12,8 @@ const defaultDialogConfig = new MatDialogConfig();
})
export class ViewRolesComponent implements OnInit {
roleDataSOurce=ROLE_DATA;
dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
......@@ -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!