Add drivers detail screen in desktop client

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

@@ -14,12 +14,15 @@ import {RoutecreatorComponent} from "./routecreator/routecreator.component";
 import {TimetablecreatorComponent} from "./timetablecreator/timetablecreator.component";
 import {MessagesComponent} from "./messages/messages.component";
 import {DriversComponent} from "./drivers/drivers.component";
+import {DriverDetailComponent} from "./drivers/driver-detail/driver-detail.component";
 
 /**
  * Define the links which work in this application.
  */
 const appRoutes: Routes = [
-    { path: 'drivers', component: DriversComponent },
+    { path: 'drivers', component: DriversComponent, children: [
+        { path: ':id', component: DriverDetailComponent}
+    ] },
     { path: 'management', component: ManagementComponent },
     { path: 'messages', component: MessagesComponent },
     { path: 'routes', component: RoutesComponent },

desktop/src/app/app.module.ts

@@ -29,6 +29,7 @@ import { TimetablecreatorComponent } from './timetablecreator/timetablecreator.c
 import { MessagesComponent } from './messages/messages.component';
 import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
 import { DriversComponent } from './drivers/drivers.component';
+import { DriverDetailComponent } from './drivers/driver-detail/driver-detail.component';
 
 @NgModule({
   declarations: [
@@ -49,7 +50,8 @@ import { DriversComponent } from './drivers/drivers.component';
     RoutecreatorComponent,
     TimetablecreatorComponent,
     MessagesComponent,
-    DriversComponent
+    DriversComponent,
+    DriverDetailComponent
   ],
   imports: [
     BrowserModule,

desktop/src/app/drivers/driver-detail/driver-detail.component.css

@@ -0,0 +1 @@
+/* CSS options for the driver detail component */

desktop/src/app/drivers/driver-detail/driver-detail.component.html

@@ -0,0 +1,16 @@
+<br/><br/>
+
+<div class="row">
+
+    <div class="col">
+        <!-- Show the name -->
+        <h3 class="text-center">Name: {{driver.name}}</h3>
+        <!-- Show the contracted hours -->
+        <h3 class="text-center">Contracted Hours: {{driver.contractedHours}}</h3>
+        <!-- Show the start date -->
+        <h3 class="text-center">Start Date: {{driver.startDate}}</h3>
+    </div>
+</div>
+<div class="col text-center">
+    <button class="btn btn-primary btn-lg" style="margin: 10px;" type="submit" (click)="sackDriver(driver)">Sack Driver</button>
+</div>

desktop/src/app/drivers/driver-detail/driver-detail.component.ts

@@ -0,0 +1,55 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Params} from "@angular/router";
+import {GameService} from "../../shared/game.service";
+import {Driver} from "../driver.model";
+import {Subscription} from "rxjs";
+
+@Component({
+  selector: 'app-driver-detail',
+  templateUrl: './driver-detail.component.html',
+  styleUrls: ['./driver-detail.component.css']
+})
+/**
+ * This class implements the functionality for the driver-detail component which retrieves detailed driver information and
+ * sends it to the frontend component for rendering.
+ */
+export class DriverDetailComponent implements OnInit, OnDestroy {
+
+  driver: Driver;
+  id: number;
+  idSubscription: Subscription;
+
+  /**
+   * Construct a new driver-detail component based on the supplied information.
+   * @param gameService a service which can retrieve game information
+   * @param route a variable which contains the current driver that the user clicked on.
+   */
+  constructor(private route: ActivatedRoute, private gameService: GameService) { }
+
+  /**
+   * Initialise the vehicle information during construction and ensure all variables are set to the correct data.
+   */
+  ngOnInit(): void {
+    this.idSubscription = this.route.params.subscribe((params: Params) => {
+      this.id = +params['id'];
+      this.driver = this.gameService.getGame().drivers[this.id];
+    });
+  }
+
+  /**
+   * When destroying this component we have nothing to do so far.
+   */
+  ngOnDestroy(): void {
+  }
+
+  sackDriver(driver: Driver): void {
+    var allDrivers = this.gameService.getGame().drivers;
+    for ( var i = 0; i < allDrivers.length; i++ ) {
+      if ( this.gameService.getGame().drivers[i].name.valueOf() === driver.name.valueOf() ) {
+        this.gameService.getGame().drivers.splice(i, 1);
+      }
+    }
+    console.log('Currently the length of drivers is: ' + this.gameService.getGame().drivers.length )
+  }
+
+}