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

Merge pull request 'SES-138 added table with armor in gm screen' (#60) from SES-138 into dev

Browse Source 
Reviewed-on: #60
This commit is contained in:
Natalia Gawron 2021-01-09 19:43:07 +01:00
commit ad951c9cf8
9 changed files with 187 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

32
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-armors-table/game-master-armors-table.component.css Normal file
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%;
}

43
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-armors-table/game-master-armors-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. 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>

57
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-armors-table/game-master-armors-table.component.ts Normal file
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();
}
}
}

2
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html
View File

@ -18,7 +18,7 @@
<mat-divider></mat-divider>
<mat-nav-list>
<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>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{item.displayName}}

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

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

5
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html
View File

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

28
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts
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', [
state('close',
state(
'close',
style({
'min-width': '50px'
'min-width': '50px',
})
),
state('open',
state(
'open',
style({
'min-width': '200px'
'min-width': '250px',
})
),
transition('close => open', animate('250ms ease-in')),
@ -16,15 +24,17 @@ export const onSideNavChange = trigger('onSideNavChange', [
]);
export const animateText = trigger('animateText', [
state('hide',
state(
'hide',
style({
'display': 'none',
display: 'none',
opacity: 0,
})
),
state('show',
state(
'show',
style({
'display': 'block',
display: 'block',
opacity: 1,
})
),

12
SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/armor-viewmodels/ArmorViewModel.ts Normal file
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;
}