SES-137 Weapon table added #64
@ -35,6 +35,7 @@ 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';
|
||||
import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
|
||||
import { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.component';
|
||||
import { AbilitiesComponent } from './components/abilities/abilities.component';
|
||||
|
||||
@NgModule({
|
||||
@ -49,7 +50,6 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
|
||||
AbilityCardComponent,
|
||||
GameMasterSpellsTableComponent,
|
||||
GameMasterArmorsTableComponent,
|
||||
AbilitiesComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||
@ -81,6 +81,7 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
|
||||
entryComponents: [
|
||||
GameMasterSpellsTableComponent,
|
||||
GameMasterArmorsTableComponent,
|
||||
GameMasterWeaponsTableComponent,
|
||||
AbilitiesComponent,
|
||||
],
|
||||
})
|
||||
|
@ -13,6 +13,7 @@ import { first } from 'rxjs/operators';
|
||||
import { LeftNavItem } from '../../../types/LeftNavItem';
|
||||
import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
|
||||
import { GameMasterArmorsTableComponent } from '../game-master-armors-table/game-master-armors-table.component';
|
||||
import { GameMasterWeaponsTableComponent } from '../game-master-weapons-table/game-master-weapons-table.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-master-dashboard',
|
||||
@ -33,10 +34,16 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
||||
children: [
|
||||
{
|
||||
displayName: 'Armor',
|
||||
iconName: 'ra ra-vest',
|
||||
iconName: 'ra ra-vest',
|
||||
expanded: false,
|
||||
componentToDisplay: 'GameMasterArmorsTableComponent',
|
||||
},
|
||||
{
|
||||
displayName: 'Weapon',
|
||||
iconName: 'ra ra-large-hammer',
|
||||
expanded: false,
|
||||
componentToDisplay: 'GameMasterWeaponsTableComponent',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -104,6 +111,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
||||
case 'GameMasterArmorsTableComponent':
|
||||
this.middleComponentName = GameMasterArmorsTableComponent;
|
||||
break;
|
||||
case 'GameMasterWeaponsTableComponent':
|
||||
this.middleComponentName = GameMasterWeaponsTableComponent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -0,0 +1,38 @@
|
||||
.description-weapon-column {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
@ -0,0 +1,43 @@
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #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="WeaponType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weapon Type </th>
|
||||
<td mat-cell *matCellDef="let row"> {{row.weaponType}} </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>
|
||||
|
||||
<ng-container matColumnDef="Description">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
|
||||
<td mat-cell *matCellDef="let row" class="description-weapon-column"> {{row.description}} </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>
|
@ -0,0 +1,58 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-master-weapons-table',
|
||||
templateUrl: './game-master-weapons-table.component.html',
|
||||
styleUrls: ['./game-master-weapons-table.component.css'],
|
||||
})
|
||||
export class GameMasterWeaponsTableComponent implements OnInit {
|
||||
displayedColumns: string[] = [
|
||||
'Name',
|
||||
'WeaponType',
|
||||
'Weight',
|
||||
'Cost',
|
||||
'Description',
|
||||
];
|
||||
dataSource: MatTableDataSource<WeaponViewModel>;
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
constructor() {
|
||||
const weapons = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Test',
|
||||
cost: 123,
|
||||
weight: 98,
|
||||
diceCount: 2,
|
||||
diceValue: 20,
|
||||
twoHandDamageType: 'Toxic',
|
||||
description:
|
||||
'A japanase battleaxe with a spike on the opposite side of the blade.',
|
||||
weaponType: 'Two-Handed Melee Weapons',
|
||||
rangeMeele: 50,
|
||||
},
|
||||
];
|
||||
|
||||
this.dataSource = new MatTableDataSource(weapons);
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
export interface WeaponViewModel {
|
||||
id: number;
|
||||
name: string;
|
||||
cost: number;
|
||||
weight: number;
|
||||
diceCount: number;
|
||||
diceValue: number;
|
||||
twoHandDiceCount?: number;
|
||||
twoHandDiceValue?: number;
|
||||
twoHandDamageType: string;
|
||||
description: string;
|
||||
weaponType: string;
|
||||
rangeMeele: number;
|
||||
rangeThrowNormal?: number;
|
||||
rangeThrowLong?: number;
|
||||
rangeLong?: number;
|
||||
}
|
Loading…
Reference in New Issue
Block a user