Show route information when running the desktop client locally

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

@@ -12,7 +12,7 @@ <h2 class="display-5 text-center">Balance: €{{getBalance()}}</h2>
 </div>
 
 <div class="container-fluid top-space">
-    <div class="row">
+    <div class="row" *ngIf="noRoutesExist()">
         <div class="alert alert-danger w-100 text-center" role="alert">
             Warning: No routes have been defined yet. Click "Create Route" to define a route.
         </div>

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

@@ -52,5 +52,9 @@ export class ManagementComponent implements OnInit {
     }
   }
 
+  noRoutesExist(): boolean {
+    return this.gameService.getGame().routes.length === 0;
+  }
+
 
 }

desktop/src/app/routecreator/routecreator.component.ts

@@ -68,6 +68,7 @@ export class RoutecreatorComponent implements OnInit {
     route.startStop = this.startStop;
     route.endStop = this.endStop;
     route.stops = this.stops;
+    route.company = this.gameService.getGame().companyName;
     this.gameService.getGame().addRoute(route);
     this.router.navigate(['timetablecreator'], { queryParams: { routeNumber: this.routeNumber } });
   }

desktop/src/app/routes/routes.component.html

@@ -1,24 +1,35 @@
+<!-- Show the header -->
+<app-header></app-header>
+
 <!-- Display a jumbotron component which explains what routes are and how they work in TraMS -->
 <div class="jumbotron" >
   <h1 class="display-4">Routes</h1>
   <br/>
   <p class="lead">A route connects a series of stops with one another. This ensures that customers can travel between stops. If you want to run a successful transport company then you need to ensure that you are providing the routes that your potential customers need to fulfil their needs.</p>
   <hr class="my-4">
-  <p>In this preview edition you can only view routes but in the future you will be able to add or remove routes as necessary to make your company a success.</p>
+  <p>In this preview edition you can only add or view routes but in the future you will be able to remove routes where necessary.</p>
 </div>
 
 <!-- Display a table of all route numbers and the agency running the routes which are stored in TraMS -->
 <table class="table">
   <thead class="thead-light">
     <tr>
       <th scope="col">Route Number</th>
+      <th scope="col">From</th>
+      <th scope="col">To</th>
       <th scope="col">Operator</th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let routeEl of routes, let i = index">
       <th scope="row">{{routeEl.routeNumber}}</th>
+      <td>{{routeEl.startStop}}</td>
+      <td>{{routeEl.endStop}}</td>
       <td>{{routeEl.company}}</td>
     </tr>
   </tbody>
 </table>
+
+<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/routes/routes.component.ts

@@ -3,6 +3,8 @@ import {Route} from './route.model';
 import {Subscription} from 'rxjs';
 import {DataService} from '../shared/data.service';
 import {RoutesService} from './routes.service';
+import {GameService} from "../shared/game.service";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-routes',
@@ -22,24 +24,37 @@ export class RoutesComponent implements OnInit, OnDestroy {
    * Create a new routes component which constructs a data service and a route service to retreive data from the server.
    * @param dataService which contains the HTTP connection to the server
    * @param routesService which formats the HTTP calls into a way which the frontend can read and render.
+   * @param gameService a service which retrieves game information
+   * @param router a router service provided by Angular
    */
-  constructor(private dataService: DataService, private routesService: RoutesService) { }
+  constructor(private dataService: DataService, private routesService: RoutesService, private gameService: GameService,
+              private router:Router) { }
 
   /**
    * Initialise a new routes component which maintains a list of routes that can be updated and set from the server calls.
    */
   ngOnInit(): void {
-    this.subscription = this.routesService.routesChanged.subscribe((routes: Route[]) => {
-      this.routes = routes;
-    });
-    this.routes = this.routesService.getRoutes();
+    if ( this.gameService.getGame().routes.length > 0 ) {
+      this.routes = this.gameService.getGame().routes;
+    } else {
+      this.subscription = this.routesService.routesChanged.subscribe((routes: Route[]) => {
+        this.routes = routes;
+      });
+      this.routes = this.routesService.getRoutes();
+    }
   }
 
   /**
    * Destroy the subscription when the component is destroyed.
    */
   ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    if ( this.gameService.getGame().routes.length === 0 ) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  backToManagementScreen(): void {
+    this.router.navigate(['management']);
   }
 
 }

desktop/src/app/timetablecreator/timetablecreator.component.ts

@@ -152,8 +152,7 @@ export class TimetablecreatorComponent {
     var timetable = new Timetable(this.timetableName, this.validFromDate, this.validToDate, this.frequencyPatterns);
     // Add it to the route.
     this.gameService.getGame().getRoute(this.routeNumber).addTimetable(timetable);
-    // Print alert since we do not know yet how to proceed.
-    alert('Timetable was created successfully');
+    this.router.navigate(['management']);
   }
 
 }