SES-139 added dialog on character click in gm screen #62
@ -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 {}
|
||||
|
@ -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;
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
<h1 mat-dialog-title class="character-dialog-title">
|
||||
{{characterName}}
|
||||
</h1>
|
||||
<div mat-dialog-content>
|
||||
</div>
|
@ -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;
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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':
|
||||
|
Loading…
Reference in New Issue
Block a user