s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-156 displaying template list, created basic UI, fixed backend service

Browse Source
This commit is contained in:
Natalia Gawron 2021-01-22 21:27:37 +01:00
parent 9c41f51820
commit 706b2aa0fa
12 changed files with 201 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
View File

@ -1 +1,77 @@
@import "../../../styles.css";
@import '../../../styles.css';
mat-form-field {
color: #df7c0f;
}
:host {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.container {
margin: 5%;
display: flex;
flex-direction: column;
}
.container h1 {
margin-bottom: 1rem;
}
.form-container {
padding: 10px;
margin: 5px;
}
.primary-text {
height: 100px;
color: #df7c0f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1%;
margin: 1%;
}
.header {
font-size: 20px;
}
.mat-divider--custom-style {
background-color: #9e8b6e;
box-shadow: 0 1px 0 0 #d8d8d8;
}
@media (max-width: 400px) {
.container {
margin-left: 0%;
width: 300px;
padding-top: 5%;
}
}
@media (min-width: 401px) {
.container {
margin-left: 1%;
width: 450px;
padding-top: 10%;
}
}
@media (min-width: 768px) {
.container {
width: 550px;
padding-top: 5%;
}
}

29
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
View File

@ -1,8 +1,21 @@
<p>create-character works!</p>
<button
id="create-character-submit-button"
mat-raised-button
class="btn-primary form-container"
(click)="onCreateCharacterButton()">
CONTINUE
</button>
<div class="container">
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Create character from Template</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
<mat-list>
<mat-list-item *ngFor="let character of charactersTemplateList">
<mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line (click)="onCharacterClick()">{{character.name}}</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
<div mat-line> {{character.class}}, {{character.race}}</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
</mat-list-item>
</mat-list>
<!--<button
id="create-character-submit-button"
mat-raised-button
class="btn-primary form-container"
(click)="onCreateCharacterButton()">
CONTINUE
</button>-->
</div>

37
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
View File

@ -1,5 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { AppState } from '../../store/models/app-state.model';
import { first } from 'rxjs/operators';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
import {CharacterService } from '../../../services/character.service';
import {AddCharacterId, CreateCharacterFromTemplate} from "../../store/actions/player.action";
@Component({
selector: 'app-create-character',
@ -7,13 +15,40 @@ import { Router } from '@angular/router';
styleUrls: ['./create-character.component.css']
})
export class CreateCharacterComponent implements OnInit {
charactersTemplateList: CharacterFromTemplatesViewModel[];
constructor(private router: Router) { }
constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) { }
ngOnInit() {
this.getTemplateCharacters();
}
onCreateCharacterButton() {
this.router.navigate(['select-character']);
}
onArrowBackClick() {
this.router.navigate(['select-character']);
}
onCharacterClick() {
this.store.dispatch(new CreateCharacterFromTemplate);
}
getTemplateCharacters() {
this.characterService
.getTemplateCharacters()
.pipe(first())
.subscribe(
(charactersTemplateList) => {
this.charactersTemplateList = charactersTemplateList;
},
(error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
}
);
}
}

11
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
View File

@ -64,6 +64,17 @@ input {
}
@media (min-width: 768px) {
.container {
width: 550px;
padding-top: 0;
}
.form-container {
padding: 10px;
margin: 0px;
}
}
@media (min-width: 1800px) {
.container {
width: 550px;
padding-top: 5%;

8
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
View File

@ -47,7 +47,7 @@
@media (min-width: 768px) {
.container {
padding-top: 10%;
padding-top: 6%;
}
.button {
margin: 20px;
@ -59,3 +59,9 @@
font-size: 40px;
}
}
@media (min-width: 1800px) {
.container {
padding-top: 10%;
}
}

11
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
View File

@ -64,6 +64,17 @@ input {
}
@media (min-width: 768px) {
.container {
width: 550px;
padding-top: 0;
}
.form-container {
padding: 10px;
margin: 0px;
}
}
@media (min-width: 1800px) {
.container {
width: 550px;
padding-top: 5%;

13
SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
View File

@ -2,7 +2,8 @@ import {Action} from '@ngrx/store';
export enum PlayerActionTypes {
ADD_CHARACTER_ID= '[PLAYER] Add character id',
CLEAR_CHARACTER_ID = '[PLAYER] Clear character id'
CLEAR_CHARACTER_ID = '[PLAYER] Clear character id',
CREATED_CHARACTER_FROM_TEMPLATE = '[PLAYER] Created character from template'
}
export class AddCharacterId implements Action {
@ -21,4 +22,12 @@ export class ClearCharacterId implements Action {
}
}
export type PlayerAction = AddCharacterId | ClearCharacterId;
export class CreateCharacterFromTemplate implements Action {
readonly type = PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE;
constructor() {
}
}
export type PlayerAction = AddCharacterId | ClearCharacterId | CreateCharacterFromTemplate;

2
SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
View File

@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
switch (action.type) {
case PlayerActionTypes.ADD_CHARACTER_ID:
return {...state, characterId: action.payload.characterId};
case PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE:
return {...state};
case PlayerActionTypes.CLEAR_CHARACTER_ID:
return { characterId: null};
default:

14
SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
View File

@ -6,7 +6,8 @@ import {Either} from '../types/Either';
import {CharacterForLoginViewModel} from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
import {switchMap, retry} from 'rxjs/operators';
import {LoggedCharactersViewModel} from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
import {CharacterStatsViewModel} from "../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
import {CharacterStatsViewModel} from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import {CharacterFromTemplatesViewModel} from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
Injectable({
providedIn: 'root'
@ -56,4 +57,15 @@ export class CharacterService {
);
}
getTemplateCharacters(): Observable<CharacterFromTemplatesViewModel[]> {
return this.http.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(this.baseUrl + 'getTemplateCharacters').pipe(
switchMap(response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
}));
}
}

4
SessionCompanion/SessionCompanion/ClientApp/src/styles.css
View File

@ -41,6 +41,10 @@
opacity: 0.5;
}
.arrow-forward:hover {
opacity: 0.5;
}
/* icon in mat-form-field*/
::ng-deep mat-form-field {
color: #df7c0f !important;

6
SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts Normal file
View File

@ -0,0 +1,6 @@
export interface CharacterFromTemplatesViewModel {
id: number;
name: string;
race: string;
class: number;
}

4
SessionCompanion/SessionCompanion/Controllers/CharacterController.cs
View File

@ -116,7 +116,7 @@ namespace SessionCompanion.Controllers
/// </summary>
/// <returns>liste podstawowych informacji o postaciach z templatki</returns>
[HttpGet("getTemplateCharacters")]
public async Task<Either<ErrorResponse, List<CharacterFromTemplatesSimpleViewModel>>> GetTemplateCharacters()
public async Task<Either<List<CharacterFromTemplatesSimpleViewModel>, ErrorResponse>> GetTemplateCharacters()
{
var races = _raceService.Get().ToList();
var classes = _classService.Get().ToList();
@ -159,4 +159,4 @@ namespace SessionCompanion.Controllers
}
}
}
}
}