v3.13.0

projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.html

@@ -1,8 +1,8 @@
 <!-- Copyright 2021 Carnegie Mellon University. All Rights Reserved. -->
 <!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information. -->
 
-<div class="mb-4">
-  <h1 class="admin-header mb-0">Administration</h1>
+<div class="mb-4 container">
+  <h1 class="admin-header mb-0 pl-0">Administration</h1>
 </div>
 
 <div class="container mb-4 pb-4">
@@ -13,6 +13,7 @@ <h1 class="admin-header mb-0">Administration</h1>
     <a class="btn btn-link" routerLinkActive="active" [routerLink]="['registrar', 'players']">Players</a>
     <a class="btn btn-link" routerLinkActive="active" [routerLink]="['registrar', 'sponsors']">Sponsors</a>
     <a class="btn btn-link" routerLinkActive="active" [routerLink]="['support']">Challenges</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['notifications']">Notifications</a>
     <a class="btn btn-link" routerLinkActive="active" [routerLink]="['report']">Reports</a>
   </nav>
   <main>

projects/gameboard-ui/src/app/admin/admin.module.ts

@@ -18,6 +18,14 @@ import { ChallengeObserverComponent } from './challenge-observer/challenge-obser
 import { ChallengeReportComponent } from './challenge-report/challenge-report.component';
 import { ChallengeSpecEditorComponent } from './components/challenge-spec-editor/challenge-spec-editor.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { DeploymentAdminTeamContextMenuComponent } from './components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component';
+import { ExternalGameAdminComponent } from './components/external-game-admin/external-game-admin.component';
+import { ExternalGameAdminPlayerContextMenuComponent } from './components/external-game-admin-player-context-menu/external-game-admin-player-context-menu.component';
+import { ExternalGamePlayerStatusToStatusLightPipe } from './pipes/external-game-player-status-to-status-light.pipe';
+import { ExternalTeamToChallengeCreatedPipe } from './pipes/external-team-to-challenge-created.pipe';
+import { ExternalTeamChallengesToIsPredeployablePipe } from './pipes/external-team-challenges-to-is-predeployable.pipe';
+import { ExternalSpecIdToChallengePipe } from './pipes/external-specid-to-challenge.pipe';
+import { ExternalGamePlayerStatusToFriendlyPipe } from './pipes/external-game-player-status-to-friendly.pipe';
 import { FeedbackReportComponent } from './feedback-report/feedback-report.component';
 import { GameBonusesConfigComponent } from './components/game-bonuses-config/game-bonuses-config.component';
 import { GameDesignerComponent } from './game-designer/game-designer.component';
@@ -37,11 +45,13 @@ import { ReportPageComponent } from './report-page/report-page.component';
 import { SpecBrowserComponent } from './spec-browser/spec-browser.component';
 import { SponsorBrowserComponent } from './sponsor-browser/sponsor-browser.component';
 import { SupportReportLegacyComponent } from './support-report-legacy/support-report-legacy.component';
+import { SystemNotificationsModule } from '@/system-notifications/system-notifications.module';
 import { TeamAdminContextMenuComponent } from './components/team-admin-context-menu/team-admin-context-menu.component';
 import { TeamObserverComponent } from './team-observer/team-observer.component';
 import { UserApiKeysComponent } from './user-api-keys/user-api-keys.component';
 import { UserRegistrarComponent } from './user-registrar/user-registrar.component';
 import { UserReportComponent } from './user-report/user-report.component';
