merge
This commit is contained in:
commit
e048fe71a3
|
|
@ -51,6 +51,10 @@ 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";
|
||||
import { PlayerArmorsTableComponent } from './components/player-armors-table/player-armors-table.component';
|
||||
import { PlayerOtherEquipmentTableComponent } from './components/player-other-equipment-table/player-other-equipment-table.component';
|
||||
import { SendMessageActionComponent } from './components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component';
|
||||
import { DynamicModule } from 'ng-dynamic-component';
|
||||
import { SnackbarComponent } from './shared/snackbar/snackbar.component';
|
||||
|
|
@ -79,6 +83,9 @@ import { ShopkeeperService } from '../services/shopkeeper.service';
|
|||
GameMasterMonstersTableComponent,
|
||||
SpellDetailsDialogComponent,
|
||||
GameMasterShopkeepersTableComponent,
|
||||
PlayerWeaponsTableComponent,
|
||||
PlayerArmorsTableComponent,
|
||||
PlayerOtherEquipmentTableComponent,
|
||||
SendMessageActionComponent,
|
||||
SnackbarComponent,
|
||||
MessageDialogComponent,
|
||||
|
|
@ -124,6 +131,7 @@ import { ShopkeeperService } from '../services/shopkeeper.service';
|
|||
ArmorService,
|
||||
OtherEquipmentService,
|
||||
MonsterService,
|
||||
EquipmentService,
|
||||
ShopkeeperService,
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
|
|
@ -137,6 +145,9 @@ import { ShopkeeperService } from '../services/shopkeeper.service';
|
|||
ThrowPrimaryAbilityComponent,
|
||||
SpellDetailsDialogComponent,
|
||||
GameMasterShopkeepersTableComponent,
|
||||
PlayerWeaponsTableComponent,
|
||||
PlayerArmorsTableComponent,
|
||||
PlayerOtherEquipmentTableComponent,
|
||||
SendMessageActionComponent,
|
||||
SnackbarComponent,
|
||||
MessageDialogComponent,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
.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
|
||||
}
|
||||
|
||||
th.mat-header-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
table.mat-table {
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
@media (max-width: 365px) {
|
||||
table.mat-table {
|
||||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<div class="text-centre">Your armors:</div>
|
||||
<div class="custom-container">
|
||||
<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="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]"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
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',
|
||||
'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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,25 +15,37 @@
|
|||
<mat-sidenav #sidenav class="sidenav">
|
||||
<mat-nav-list>
|
||||
|
||||
<mat-list-item>
|
||||
<mat-list-item (click)="SwitchMiddleComponent('AbilitiesComponent')">
|
||||
<mat-icon [class.active]="selected" matListIcon>query_stats</mat-icon>
|
||||
<a matLine>Statistic and throws</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
<mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
|
||||
<a matLine>Equipment</a>
|
||||
|
||||
<mat-list-item (click)="SwitchMiddleComponent('PlayerWeaponsTableComponent')">
|
||||
<mat-icon [class.active]="selected" matListIcon><i class="ra ra-daggers "></i></mat-icon>
|
||||
<a matLine>Weapons</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
<mat-list-item (click)="SwitchMiddleComponent('PlayerArmorsTableComponent')">
|
||||
<mat-icon [class.active]="selected" matListIcon><i class="ra ra-vest"></i></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>
|
||||
|
||||
<!--Uncomment when Spells will be implemented-->
|
||||
<!--<mat-list-item>
|
||||
<mat-icon [class.active]="selected" matListIcon>brightness_4</mat-icon>
|
||||
<a matLine>Spells</a>
|
||||
</mat-list-item>
|
||||
</mat-list-item>-->
|
||||
|
||||
<mat-list-item>
|
||||
<!--Uncomment when Profile will be implemented-->
|
||||
<!-- <mat-list-item>
|
||||
<mat-icon [class.active]="selected" matListIcon>account_circle</mat-icon>
|
||||
<a matLine>Profile</a>
|
||||
</mat-list-item>
|
||||
</mat-list-item>-->
|
||||
|
||||
<mat-list-item>
|
||||
<mat-icon [class.active]="selected" matListIcon>shopping_cart</mat-icon>
|
||||
|
|
|
|||
|
|
@ -4,7 +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 { 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';
|
||||
import { ClearStore } from '../../store/actions/app.actions';
|
||||
import { Router } from '@angular/router';
|
||||
import { ClearCharacterId } from '../../store/actions/player.action';
|
||||
import { MatSnackBar } from '@angular/material';
|
||||
|
|
@ -46,6 +49,16 @@ export class PlayerDashboardComponent implements OnInit {
|
|||
switch (componentName) {
|
||||
case 'AbilitiesComponent':
|
||||
this.middleComponent = AbilitiesComponent;
|
||||
break;
|
||||
case 'PlayerWeaponsTableComponent':
|
||||
this.middleComponent = PlayerWeaponsTableComponent;
|
||||
break;
|
||||
case 'PlayerArmorsTableComponent':
|
||||
this.middleComponent = PlayerArmorsTableComponent;
|
||||
break;
|
||||
case 'PlayerOtherEquipmentTableComponent':
|
||||
this.middleComponent = PlayerOtherEquipmentTableComponent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
.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
|
||||
}
|
||||
|
||||
th.mat-header-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
table.mat-table {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
@media (max-width: 365px) {
|
||||
table.mat-table {
|
||||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 468px) and (max-width: 768px) {
|
||||
.custom-container {
|
||||
width: 410px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.custom-container {
|
||||
width: 580px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="custom-container">
|
||||
<div class="custom-container">
|
||||
<div class="text-centre">Your other equipment:</div>
|
||||
<mat-form-field class="filter-class">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Equipment" #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="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"> {{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]"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
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 { OtherEquipmentViewModel} from '../../../types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel';
|
||||
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-other-equipment-table',
|
||||
templateUrl: './player-other-equipment-table.component.html',
|
||||
styleUrls: ['./player-other-equipment-table.component.css']
|
||||
})
|
||||
export class PlayerOtherEquipmentTableComponent implements OnInit {
|
||||
displayedColumns: string[] = [
|
||||
'name',
|
||||
'cost',
|
||||
'description',
|
||||
];
|
||||
dataSource: MatTableDataSource<OtherEquipmentViewModel>;
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.getCharacterOtherEquipment();
|
||||
}
|
||||
|
||||
getCharacterOtherEquipment() {
|
||||
this.store
|
||||
.select((s) => s.playerStore.characterId)
|
||||
.pipe(first())
|
||||
.subscribe((characterId) => {
|
||||
this.equipmentService
|
||||
.getCharacterOtherEquipment(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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.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
|
||||
}
|
||||
|
||||
th.mat-header-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
border-bottom: #e8cca7
|
||||
solid 1px;
|
||||
}
|
||||
|
||||
table.mat-table {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
@media (max-width: 365px) {
|
||||
table.mat-table {
|
||||
margin-left: 3%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="text-centre">Your weapons:</div>
|
||||
<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>
|
||||
|
||||
<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]"></mat-paginator>
|
||||
</div>
|
||||
|
|
@ -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<PlayerWeaponsTableComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PlayerWeaponsTableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PlayerWeaponsTableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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<WeaponViewModel>;
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.getCharacterWeapons();
|
||||
}
|
||||
|
||||
getCharacterWeapons() {
|
||||
this.store
|
||||
.select((s) => s.playerStore.characterId)
|
||||
.pipe(first())
|
||||
.subscribe((characterId) => {
|
||||
this.equipmentService
|
||||
.getCharacterWeapons(1)
|
||||
.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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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<WeaponViewModel[]> {
|
||||
const params = new HttpParams().set('characterId', characterId.toString());
|
||||
return this.http.get<Either<WeaponViewModel[], ErrorResponse>>(this.baseUrl + 'getWeapons', {params}).pipe(
|
||||
switchMap((response) => {
|
||||
if (response.isLeft) {
|
||||
return of(response.left);
|
||||
} else {
|
||||
return throwError(response.right);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
getCharacterArmors(characterId: number): Observable<ArmorViewModel[]> {
|
||||
const params = new HttpParams().set('characterId', characterId.toString());
|
||||
return this.http.get<Either<ArmorViewModel[], ErrorResponse>>(this.baseUrl + 'getArmors', {params}).pipe(
|
||||
switchMap((response) => {
|
||||
if (response.isLeft) {
|
||||
return of(response.left);
|
||||
} else {
|
||||
return throwError(response.right);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
getCharacterOtherEquipment(characterId: number): Observable<OtherEquipmentViewModel[]> {
|
||||
const params = new HttpParams().set('characterId', characterId.toString());
|
||||
return this.http.get<Either<OtherEquipmentViewModel[], ErrorResponse>>(this.baseUrl + 'getOtherEquipment', {params}).pipe(
|
||||
switchMap((response) => {
|
||||
if (response.isLeft) {
|
||||
return of(response.left);
|
||||
} else {
|
||||
return throwError(response.right);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export interface OtherEquipmentViewModel {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
const: number;
|
||||
currencyType: number;
|
||||
}
|
||||
Loading…
Reference in New Issue