diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 260c784..8b730fa 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -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'; @NgModule({ declarations: [ @@ -48,6 +49,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors- AbilityCardComponent, GameMasterSpellsTableComponent, GameMasterArmorsTableComponent, + GameMasterWeaponsTableComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -79,6 +81,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors- entryComponents: [ GameMasterSpellsTableComponent, GameMasterArmorsTableComponent, + GameMasterWeaponsTableComponent, ], }) export class AppModule {} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts index ae3aa72..4941226 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts @@ -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; } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.css new file mode 100644 index 0000000..83e5e96 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.css @@ -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%; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.html new file mode 100644 index 0000000..966d65d --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.html @@ -0,0 +1,43 @@ + + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{row.name}} Weapon Type {{row.weaponType}} Weight {{row.weight}} Cost {{row.cost}} $ Description {{row.description}}
No data matching the filter "{{input.value}}"
+ + +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.ts new file mode 100644 index 0000000..4a17e31 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.ts @@ -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; + + @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(); + } + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/weapon-viewmodels/WeaponViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/weapon-viewmodels/WeaponViewModel.ts new file mode 100644 index 0000000..27e80a4 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/weapon-viewmodels/WeaponViewModel.ts @@ -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; +}