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

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

@@ -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%;
+  }
+}

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

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

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

@@ -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);
+        }
+      );
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css

@@ -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%;

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

@@ -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%;
+  }
+}

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

@@ -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%;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts

@@ -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;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts

@@ -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:

SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts

@@ -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);
+        }
+      }));
+  }
+
 }

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -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;

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel.ts

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

SessionCompanion/SessionCompanion/Controllers/CharacterController.cs

@@ -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
             }
         }
     }
-}
+}