SES-138 added table with armor in gm screen #60

Merged
s426128 merged 1 commits from SES-138 into dev 2021-01-09 19:43:08 +01:00
9 changed files with 187 additions and 16 deletions
Showing only changes of commit b43720cab8 - Show all commits

View File

@ -34,6 +34,7 @@ import { reducers } from './store/models/app-state.model';
import { CharacterService } from '../services/character.service'; import { CharacterService } from '../services/character.service';
import { AbilityCardComponent } from './components/ability-card/ability-card.component'; import { AbilityCardComponent } from './components/ability-card/ability-card.component';
import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component'; import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -46,6 +47,7 @@ import { GameMasterSpellsTableComponent } from './components/game-master-spells-
SelectCharacterComponent, SelectCharacterComponent,
AbilityCardComponent, AbilityCardComponent,
GameMasterSpellsTableComponent, GameMasterSpellsTableComponent,
GameMasterArmorsTableComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -74,6 +76,9 @@ import { GameMasterSpellsTableComponent } from './components/game-master-spells-
], ],
providers: [UserService, CharacterService], providers: [UserService, CharacterService],
bootstrap: [AppComponent], bootstrap: [AppComponent],
entryComponents: [GameMasterSpellsTableComponent], entryComponents: [
GameMasterSpellsTableComponent,
GameMasterArmorsTableComponent,
],
}) })
export class AppModule {} export class AppModule {}

View File

@ -0,0 +1,32 @@
table {
width: 100%;
background-color: initial;
}
mat-paginator {
background-color: initial;
color: white;
}
::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 {
color: whitesmoke;
width: 25%;
}

View File

@ -0,0 +1,43 @@
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<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>
<ng-container matColumnDef="Category">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
<td mat-cell *matCellDef="let row"> {{row.category}} </td>
</ng-container>
<ng-container matColumnDef="MinimumStrength">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Minimum Strength </th>
<td mat-cell *matCellDef="let row"> {{row.minimumStrength}}% </td>
</ng-container>
<ng-container matColumnDef="Weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let row"> {{row.weight}} </td>
</ng-container>
<ng-container matColumnDef="Cost">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
<td mat-cell *matCellDef="let row"> {{row.cost}} $ </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<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>

View File

@ -0,0 +1,57 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
@Component({
selector: 'app-game-master-armors-table',
templateUrl: './game-master-armors-table.component.html',
styleUrls: ['./game-master-armors-table.component.css'],
})
export class GameMasterArmorsTableComponent implements OnInit {
displayedColumns: string[] = [
'Name',
'Category',
'MinimumStrength',
'Weight',
'Cost',
];
dataSource: MatTableDataSource<ArmorViewModel>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {
const armors = [
{
id: 1,
name: 'Test',
category: 'Testowa',
minimumStrength: 12,
weight: 98,
cost: 123,
armorClassBase: 10,
haveDexterityBonus: false,
haveStealthDisadvantage: false,
currencyType: 1,
},
];
this.dataSource = new MatTableDataSource(armors);
}
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();
}
}
}

View File

@ -18,7 +18,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-nav-list> <mat-nav-list>
<div *ngFor="let item of leftSidenavItems"> <div *ngFor="let item of leftSidenavItems">
<mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? false :ChangeMiddleComponent(item.componentToDisplay)"> <mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? item.expanded = !item.expanded :ChangeMiddleComponent(item.componentToDisplay)">
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon> <mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white"> <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{item.displayName}} {{item.displayName}}

View File

@ -12,6 +12,7 @@ import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-v
import { first } from 'rxjs/operators'; 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'; import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
import { GameMasterArmorsTableComponent } from '../game-master-armors-table/game-master-armors-table.component';
@Component({ @Component({
selector: 'app-game-master-dashboard', selector: 'app-game-master-dashboard',
@ -25,6 +26,19 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
leftSidenavExpanded = false; leftSidenavExpanded = false;
leftSidenavTextExpanded = false; leftSidenavTextExpanded = false;
leftSidenavItems: LeftNavItem[] = [ leftSidenavItems: LeftNavItem[] = [
{
displayName: 'Equipment',
iconName: 'ra ra-anvil',
expanded: false,
children: [
{
displayName: 'Armor',
iconName: 'ra ra-vest',
expanded: false,
componentToDisplay: 'GameMasterArmorsTableComponent',
},
],
},
{ {
displayName: 'Spells', displayName: 'Spells',
iconName: 'ra ra-aura', iconName: 'ra ra-aura',
@ -87,6 +101,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
case 'GameMasterSpellsTableComponent': case 'GameMasterSpellsTableComponent':
this.middleComponentName = GameMasterSpellsTableComponent; this.middleComponentName = GameMasterSpellsTableComponent;
break; break;
case 'GameMasterArmorsTableComponent':
this.middleComponentName = GameMasterArmorsTableComponent;
break;
} }
} }

View File

@ -6,25 +6,21 @@
<div class="mat-elevation-z8"> <div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="Name"> <ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td> <td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container> </ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="Range"> <ng-container matColumnDef="Range">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th>
<td mat-cell *matCellDef="let row"> {{row.range}}% </td> <td mat-cell *matCellDef="let row"> {{row.range}}% </td>
</ng-container> </ng-container>
<!-- Name Column -->
<ng-container matColumnDef="Level"> <ng-container matColumnDef="Level">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th>
<td mat-cell *matCellDef="let row"> {{row.level}} </td> <td mat-cell *matCellDef="let row"> {{row.level}} </td>
</ng-container> </ng-container>
<!-- Color Column -->
<ng-container matColumnDef="School"> <ng-container matColumnDef="School">
<th mat-header-cell *matHeaderCellDef mat-sort-header> School </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
<td mat-cell *matCellDef="let row"> {{row.school}} </td> <td mat-cell *matCellDef="let row"> {{row.school}} </td>
@ -33,7 +29,6 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow> <tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr> </tr>

View File

@ -1,14 +1,22 @@
import { trigger, state, style, transition, animate, animateChild, query } from '@angular/animations'; import {
trigger,
state,
style,
transition,
animate,
} from '@angular/animations';
export const onSideNavChange = trigger('onSideNavChange', [ export const onSideNavChange = trigger('onSideNavChange', [
state('close', state(
'close',
style({ style({
'min-width': '50px' 'min-width': '50px',
}) })
), ),
state('open', state(
'open',
style({ style({
'min-width': '200px' 'min-width': '250px',
}) })
), ),
transition('close => open', animate('250ms ease-in')), transition('close => open', animate('250ms ease-in')),
@ -16,15 +24,17 @@ export const onSideNavChange = trigger('onSideNavChange', [
]); ]);
export const animateText = trigger('animateText', [ export const animateText = trigger('animateText', [
state('hide', state(
'hide',
style({ style({
'display': 'none', display: 'none',
opacity: 0, opacity: 0,
}) })
), ),
state('show', state(
'show',
style({ style({
'display': 'block', display: 'block',
opacity: 1, opacity: 1,
}) })
), ),

View File

@ -0,0 +1,12 @@
export interface ArmorViewModel {
id: number;
name: string;
category: string;
armorClassBase: number;
haveDexterityBonus: boolean;
minimumStrength: number;
haveStealthDisadvantage: boolean;
weight: number;
cost: number;
currencyType: number;
}