Dialog to create drivers in new desktop client

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

@@ -16,6 +16,7 @@ import {MessagesComponent} from "./messages/messages.component";
 import {DriversComponent} from "./drivers/drivers.component";
 import {DriverDetailComponent} from "./drivers/driver-detail/driver-detail.component";
 import {OptionsComponent} from "./options/options.component";
+import {DrivercreatorComponent} from "./drivercreator/drivercreator.component";
 
 /**
  * Define the links which work in this application.
@@ -30,6 +31,7 @@ const appRoutes: Routes = [
     { path: 'routes', component: RoutesComponent },
     { path: 'routecreator', component: RoutecreatorComponent },
     { path: 'timetablecreator', component: TimetablecreatorComponent},
+    { path: 'drivercreator', component: DrivercreatorComponent },
     { path: 'scenariolist', component: ScenariolistComponent },
     { path: 'scenarioinfo', component: ScenarioinfoComponent },
     { path: 'scenariomap', component: ScenariomapComponent },

desktop/src/app/app.module.ts

@@ -31,6 +31,7 @@ import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
 import { DriversComponent } from './drivers/drivers.component';
 import { DriverDetailComponent } from './drivers/driver-detail/driver-detail.component';
 import { OptionsComponent } from './options/options.component';
+import { DrivercreatorComponent } from './drivercreator/drivercreator.component';
 
 @NgModule({
   declarations: [
@@ -53,7 +54,8 @@ import { OptionsComponent } from './options/options.component';
     MessagesComponent,
     DriversComponent,
     DriverDetailComponent,
-    OptionsComponent
+    OptionsComponent,
+    DrivercreatorComponent
   ],
   imports: [
     BrowserModule,

desktop/src/app/drivercreator/drivercreator.component.css

@@ -0,0 +1,5 @@
+/* CSS options for the driver creator component */
+.center-button {
+    text-align: center;
+    padding-top: 10px;
+}

desktop/src/app/drivercreator/drivercreator.component.html

@@ -0,0 +1,37 @@
+<!-- Show the header -->
+<app-header></app-header>
+
+<!-- Jumbotron with page title -->
+<div class="jumbotron">
+    <h1 class="display-4 text-center">Employ Driver</h1>
+</div>
+
+<!-- Show an input box where the user can enter the name. -->
+<div class="form-group top-space m-5">
+    <label for="routeNumber" style="font-weight: bold;">Name:</label>
+    <input class="form-control" [(ngModel)]="name" type="text" id="routeNumber"/>
+</div>
+
+<!-- Show an input box where the user can choose the contracted hours -->
+<div class="form-group top-space m-5">
+    <label for="startStop" style="font-weight: bold;">Contracted Hours:</label>
+    <select class="form-control" [(ngModel)]="contractedHours" id="startStop">
+        <option *ngFor="let item of this.getPossibleContractedHours()" [ngValue]="item">{{ item }}</option>
+    </select>
+</div>
+
+<!-- Show an input box where the user can choose the starting date -->
+<div class="form-group top-space m-5">
+    <label for="startingDate" style="font-weight: bold;">Your Start Date:</label>
+    <input class="form-control" [(ngModel)]="startingDate" type="date" id="startingDate"/>
+</div>
+
+<!-- Submit button -->
+<div class="center-button">
+    <button type="submit" (click)="onSubmitDriver()" class="btn btn-primary btn-lg">Employ Driver</button>
+</div>
+
+<!-- Back to Management Screen button -->
+<div class="center-button">
+    <button class="btn btn-primary btn-lg" style="margin: 10px;" type="submit" (click)="backToManagementScreen()">Back to Management Screen</button>
+</div>

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

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

desktop/src/app/drivercreator/drivercreator.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import {GameService} from "../shared/game.service";
+import {Router} from "@angular/router";
+import {Driver} from "../drivers/driver.model";
+import {DatePipe} from "@angular/common";
+
+@Component({
+  selector: 'app-drivercreator',
+  templateUrl: './drivercreator.component.html',
+  styleUrls: ['./drivercreator.component.css']
+})
+export class DrivercreatorComponent {
+
+  name: string;
+  contractedHours: number;
+  startingDate: string;
+  gameService: GameService
+  currentDate = new Date();
+
+  /**
+   * Construct a new Driver Creator component
+   * @param gameService2 the game service containing the currently loaded game.
+   * @param router the router for navigating to other pages.
+   * @param datePipe a date pipe object for transforming dates in Angular.
+   */
+  constructor(private gameService2: GameService, public router: Router, private datePipe: DatePipe) {
+    this.gameService = gameService2;
+    this.contractedHours = 40;
+    this.startingDate = this.datePipe.transform(this.currentDate, 'yyyy-MM-dd');
+  }
+
+  /**
+   * Retrieve the list of possible contracted hours that are available.
+   */
+  getPossibleContractedHours(): number[] {
+    return [20,25,30,35,40];
+  }
+
+  onSubmitDriver(): void {
+    var driver = new Driver(this.name, this.contractedHours, this.startingDate);
+    this.gameService.getGame().addDriver(driver);
+    this.router.navigate(['management']);
+  }
+
+  backToManagementScreen(): void {
+    this.router.navigate(['management']);
+  }
+
+
+}

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

@@ -78,7 +78,7 @@ <h5 class="card-title text-center">Drivers</h5>
                     <p class="card-text text-center">Employ drivers, view current employees and sack drivers</p>
                     <!-- 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" (click)="onEmployDriver()">Employ</button>
                         <a class="btn btn-primary btn-lg button-margin" style="margin: 10px;" routerLinkActive="active" routerLink="/drivers" role="button">View Drivers</a>
                     </div>
                 </div>

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

@@ -44,6 +44,10 @@ export class ManagementComponent implements OnInit {
     this.router.navigate(['messages']);
   }
 
+  onEmployDriver(): void {
+    this.router.navigate(['drivercreator']);
+  }
+
   onResign(): void {
     if(confirm("Are you sure you want to resign from " + this.gameService.getGame().companyName + "? This will end " +
         "your game and any changes you have made will not be saved.")) {