SES-145 Tables in GM screen are now connected to backend #67
@ -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,
|
||||
|
@ -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.store
|
||||
.select((s) => s.playerStore.characterId)
|
||||
.pipe(first())
|
||||
.subscribe((characterId) => {
|
||||
this.characterService
|
||||
.getCharacterStats(characterId)
|
||||
.pipe(first())
|
||||
.subscribe(
|
||||
(characterStats) => {
|
||||
this.characterStats = characterStats;
|
||||
}, (error: ErrorResponse | HttpErrorResponse) => {
|
||||
},
|
||||
(error: ErrorResponse | HttpErrorResponse) => {
|
||||
if (error instanceof HttpErrorResponse) {
|
||||
error = error.error as ErrorResponse;
|
||||
}
|
||||
console.error(error.message);
|
||||
}
|
||||
);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
constructor(private armorService: ArmorService) {
|
||||
armorService
|
||||
.GetAllArmors()
|
||||
.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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
createSepll(): SpellData {
|
||||
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
|
@ -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%;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
constructor(private weaponService: WeaponService) {
|
||||
weaponService
|
||||
.GetAllWeapons()
|
||||
.pipe(first())
|
||||
.subscribe(
|
||||
(result) => {
|
||||
this.dataSource = new MatTableDataSource(result);
|
||||
s426128
commented
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() {}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
|
@ -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);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user
możesz usunąć console.log