Ride history functionality added

src/app/app-routing.module.ts

@@ -29,6 +29,10 @@ const routes: Routes = [
   {
     path: 'hirebike',
     loadChildren: () => import('./hirebike/hirebike.module').then( m => m.HirebikePageModule)
+  },
+  {
+    path: 'ridehistory',
+    loadChildren: () => import('./ridehistory/ridehistory.module').then( m => m.RidehistoryPageModule)
   }
 
   

src/app/app.component.ts

@@ -31,7 +31,7 @@ export class AppComponent {
     },
     {
       title: 'My Rides',
-      url: '/hirebike',
+      url: '/ridehistory',
       icon: 'clipboard'
     },
     {

src/app/hirebike/hirebike.page.ts

@@ -121,7 +121,7 @@ export class HirebikePage implements OnInit {
     });
   }
 
-  startTrip1() {
+  startTrip() {
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/rent' + '?bikeId=' + this.bikeDetails.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
@@ -138,7 +138,7 @@ export class HirebikePage implements OnInit {
 
   }
 
-  startTrip() {
+  startTrip1() {
     this.isBikeHired = true;
     this.startRideSubject.next('some value');
   }

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

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { RidehistoryPage } from './ridehistory.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RidehistoryPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class RidehistoryPageRoutingModule {}

src/app/ridehistory/ridehistory.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RidehistoryPageRoutingModule } from './ridehistory-routing.module';
+
+import { RidehistoryPage } from './ridehistory.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RidehistoryPageRoutingModule
+  ],
+  declarations: [RidehistoryPage]
+})
+export class RidehistoryPageModule {}

src/app/ridehistory/ridehistory.page.html

+<ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+      <ion-title slot="start">
+        Ride History
+      </ion-title>
+    
+    </ion-toolbar>
+  </ion-header>
+<ion-content>
+  <div class="ride-list-container" *ngIf="isRideActive">
+      <div class="ride-container" *ngFor="let ride of rides">
+          <div class="inner" (click)="showRideDetails(bike)">
+    <ion-grid>
+      <ion-row  >
+        <ion-col>
+          Bike ID
+
+        </ion-col>
+        <ion-col>
+          {{ride.bikeId}}
+        </ion-col>
+
+      </ion-row>
+      <ion-row>
+          <ion-col>
+           Price
+  
+          </ion-col>
+          <ion-col>
+            {{ride.price}}
+          </ion-col>
+          
+        </ion-row>
+        <ion-row>
+            <ion-col>
+           Distance
+    
+            </ion-col>
+            <ion-col>
+              {{ride.distance}}
+            </ion-col>
+            
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                Start-Date
+      
+              </ion-col>
+              <ion-col>
+                {{ride.startDate}}
+              </ion-col>
+              
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                 End-Date
+        
+                </ion-col>
+                <ion-col>
+                  {{ride.endDate}}
+                </ion-col>
+                
+              </ion-row>
+    </ion-grid>
+    </div>
+  </div>
+  </div>
+  <div class="ride-list-container" *ngIf="!isRideActive">
+      <div class="ride-container" *ngFor="let ride of rides">
+          <div class="inner" (click)="showRideDetails()">
+    <ion-grid>
+      <ion-row  >
+        <ion-col>
+          Bike ID
+
+        </ion-col>
+        <ion-col>
+          {{ride.bikeId}}
+        </ion-col>
+
+      </ion-row>
+      <ion-row>
+          <ion-col>
+           Price
+  
+          </ion-col>
+          <ion-col>
+            {{ride.price}}
+          </ion-col>
+          
+        </ion-row>
+        <ion-row>
+            <ion-col>
+           Distance
+    
+            </ion-col>
+            <ion-col>
+              {{ride.distance}}
+            </ion-col>
+            
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                Start-Date
+      
+              </ion-col>
+              <ion-col>
+                {{ride.startDate}}
+              </ion-col>
+              
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                 End-Date
+        
+                </ion-col>
+                <ion-col>
+                  {{ride.endDate}}
+                </ion-col>
+                
+              </ion-row>
+    </ion-grid>
+    </div>
+  </div>
+
+</div>
+
+</ion-content>
\ No newline at end of file

src/app/ridehistory/ridehistory.page.scss

+.ride-list-container{
+    position: relative;
+  
+    .bike-list-expander{
+      position: absolute;
+      font-size: 32px;
+      color: gray;
+      z-index: 200;
+      left: 46%;
+      top: -32px;
+    }
+  }
+  .ride-container{
+    height: 191px;
+    width: 100%;
+    border: 1px solid #aaaaaa;
+    border-radius: 5px;
+    box-sizing: border-box;
+    float: left;
+      width: 100%;
+      clear: both;
+  
+    div {
+      height: inherit;
+      float: left;
+    }
+  }
+  
\ No newline at end of file

src/app/ridehistory/ridehistory.page.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { RidehistoryPage } from './ridehistory.page';
+
+describe('RidehistoryPage', () => {
+  let component: RidehistoryPage;
+  let fixture: ComponentFixture<RidehistoryPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RidehistoryPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RidehistoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ridehistory/ridehistory.page.ts

+import { Component, OnInit } from '@angular/core';
+import { HttpHeaders, HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Storage } from '@ionic/storage';
+import { Router } from '@angular/router';
+import { RestService } from '../rest.service';
+import { ToastService } from '../services/toast.service';
+@Component({
+  selector: 'app-ridehistory',
+  templateUrl: './ridehistory.page.html',
+  styleUrls: ['./ridehistory.page.scss'],
+})
+export class RidehistoryPage implements OnInit {
+  rides = [];
+  rideApi: Observable<any>;
+  isRideActive=false;
+  constructor(
+    private router: Router,
+    public restService: RestService,
+    public httpClient: HttpClient,
+    private storage: Storage,
+    private toastService: ToastService
+  ) { }
+
+  ngOnInit() {
+    this.showrideHistory();
+  }
+  showrideHistory() {
+    
+
+      this.storage.get('token').then((token) => {
+        let url = 'http://193.196.52.237:8081/rent-history'
+        const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+        this.rideApi = this.httpClient.get(url, { headers });
+        this.rideApi.subscribe((resp) => {
+          console.log("rides response", resp);
+          this.rides = resp.data;
+          for (let i = 0; i < this.rides.length; i++) {
+            this.rides[i] = this.rides[i];
+            if(this.rides[i].active)
+            this.isRideActive=true;
+        }
+      });
+    }, er => {
+      //alert('Can not retrieve location');
+    }).catch((error) => {
+      //alert('Error getting location - ' + JSON.stringify(error));
+    });
+  }
+  showRideDetails() {
+    //this.router.navigateByUrl('/myreservation');
+  }
+}