s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'SES-137 Weapon table added' (#64) from SES-137 into dev

Browse Source 
Reviewed-on: #64
This commit is contained in:
Natalia Gawron 2021-01-10 17:43:55 +01:00
commit 82eb65e679
6 changed files with 169 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -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,
],
})

12
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts
View File

@ -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;
}
}

38
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.css Normal file
View File

@ -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%;
}

43
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.html Normal file
View File

@ -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>

58
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.ts Normal file
View File

@ -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();
}
}
}

17
SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/weapon-viewmodels/WeaponViewModel.ts Normal file
View File

@ -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;
}