From b49bdae96a74f9c6c9561d511139af0f1c6579ca Mon Sep 17 00:00:00 2001 From: Natalia Gawron Date: Mon, 21 Dec 2020 16:17:14 +0100 Subject: [PATCH 1/3] SES-103 WIP --- .../ClientApp/package-lock.json | 30 +++++ .../SessionCompanion/ClientApp/package.json | 126 +++++++++--------- .../ClientApp/src/app.routing.ts | 2 +- .../ClientApp/src/app/app.module.ts | 9 ++ .../select-role/select-role.component.html | 4 +- .../select-role/select-role.component.ts | 12 +- .../components/sign-in/sign-in.component.ts | 23 +++- .../ClientApp/src/app/reducers/index.ts | 19 +++ .../src/app/store/actions/app.actions.ts | 23 ++++ .../src/app/store/models/app-state.model.ts | 5 + .../src/app/store/models/app-store.model.ts | 4 + .../src/app/store/reducers/app.reducer.ts | 18 +++ 12 files changed, 201 insertions(+), 74 deletions(-) create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/reducers/index.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-store.model.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts diff --git a/SessionCompanion/SessionCompanion/ClientApp/package-lock.json b/SessionCompanion/SessionCompanion/ClientApp/package-lock.json index 9fe4ffb..8b03e92 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/package-lock.json +++ b/SessionCompanion/SessionCompanion/ClientApp/package-lock.json @@ -2610,6 +2610,36 @@ } } }, + "@ngrx/store": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-10.1.1.tgz", + "integrity": "sha512-JiSC1Y6yR2H5/FVgEDeQjXdzn20ru1Vw/4NnISHcwHT3tAn/cpT28cIh24r6HMCSqBwaqGLgCdpoi0TR2ZLkRQ==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@ngrx/store-devtools": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-10.1.1.tgz", + "integrity": "sha512-w6hsuUqOndZHnRzFaONpzjgNKIPT8wCRejhru+ZyK/L/Q9zRSyBuKLhZLf/zhZXd0qx0vHjjxltDcKoEXNfviQ==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "@ngtools/webpack": { "version": "8.3.26", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.26.tgz", diff --git a/SessionCompanion/SessionCompanion/ClientApp/package.json b/SessionCompanion/SessionCompanion/ClientApp/package.json index dd2400f..19b8d9f 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/package.json +++ b/SessionCompanion/SessionCompanion/ClientApp/package.json @@ -1,62 +1,64 @@ -{ - "name": "sessioncompanion", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "build:ssr": "ng run SessionCompanion:server:dev", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@angular/animations": "8.2.12", - "@angular/cdk": "~8.2.3", - "@angular/common": "8.2.12", - "@angular/compiler": "8.2.12", - "@angular/core": "8.2.12", - "@angular/forms": "8.2.12", - "@angular/material": "^8.2.3", - "@angular/platform-browser": "8.2.12", - "@angular/platform-browser-dynamic": "8.2.12", - "@angular/platform-server": "8.2.12", - "@angular/router": "8.2.12", - "@microsoft/signalr": "^5.0.0", - "@nguniversal/module-map-ngfactory-loader": "8.1.1", - "aspnet-prerendering": "^3.0.1", - "bootstrap": "^4.3.1", - "core-js": "^3.3.3", - "hammerjs": "^2.0.8", - "jquery": "3.4.1", - "oidc-client": "^1.9.1", - "popper.js": "^1.16.0", - "rxjs": "^6.5.3", - "zone.js": "0.9.1" - }, - "devDependencies": { - "@angular-devkit/build-angular": "^0.803.26", - "@angular/cli": "^8.3.26", - "@angular/compiler-cli": "^8.2.14", - "@angular/language-service": "^8.2.12", - "@types/jasmine": "~3.4.4", - "@types/jasminewd2": "~2.0.8", - "@types/node": "~12.11.6", - "codelyzer": "^5.2.0", - "jasmine-core": "~3.5.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "^5.0.2", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage-istanbul-reporter": "~2.1.0", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.2", - "typescript": "3.5.3" - }, - "optionalDependencies": { - "node-sass": "^4.12.0", - "protractor": "~5.4.2", - "ts-node": "~8.4.1", - "tslint": "~5.20.0" - } -} +{ + "name": "sessioncompanion", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "build:ssr": "ng run SessionCompanion:server:dev", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "8.2.12", + "@angular/cdk": "~8.2.3", + "@angular/common": "8.2.12", + "@angular/compiler": "8.2.12", + "@angular/core": "8.2.12", + "@angular/forms": "8.2.12", + "@angular/material": "^8.2.3", + "@angular/platform-browser": "8.2.12", + "@angular/platform-browser-dynamic": "8.2.12", + "@angular/platform-server": "8.2.12", + "@angular/router": "8.2.12", + "@microsoft/signalr": "^5.0.0", + "@ngrx/store": "^10.1.1", + "@ngrx/store-devtools": "^10.1.1", + "@nguniversal/module-map-ngfactory-loader": "8.1.1", + "aspnet-prerendering": "^3.0.1", + "bootstrap": "^4.3.1", + "core-js": "^3.3.3", + "hammerjs": "^2.0.8", + "jquery": "3.4.1", + "oidc-client": "^1.9.1", + "popper.js": "^1.16.0", + "rxjs": "^6.5.3", + "zone.js": "0.9.1" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^0.803.26", + "@angular/cli": "^8.3.26", + "@angular/compiler-cli": "^8.2.14", + "@angular/language-service": "^8.2.12", + "@types/jasmine": "~3.4.4", + "@types/jasminewd2": "~2.0.8", + "@types/node": "~12.11.6", + "codelyzer": "^5.2.0", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "^5.0.2", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~2.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "typescript": "3.5.3" + }, + "optionalDependencies": { + "node-sass": "^4.12.0", + "protractor": "~5.4.2", + "ts-node": "~8.4.1", + "tslint": "~5.20.0" + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts index 5fe70f9..684f3c4 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts @@ -23,7 +23,7 @@ const routes: Routes = [ pathMatch: 'full' }, { - path: 'gamemaster', + path: 'game-master', component: GameMasterDashboardComponent, pathMatch: 'full' }, diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 65581ca..196d543 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -21,6 +21,11 @@ import { MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule } from '@angular/material'; import {UserService} from '../services/user.service'; +import { StoreModule } from '@ngrx/store'; +import { StoreDevtoolsModule } from '@ngrx/store-devtools'; +import { reducers} from './reducers'; +import {AppReducer} from './store/reducers/app.reducer'; +import {environment} from '../environments/environment'; @NgModule({ declarations: [ @@ -49,6 +54,10 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), MatSidenavModule, MatToolbarModule, MatListModule, + StoreModule.forRoot({app: AppReducer}), + StoreDevtoolsModule.instrument({ + logOnly: environment.production + }) ], providers: [ UserService diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html index 97f14c4..b14ebbf 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html @@ -1,4 +1,4 @@
- - + +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts index b55c819..12bb627 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts @@ -1,5 +1,8 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; +import { Store } from '@ngrx/store'; +import {AddRole} from '../../store/actions/app.actions'; + @Component({ selector: 'app-select-role', @@ -9,14 +12,15 @@ import { Router } from '@angular/router'; export class SelectRoleComponent { isExpanded = false; - constructor(private router: Router) {} - + constructor(private router: Router, private store: Store<{ role: string }>) {} + collapse() { this.isExpanded = false; } - SignInWithRole() { - this.router.navigate(['login']) + SignInWithRole(role: string) { + this.store.dispatch(new AddRole({role: role})); + this.router.navigate(['login']); } toggle() { diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index 9961b76..3bfaec0 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -1,24 +1,31 @@ -import { Component, OnDestroy } from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; import { Router } from '@angular/router'; import {UserService} from '../../../services/user.service'; import {ErrorResponse} from '../../../types/ErrorResponse'; -import {Subscription} from 'rxjs'; +import {Observable, Subscription} from 'rxjs'; import {HttpErrorResponse} from '@angular/common/http'; +import {AppStoreModel} from '../../store/models/app-store.model'; +import { Store } from '@ngrx/store'; +import {AddUserId} from '../../store/actions/app.actions'; @Component({ selector: 'app-sign-in', templateUrl: './sign-in.component.html', styleUrls: ['./sign-in.component.css'] }) -export class SignInComponent implements OnDestroy { +export class SignInComponent implements OnDestroy, OnInit { allSubscriptions = new Subscription(); + role$: Observable; + isExpanded = false; apiError = false; apiErrorMessage = ''; - constructor(private router: Router, private formBuilder: FormBuilder, private userService: UserService) {} + constructor(private router: Router, private formBuilder: FormBuilder, + private userService: UserService, private store: Store) { + } public signInFormGroup: FormGroup = this.formBuilder.group({ signIn: this.formBuilder.group({ @@ -29,13 +36,19 @@ export class SignInComponent implements OnDestroy { }) }); + ngOnInit() { + this.role$ = this.store.select('role'); + } + onLoginButtonClick() { + console.log(this.role$); this.allSubscriptions.add( this.userService.tryLogin( this.signInFormGroup.get('signIn').value['username'], this.signInFormGroup.get('signIn').value['password']).subscribe( (success) => { - this.router.navigate(['player']); + this.store.dispatch(new AddUserId({userId: success})); + this.router.navigate([this.role$]); }, (error: ErrorResponse | HttpErrorResponse) => { if (error instanceof HttpErrorResponse) { diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/reducers/index.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/reducers/index.ts new file mode 100644 index 0000000..4f57bb0 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/reducers/index.ts @@ -0,0 +1,19 @@ +import { + ActionReducer, + ActionReducerMap, + createFeatureSelector, + createSelector, + MetaReducer +} from '@ngrx/store'; +import { environment } from '../../environments/environment'; + +export interface State { + +} + +export const reducers: ActionReducerMap = { + +}; + + +export const metaReducers: MetaReducer[] = !environment.production ? [] : []; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts new file mode 100644 index 0000000..4b2b34b --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts @@ -0,0 +1,23 @@ +import {AppStoreModel} from '../models/app-store.model'; +import { Action } from '@ngrx/store'; + +export enum AppActionTypes { + ADD_USER_ID = '[APP] Add user id', + ADD_ROLE = '[APP] Add role' +} + +export class AddUserId implements Action { + readonly type = AppActionTypes.ADD_USER_ID; + + constructor(public payload: {userId: number}) { + } +} + +export class AddRole implements Action { + readonly type = AppActionTypes.ADD_ROLE; + + constructor(public payload: {role: string}) { + } +} + +export type AppAction = AddUserId | AddRole; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts new file mode 100644 index 0000000..748e498 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts @@ -0,0 +1,5 @@ +import {AppStoreModel} from './app-store.model'; + +export interface AppState { + readonly player: AppStoreModel; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-store.model.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-store.model.ts new file mode 100644 index 0000000..ea59f54 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-store.model.ts @@ -0,0 +1,4 @@ +export interface AppStoreModel { + userId: number; + role: string; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts new file mode 100644 index 0000000..777c63a --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts @@ -0,0 +1,18 @@ +import {AppStoreModel} from '../models/app-store.model'; +import {AppAction, AppActionTypes} from '../actions/app.actions'; + +const initialState: AppStoreModel = { + userId: null, + role: '' +}; + +export function AppReducer(state: AppStoreModel = initialState, action: AppAction) { + switch (action.type) { + case AppActionTypes.ADD_USER_ID: + return {...state, userId: action.payload.userId}; + case AppActionTypes.ADD_ROLE: + return {...state, role: action.payload.role}; + default: + return state; + } +} -- 2.20.1 From f426f5029b0c1549076b585b91ca1e5e37883dc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= Date: Mon, 21 Dec 2020 16:54:22 +0100 Subject: [PATCH 2/3] Change to login to role --- .../ClientApp/src/app/app.module.ts | 2 +- .../components/sign-in/sign-in.component.ts | 19 ++++++++++++++----- .../src/app/store/models/app-state.model.ts | 2 +- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 196d543..6bed2fc 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -54,7 +54,7 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), MatSidenavModule, MatToolbarModule, MatListModule, - StoreModule.forRoot({app: AppReducer}), + StoreModule.forRoot({appState: AppReducer}), StoreDevtoolsModule.instrument({ logOnly: environment.production }) diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index 3bfaec0..12a8f7f 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -8,6 +8,7 @@ import {HttpErrorResponse} from '@angular/common/http'; import {AppStoreModel} from '../../store/models/app-store.model'; import { Store } from '@ngrx/store'; import {AddUserId} from '../../store/actions/app.actions'; +import { AppState } from 'src/app/store/models/app-state.model'; @Component({ selector: 'app-sign-in', @@ -17,14 +18,14 @@ import {AddUserId} from '../../store/actions/app.actions'; export class SignInComponent implements OnDestroy, OnInit { allSubscriptions = new Subscription(); - role$: Observable; + role$: Observable; isExpanded = false; apiError = false; apiErrorMessage = ''; constructor(private router: Router, private formBuilder: FormBuilder, - private userService: UserService, private store: Store) { + private userService: UserService, private store: Store) { } public signInFormGroup: FormGroup = this.formBuilder.group({ @@ -37,18 +38,26 @@ export class SignInComponent implements OnDestroy, OnInit { }); ngOnInit() { - this.role$ = this.store.select('role'); + this.role$ = this.store.select(s => s.appState); } onLoginButtonClick() { - console.log(this.role$); + let role = ''; + this.store.select(s => s.appState.role).subscribe((v)=>{ + role = v; + }); this.allSubscriptions.add( this.userService.tryLogin( this.signInFormGroup.get('signIn').value['username'], this.signInFormGroup.get('signIn').value['password']).subscribe( (success) => { this.store.dispatch(new AddUserId({userId: success})); - this.router.navigate([this.role$]); + //TODO zmienić na jedna linie + if (role === 'player') { + this.router.navigate([role]); + } else { + this.router.navigate([role]); + } }, (error: ErrorResponse | HttpErrorResponse) => { if (error instanceof HttpErrorResponse) { diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts index 748e498..30226ba 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts @@ -1,5 +1,5 @@ import {AppStoreModel} from './app-store.model'; export interface AppState { - readonly player: AppStoreModel; + appState: AppStoreModel; } -- 2.20.1 From 1fc3e040e7cd6f4b8000cd5fc1722a7c4dc9049f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= Date: Mon, 21 Dec 2020 16:56:32 +0100 Subject: [PATCH 3/3] merge v2 --- .../ClientApp/src/app/components/sign-in/sign-in.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index 12a8f7f..16ac96e 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -54,7 +54,7 @@ export class SignInComponent implements OnDestroy, OnInit { this.store.dispatch(new AddUserId({userId: success})); //TODO zmienić na jedna linie if (role === 'player') { - this.router.navigate([role]); + this.router.navigate(['select-character']); } else { this.router.navigate([role]); } -- 2.20.1