+import { AdminSystemNotificationsComponent } from '@/system-notifications/components/admin-system-notifications/admin-system-notifications.component';
 
 @NgModule({
   declarations: [
@@ -52,6 +62,14 @@ import { UserReportComponent } from './user-report/user-report.component';
     ChallengeReportComponent,
     ChallengeSpecEditorComponent,
     DashboardComponent,
+    DeploymentAdminTeamContextMenuComponent,
+    ExternalGameAdminComponent,
+    ExternalGameAdminPlayerContextMenuComponent,
+    ExternalGamePlayerStatusToStatusLightPipe,
+    ExternalSpecIdToChallengePipe,
+    ExternalGamePlayerStatusToFriendlyPipe,
+    ExternalTeamToChallengeCreatedPipe,
+    ExternalTeamChallengesToIsPredeployablePipe,
     FeedbackReportComponent,
     GameDesignerComponent,
     GameEditorComponent,
@@ -76,7 +94,6 @@ import { UserReportComponent } from './user-report/user-report.component';
     UserApiKeysComponent,
     UserRegistrarComponent,
     UserReportComponent,
-    ChallengeSpecEditorComponent,
   ],
   imports: [
     CommonModule,
@@ -87,6 +104,7 @@ import { UserReportComponent } from './user-report/user-report.component';
           { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
           { path: 'dashboard', component: DashboardComponent },
           { path: 'designer/:id', component: GameEditorComponent },
+          { path: "game/:gameId/external", component: ExternalGameAdminComponent },
           {
             path: "practice", component: PracticeComponent, children: [
               { path: "", pathMatch: "full", redirectTo: "settings" },
@@ -97,15 +115,16 @@ import { UserReportComponent } from './user-report/user-report.component';
           { path: 'registrar/users', component: UserRegistrarComponent, title: "Admin | Users" },
           { path: 'registrar/players', component: PlayerNamesComponent },
           { path: 'registrar/:id', component: PlayerRegistrarComponent },
-          { path: 'observer/challenges/:id', component: ChallengeObserverComponent },
+          { path: 'observer/challenges/:id', component: ChallengeObserverComponent, title: "Admin | Observe" },
           { path: 'observer/teams/:id', component: TeamObserverComponent },
-          { path: 'report', component: ReportPageComponent },
+          { path: 'report', component: ReportPageComponent, title: "Admin | Reports" },
           { path: 'report/users', component: UserReportComponent },
           { path: 'report/sponsors', component: PlayerSponsorReportComponent },
           { path: 'report/challenges', component: ChallengeReportComponent },
           { path: 'report/feedback', component: FeedbackReportComponent },
           { path: 'report/support', component: SupportReportLegacyComponent },
           { path: 'report/participation', component: ParticipationReportComponent },
+          { path: "notifications", component: AdminSystemNotificationsComponent },
           { path: 'support', component: ChallengeBrowserComponent }
         ]
       },
@@ -114,6 +133,7 @@ import { UserReportComponent } from './user-report/user-report.component';
     ApiModule,
     UtilityModule,
     SponsorsModule,
+    SystemNotificationsModule,
   ]
 })
 export class AdminModule { }

projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html

@@ -45,7 +45,7 @@ <h6>Automatic Bonuses</h6>
             <div class="bonuses-container mt-4">
                 <ol>
                     <li *ngFor="let bonus of scoringConfig.possibleBonuses">
-                        {{bonus.description}} ({{ bonus.pointValue }})
+                        {{bonus.description}} ({{ bonus.pointValue }} points)
                     </li>
                 </ol>
             </div>

projects/gameboard-ui/src/app/admin/components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component.html

@@ -0,0 +1,17 @@
+<div class="btn-group" *ngIf="team" dropdown>
+    <button [id]="'external-game-admin-context-menu-' + team.id" dropdownToggle type="button"
+        class="btn ctx-menu-button rounded-circle" aria-controls="dropdown-basic"
+        tooltip="Additional actions for this team">
+        <fa-icon [icon]="fa.ellipsisVertical"></fa-icon>
+    </button>
+    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="handleTeamReadyStatusToggled(team, isReady)">
+                {{ (isReady ? "Unready" : "Ready") + " Team \"" + team.name + "\"" }}
+            </button>
+        </li>
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="handleCopyClicked(team.id)">Copy team ID</button>
+        </li>
+    </ul>
+</div>

projects/gameboard-ui/src/app/admin/components/deployment-admin-team-context-menu/deployment-admin-team-context-menu.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { fa } from '@/services/font-awesome.service';
+import { SimpleEntity } from '@/api/models';
+import { SyncStartService } from '@/services/sync-start.service';
+import { firstValueFrom } from 'rxjs';
+import { ClipboardService } from '@/utility/services/clipboard.service';
+import { ToastService } from '@/utility/services/toast.service';
+
+@Component({
+  selector: 'app-deployment-admin-team-context-menu',
+  templateUrl: './deployment-admin-team-context-menu.component.html',
+  styleUrls: ['./deployment-admin-team-context-menu.component.scss']
+})
+export class DeploymentAdminTeamContextMenuComponent {
+  @Input() team?: SimpleEntity;
+  @Input() isReady = false;
+  @Output() teamReadyStateToggled = new EventEmitter<{ teamId: string, isReady: boolean }>();
+
+  protected fa = fa;
+
+  constructor(
+    private clipboardService: ClipboardService,
+    private syncStartService: SyncStartService,
+    private toastService: ToastService) { }
+
+  protected handleCopyClicked(text: string) {
+    this.clipboardService.copy(text);
+    this.toastService.showMessage(`Copied team ID "${text}" to your clipboard.`);
+  }
+
+  protected async handleTeamReadyStatusToggled(team: SimpleEntity, isReady: boolean) {
+    await firstValueFrom(this.syncStartService.updateTeamReadyState(team.id, { isReady: !isReady }));
+    this.teamReadyStateToggled.emit({ teamId: team.id, isReady: !isReady });
+  }
+}

projects/gameboard-ui/src/app/admin/components/external-game-admin-player-context-menu/external-game-admin-player-context-menu.component.html

@@ -0,0 +1,18 @@
+<div class="btn-group" *ngIf="player" dropdown>
+    <button [id]="'external-game-admin-context-menu-' + player.id" dropdownToggle type="button"
+        class="btn ctx-menu-button rounded-circle" aria-controls="dropdown-basic"
+        tooltip="{{ 'Additional actions for ' + player.name }}">
+        <fa-icon [icon]="fa.ellipsisVertical"></fa-icon>
+    </button>
+    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
+        <li role="menuitem">
+            <button class="dropdown-item btn"
+                (click)="togglePlayerReadyStatusClicked(player.id, player.isSyncStartReady)">
+                {{ (player.isSyncStartReady ? "Unready " : "Ready ") + player.name }}
+            </button>
+        </li>
+        <li role="menuitem">
+            <button class="dropdown-item btn" (click)="copy(player.id, 'player ID')">Copy player ID</button>
+        </li>
+    </ul>
+</div>

projects/gameboard-ui/src/app/admin/components/external-game-admin-player-context-menu/external-game-admin-player-context-menu.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { fa } from "@/services/font-awesome.service";
+import { PlayerService } from '@/api/player.service';
+import { firstValueFrom } from 'rxjs';
+import { ClipboardService } from '@/utility/services/clipboard.service';
+import { ToastService } from '@/utility/services/toast.service';
+import { SyncStartService } from '@/services/sync-start.service';
+
+export interface ExternalGameAdminPlayerContextMenuData {
+  id: string;
+  name: string;
+  isSyncStartReady: boolean;
+}
+
+@Component({
+  selector: 'app-external-game-admin-player-context-menu',
+  templateUrl: './external-game-admin-player-context-menu.component.html',
+  styleUrls: ['./external-game-admin-player-context-menu.component.scss']
+})
+export class ExternalGameAdminPlayerContextMenuComponent implements OnChanges {
+  @Input() player?: ExternalGameAdminPlayerContextMenuData;
+  @Output() playerReadyStateChanged = new EventEmitter<{ playerId: string, isReady: boolean }>();
+
+  protected fa = fa;
+
+  constructor(
+    private clipboardService: ClipboardService,
+    private syncStartService: SyncStartService,
+    private toastService: ToastService) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.player)
+      return;
+  }
+
+  protected copy(text: string, description: string) {
+    this.clipboardService.copy(text);
+    this.toastService.showMessage(`Copied ${description} ${text} to your clipboard.`);
+  }
+
+  protected async togglePlayerReadyStatusClicked(playerId: string, currentIsReady: boolean) {
+    const isReady = !currentIsReady;
+    await firstValueFrom(this.syncStartService.updatePlayerReadyState(playerId, { isReady }));
+    this.playerReadyStateChanged.emit({ playerId, isReady });
+  }
+}

projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.html

@@ -0,0 +1,135 @@
+<div class="external-game-admin-component py-2" *ngIf="ctx$ | async as context; else loading">
+    <h2 class="text-upper fs-10 m-0 p-0">Deployment</h2>
+    <h1>{{context.game.name}}</h1>
+    <h3 class="sync-session-date fs-12" *ngIf="sessionDateDescription">
+        {{sessionDateDescription}}
+    </h3>
+    <hr class="light" />
+
+    <div class="w-100">
+        <app-error-div [errors]="errors"></app-error-div>
+
+        <div *ngIf="context.teams.length"
+            class="global-controls-container my-2 d-flex align-items-center justify-content-end">
+            <app-confirm-button btnClass="btn btn-lg btn-info" [disabled]="!canDeploy"
+                (confirm)="handlePreDeployAllClick(context.game.id)"
+                [tooltip]="context.overallDeployStatus == 'deploying' ? 'Resources are being deployed for this game. Hang tight...' : ''">
+                Deploy All
+            </app-confirm-button>
+        </div>
+
+        <alert *ngIf="context.hasNonStandardSessionWindow" type="warning" class="my-4">
+            <h3>Warning</h3>
+
+            <p>
+                This game has been deployed and started, but there are multiple "start" and "end" dates
+                among challenges and player sessions. You may need to use the session align tool to ensure
+                these line up (coming soon™).
+            </p>
+        </alert>
+
+        <div *ngIf="context.teams.length; else noTeams"
+            class="teams-data-container my-4 d-flex flex-wrap justify-content-start">
+            <div *ngFor="let team of context.teams" class="card team-card mr-2 mb-2">
+                <div class="team-avatars-container">
+                    <app-player-avatar-list [players]="team.players"></app-player-avatar-list>
+                </div>
+                <div class="card-body">
+                    <div class="d-flex align-items-center">
+                        <h4 class="card-title flex-grow w-100">{{team.name}}</h4>
+                        <app-deployment-admin-team-context-menu class="d-block" [team]="team" [isReady]="team.isReady"
+                            (teamReadyStateToggled)="handleTeamReadyStateChanged(team.id)"></app-deployment-admin-team-context-menu>
+                    </div>
+
+                    <div class="card-text mb-4">
+                        <div class="card-section mb-4">
+                            <h5>Players</h5>
+
+                            <ul class="player-list">
+                                <li *ngFor="let player of team.players" class="d-flex align-items-center w-100">
+                                    <app-player-avatar [player]="player" size="tiny"></app-player-avatar>
+                                    <app-status-light [state]="player.status | externalGamePlayerStatusToStatusLight"
+                                        [tooltip]="player.status | externalGamePlayerStatusToFriendly"></app-status-light>
+                                    <div class="flex-grow-1">{{player.name}}</div>
+                                    <app-external-game-admin-player-context-menu
+                                        (playerReadyStateChanged)="handlePlayerReadyStateChanged($event.playerId)"
+                                        [player]="{ id: player.id, name: player.name, isSyncStartReady: player.status == 'ready'}"></app-external-game-admin-player-context-menu>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div class="card-section">
+                            <h5>Challenges</h5>
+
+                            <table class="w-100">
+                                <col>
+                                <col>
+                                <col>
+
+                                <thead class="thead-light">
+                                    <tr>
+                                        <th></th>
+                                        <th>Created</th>
+                                        <th>Deployed</th>
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    <tr *ngFor="let spec of context.specs">
+                                        <td>
+                                            <span placement="top"
+                                                [tooltip]="(spec.id | externalSpecIdToChallenge:team.challenges)?.id">
+                                                {{spec.name}}
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <span
+                                                [class.not-deployed]="!(spec.id | externalSpecIdToChallenge:team.challenges)!.challengeCreated"
+                                                [class.text-success]="(spec.id | externalSpecIdToChallenge:team.challenges)!.challengeCreated">
+                                                {{((spec.id |
+                                                externalSpecIdToChallenge:team.challenges)!.challengeCreated ? "Yes" :
+                                                "No")}}
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <span
+                                                [class.not-deployed]="!(spec.id | externalSpecIdToChallenge:team.challenges)!.gamespaceDeployed"
+                                                [class.text-success]="(spec.id | externalSpecIdToChallenge:team.challenges)!.gamespaceDeployed">
+                                                {{((spec.id |
+                                                externalSpecIdToChallenge:team.challenges)!.gamespaceDeployed
+                                                ? "Yes" : "No")}}
+                                            </span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+
+                        </div>
+
+                    </div>
+                    <button type="button" href="#" class="btn btn-info"
+                        (click)="handlePreDeployTeamClick(context.game.id, team.id)"
+                        [class.disabled]="team.deployStatus != 'notStarted' || !canDeploy">Deploy</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<ng-template #noChallenges>
+    <em>No challenges deployed</em>
+</ng-template>
+
+<ng-template #noTeams>
+    <div class="text-center my-4">
+        <em>No players or teams are currently enrolled in this game.</em>
+    </div>
+</ng-template>
+
+<ng-template #loading>
+    <div class="w-100 d-flex align-items-center justify-content-center">
+        <app-spinner>
+            <h1>Loading game data...</h1>
+        </app-spinner>
+    </div>
+</ng-template>