conneted with backend - get user characters list
This commit is contained in:
parent
d61c3f620f
commit
665ef65ec0
@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
|
|||||||
import {environment} from '../environments/environment';
|
import {environment} from '../environments/environment';
|
||||||
import {SessionCompanionIconsModule} from './shared/sc-icons/session-companion-icons.module';
|
import {SessionCompanionIconsModule} from './shared/sc-icons/session-companion-icons.module';
|
||||||
import {reducers} from './store/models/app-state.model';
|
import {reducers} from './store/models/app-state.model';
|
||||||
|
import {CharacterService} from "../services/character.service";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -61,7 +62,8 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
|||||||
})
|
})
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
UserService
|
UserService,
|
||||||
|
CharacterService
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div class="primary-text header">Select character</div>
|
<div class="primary-text header">Select character</div>
|
||||||
<mat-list>
|
<mat-list>
|
||||||
<mat-divider></mat-divider>
|
<mat-divider></mat-divider>
|
||||||
<mat-list-item *ngFor="let character of characters">
|
<mat-list-item *ngFor="let character of charactersList">
|
||||||
<mat-icon mat-list-icon>account_circle</mat-icon>
|
<mat-icon mat-list-icon>account_circle</mat-icon>
|
||||||
<div mat-line>{{character.name}}</div>
|
<div mat-line>{{character.name}}</div>
|
||||||
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
|
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
|
||||||
|
@ -1,83 +1,47 @@
|
|||||||
import { Component } from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
|
import {first} from "rxjs/operators";
|
||||||
export interface Section {
|
import {ClearUserId} from "../../store/actions/app.actions";
|
||||||
name: string;
|
import {ErrorResponse} from "../../../types/ErrorResponse";
|
||||||
className: string;
|
import {HttpErrorResponse} from "@angular/common/http";
|
||||||
level: number;
|
import {Store} from "@ngrx/store";
|
||||||
}
|
import {AppState} from "../../store/models/app-state.model";
|
||||||
|
import {CharacterService} from "../../../services/character.service";
|
||||||
|
import {CharacterForLoginViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-select-character',
|
selector: 'app-select-character',
|
||||||
templateUrl: './select-character.component.html',
|
templateUrl: './select-character.component.html',
|
||||||
styleUrls: ['./select-character.component.css']
|
styleUrls: ['./select-character.component.css']
|
||||||
})
|
})
|
||||||
export class SelectCharacterComponent {
|
export class SelectCharacterComponent implements OnInit {
|
||||||
characters: Section[] = [
|
charactersList: CharacterForLoginViewModel[];
|
||||||
{
|
|
||||||
name: 'Oweja',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'James',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Legolas',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Oweja',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'James',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Legolas',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Oweja',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'James',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Legolas',
|
|
||||||
className: 'warrior',
|
|
||||||
level: 3,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
isExpanded = false;
|
constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
|
||||||
|
|
||||||
collapse() {
|
ngOnInit() {
|
||||||
this.isExpanded = false;
|
this.getUserCharactersList();
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle() {
|
getUserCharactersList() {
|
||||||
this.isExpanded = !this.isExpanded;
|
this.store.select(s => s.appStore.userId).pipe(first()).subscribe((userId) => {
|
||||||
|
this.characterService.getUserCharactersList(userId).pipe(first()).subscribe((charactersList) => {
|
||||||
|
this.charactersList = charactersList;
|
||||||
|
}, (error: ErrorResponse | HttpErrorResponse) => {
|
||||||
|
if(error instanceof HttpErrorResponse){
|
||||||
|
error = error.error as ErrorResponse
|
||||||
|
}
|
||||||
|
console.error(error.message)
|
||||||
|
} )
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(private router: Router) {}
|
|
||||||
|
|
||||||
onCharacterClick(){
|
onCharacterClick(){
|
||||||
this.router.navigate(['player'])
|
this.router.navigate(['player'])
|
||||||
}
|
}
|
||||||
|
|
||||||
onArrowBackClick(){
|
onArrowBackClick(){
|
||||||
|
this.store.dispatch(new ClearUserId())
|
||||||
this.router.navigate(['login'])
|
this.router.navigate(['login'])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,6 +9,7 @@ import {AppStoreModel} from '../../store/models/app-store.model';
|
|||||||
import {select, Store} from '@ngrx/store';
|
import {select, Store} from '@ngrx/store';
|
||||||
import {AddUserId} from '../../store/actions/app.actions';
|
import {AddUserId} from '../../store/actions/app.actions';
|
||||||
import {AppState} from 'src/app/store/models/app-state.model';
|
import {AppState} from 'src/app/store/models/app-state.model';
|
||||||
|
import {first} from "rxjs/operators";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-sign-in',
|
selector: 'app-sign-in',
|
||||||
@ -43,9 +44,9 @@ export class SignInComponent implements OnDestroy, OnInit {
|
|||||||
|
|
||||||
onLoginButtonClick() {
|
onLoginButtonClick() {
|
||||||
let role = '';
|
let role = '';
|
||||||
this.store.select(s => s.appStore.role).subscribe((v) => {
|
this.store.select(s => s.appStore.role).pipe(first()).subscribe((v) => {
|
||||||
role = v;
|
role = v;
|
||||||
}).unsubscribe();
|
});
|
||||||
this.allSubscriptions.add(
|
this.allSubscriptions.add(
|
||||||
this.userService.tryLogin(
|
this.userService.tryLogin(
|
||||||
this.signInFormGroup.get('signIn').value['username'],
|
this.signInFormGroup.get('signIn').value['username'],
|
||||||
|
@ -3,7 +3,8 @@ import { Action } from '@ngrx/store';
|
|||||||
|
|
||||||
export enum AppActionTypes {
|
export enum AppActionTypes {
|
||||||
ADD_USER_ID = '[APP] Add user id',
|
ADD_USER_ID = '[APP] Add user id',
|
||||||
ADD_ROLE = '[APP] Add role'
|
ADD_ROLE = '[APP] Add role',
|
||||||
|
CLEAR_USER_ID = '[APP] Clear user id'
|
||||||
}
|
}
|
||||||
|
|
||||||
export class AddUserId implements Action {
|
export class AddUserId implements Action {
|
||||||
@ -20,4 +21,12 @@ export class AddRole implements Action {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export type AppAction = AddUserId | AddRole;
|
export class ClearUserId implements Action {
|
||||||
|
readonly type = AppActionTypes.CLEAR_USER_ID;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AppAction = AddUserId | AddRole | ClearUserId;
|
||||||
|
@ -12,6 +12,8 @@ export function AppReducer(state: AppStoreModel = initialState, action: AppActio
|
|||||||
return {...state, userId: action.payload.userId};
|
return {...state, userId: action.payload.userId};
|
||||||
case AppActionTypes.ADD_ROLE:
|
case AppActionTypes.ADD_ROLE:
|
||||||
return {...state, role: action.payload.role};
|
return {...state, role: action.payload.role};
|
||||||
|
case AppActionTypes.CLEAR_USER_ID:
|
||||||
|
return {...state, userId: null};
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,30 @@
|
|||||||
|
import {Inject, Injectable} from '@angular/core';
|
||||||
|
import {HttpClient, HttpParams} from '@angular/common/http';
|
||||||
|
import {Observable, of, throwError} from 'rxjs';
|
||||||
|
import {ErrorResponse} from '../types/ErrorResponse';
|
||||||
|
import {Either} from '../types/Either';
|
||||||
|
import {switchMap} from 'rxjs/operators';
|
||||||
|
import {CharacterForLoginViewModel} from "../types/viewmodels/character-viewmodels/CharacterForLoginViewModel";
|
||||||
|
|
||||||
|
Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class CharacterService {
|
||||||
|
private baseUrl = 'api/character/';
|
||||||
|
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
|
||||||
|
this.baseUrl = baseUrl + this.baseUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
getUserCharactersList(userId: number): Observable<CharacterForLoginViewModel[]> {
|
||||||
|
const params = new HttpParams().set('userId', userId.toString())
|
||||||
|
return this.http.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(this.baseUrl + 'userCharactersList', {params}).pipe(
|
||||||
|
switchMap(response => {
|
||||||
|
if (response.isLeft) {
|
||||||
|
return of(response.left);
|
||||||
|
} else {
|
||||||
|
return throwError(response.right);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
export interface CharacterForLoginViewModel {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
name: string;
|
||||||
|
className: string;
|
||||||
|
level: number;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user