Add messages functionality to desktop client

desktop/package.json

@@ -13,17 +13,20 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "^16.1.6",
     "@angular/animations": "~16.1.7",
     "@angular/cdk": "^16.1.6",
     "@angular/common": "~16.1.7",
     "@angular/compiler": "~16.1.7",
     "@angular/core": "~16.1.7",
-    "@angular-devkit/build-angular": "^16.1.6",
     "@angular/forms": "~16.1.7",
     "@angular/material": "^16.1.6",
     "@angular/platform-browser": "~16.1.7",
     "@angular/platform-browser-dynamic": "~16.1.7",
     "@angular/router": "~16.1.7",
+    "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "bootstrap": "^5.3.1",
     "jquery": "^3.7.0",
     "popper.js": "^1.16.1",

desktop/src/app/app-routing.module.ts

@@ -12,12 +12,14 @@ import {VehicleDetailComponent} from './vehicles/vehicle-detail/vehicle-detail.c
 import {ManagementComponent} from './management/management.component';
 import {RoutecreatorComponent} from "./routecreator/routecreator.component";
 import {TimetablecreatorComponent} from "./timetablecreator/timetablecreator.component";
+import {MessagesComponent} from "./messages/messages.component";
 
 /**
  * Define the links which work in this application.
  */
 const appRoutes: Routes = [
     { path: 'management', component: ManagementComponent },
+    { path: 'messages', component: MessagesComponent },
     { path: 'routes', component: RoutesComponent },
     { path: 'routecreator', component: RoutecreatorComponent },
     { path: 'timetablecreator', component: TimetablecreatorComponent},

desktop/src/app/app.module.ts

@@ -26,6 +26,8 @@ import { ScenariomapComponent } from './scenariomap/scenariomap.component';
 import { ScenarioinfoComponent } from './scenarioinfo/scenarioinfo.component';
 import { RoutecreatorComponent } from './routecreator/routecreator.component';
 import { TimetablecreatorComponent } from './timetablecreator/timetablecreator.component';
+import { MessagesComponent } from './messages/messages.component';
+import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
 
 @NgModule({
   declarations: [
@@ -44,12 +46,14 @@ import { TimetablecreatorComponent } from './timetablecreator/timetablecreator.c
     ScenariomapComponent,
     ScenarioinfoComponent,
     RoutecreatorComponent,
-    TimetablecreatorComponent
+    TimetablecreatorComponent,
+    MessagesComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    FontAwesomeModule,
     FormsModule,
     BrowserAnimationsModule,
     MatProgressBarModule,

desktop/src/app/game/game.model.ts

@@ -1,5 +1,6 @@
 import {Scenario} from "../shared/scenario.model";
 import {Route} from "../routes/route.model";
+import {Message} from "../messages/message.model";
 
 /**
  * This class defines a model for the game that is currently loaded in the TraMS application.
@@ -13,6 +14,7 @@ export class Game {
     public scenario: Scenario;
     public difficultyLevel: string;
     public routes: Route[];
+    public messages: Message[];
 
     /**
      * Construct a new game which contains the supplied data.
@@ -32,6 +34,7 @@ export class Game {
         this.scenario = scenario;
         this.difficultyLevel = difficultyLevel;
         this.routes = [];
+        this.messages = [];
     }
 
     /**
@@ -42,6 +45,16 @@ export class Game {
         this.routes.push(route);
     }
 
+    /**
+     * This method adds a message to the messages array if we are currently saving messages locally.
+     * @param subject the subject of the message to add.
+     * @param content the content of the message to add.
+     * @param folder the folder of the message to add.
+     */
+    addMessage(subject: string, content: string, folder: string ): void {
+        this.messages.push(new Message(subject, content, folder));
+    }
+
     /**
      * This method returns the route object corresponding to the route number or null if none was found.
      * @param routeNumber the route number to retrieve the route object for.

desktop/src/app/management/management.component.html

@@ -26,7 +26,7 @@ <h5 class="card-title text-center">Messages</h5>
                     will also contact you via messages.</p>
                     <!-- Show start button -->
                     <div class="col text-center">
-                        <button class="btn btn-primary btn-lg button-margin" type="submit">Messages</button>
+                        <button class="btn btn-primary btn-lg button-margin" type="submit" (click)="onViewMessages()">Messages</button>
                         <button class="btn btn-primary btn-lg button-margin" type="submit">Resign</button>
                     </div>
                 </div>

desktop/src/app/management/management.component.ts

@@ -40,4 +40,8 @@ export class ManagementComponent implements OnInit {
     this.router.navigate(['routecreator']);
   }
 
+  onViewMessages(): void {
+    this.router.navigate(['messages']);
+  }
+
 }

desktop/src/app/messages/message.model.ts

@@ -0,0 +1,17 @@
+/**
+ * This class defines a model for Messages in TraMS.
+ */
+export class Message {
+
+    public subject: string;
+    public content: string;
+    public folder: string;
+
+    constructor(subject: string, content: string, folder: string) {
+        this.subject = subject;
+        this.content = content;
+        this.folder = folder;
+    }
+
+
+}

desktop/src/app/messages/messages.component.css

@@ -0,0 +1,3 @@
+.nav-background-color {
+    background-color: whitesmoke;
+}

desktop/src/app/messages/messages.component.html

@@ -0,0 +1,33 @@
+<!-- Show the header -->
+<app-header></app-header>
+
+<!-- Jumbotron with page title -->
+<div class="jumbotron">
+    <h1 class="display-4 text-center">Messages</h1>
+</div>
+
+<div class="row">
+    <div class="col-2 nav-background-color">
+        <div class="m-5">
+            <span (click)="onInboxSelect()"><fa-icon [icon]="faInbox"></fa-icon> INBOX</span>
+        </div>
+        <div class="m-5">
+            <span (click)="onOutboxSelect()"><fa-icon [icon]="faSnareFromSquare"></fa-icon> OUTBOX</span>
+        </div>
+        <div class="m-5">
+            <span (click)="onSentSelect()"><fa-icon [icon]="faEnvelopeCircleCheck"></fa-icon> SENT ITEMS</span>
+        </div>
+        <div class="m-5">
+            <span (click)="onTrashSelect()"><fa-icon [icon]="faTrash"></fa-icon> TRASH</span>
+        </div>
+    </div>
+    <div class="col-10">
+        <div *ngIf="displayMessages.length === 0">
+            <h1>There are no messages in this folder.</h1>
+        </div>
+        <div *ngFor="let message of displayMessages, let i = index">
+            <h2>{{message.subject}}</h2>
+            <p style="white-space: pre-wrap">{{message.content}}</p>
+        </div>
+    </div>
+</div>

desktop/src/app/messages/messages.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessagesComponent]
+    });
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

desktop/src/app/messages/messages.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { faInbox } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelopeCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { faShareFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import {Message} from "./message.model";
+import {GameService} from "../shared/game.service";
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent {
+  faInbox = faInbox;
+  faEnvelopeCircleCheck = faEnvelopeCircleCheck;
+  faSnareFromSquare = faShareFromSquare;
+  faTrash = faTrash;
+  displayMessages: Message[];
+  gameService: GameService;
+
+  constructor(private gameService2: GameService) {
+    this.displayMessages = [];
+    this.gameService = gameService2;
+    this.onInboxSelect();
+  }
+
+  onInboxSelect(): void {
+    this.displayMessages = this.gameService.getGame().messages.filter(this.checkForInbox);
+  }
+
+  checkForInbox(message) {
+    return message.folder.valueOf() === "INBOX";
+  }
+
+  onOutboxSelect(): void {
+    this.displayMessages = this.gameService.getGame().messages.filter(this.checkForOutbox);
+  }
+
+  checkForOutbox(message) {
+    return message.folder.valueOf() === "OUTBOX";
+  }
+
+  onSentSelect(): void {
+    this.displayMessages = this.gameService.getGame().messages.filter(this.checkForSentItems);
+  }
+
+  checkForSentItems(message) {
+    return message.folder.valueOf() === "SENT ITEMS";
+  }
+
+  onTrashSelect(): void {
+    this.displayMessages = this.gameService.getGame().messages.filter(this.checkForTrash);
+  }
+
+  checkForTrash(message) {
+    return message.folder.valueOf() === "TRASH";
+  }
+}