SES-145 Tables in GM screen are now connected to backend #67

Merged
s426128 merged 2 commits from SES-145 into dev 2021-01-12 15:55:46 +01:00
12 changed files with 249 additions and 90 deletions

View File

@ -26,6 +26,7 @@ import {
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatDialogModule, MatDialogModule,
MatTooltipModule,
} from '@angular/material'; } from '@angular/material';
import { UserService } from '../services/user.service'; import { UserService } from '../services/user.service';
import { StoreModule } from '@ngrx/store'; import { StoreModule } from '@ngrx/store';
@ -39,6 +40,10 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
import { GameMasterCharacterActionsDialogComponent } from './components/game-master-character-actions-dialog/game-master-character-actions-dialog.component'; import { GameMasterCharacterActionsDialogComponent } from './components/game-master-character-actions-dialog/game-master-character-actions-dialog.component';
import { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.component'; import { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.component';
import { AbilitiesComponent } from './components/abilities/abilities.component'; import { AbilitiesComponent } from './components/abilities/abilities.component';
import { SpellService } from '../services/spell.service';
import { WeaponService } from '../services/weapon.service';
import { ArmorService } from '../services/armor.service';
import { OtherEquipmentService } from '../services/other-equipment.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -81,8 +86,16 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
}), }),
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatTooltipModule,
],
providers: [
UserService,
CharacterService,
SpellService,
WeaponService,
ArmorService,
OtherEquipmentService,
], ],
providers: [UserService, CharacterService],
bootstrap: [AppComponent], bootstrap: [AppComponent],
entryComponents: [ entryComponents: [
GameMasterSpellsTableComponent, GameMasterSpellsTableComponent,

View File

@ -1,38 +1,48 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel"; import { CharacterStatsViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import {Store} from "@ngrx/store"; import { Store } from '@ngrx/store';
import {AppState} from "../../store/models/app-state.model"; import { AppState } from '../../store/models/app-state.model';
import {CharacterService} from "../../../services/character.service"; import { CharacterService } from '../../../services/character.service';
import {first} from "rxjs/operators"; import { first } from 'rxjs/operators';
import {ErrorResponse} from "../../../types/ErrorResponse"; import { ErrorResponse } from '../../../types/ErrorResponse';
import {HttpErrorResponse} from "@angular/common/http"; import { HttpErrorResponse } from '@angular/common/http';
@Component({ @Component({
selector: 'app-abilities', selector: 'app-abilities',
templateUrl: './abilities.component.html', templateUrl: './abilities.component.html',
styleUrls: ['./abilities.component.css'] styleUrls: ['./abilities.component.css'],
}) })
export class AbilitiesComponent implements OnInit { export class AbilitiesComponent implements OnInit {
characterStats: CharacterStatsViewModel[]; characterStats: CharacterStatsViewModel[];
constructor(private store: Store<AppState>, private characterService: CharacterService) {} constructor(
private store: Store<AppState>,
private characterService: CharacterService
) {}
ngOnInit() { ngOnInit() {
this.getCharacterStats(); this.getCharacterStats();
} }
getCharacterStats() { getCharacterStats() {
this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => { this.store
this.characterService.getCharacterStats(characterId).pipe(first()).subscribe((characterStats) => { .select((s) => s.playerStore.characterId)
console.log(characterStats) .pipe(first())
this.characterStats = characterStats; .subscribe((characterId) => {
}, (error: ErrorResponse | HttpErrorResponse) => { this.characterService
if (error instanceof HttpErrorResponse) { .getCharacterStats(characterId)
error = error.error as ErrorResponse; .pipe(first())
} .subscribe(
console.error(error.message); (characterStats) => {
this.characterStats = characterStats;
},
(error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
}
);
}); });
})
} }
} }

View File

@ -3,6 +3,10 @@ import { MatTableDataSource } from '@angular/material/table';
import { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel'; import { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { ArmorService } from '../../../services/armor.service';
@Component({ @Component({
selector: 'app-game-master-armors-table', selector: 'app-game-master-armors-table',
@ -22,29 +26,26 @@ export class GameMasterArmorsTableComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort; @ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() { constructor(private armorService: ArmorService) {
const armors = [ armorService
{ .GetAllArmors()
id: 1, .pipe(first())
name: 'Test', .subscribe(
category: 'Testowa', (result) => {
minimumStrength: 12, this.dataSource = new MatTableDataSource(result);
Review

możesz usunąć console.log

możesz usunąć console.log
weight: 98, this.dataSource.paginator = this.paginator;
cost: 123, this.dataSource.sort = this.sort;
armorClassBase: 10, },
haveDexterityBonus: false, (error: ErrorResponse | HttpErrorResponse) => {
haveStealthDisadvantage: false, if (error instanceof HttpErrorResponse) {
currencyType: 1, error = error.error as ErrorResponse;
}, }
]; console.log(error.message);
}
this.dataSource = new MatTableDataSource(armors); );
} }
ngOnInit() { ngOnInit() {}
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;

View File

@ -2,13 +2,11 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table'; import { MatTableDataSource } from '@angular/material/table';
import { SpellViewModel } from '../../../types/viewmodels/spell-viewmodels/SpellViewModel';
export interface SpellData { import { SpellService } from '../../../services/spell.service';
name: string; import { first } from 'rxjs/operators';
range: string; import { ErrorResponse } from '../../../types/ErrorResponse';
level: number; import { HttpErrorResponse } from '@angular/common/http';
school: string;
}
@Component({ @Component({
selector: 'app-game-master-spells-table', selector: 'app-game-master-spells-table',
@ -17,25 +15,31 @@ export interface SpellData {
}) })
export class GameMasterSpellsTableComponent implements OnInit { export class GameMasterSpellsTableComponent implements OnInit {
displayedColumns: string[] = ['Name', 'Range', 'Level', 'School']; displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
dataSource: MatTableDataSource<SpellData>; dataSource: MatTableDataSource<SpellViewModel>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort; @ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() { constructor(private spellService: SpellService) {
const users = Array.from({ length: 100 }, (_, k) => this.createSepll()); spellService
.GetAllSpells()
this.dataSource = new MatTableDataSource(users); .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.log(error.message);
}
);
} }
createSepll(): SpellData { ngOnInit() {}
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;

View File

@ -1,11 +1,11 @@
.description-weapon-column { .text-cut {
max-width: 60px; /* feel free to include any other value */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
table { table {
width: 100%;
background-color: initial; background-color: initial;
} }
@ -34,5 +34,4 @@ mat-paginator {
td, td,
th { th {
color: whitesmoke; color: whitesmoke;
width: 25%;
} }

View File

@ -3,8 +3,8 @@
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input>
</mat-form-field> </mat-form-field>
<div class="mat-elevation-z8"> <div>
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort class="w-100 mat-elevation-z8">
<ng-container matColumnDef="Name"> <ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
@ -28,7 +28,9 @@
<ng-container matColumnDef="Description"> <ng-container matColumnDef="Description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let row" class="description-weapon-column"> {{row.description}} </td> <td mat-cell *matCellDef="let row" class="text-cut" [matTooltip]="row.description">
{{row.description}}
</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

View File

@ -3,6 +3,10 @@ import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel'; import { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel';
import { WeaponService } from '../../../services/weapon.service';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
@Component({ @Component({
selector: 'app-game-master-weapons-table', selector: 'app-game-master-weapons-table',
@ -22,30 +26,26 @@ export class GameMasterWeaponsTableComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort; @ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() { constructor(private weaponService: WeaponService) {
const weapons = [ weaponService
{ .GetAllWeapons()
id: 1, .pipe(first())
name: 'Test', .subscribe(
cost: 123, (result) => {
weight: 98, this.dataSource = new MatTableDataSource(result);
Review

możesz usunąć console.log

możesz usunąć console.log
diceCount: 2, this.dataSource.paginator = this.paginator;
diceValue: 20, this.dataSource.sort = this.sort;
twoHandDamageType: 'Toxic', },
description: (error: ErrorResponse | HttpErrorResponse) => {
'A japanase battleaxe with a spike on the opposite side of the blade.', if (error instanceof HttpErrorResponse) {
weaponType: 'Two-Handed Melee Weapons', error = error.error as ErrorResponse;
rangeMeele: 50, }
}, console.log(error.message);
]; }
);
this.dataSource = new MatTableDataSource(weapons);
} }
ngOnInit() { ngOnInit() {}
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;

View File

@ -0,0 +1,34 @@
import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel';
import { Either } from '../types/Either';
import { ErrorResponse } from '../types/ErrorResponse';
import { switchMap } from 'rxjs/operators';
import { ArmorViewModel } from '../types/viewmodels/armor-viewmodels/ArmorViewModel';
Injectable({
providedIn: 'root',
});
export class ArmorService {
private baseUrl = 'api/armor/';
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.baseUrl = baseUrl + this.baseUrl;
}
GetAllArmors(): Observable<ArmorViewModel[]> {
return this.http
.get<Either<ArmorViewModel[], ErrorResponse>>(
this.baseUrl + 'getAllArmor'
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
}

View File

@ -0,0 +1,12 @@
import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
Injectable({
providedIn: 'root',
});
export class OtherEquipmentService {
private baseUrl = 'api/otherEquipment/';
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.baseUrl = baseUrl + this.baseUrl;
}
}

View File

@ -0,0 +1,33 @@
import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { SpellViewModel } from '../types/viewmodels/spell-viewmodels/SpellViewModel';
import { Either } from '../types/Either';
import { ErrorResponse } from '../types/ErrorResponse';
import { switchMap } from 'rxjs/operators';
Injectable({
providedIn: 'root',
});
export class SpellService {
private baseUrl = 'api/spell/';
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.baseUrl = baseUrl + this.baseUrl;
}
GetAllSpells(): Observable<SpellViewModel[]> {
return this.http
.get<Either<SpellViewModel[], ErrorResponse>>(
this.baseUrl + 'getAllSpells'
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
}

View File

@ -0,0 +1,34 @@
import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { SpellViewModel } from '../types/viewmodels/spell-viewmodels/SpellViewModel';
import { Either } from '../types/Either';
import { ErrorResponse } from '../types/ErrorResponse';
import { switchMap } from 'rxjs/operators';
import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel';
Injectable({
providedIn: 'root',
});
export class WeaponService {
private baseUrl = 'api/weapon/';
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.baseUrl = baseUrl + this.baseUrl;
}
GetAllWeapons(): Observable<WeaponViewModel[]> {
return this.http
.get<Either<WeaponViewModel[], ErrorResponse>>(
this.baseUrl + 'getAllWeapons'
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
}

View File

@ -0,0 +1,17 @@
export interface SpellViewModel {
id: number;
name: string;
descriptions: string[];
higherLevel: string[];
range: string;
components: string;
material: string;
ritual: boolean;
duration: string;
concentration: boolean;
castingTime: string;
level: number;
school: string;
classes: string;
subclasses: string;
}