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

SES-165 added armors table connected with backend

Browse Source
This commit is contained in:
Natalia Gawron 2021-01-21 18:43:39 +01:00
parent 96ff8ae45f
commit 47f5132f14
11 changed files with 242 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,8 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component';
import { PlayerWeaponsTableComponent } from './components/player-weapons-table/player-weapons-table.component';
import {EquipmentService} from "../services/equipment.service";
import { PlayerArmorsTableComponent } from './components/player-armors-table/player-armors-table.component';
import { PlayerOtherEquipmentTableComponent } from './components/player-other-equipment-table/player-other-equipment-table.component';
@NgModule({
declarations: [
@ -73,6 +75,8 @@ import {EquipmentService} from "../services/equipment.service";
SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
PlayerWeaponsTableComponent,
PlayerArmorsTableComponent,
PlayerOtherEquipmentTableComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -124,6 +128,8 @@ import {EquipmentService} from "../services/equipment.service";
SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
PlayerWeaponsTableComponent,
PlayerArmorsTableComponent,
PlayerOtherEquipmentTableComponent,
],
})
export class AppModule {}

38
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css Normal file
View File

@ -0,0 +1,38 @@
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%;
}
.text-centre {
padding: 1%;
text-align: center;
align-items: center
}

44
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html Normal file
View File

@ -0,0 +1,44 @@
<div class="text-centre">Your armors:</div>
<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>

25
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlayerArmorsTableComponent } from './player-armors-table.component';
describe('PlayerArmorsTableComponent', () => {
let component: PlayerArmorsTableComponent;
let fixture: ComponentFixture<PlayerArmorsTableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlayerArmorsTableComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlayerArmorsTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

69
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts Normal file
View File

@ -0,0 +1,69 @@
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 { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { EquipmentService } from '../../../services/equipment.service';
import { Store } from '@ngrx/store';
import { AppState } from '../../store/models/app-state.model';
@Component({
selector: 'app-player-armors-table',
templateUrl: './player-armors-table.component.html',
styleUrls: ['./player-armors-table.component.css']
})
export class PlayerArmorsTableComponent 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(private store: Store<AppState>, private equipmentService: EquipmentService) {}
ngOnInit() {
this.getCharacterArmors();
}
getCharacterArmors() {
this.store
.select((s) => s.playerStore.characterId)
.pipe(first())
.subscribe((characterId) => {
this.equipmentService
.getCharacterArmors(characterId)
.pipe(first())
.subscribe(
(result) => {
this.dataSource = new MatTableDataSource(result);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
(error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
}
);
});
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}

12
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
View File

@ -22,7 +22,17 @@
<mat-list-item (click)="SwitchMiddleComponent('PlayerWeaponsTableComponent')">
<mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
<a matLine>Equipment</a>
<a matLine>Weapons</a>
</mat-list-item>
<mat-list-item (click)="SwitchMiddleComponent('PlayerArmorsTableComponent')">
<mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
<a matLine>Armors</a>
</mat-list-item>
<mat-list-item (click)="SwitchMiddleComponent('PlayerOtherEquipmentTableComponent')">
<mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
<a matLine>Other equipment</a>
</mat-list-item>
<mat-list-item>

8
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
View File

@ -8,6 +8,8 @@ import { ClearStore } from '../../store/actions/app.actions';
import { Router } from '@angular/router';
import { ClearCharacterId } from '../../store/actions/player.action';
import { PlayerWeaponsTableComponent } from '../player-weapons-table/player-weapons-table.component';
import { PlayerArmorsTableComponent } from '../player-armors-table/player-armors-table.component';
import {PlayerOtherEquipmentTableComponent} from "../player-other-equipment-table/player-other-equipment-table.component";
@Component({
selector: 'app-player-dashboard',
@ -40,6 +42,12 @@ export class PlayerDashboardComponent implements OnInit {
case 'PlayerWeaponsTableComponent':
this.middleComponent = PlayerWeaponsTableComponent;
break;
case 'PlayerArmorsTableComponent':
this.middleComponent = PlayerArmorsTableComponent;
break;
case 'PlayerOtherEquipmentTableComponent':
this.middleComponent = PlayerOtherEquipmentTableComponent;
break;
}
}

0
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css Normal file
View File

1
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html Normal file
View File

@ -0,0 +1 @@
<p>player-other-equipment-table works!</p>

25
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlayerOtherEquipmentTableComponent } from './player-other-equipment-table.component';
describe('PlayerOtherEquipmentTableComponent', () => {
let component: PlayerOtherEquipmentTableComponent;
let fixture: ComponentFixture<PlayerOtherEquipmentTableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlayerOtherEquipmentTableComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlayerOtherEquipmentTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-player-other-equipment-table',
templateUrl: './player-other-equipment-table.component.html',
styleUrls: ['./player-other-equipment-table.component.css']
})
export class PlayerOtherEquipmentTableComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}