Skip to content

Commit

Permalink
Menu Bar and Options Screen in new desktop client
Browse files Browse the repository at this point in the history
  • Loading branch information
daveajlee committed Sep 29, 2023
1 parent d7c948c commit 5b5f87d
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 36 deletions.
2 changes: 1 addition & 1 deletion desktop/angular.json
Expand Up @@ -30,7 +30,7 @@
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
},
"configurations": {
Expand Down
2 changes: 2 additions & 0 deletions desktop/src/app/app-routing.module.ts
Expand Up @@ -15,6 +15,7 @@ import {TimetablecreatorComponent} from "./timetablecreator/timetablecreator.com
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";

/**
* Define the links which work in this application.
Expand All @@ -25,6 +26,7 @@ const appRoutes: Routes = [
] },
{ path: 'management', component: ManagementComponent },
{ path: 'messages', component: MessagesComponent },
{ path: 'options', component: OptionsComponent },
{ path: 'routes', component: RoutesComponent },
{ path: 'routecreator', component: RoutecreatorComponent },
{ path: 'timetablecreator', component: TimetablecreatorComponent},
Expand Down
4 changes: 3 additions & 1 deletion desktop/src/app/app.module.ts
Expand Up @@ -30,6 +30,7 @@ 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';
import { OptionsComponent } from './options/options.component';

@NgModule({
declarations: [
Expand All @@ -51,7 +52,8 @@ import { DriverDetailComponent } from './drivers/driver-detail/driver-detail.com
TimetablecreatorComponent,
MessagesComponent,
DriversComponent,
DriverDetailComponent
DriverDetailComponent,
OptionsComponent
],
imports: [
BrowserModule,
Expand Down
69 changes: 35 additions & 34 deletions desktop/src/app/header/header.component.html
Expand Up @@ -2,41 +2,42 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Show the TraMS logo -->
<a routerLink="/"><img src="assets/trams-menu-logo.png" alt="TraMS" class="img-responsive img-max-height"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Show the navigation bar with the options including drop down menus as required -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- File Dropdown -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="fileDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
File
</a>
</li>
<!-- Tools Dropdown -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="toolsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
</li>
<!-- Help Dropdown -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="helpDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
</li>
<!-- Dropdown menu to manage options -->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
Show the Upload GTFS file option
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" routerLinkActive="active" routerLink="/upload">Upload Data File</a>
</div>
</li>-->
<!-- File Dropdown -->
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
File
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">New Game</a></li>
<li><a class="dropdown-item" href="#">Load Game</a></li>
<hr/>
<li><a class="dropdown-item" href="#">Save Game</a></li>
<hr/>
<li><a class="dropdown-item" href="#">Exit Game</a></li>
</ul>
</div>

<!-- Tools Dropdown -->
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Tools
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" routerLink="/options">Options</a></li>
</ul>
</div>

<!-- Help Dropdown -->
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Help
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Contents</a></li>
<hr/>
<li><a class="dropdown-item" href="#">About</a></li>
</ul>
</div>

</nav>
Empty file.
44 changes: 44 additions & 0 deletions desktop/src/app/options/options.component.html
@@ -0,0 +1,44 @@
<!-- Show the header -->
<app-header></app-header>

<!-- Jumbotron with page title -->
<div class="jumbotron">
<h1 class="display-4 text-center">Options</h1>
</div>

<div class="row justify-content-center m-5">
<div class="col justify-content-center">
<h2 class="text-center">Difficulty</h2>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Difficulty Level</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" value="easy" name="level" [ngModel]="level" (change)="changeLevel($event)"/><span class="m-3">Easy</span></td>
<td>Minimal delays requiring little intervention</td>
</tr>
<tr>
<td><input type="radio" value="intermediate" name="level" [ngModel]="level" (change)="changeLevel($event)"/><span class="m-3">Intermediate</span></td>
<td>Minimal delays requiring intervention</td>
</tr>
<tr>
<td><input type="radio" value="medium" name="level" [ngModel]="level" (change)="changeLevel($event)"/><span class="m-3">Medium</span></td>
<td class="m-3">Frequent delays requiring occasional intervention</td>
</tr>
<tr>
<td><input type="radio" value="hard" name="level" [ngModel]="level" (change)="changeLevel($event)"/><span class="m-3">Hard</span></td>
<td class="m-3">Regular substantial delays</td>
</tr>
</tbody>
</table>
</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>
21 changes: 21 additions & 0 deletions desktop/src/app/options/options.component.spec.ts
@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { OptionsComponent } from './options.component';

describe('OptionsComponent', () => {
let component: OptionsComponent;
let fixture: ComponentFixture<OptionsComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [OptionsComponent]
});
fixture = TestBed.createComponent(OptionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
31 changes: 31 additions & 0 deletions desktop/src/app/options/options.component.ts
@@ -0,0 +1,31 @@
import { Component } from '@angular/core';
import {Router} from "@angular/router";
import {GameService} from "../shared/game.service";

@Component({
selector: 'app-options',
templateUrl: './options.component.html',
styleUrls: ['./options.component.css']
})
export class OptionsComponent {

level: string;

/**
* Create a new options component.
* @param gameService a service which retrieves game information
* @param router a router service provided by Angular
*/
constructor(private gameService: GameService, private router:Router) {
this.level = gameService.getGame().difficultyLevel.toLowerCase();
}

backToManagementScreen(): void {
this.router.navigate(['management']);
}

changeLevel(e): void {
this.gameService.getGame().difficultyLevel = e.target.value;
}

}

0 comments on commit 5b5f87d

Please sign in to comment.