From 96ff8ae45fd638602c48689fc5174335c5f17b37 Mon Sep 17 00:00:00 2001 From: Natalia Gawron Date: Wed, 20 Jan 2021 20:57:59 +0100 Subject: [PATCH] SES-165 created weapon teble for player, connected with backend --- .../ClientApp/src/app/app.module.ts | 5 ++ .../player-dashboard.component.html | 6 +- .../player-dashboard.component.ts | 9 ++- .../player-weapons-table.component.css | 43 ++++++++++++ .../player-weapons-table.component.html | 39 +++++++++++ .../player-weapons-table.component.spec.ts | 25 +++++++ .../player-weapons-table.component.ts | 69 +++++++++++++++++++ .../src/services/equipment.service.ts | 60 ++++++++++++++++ .../OtherEquipmentViewModel.ts | 7 ++ 9 files changed, 258 insertions(+), 5 deletions(-) create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 20c56c3..4539f8b 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -50,6 +50,8 @@ import { GameMasterMonstersTableComponent } from './components/game-master-monst import { MonsterService } from '../services/monster.service'; import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.component'; 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"; @NgModule({ declarations: [ @@ -70,6 +72,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh GameMasterMonstersTableComponent, SpellDetailsDialogComponent, GameMasterShopkeepersTableComponent, + PlayerWeaponsTableComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -107,6 +110,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh ArmorService, OtherEquipmentService, MonsterService, + EquipmentService, ], bootstrap: [AppComponent], entryComponents: [ @@ -119,6 +123,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh ThrowPrimaryAbilityComponent, SpellDetailsDialogComponent, GameMasterShopkeepersTableComponent, + PlayerWeaponsTableComponent, ], }) export class AppModule {} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html index d209480..3607b2e 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html @@ -15,12 +15,12 @@ - + query_stats Statistic and throws - - + + local_mall Equipment diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts index 1ed96bf..a602e78 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts @@ -4,9 +4,10 @@ import { first } from 'rxjs/operators'; import { Store } from '@ngrx/store'; import { AppState } from 'src/app/store/models/app-state.model'; import { AbilitiesComponent } from '../abilities/abilities.component'; -import {ClearStore, ClearUserId} from '../../store/actions/app.actions'; +import { ClearStore } from '../../store/actions/app.actions'; import { Router } from '@angular/router'; -import {ClearCharacterId} from "../../store/actions/player.action"; +import { ClearCharacterId } from '../../store/actions/player.action'; +import { PlayerWeaponsTableComponent } from '../player-weapons-table/player-weapons-table.component'; @Component({ selector: 'app-player-dashboard', @@ -35,6 +36,10 @@ export class PlayerDashboardComponent implements OnInit { switch (componentName) { case 'AbilitiesComponent': this.middleComponent = AbilitiesComponent; + break; + case 'PlayerWeaponsTableComponent': + this.middleComponent = PlayerWeaponsTableComponent; + break; } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css new file mode 100644 index 0000000..a4eef06 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css @@ -0,0 +1,43 @@ +.text-cut { + max-width: 60px; /* feel free to include any other value */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +table { + 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; +} + +.text-centre { + padding: 1%; + text-align: center; + align-items: center +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html new file mode 100644 index 0000000..a4d1940 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html @@ -0,0 +1,39 @@ +
Your weapons:
+ + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{row.name}} Weapon Type {{row.weaponType}} Weight {{row.weight}} Cost {{row.cost}} $
No data matching the filter "{{input.value}}"
+ + +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts new file mode 100644 index 0000000..d20347a --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlayerWeaponsTableComponent } from './player-weapons-table.component'; + +describe('PlayerWeaponsTableComponent', () => { + let component: PlayerWeaponsTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PlayerWeaponsTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PlayerWeaponsTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts new file mode 100644 index 0000000..16b9385 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts @@ -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 { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel'; +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-weapons-table', + templateUrl: './player-weapons-table.component.html', + styleUrls: ['./player-weapons-table.component.css'] +}) +export class PlayerWeaponsTableComponent implements OnInit { + weapons: WeaponViewModel[]; + displayedColumns: string[] = [ + 'name', + 'weaponType', + 'weight', + 'cost', + ]; + dataSource: MatTableDataSource; + + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + @ViewChild(MatSort, { static: true }) sort: MatSort; + + constructor(private store: Store, private equipmentService: EquipmentService) {} + + ngOnInit() { + this.getCharacterWeapons(); + } + + getCharacterWeapons() { + this.store + .select((s) => s.playerStore.characterId) + .pipe(first()) + .subscribe((characterId) => { + this.equipmentService + .getCharacterWeapons(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(); + } + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts new file mode 100644 index 0000000..3c8e4b8 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts @@ -0,0 +1,60 @@ +import { Inject, Injectable } from '@angular/core'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel'; +import { Observable, of, throwError } from 'rxjs'; +import { Either } from '../types/Either'; +import { ErrorResponse } from '../types/ErrorResponse'; +import { switchMap } from 'rxjs/operators'; +import { ArmorViewModel } from '../types/viewmodels/armor-viewmodels/ArmorViewModel'; +import { OtherEquipmentViewModel } from '../types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel'; + +Injectable({ + providedIn: 'root', +}); + +export class EquipmentService { + private baseUrl = 'api/character/equipment/'; + constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) { + this.baseUrl = baseUrl + this.baseUrl; + } + + getCharacterWeapons(characterId: number): Observable { + const params = new HttpParams().set('characterId', characterId.toString()); + return this.http.get>(this.baseUrl + 'getWeapons', {params}).pipe( + switchMap((response) => { + if (response.isLeft) { + return of(response.left); + } else { + return throwError(response.right); + } + }) + ); + } + + getCharacterArmors(characterId: number): Observable { + const params = new HttpParams().set('characterId', characterId.toString()); + return this.http.get>(this.baseUrl + 'getArmors', {params}).pipe( + switchMap((response) => { + if (response.isLeft) { + return of(response.left); + } else { + return throwError(response.right); + } + }) + ); + } + + getCharacterOtherEquipment(characterId: number): Observable { + const params = new HttpParams().set('characterId', characterId.toString()); + return this.http.get>(this.baseUrl + 'getOtherEquipment', {params}).pipe( + switchMap((response) => { + if (response.isLeft) { + return of(response.left); + } else { + return throwError(response.right); + } + }) + ); + } + +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts new file mode 100644 index 0000000..93c3308 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts @@ -0,0 +1,7 @@ +export interface OtherEquipmentViewModel { + id: number; + name: string; + description: string; + const: number; + currencyType: number; +}