Add drivers overview screen in desktop client

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

@@ -13,11 +13,13 @@ import {ManagementComponent} from './management/management.component';
 import {RoutecreatorComponent} from "./routecreator/routecreator.component";
 import {TimetablecreatorComponent} from "./timetablecreator/timetablecreator.component";
 import {MessagesComponent} from "./messages/messages.component";
+import {DriversComponent} from "./drivers/drivers.component";
 
 /**
  * Define the links which work in this application.
  */
 const appRoutes: Routes = [
+    { path: 'drivers', component: DriversComponent },
     { path: 'management', component: ManagementComponent },
     { path: 'messages', component: MessagesComponent },
     { path: 'routes', component: RoutesComponent },

desktop/src/app/app.module.ts

@@ -28,6 +28,7 @@ import { RoutecreatorComponent } from './routecreator/routecreator.component';
 import { TimetablecreatorComponent } from './timetablecreator/timetablecreator.component';
 import { MessagesComponent } from './messages/messages.component';
 import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
+import { DriversComponent } from './drivers/drivers.component';
 
 @NgModule({
   declarations: [
@@ -47,7 +48,8 @@ import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
     ScenarioinfoComponent,
     RoutecreatorComponent,
     TimetablecreatorComponent,
-    MessagesComponent
+    MessagesComponent,
+    DriversComponent
   ],
   imports: [
     BrowserModule,

desktop/src/app/drivers/driver.model.ts

@@ -0,0 +1,22 @@
+/**
+ * This class defines a model for Drivers in TraMS
+ */
+export class Driver {
+
+    public name: string;
+    public contractedHours: number;
+    public startDate: string;
+
+    /**
+     * Construct a new model for Drivers which contains the supplied data.
+     * @param name the name of this driver
+     * @param contractedHours the number of contracted hours for this driver that they are available to work
+     * @param startDate the date that the driver started working for the company in dd-mm-yyyy
+     */
+    constructor( name: string, contractedHours: number, startDate: string) {
+        this.name = name;
+        this.contractedHours = contractedHours;
+        this.startDate = startDate;
+    }
+
+}

desktop/src/app/drivers/drivers.component.css

@@ -0,0 +1 @@
+/* CSS options for the drivers component which is not currently used */

desktop/src/app/drivers/drivers.component.html

@@ -0,0 +1,40 @@
+<!-- Show the header -->
+<app-header></app-header>
+
+<!-- Display a jumbotron component which explains what drivers are and how they work in TraMS -->
+<div class="jumbotron" >
+    <h1 class="display-4 text-center">Drivers</h1>
+    <br/>
+    <p class="lead m-4">Drivers help your customers to get from A to B. Without enough drivers, your vehicles will remain in the depot and you will not be able to run reliable services.
+        But don't forget if a driver does not have enough duties then they are costing you money!</p>
+    <hr class="my-4">
+    <p class="m-4">Click on a driver to access more information about the driver.</p>
+</div>
+
+<!-- Display a table with a list of driver names that are currently available in TraMS. Clicking on the driver name
+ brings up the detailed information for that driver -->
+<div class="row">
+    <div class="col-md-4 m-4">
+        <table class="table">
+            <thead class="thead-light">
+            <tr>
+                <th scope="col">Name</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let driverEl of drivers, let i = index">
+                <td><a style="cursor:pointer" [routerLink]="[i]" routerLinkActive="active">{{driverEl.name}}</a></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Display the detailed information when a user clicks on a driver -->
+    <div class="col-md-8">
+        <router-outlet></router-outlet>
+    </div>
+</div>
+
+<div class="col text-center">
+    <button class="btn btn-primary btn-lg" style="margin: 10px;" type="submit" (click)="backToManagementScreen()">Back to Management Screen</button>
+</div>

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

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

desktop/src/app/drivers/drivers.component.ts

@@ -0,0 +1,39 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {GameService} from "../shared/game.service";
+import {Router} from "@angular/router";
+import {Driver} from "./driver.model";
+
+@Component({
+  selector: 'app-drivers',
+  templateUrl: './drivers.component.html',
+  styleUrls: ['./drivers.component.css']
+})
+export class DriversComponent implements OnInit, OnDestroy {
+
+  drivers: Driver[];
+
+  /**
+   * Create a new drivers component which currently uses game service since the server does not yet has this functionality.
+   * @param gameService a service which retrieves game information
+   * @param router a router service provided by Angular
+   */
+  constructor(private gameService: GameService, private router:Router) { }
+
+  /**
+   * Initialise a new drivers component which maintains a list of drivers.
+   */
+  ngOnInit(): void {
+    this.drivers = this.gameService.getGame().drivers;
+  }
+
+  /**
+   * Destroy the subscription when the component is destroyed.
+   */
+  ngOnDestroy(): void {
+  }
+
+  backToManagementScreen(): void {
+    this.router.navigate(['management']);
+  }
+
+}

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

@@ -2,6 +2,7 @@ import {Scenario} from "../shared/scenario.model";
 import {Route} from "../routes/route.model";
 import {Message} from "../messages/message.model";
 import {Vehicle} from "../vehicles/vehicle.model";
+import {Driver} from "../drivers/driver.model";
 
 /**
  * This class defines a model for the game that is currently loaded in the TraMS application.
@@ -17,6 +18,7 @@ export class Game {
     public routes: Route[];
     public messages: Message[];
     public vehicles: Vehicle[];
+    public drivers: Driver[];
 
     /**
      * Construct a new game which contains the supplied data.
@@ -38,6 +40,7 @@ export class Game {
         this.routes = [];
         this.messages = [];
         this.vehicles = [];
+        this.drivers = [];
     }
 
     /**
@@ -49,13 +52,21 @@ export class Game {
     }
 
     /**
-     * This method adds a vehicle to the vehicles array if we are currently saving routes locally.
+     * This method adds a vehicle to the vehicles array if we are currently saving vehicles locally.
      * @param vehicle a vehicle object with the vehicle information to add to the vehicles array.
      */
     addVehicle(vehicle: Vehicle): void {
         this.vehicles.push(vehicle);
     }
 
+    /**
+     * This method adds a driver to the drivers array if we are currently saving drivers locally.
+     * @param driver a driver object with the driver information to add to the drivers array.
+     */
+    addDriver(driver: Driver): void {
+        this.drivers.push(driver);
+    }
+
     /**
      * 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.

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

@@ -79,7 +79,7 @@ <h5 class="card-title text-center">Drivers</h5>
                     <!-- Show start button -->
                     <div class="col text-center">
                         <button class="btn btn-primary btn-lg button-margin" type="submit">Employ</button>
-                        <button class="btn btn-primary btn-lg button-margin" type="submit">View Drivers</button>
+                        <a class="btn btn-primary btn-lg button-margin" style="margin: 10px;" routerLinkActive="active" routerLink="/drivers" role="button">View Drivers</a>
                     </div>
                 </div>
             </div>

desktop/src/app/scenariolist/scenariolist.component.ts

@@ -9,6 +9,7 @@ import {SCENARIO_LANDUFF} from "../../data/scenarios/landuff.data";
 import {SCENARIO_LONGTS} from "../../data/scenarios/longts.data";
 import {SCENARIO_MDORF} from "../../data/scenarios/mdorf.data";
 import {Vehicle} from "../vehicles/vehicle.model";
+import {Driver} from "../drivers/driver.model";
 
 @Component({
   selector: 'app-scenariolist',
@@ -79,6 +80,11 @@ export class ScenariolistComponent implements OnInit {
                   '', '', 0, additionalProps));
           }
       }
+      // Add the supplied drivers.
+      var mySuppliedDrivers = this.loadScenario(scenario).suppliedDrivers;
+      for ( i = 0; i < mySuppliedDrivers.length; i++ ) {
+          this.gameService.getGame().addDriver(new Driver(mySuppliedDrivers[i], 35, this.startingDate));
+      }
       this.router.navigate(['management']);
       // this.scenarioService.createCompany(this.company, this.playerName, this.difficultyLevel, this.startingDate, scenario);
   }

desktop/src/app/vehicles/vehicles.component.ts

@@ -35,7 +35,7 @@ export class VehiclesComponent implements OnInit, OnDestroy {
               private gameService: GameService, private router:Router) { }
 
   /**
-   * Initialise a new vheicles component which maintains a list of vehicles that can be updated and set from the server calls.
+   * Initialise a new vehicles component which maintains a list of vehicles that can be updated and set from the server calls.
    */
   ngOnInit(): void {
     if ( this.gameService.getGame().vehicles.length > 0 ) {