Add initial vehicle showroom with single model type

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

@@ -17,6 +17,7 @@ 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";
+import {VehicleshowroomComponent} from "./vehicleshowroom/vehicleshowroom.component";
 
 /**
  * Define the links which work in this application.
@@ -41,7 +42,8 @@ const appRoutes: Routes = [
     { path: 'upload', component: UploadComponent },
     { path: 'vehicles', component: VehiclesComponent, children: [
       { path: ':id', component: VehicleDetailComponent}
-    ]}
+    ]},
+    { path: 'vehicleshowroom', component: VehicleshowroomComponent },
 ];
 
 @NgModule({

desktop/src/app/app.module.ts

@@ -32,6 +32,7 @@ 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';
+import { VehicleshowroomComponent } from './vehicleshowroom/vehicleshowroom.component';
 
 @NgModule({
   declarations: [
@@ -55,7 +56,8 @@ import { DrivercreatorComponent } from './drivercreator/drivercreator.component'
     DriversComponent,
     DriverDetailComponent,
     OptionsComponent,
-    DrivercreatorComponent
+    DrivercreatorComponent,
+    VehicleshowroomComponent
   ],
   imports: [
     BrowserModule,

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

@@ -67,7 +67,7 @@ <h5 class="card-title text-center">Vehicles</h5>
                     <p class="card-text text-center">Purchase vehicles, view current vehicles and sell old vehicles.</p>
                     <!-- Show start button -->
                     <div class="col text-center">
-                        <button class="btn btn-primary btn-lg button-margin" type="submit">Purchase</button>
+                        <button class="btn btn-primary btn-lg button-margin" type="submit" (click)="onPurchaseVehicle()">Purchase</button>
                         <a class="btn btn-primary btn-lg button-margin" style="margin: 10px;" routerLinkActive="active" routerLink="/vehicles" role="button">View Depot</a>
                     </div>
                 </div>

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

@@ -48,6 +48,9 @@ export class ManagementComponent implements OnInit {
     this.router.navigate(['drivercreator']);
   }
 
+  onPurchaseVehicle(): void {
+    this.router.navigate(['vehicleshowroom']);
+  }
   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.")) {

desktop/src/app/vehicles/vehiclemodel.model.ts

@@ -8,19 +8,22 @@ export class VehicleModel {
     public seatingCapacity: number;
     public standingCapacity: number;
     public value: number;
+    public picture: string;
 
     /**
      * Construct a new VehicleModel object with the supplied data.
      * @param modelName the name of the model
      * @param seatingCapacity the seating capacity of this model
      * @param standingCapacity the standing capacity of this model
      * @param value the current selling price of this model.
+     * @param picture the current picture to be displayed of this vehicle model
      */
-    constructor ( modelName: string, seatingCapacity: number, standingCapacity: number, value: number ) {
+    constructor ( modelName: string, seatingCapacity: number, standingCapacity: number, value: number, picture: string ) {
         this.modelName = modelName;
         this.seatingCapacity = seatingCapacity;
         this.standingCapacity = standingCapacity;
         this.value = value;
+        this.picture = picture;
     }
 
 }

desktop/src/app/vehicleshowroom/vehicleshowroom.component.css

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

desktop/src/app/vehicleshowroom/vehicleshowroom.component.html

@@ -0,0 +1,71 @@
+<!-- Show the header -->
+<app-header></app-header>
+
+<!-- Jumbotron with page title -->
+<div class="jumbotron">
+    <h1 class="display-4 text-center">Vehicle Showroom</h1>
+</div>
+
+<div class="row" style="margin-top: 20px;">
+
+    <div class="col">
+        <!-- Show the vehicle picture -->
+        <img src="{{ getVehiclePicture() }}" class="mx-auto d-block" style="max-height: 500px;" alt="Vehicle Picture"/>
+    </div>
+    <div class="col">
+        <!-- Show the vehicle type -->
+        <div class="form-group top-space m-3">
+            <label for="vehicleType" style="font-weight: bold;">Type:</label>
+            <h5 id="vehicleType">{{getVehicleType()}}</h5>
+        </div>
+        <!-- Show the seating capacity -->
+        <div class="form-group top-space m-3">
+            <label for="seatingCapacity" style="font-weight: bold;">Seating Capacity:</label>
+            <h5 id="seatingCapacity">{{getVehicleSeatingCapacity()}}</h5>
+        </div>
+        <!-- Show the standing capacity -->
+        <div class="form-group top-space m-3">
+            <label for="standingCapacity" style="font-weight: bold;">Standing Capacity:</label>
+            <h5 id="standingCapacity">{{getVehicleStandingCapacity()}}</h5>
+        </div>
+        <!-- Show the delivery date -->
+        <div class="form-group top-space m-3">
+            <label for="deliveryDate" style="font-weight: bold;">Delivery Date:</label>
+            <h5 id="deliveryDate">{{getVehicleDeliveryDate()}}</h5>
+        </div>
+        <!-- Show the purchase price -->
+        <div class="form-group top-space m-3">
+            <label for="purchasePrice" style="font-weight: bold;">Purchase Price:</label>
+            <h5 id="purchasePrice">€{{getVehiclePurchasePrice()}},00</h5>
+        </div>
+        <!-- Show an input box where the user can choose the quantity -->
+        <div class="form-group top-space m-3">
+            <label for="startStop" style="font-weight: bold;">Quantity:</label>
+            <select class="form-control" [(ngModel)]="quantity" id="startStop">
+                <option *ngFor="let item of this.getPossibleQuantities()" [ngValue]="item">{{ item }}</option>
+            </select>
+        </div>
+        <!-- Show the total price -->
+        <h3 class="text-center">Total Price: €{{getTotalPrice()}},00</h3>
+    </div>
+</div>
+
+<!-- Submit button -->
+<div class="center-button">
+    <button type="submit" (click)="onPurchaseVehicle()" class="btn btn-primary btn-lg" [disabled]="checkDisablePrevious()">Previous Vehicle Type</button>
+</div>
+
+<!-- Back to Management Screen button -->
+<div class="center-button">
+    <button class="btn btn-primary btn-lg" style="margin: 10px;" type="submit" [disabled]="checkDisableNext()">Next Vehicle Type</button>
+</div>
+
+<!-- Submit button -->
+<div class="center-button">
+    <button type="submit" (click)="onPurchaseVehicle()" class="btn btn-primary btn-lg">Purchase Vehicle</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/vehicleshowroom/vehicleshowroom.component.spec.ts

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

