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 { 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';
|
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';
|
import { AbilitiesComponent } from './components/abilities/abilities.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
@ -49,7 +50,6 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
|
|||||||
AbilityCardComponent,
|
AbilityCardComponent,
|
||||||
GameMasterSpellsTableComponent,
|
GameMasterSpellsTableComponent,
|
||||||
GameMasterArmorsTableComponent,
|
GameMasterArmorsTableComponent,
|
||||||
AbilitiesComponent,
|
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||||
@ -81,6 +81,7 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
|
|||||||
entryComponents: [
|
entryComponents: [
|
||||||
GameMasterSpellsTableComponent,
|
GameMasterSpellsTableComponent,
|
||||||
GameMasterArmorsTableComponent,
|
GameMasterArmorsTableComponent,
|
||||||
|
GameMasterWeaponsTableComponent,
|
||||||
AbilitiesComponent,
|
AbilitiesComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
@ -13,6 +13,7 @@ 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';
|
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({
|
@Component({
|
||||||
selector: 'app-game-master-dashboard',
|
selector: 'app-game-master-dashboard',
|
||||||
@ -37,6 +38,12 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
|
|||||||
expanded: false,
|
expanded: false,
|
||||||
componentToDisplay: 'GameMasterArmorsTableComponent',
|
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':
|
case 'GameMasterArmorsTableComponent':
|
||||||
this.middleComponentName = GameMasterArmorsTableComponent;
|
this.middleComponentName = GameMasterArmorsTableComponent;
|
||||||
break;
|
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