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,
MatSortModule,
MatDialogModule,
MatTooltipModule,
} from '@angular/material';
import { UserService } from '../services/user.service';
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 { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.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({
declarations: [
@ -81,8 +86,16 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
}),
MatTableModule,
MatSortModule,
MatTooltipModule,
],
providers: [
UserService,
CharacterService,
SpellService,
WeaponService,
ArmorService,
OtherEquipmentService,
],
providers: [UserService, CharacterService],
bootstrap: [AppComponent],
entryComponents: [
GameMasterSpellsTableComponent,

View File

@ -1,38 +1,48 @@
import { Component, OnInit } from '@angular/core';
import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
import {Store} from "@ngrx/store";
import {AppState} from "../../store/models/app-state.model";
import {CharacterService} from "../../../services/character.service";
import {first} from "rxjs/operators";
import {ErrorResponse} from "../../../types/ErrorResponse";
import {HttpErrorResponse} from "@angular/common/http";
import { CharacterStatsViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import { Store } from '@ngrx/store';
import { AppState } from '../../store/models/app-state.model';
import { CharacterService } from '../../../services/character.service';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-abilities',
templateUrl: './abilities.component.html',
styleUrls: ['./abilities.component.css']
styleUrls: ['./abilities.component.css'],
})
export class AbilitiesComponent implements OnInit {
characterStats: CharacterStatsViewModel[];
constructor(private store: Store<AppState>, private characterService: CharacterService) {}
constructor(
private store: Store<AppState>,
private characterService: CharacterService
) {}
ngOnInit() {
this.getCharacterStats();
}
getCharacterStats() {
this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => {
this.characterService.getCharacterStats(characterId).pipe(first()).subscribe((characterStats) => {
console.log(characterStats)
this.characterStats = characterStats;
}, (error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
this.store
.select((s) => s.playerStore.characterId)
.pipe(first())
.subscribe((characterId) => {
this.characterService
.getCharacterStats(characterId)
.pipe(first())
.subscribe(
(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 { MatPaginator } from '@angular/material/paginator';
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({
selector: 'app-game-master-armors-table',
@ -22,29 +26,26 @@ export class GameMasterArmorsTableComponent implements OnInit {
@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);
constructor(private armorService: ArmorService) {
armorService
.GetAllArmors()
.pipe(first())
.subscribe(
(result) => {
this.dataSource = new MatTableDataSource(result);
Review

możesz usunąć console.log

możesz usunąć console.log
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);
}
);
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnInit() {}
applyFilter(event: Event) {
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 { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
export interface SpellData {
name: string;
range: string;
level: number;
school: string;
}
import { SpellViewModel } from '../../../types/viewmodels/spell-viewmodels/SpellViewModel';
import { SpellService } from '../../../services/spell.service';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-game-master-spells-table',
@ -17,25 +15,31 @@ export interface SpellData {
})
export class GameMasterSpellsTableComponent implements OnInit {
displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
dataSource: MatTableDataSource<SpellData>;
dataSource: MatTableDataSource<SpellViewModel>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {
const users = Array.from({ length: 100 }, (_, k) => this.createSepll());
this.dataSource = new MatTableDataSource(users);
constructor(private spellService: SpellService) {
spellService
.GetAllSpells()
.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 {
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnInit() {}
applyFilter(event: Event) {
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;
overflow: hidden;
text-overflow: ellipsis;
}
table {
width: 100%;
background-color: initial;
}
@ -34,5 +34,4 @@ mat-paginator {
td,
th {
color: whitesmoke;
width: 25%;
}

View File

@ -3,8 +3,8 @@
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<div>
<table mat-table [dataSource]="dataSource" matSort class="w-100 mat-elevation-z8">
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
@ -28,7 +28,9 @@
<ng-container matColumnDef="Description">
<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>
<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 { MatSort } from '@angular/material/sort';
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({
selector: 'app-game-master-weapons-table',
@ -22,30 +26,26 @@ export class GameMasterWeaponsTableComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {
const weapons = [
{
id: 1,
name: 'Test',
cost: 123,
weight: 98,
diceCount: 2,
diceValue: 20,
twoHandDamageType: 'Toxic',
description:
'A japanase battleaxe with a spike on the opposite side of the blade.',
weaponType: 'Two-Handed Melee Weapons',
rangeMeele: 50,
},
];
this.dataSource = new MatTableDataSource(weapons);
constructor(private weaponService: WeaponService) {
weaponService
.GetAllWeapons()
.pipe(first())
.subscribe(
(result) => {
this.dataSource = new MatTableDataSource(result);
Review

możesz usunąć console.log

możesz usunąć console.log
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);
}
);
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnInit() {}
applyFilter(event: Event) {
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;
}