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

@@ -25,6 +25,7 @@ import {
   MatPaginatorModule,
   MatTableModule,
   MatSortModule,
+  MatDialogModule,
 } from '@angular/material';
 import { UserService } from '../services/user.service';
 import { StoreModule } from '@ngrx/store';
@@ -35,6 +36,7 @@ import { CharacterService } from '../services/character.service';
 import { AbilityCardComponent } from './components/ability-card/ability-card.component';
 import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
 import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
+import { GameMasterCharacterActionsDialogComponent } from './components/game-master-character-actions-dialog/game-master-character-actions-dialog.component';
 
 @NgModule({
   declarations: [
@@ -48,6 +50,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
     AbilityCardComponent,
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    GameMasterCharacterActionsDialogComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -66,6 +69,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
     MatSidenavModule,
     MatToolbarModule,
     MatListModule,
+    MatDialogModule,
     MatPaginatorModule,
     StoreModule.forRoot(reducers),
     StoreDevtoolsModule.instrument({
@@ -79,6 +83,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
   entryComponents: [
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    GameMasterCharacterActionsDialogComponent,
   ],
 })
 export class AppModule {}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.css

@@ -0,0 +1,12 @@
+.character-dialog-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+::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;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.html

@@ -0,0 +1,5 @@
+<h1 mat-dialog-title class="character-dialog-title">
+  {{characterName}}
+</h1>
+<div mat-dialog-content>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-game-master-character-actions-dialog',
+  templateUrl: './game-master-character-actions-dialog.component.html',
+  styleUrls: ['./game-master-character-actions-dialog.component.css'],
+})
+export class GameMasterCharacterActionsDialogComponent implements OnInit {
+  characterId: number;
+  characterName: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<GameMasterCharacterActionsDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  ngOnInit() {
+    this.characterId = this.data.characterid;
+    this.characterName = this.data.characterName;
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html

@@ -79,7 +79,7 @@
       </div>
       <mat-divider></mat-divider>
       <mat-nav-list>
-        <mat-list-item *ngFor="let loggedCharacter of loggedCharacters">
+        <mat-list-item *ngFor="let loggedCharacter of loggedCharacters" (click)="OpenCharacterDialog(loggedCharacter.id, loggedCharacter.name)">
           <mat-icon
             svgIcon="{{ loggedCharacter.class.toLowerCase() }}"
             mat-list-icon

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts

@@ -13,6 +13,8 @@ import { first } from 'rxjs/operators';
 import { LeftNavItem } from '../../../types/LeftNavItem';
 import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
 import { GameMasterArmorsTableComponent } from '../game-master-armors-table/game-master-armors-table.component';
+import { MatDialog } from '@angular/material';
+import { GameMasterCharacterActionsDialogComponent } from '../game-master-character-actions-dialog/game-master-character-actions-dialog.component';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -53,7 +55,8 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
 
   constructor(
     private signalRService: GMSignalRService,
-    private characterService: CharacterService
+    private characterService: CharacterService,
+    public dialog: MatDialog
   ) {
     this.SubscribeToEvents();
   }
@@ -96,6 +99,15 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
       );
   }
 
+  public OpenCharacterDialog(characterid: number, characterName: string) {
+    const dialogRef = this.dialog.open(
+      GameMasterCharacterActionsDialogComponent,
+      {
+        data: { characterid: characterid, characterName: characterName },
+      }
+    );
+  }
+
   ChangeMiddleComponent(componentName: string): void {
     switch (componentName) {
       case 'GameMasterSpellsTableComponent':