SES-136 spell table model create
This commit is contained in:
parent
ae72c1ddac
commit
bb2876f7a3
@ -8,8 +8,8 @@ import { appRoutingModule } from '../app.routing';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { SignInComponent } from './components/sign-in/sign-in.component';
|
||||
import { RegistrationComponent } from './components/registration/registration.component';
|
||||
import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
|
||||
import {PlayerDashboardComponent} from './components/player-dashboard/player-dashboard.component';
|
||||
import { GameMasterDashboardComponent } from './components/game-master-dashboard/game-master-dashboard.component';
|
||||
import { PlayerDashboardComponent } from './components/player-dashboard/player-dashboard.component';
|
||||
import { SelectCharacterComponent } from './components/select-character/select-character.component';
|
||||
import {
|
||||
MatCardModule,
|
||||
@ -18,15 +18,22 @@ import {
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
|
||||
MatIconModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
MatListModule,
|
||||
MatPaginatorModule,
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
} from '@angular/material';
|
||||
import {UserService} from '../services/user.service';
|
||||
import { UserService } from '../services/user.service';
|
||||
import { StoreModule } from '@ngrx/store';
|
||||
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
|
||||
import {environment} from '../environments/environment';
|
||||
import {reducers} from './store/models/app-state.model';
|
||||
import {CharacterService} from '../services/character.service';
|
||||
import { environment } from '../environments/environment';
|
||||
import { reducers } from './store/models/app-state.model';
|
||||
import { CharacterService } from '../services/character.service';
|
||||
import { AbilityCardComponent } from './components/ability-card/ability-card.component';
|
||||
import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -38,9 +45,10 @@ import { AbilityCardComponent } from './components/ability-card/ability-card.com
|
||||
PlayerDashboardComponent,
|
||||
SelectCharacterComponent,
|
||||
AbilityCardComponent,
|
||||
GameMasterSpellsTableComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
@ -56,15 +64,16 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
MatListModule,
|
||||
MatPaginatorModule,
|
||||
StoreModule.forRoot(reducers),
|
||||
StoreDevtoolsModule.instrument({
|
||||
logOnly: environment.production
|
||||
})
|
||||
logOnly: environment.production,
|
||||
}),
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
],
|
||||
providers: [
|
||||
UserService,
|
||||
CharacterService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
providers: [UserService, CharacterService],
|
||||
bootstrap: [AppComponent],
|
||||
entryComponents: [GameMasterSpellsTableComponent],
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
|
||||
@ -10,6 +10,16 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.left-nav-item *{
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
.leftnav{
|
||||
background-color: #3D4751;
|
||||
border-right:none;
|
||||
|
||||
@ -17,25 +17,41 @@
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-nav-list>
|
||||
<mat-list-item *ngFor="let item of leftSidenavItems">
|
||||
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'">
|
||||
<div class="mat-list-text"
|
||||
style="color: white"
|
||||
>
|
||||
<div *ngFor="let item of leftSidenavItems">
|
||||
<mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? false :ChangeMiddleComponent(item.componentToDisplay)">
|
||||
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
|
||||
{{item.displayName}}
|
||||
</div>
|
||||
<mat-icon mat-list-icon>
|
||||
expand_more
|
||||
</mat-icon>
|
||||
<a *ngIf="item.children && item.children.length" mat-icon-button style="right: -35px;" (click)="item.expanded = !item.expanded">
|
||||
<mat-icon *ngIf="!item.expanded" class="mat-24">expand_more</mat-icon>
|
||||
<mat-icon *ngIf="item.expanded" class="mat-24">expand_less</mat-icon>
|
||||
</a>
|
||||
</span>
|
||||
</mat-list-item>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<div *ngIf="item.expanded" >
|
||||
<div *ngFor="let child of item.children" style="background-color: #4a5867">
|
||||
<mat-list-item style="padding-left: 10px" (click)="ChangeMiddleComponent(child.componentToDisplay)">
|
||||
<mat-icon mat-list-icon ><i class="{{child.iconName}}"></i></mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
|
||||
{{child.displayName}}
|
||||
</span>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<mat-toolbar color="primary" class="gm-toolbar">
|
||||
<span>SessionCompanion</span>
|
||||
</mat-toolbar>
|
||||
<div style="padding: 20px">
|
||||
<ng-container *ngComponentOutlet="middleComponentName">
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
<mat-sidenav
|
||||
class="rightnav"
|
||||
|
||||
@ -10,7 +10,8 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
|
||||
import { first } from 'rxjs/operators';
|
||||
import {LeftNavItem} from '../../../types/LeftNavItem';
|
||||
import { LeftNavItem } from '../../../types/LeftNavItem';
|
||||
import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-master-dashboard',
|
||||
@ -19,6 +20,7 @@ import {LeftNavItem} from '../../../types/LeftNavItem';
|
||||
animations: [onSideNavChange, animateText],
|
||||
})
|
||||
export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
||||
middleComponentName;
|
||||
allSubscriptions = new Subscription();
|
||||
leftSidenavExpanded = false;
|
||||
leftSidenavTextExpanded = false;
|
||||
@ -26,8 +28,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
||||
{
|
||||
displayName: 'Spells',
|
||||
iconName: 'ra ra-aura',
|
||||
componentToDisplay: 'GameMasterSpellsTableComponent',
|
||||
expanded: false,
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
rightSidenavExpanded = false;
|
||||
@ -79,6 +82,14 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
||||
);
|
||||
}
|
||||
|
||||
ChangeMiddleComponent(componentName: string): void {
|
||||
switch (componentName) {
|
||||
case 'GameMasterSpellsTableComponent':
|
||||
this.middleComponentName = GameMasterSpellsTableComponent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private SubscribeToEvents(): void {
|
||||
this.signalRService.message.subscribe((message: string) => {
|
||||
if (
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
table {
|
||||
width: 100%;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
mat-paginator{
|
||||
background-color: initial;
|
||||
color: white;
|
||||
}
|
||||
|
||||
th{
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
td{
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
::ng-deep .mat-select-arrow{
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
::ng-deep .mat-select-value {
|
||||
color: white
|
||||
}
|
||||
|
||||
.mat-sort-header-container{
|
||||
color: whitesmoke !important;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
width: 25%;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="Name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="Range">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.range}}% </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="Level">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.level}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="School">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.school}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
<!-- Row shown when there is no matching data. -->
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
|
||||
</div>
|
||||
@ -0,0 +1,48 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
export interface SpellData {
|
||||
name: string;
|
||||
range: string;
|
||||
level: number;
|
||||
school: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-master-spells-table',
|
||||
templateUrl: './game-master-spells-table.component.html',
|
||||
styleUrls: ['./game-master-spells-table.component.css'],
|
||||
})
|
||||
export class GameMasterSpellsTableComponent implements OnInit {
|
||||
displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
|
||||
dataSource: MatTableDataSource<SpellData>;
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
constructor() {
|
||||
const users = Array.from({ length: 100 }, (_, k) => this.createSepll());
|
||||
|
||||
this.dataSource = new MatTableDataSource(users);
|
||||
}
|
||||
|
||||
createSepll(): SpellData {
|
||||
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user