desktop/src/app/vehicleshowroom/vehicleshowroom.component.ts

@@ -0,0 +1,83 @@
+import { Component } from '@angular/core';
+import {VehicleModel} from "../vehicles/vehiclemodel.model";
+import {GameService} from "../shared/game.service";
+import {Router} from "@angular/router";
+import {DatePipe} from "@angular/common";
+
+@Component({
+  selector: 'app-vehicleshowroom',
+  templateUrl: './vehicleshowroom.component.html',
+  styleUrls: ['./vehicleshowroom.component.css']
+})
+export class VehicleshowroomComponent {
+
+  models: VehicleModel[];
+  currentDisplay: number;
+  gameService: GameService
+  currentDate: Date
+  quantity: number;
+
+  /**
+   * Construct a new Vehicle Showroom 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.models = [new VehicleModel('MyBus Single Decker', 44, 36, 85000.0, 'assets/Bus.jpg')];
+    this.currentDisplay = 0;
+    this.quantity = 1;
+    this.currentDate = new Date();
+    this.currentDate.setDate(this.currentDate.getDate() + 5);
+  }
+
+  getVehiclePicture(): string {
+    return this.models[this.currentDisplay].picture;
+  }
+
+  getVehicleType(): string {
+    return this.models[this.currentDisplay].modelName;
+  }
+
+  getVehicleSeatingCapacity(): number {
+    return this.models[this.currentDisplay].seatingCapacity;
+  }
+
+  getVehicleStandingCapacity(): number {
+    return this.models[this.currentDisplay].standingCapacity;
+  }
+
+  getVehicleDeliveryDate(): string {
+    return this.datePipe.transform(this.currentDate, 'yyyy-MM-dd');
+  }
+
+  getVehiclePurchasePrice(): number {
+    return this.models[this.currentDisplay].value;
+  }
+
+  getPossibleQuantities(): number[] {
+    return [1,2,3,4,5,6,7,8,9,10];
+  }
+
+  getTotalPrice(): number {
+    return this.models[this.currentDisplay].value * this.quantity;
+  }
+
+  onPurchaseVehicle(): void {
+    alert('Coming Soon!');
+  }
+
+  backToManagementScreen(): void {
+    this.router.navigate(['management']);
+  }
+
+  checkDisablePrevious():boolean {
+    return this.currentDisplay === 0;
+  }
+
+  checkDisableNext():boolean {
+    return (this.currentDisplay + 1) >= this.models.length;
+  }
+
+}

desktop/src/data/scenarios/landuff.data.ts

@@ -18,7 +18,7 @@ const TARGETS = ["Serve all bus stops in Landuff.", "Ensure a frequent service o
 const MINIMUM_SATISFACTION= 70;
 
 // The type and number of supplied vehicles.
-const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0), 4)];
+const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0, 'assets/Bus.jpg'), 4)];
 
 // The supplied drivers for this scenario.
 const SUPPLIED_DRIVERS = ["Max Mustermann","Robert Mustermann","Daniela Mustermann","Daniel Mustermann"];

desktop/src/data/scenarios/longts.data.ts

@@ -18,7 +18,7 @@ const TARGETS = ["Serve all bus stops in Longts.", "Ensure a very frequent servi
 const MINIMUM_SATISFACTION= 50;
 
 // The type and number of supplied vehicles.
-const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0), 2)];
+const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0, 'assets/Bus.jpg'), 2)];
 
 // The supplied drivers for this scenario.
 const SUPPLIED_DRIVERS = ["Max Mustermann","Robert Mustermann"];

desktop/src/data/scenarios/mdorf.data.ts

@@ -18,7 +18,7 @@ const TARGETS = ["Serve all bus stops in MDorf.", "Ensure a frequent service on
 const MINIMUM_SATISFACTION= 35;
 
 // The type and number of supplied vehicles.
-const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0), 3)];
+const SUPPLIED_VEHICLES = [new SuppliedVehicles("Bus", new VehicleModel("MyBus Single Decker", 44, 36, 85000.0, 'assets/Bus.jpg'), 3)];
 
 // The supplied drivers for this scenario.
 const SUPPLIED_DRIVERS = ["Max Mustermann","Robert Mustermann","Daniela Mustermann"];