Work in edit travel.

Moved routes to own module.

src/app/app-routing.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { EditTravelComponent } from './pages/edit-travel/edit-travel.component';
+import { HomeComponent } from './pages/home/home.component';
+import { NewTravelComponent } from './pages/new-travel/new-travel.component';
+import { TravelComponent } from './pages/travel/travel.component';
+
+const routes: Routes = [
+    {
+      path: '',
+      redirectTo: '/home',
+      pathMatch: 'full'
+    },
+    {
+      path: 'home',
+      component: HomeComponent
+    },
+    {
+      path: 'travel/new',
+      component: NewTravelComponent
+    },
+    {
+      path: 'travel/:id',
+      component: TravelComponent
+    },
+    {
+      path: 'travel/:id/edit',
+      component: EditTravelComponent
+    },
+    {
+      path: '**',
+      redirectTo: '/home'
+    }
+  ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.module.ts

@@ -3,12 +3,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
-import { RouterModule, ExtraOptions } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
 
 import { AppComponent } from './app.component';
-import { APP_ROUTES } from './app.routes';
 import { USER_API_URL, TRAVEL_API_URL } from './app.config';
 import { SharedModule } from './shared/shared.module';
 // import { useHash } from '../flags';
@@ -24,19 +22,12 @@ import { TravelFormComponent } from './views/travel-form/travel-form.component';
 import { NewTravelComponent } from './pages/new-travel/new-travel.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-
-const ROUTING_OPTIONS: ExtraOptions = {
-      // preloadingStrategy: CustomPreloadingStrategy,
-      useHash: false,
-      initialNavigation: 'enabled',
-      relativeLinkResolution: 'legacy'
-  };
-
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   imports: [
     BrowserModule,
-    RouterModule.forRoot(APP_ROUTES, ROUTING_OPTIONS),
+    AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,

src/app/app.routes.ts

@@ -1,33 +0,0 @@
-import { Routes } from '@angular/router';
-import { EditTravelComponent } from './pages/edit-travel/edit-travel.component';
-import { HomeComponent } from './pages/home/home.component';
-import { NewTravelComponent } from './pages/new-travel/new-travel.component';
-import { TravelComponent } from './pages/travel/travel.component';
-
-export let APP_ROUTES: Routes = [
-  {
-    path: '',
-    redirectTo: 'home',
-    pathMatch: 'full'
-  },
-  {
-    path: 'home',
-    component: HomeComponent
-  },
-  {
-    path: 'travel/new',
-    component: NewTravelComponent
-  },
-  {
-    path: 'travel/:id',
-    component: TravelComponent
-  },
-  {
-    path: 'travel/:id/edit',
-    component: EditTravelComponent
-  },
-  {
-    path: '**',
-    redirectTo: 'home'
-  }
-];

src/app/pages/home/home.component.html

@@ -1,10 +1,14 @@
+<button *ngIf="logged" mat-raised-button class="btn btn-default" (click)="newTravel()">New travel</button>
+
 <mat-card>
-  <mat-card-title>Mis viajes</mat-card-title>
+  <mat-card-title>My travels</mat-card-title>
   <app-list *ngIf="logged" (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns"
     [apiCall]="myTravelsApiCall"></app-list>
   <mat-card-content *ngIf="!logged">Logueate para ver tus viajes</mat-card-content>
 </mat-card>
 
-<h3>Viajes disponibles</h3>
-<app-list (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns" [apiCall]="travelsApiCall">
-</app-list>
+<mat-card>
+  <mat-card-title>Available travels</mat-card-title>
+  <app-list (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns"
+    [apiCall]="travelsApiCall"></app-list>
+</mat-card>

src/app/pages/home/home.component.ts

@@ -37,13 +37,17 @@ export class HomeComponent implements OnInit {
     });
   }
 
+  newTravel(): void {
+    this.router.navigateByUrl('/travel/new');
+  }
+
   travelClicked(travel: Travel): void {
     console.log(travel);
     this.router.navigateByUrl('/travel/' + travel.id);
   }
 
   loadUserProfile(): void {
-    this.oauthService.loadUserProfile().then((up) => (this.userProfile = up));
+    this.oauthService.loadUserProfile().then((userProfile) => (this.userProfile = userProfile));
   }
 
   get logged(): boolean {

src/app/pages/new-travel/new-travel.component.html

@@ -1,4 +1,4 @@
 <div>
     <h1>Nuevo viaje</h1>
-    <app-travel-form (travelSubmitted)="createTravel($event)" [travel]="travel"></app-travel-form>
+    <app-travel-form (travelSubmitted)="createTravel($event)" (travelCanceled)="cancel()" [travel]="travel" [acceptButtonText]="acceptButtonText"></app-travel-form>
 </div>

src/app/pages/new-travel/new-travel.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { TravelFormComponent } from 'src/app/views/travel-form/travel-form.component';
 import { Travel } from '../../entities/travel';
 import { ApiService } from '../../services/api.service';
@@ -10,10 +11,12 @@ import { ApiService } from '../../services/api.service';
 })
 export class NewTravelComponent implements OnInit {
   travel: Travel = new Travel();
+  acceptButtonText = 'Create';
 
   @ViewChild(TravelFormComponent, { static: true }) form: TravelFormComponent;
 
   constructor(
+    private router: Router,
     private apiService: ApiService
   ) { }
 
@@ -24,10 +27,15 @@ export class NewTravelComponent implements OnInit {
       .subscribe(res => {
         if (res.success) {
           console.log('Travel created');
+          this.router.navigateByUrl('/');
         }
         else {
           console.error('Error creating travel: ' + res.error);
         }
       });
   }
+
+  cancel(): void {
+    this.router.navigateByUrl('/');
+  }
 }

src/app/pages/travel/travel.component.html

@@ -10,4 +10,7 @@
         <p>Conductor: {{ travel.driverInfo.name }}</p><br>
         <p>{{ travel.description }}</p>
     </mat-card-content>
-</mat-card>
+</mat-card>
+
+<button mat-raised-button class="btn btn-default" (click)="goBack()">Back</button>
+<button mat-raised-button class="btn btn-default" (click)="edit()">Edit</button>

src/app/pages/travel/travel.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Travel, TravelId } from '../../entities/travel';
 import { ApiService } from '../../services/api.service';
 
@@ -14,6 +14,7 @@ export class TravelComponent implements OnInit {
   travel: Travel;
 
   constructor(
+    private router: Router,
     private apiService: ApiService,
     private route: ActivatedRoute
   ) { }
@@ -34,4 +35,11 @@ export class TravelComponent implements OnInit {
     });
   }
 
