added snackbar

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -27,6 +27,7 @@ import {
   MatSortModule,
   MatDialogModule,
   MatTooltipModule,
+  MatSnackBarModule,
 } from '@angular/material';
 import { UserService } from '../services/user.service';
 import { StoreModule } from '@ngrx/store';
@@ -52,6 +53,8 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
 import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component';
 import { SendMessageActionComponent } from './components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component';
 import { DynamicModule } from 'ng-dynamic-component';
+import { SnackbarComponent } from './shared/snackbar/snackbar.component';
+import { MessageDialogComponent } from './shared/message-dialog/message-dialog.component';
 
 @NgModule({
   declarations: [
@@ -73,6 +76,8 @@ import { DynamicModule } from 'ng-dynamic-component';
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     SendMessageActionComponent,
+    SnackbarComponent,
+    MessageDialogComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -102,6 +107,7 @@ import { DynamicModule } from 'ng-dynamic-component';
     MatTooltipModule,
     MatRadioModule,
     DynamicModule,
+    MatSnackBarModule,
   ],
   providers: [
     UserService,
@@ -124,6 +130,8 @@ import { DynamicModule } from 'ng-dynamic-component';
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     SendMessageActionComponent,
+    SnackbarComponent,
+    MessageDialogComponent,
   ],
 })
 export class AppModule {}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts

@@ -4,9 +4,11 @@ import { first } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from 'src/app/store/models/app-state.model';
 import { AbilitiesComponent } from '../abilities/abilities.component';
-import {ClearStore, ClearUserId} from '../../store/actions/app.actions';
+import { ClearStore, ClearUserId } from '../../store/actions/app.actions';
 import { Router } from '@angular/router';
-import {ClearCharacterId} from "../../store/actions/player.action";
+import { ClearCharacterId } from '../../store/actions/player.action';
+import { MatSnackBar } from '@angular/material';
+import { SnackbarComponent } from '../../shared/snackbar/snackbar.component';
 
 @Component({
   selector: 'app-player-dashboard',
@@ -18,17 +20,26 @@ export class PlayerDashboardComponent implements OnInit {
   isExpanded = false;
   selected = false;
 
-  constructor(private signalRService: PlayerSignalRService, private store: Store<AppState>, private router: Router) {}
+  constructor(
+    private signalRService: PlayerSignalRService,
+    private store: Store<AppState>,
+    private router: Router,
+    private _snackBar: MatSnackBar
+  ) {}
 
   ngOnInit() {
-    this.store.select(s => s.playerStore.characterId).pipe(first()).subscribe((id) => {
-      this.signalRService.Login(id);
-      this.SwitchMiddleComponent('AbilitiesComponent');
-    });
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((id) => {
+        this.SubscribeToEvents();
+        this.signalRService.Login(id);
+        this.SwitchMiddleComponent('AbilitiesComponent');
+      });
   }
 
   toggle() {
-      this.isExpanded = !this.isExpanded;
+    this.isExpanded = !this.isExpanded;
   }
 
   SwitchMiddleComponent(componentName: string) {
@@ -43,4 +54,23 @@ export class PlayerDashboardComponent implements OnInit {
     this.store.dispatch(new ClearStore());
     this.router.navigate(['/']);
   }
+
+  private SubscribeToEvents(): void {
+    this.signalRService.runMethod.subscribe(
+      (result: { methodName: string; parameters }) => {
+        switch (result.methodName) {
+          case 'MessageFromGameMaster':
+            this._snackBar.openFromComponent(SnackbarComponent, {
+              horizontalPosition: 'end',
+              verticalPosition: 'top',
+              data: {
+                message: 'New message from GM',
+                methodName: result.methodName,
+                gmMessage: result.parameters.message,
+              },
+            });
+        }
+      }
+    );
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.css

@@ -0,0 +1,11 @@
+::ng-deep .mat-dialog-container {
+  background-color: #4a5867;
+  color: whitesmoke;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 5px 20px 4px #d8d8d8;
+}
+
+.message-dialog-title {
+  font: 15px/20px Roboto, 'Helvetica Neue', sans-serif;
+  text-align: justify;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.html

@@ -0,0 +1,3 @@
+<div mat-dialog-title class="message-dialog-title">
+  {{data.message}}
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.ts

@@ -0,0 +1,16 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-message-dialog',
+  templateUrl: './message-dialog.component.html',
+  styleUrls: ['./message-dialog.component.css'],
+})
+export class MessageDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<MessageDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  ngOnInit() {}
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts

@@ -1,12 +1,15 @@
 import { Inject, Injectable } from '@angular/core';
 import { SignalRService } from './base/signalR.service';
+import { Subject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class PlayerSignalRService {
   signalR: SignalRService;
+  runMethod: Subject<{ methodName: string; parameters: {} }>;
 
   constructor(@Inject('BASE_URL') baseUrl: string) {
     this.signalR = new SignalRService(baseUrl);
+    this.runMethod = new Subject<{ methodName: string; parameters: {} }>();
     this.registerOnServerEvents();
   }
 
@@ -21,5 +24,14 @@ export class PlayerSignalRService {
   }
 
   private registerOnServerEvents(): void {
+    this.signalR.hubConnection.on(
+      'MessageFromGameMaster',
+      (message: string) => {
+        this.runMethod.next({
+          methodName: 'MessageFromGameMaster',
+          parameters: { message: message },
+        });
+      }
+    );
   }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.css

@@ -0,0 +1,5 @@
+.flex {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.html

@@ -0,0 +1,11 @@
+<div class="flex">
+  <div class="data">{{message}}</div>
+  <div class="dismiss">
+    <button mat-icon-button (click)="ClickAction()">
+      <mat-icon>remove_red_eye</mat-icon>
+    </button>
+    <button mat-icon-button (click)="snackBarRef.dismiss()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import {
+  MAT_SNACK_BAR_DATA,
+  MatDialog,
+  MatSnackBarRef,
+} from '@angular/material';
+import { MessageDialogComponent } from '../message-dialog/message-dialog.component';
+
+@Component({
+  selector: 'app-snackbar',
+  templateUrl: './snackbar.component.html',
+  styleUrls: ['./snackbar.component.css'],
+})
+export class SnackbarComponent implements OnInit {
+  message: string = '';
+  constructor(
+    public snackBarRef: MatSnackBarRef<SnackbarComponent>,
+    @Inject(MAT_SNACK_BAR_DATA) public data: any,
+    public dialog: MatDialog
+  ) {}
+
+  ngOnInit() {
+    this.message = this.data.message;
+  }
+
+  ClickAction() {
+    switch (this.data.methodName) {
+      case 'MessageFromGameMaster':
+        this.ShowMessageFromGM();
+        break;
+    }
+  }
+
+  ShowMessageFromGM() {
+    this.dialog.open(MessageDialogComponent, {
+      height: '500px',
+      data: { message: this.data.gmMessage },
+    });
+    this.snackBarRef.dismiss();
+  }
+}