+  goBack(): void {
+    this.router.navigateByUrl('/');
+  }
+
+  edit(): void {
+    this.router.navigateByUrl('/');
+  }
 }

src/app/views/list/list.component.css

@@ -26,7 +26,7 @@
 }
 
 .travel-table {
-    min-height: 360px;
+    min-height: 150px;
     margin-top: 10px;
 }
 

src/app/views/travel-form/travel-form.component.html

@@ -1,4 +1,4 @@
-<form (ngSubmit)="onSubmit()" #travelForm="ngForm">
+<form #travelForm="ngForm">
     <div>
         <label for="departureDate">Fecha de salida</label>
         <input matInput id="departureDate" name="departureDate" [ngxMatDatetimePicker]="picker"
@@ -51,5 +51,7 @@
         </div>
     </div> -->
 
-    <button type="submit" class="btn btn-success" [disabled]="!travelForm.form.valid">Submit</button>
+    <button mat-raised-button (click)="onSubmit()" class="btn btn-default"
+        [disabled]="!travelForm.form.valid || submitted">{{acceptButtonText}}</button>
+    <button mat-raised-button (click)="onCancel()" class="btn btn-default" [disabled]="submitted">Cancel</button>
 </form>

src/app/views/travel-form/travel-form.component.ts

@@ -8,8 +8,10 @@ import { Travel } from 'src/app/entities/travel';
 })
 export class TravelFormComponent implements OnInit {
   @Output() travelSubmitted: EventEmitter<Travel> = new EventEmitter();
+  @Output() travelCanceled: EventEmitter<Travel> = new EventEmitter();
 
   @Input() travel: Travel;
+  @Input() acceptButtonText: string;
   newTravel: Travel;
   submitted = false;
   minDate = new Date();
@@ -24,4 +26,8 @@ export class TravelFormComponent implements OnInit {
     this.submitted = true;
     this.travelSubmitted.emit(this.newTravel);
   }
+
+  onCancel(): void {
+    this.travelCanceled.emit();
+  }
 }

src/styles.css

@@ -2,3 +2,7 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.mat-card {
+    margin: 20px;
+}