Closes #102

GSE-Project · Jul 17, 2016 · 0d06a21 · 0d06a21
1 parent d90b517
commit 0d06a21
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 31 deletions.
diff --git a/CitizenApplication/app/pages/home/home.html b/CitizenApplication/app/pages/home/home.html
@@ -9,7 +9,7 @@
 </ion-navbar>
 
 <ion-content padding class="home" has-header="false">
-  <!--div class="logo"></div-->
+  <div class="placeholder"></div>
   <button class="btn" (click)="requestStop()">{{ 'HOME_PAGE.RequestStop' | translate }}</button>
   <button class="btn" (click)="goToRequests()">{{ 'HOME_PAGE.Requests' | translate }}</button>
 </ion-content>
diff --git a/CitizenApplication/app/pages/home/home.scss b/CitizenApplication/app/pages/home/home.scss
@@ -17,7 +17,7 @@ ion-navbar.home {
     }
     .btn {
         width: 100%;
-        margin: 7px 0;
+        margin: 14px 0 0 0;
         // height: calc((100vh - 118px - 47vw)/2);
         flex: 1 1 auto;
         justify-content: center;
@@ -32,4 +32,7 @@ ion-navbar.home {
         flex: 1 1 auto;
         justify-content: center;
     }
+    .placeholder {
+        flex: 0.75 1 auto;
+    }
 }
diff --git a/CitizenApplication/app/pages/models/ViewRequestState.ts b/CitizenApplication/app/pages/models/ViewRequestState.ts
@@ -7,16 +7,23 @@ import {ViewObject} from './ViewObject';
 import {IRequestState} from '../../providers/model';
 import * as moment from 'moment/moment';
 
+export enum ViewRequestStates {
+    'StatePending' = 1,
+    'StateAccepting' = 2,
+    'StateRejected' = 3,
+    'StateCompleted' = 4
+}
+
 export class ViewRequestState implements ViewObject {
     id: number;
-    state: number;
+    state: string;
     pickUpTime: moment.Moment;
     lineId: number;
     busId: number;
 
     constructor(req: IRequestState) {
         this.id = req.id;
-        this.state = req.status;
+        this.state = ViewRequestStates[req.status];
         this.pickUpTime = moment(req.pickUpTime);
         this.lineId = req.lineId;
         this.busId = req.budId;

diff --git a/CitizenApplication/app/pages/request-stop/request-stop.html b/CitizenApplication/app/pages/request-stop/request-stop.html
@@ -24,7 +24,7 @@
     <ion-item (click)="showMap()">
       <ion-icon name='locate' item-left></ion-icon>
       {{"REQUEST_STOP_PAGE.From" | translate}}
-      <ion-note item-right>{{requestObj.location.toString()}}</ion-note>
+      <ion-note item-right><ion-icon name="pin"></ion-icon></ion-note>
     </ion-item>
     <ion-item>
       <ion-select [(ngModel)]="selectedLine" interface="action-sheet" (ionChange)="selectLineChanged($event)">

diff --git a/CitizenApplication/app/pages/requests/requests.html b/CitizenApplication/app/pages/requests/requests.html
@@ -8,7 +8,7 @@
   <ion-title>{{ 'REQUESTS_PAGE.Title' | translate }}</ion-title>
 </ion-navbar>
 
-<ion-content padding class="requests">
+<ion-content class="requests">
   <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content pullingText="{{'C.PullToRefresh' | translate}}" refreshingText="{{'C.Refreshing' | translate}}">
     </ion-refresher-content>
@@ -17,21 +17,36 @@
     <p>{{'C.PullToRefresh' | translate}}</p>
   </div>
   <ion-card *ngFor="let request of requests" [ngSwitch]="request.state" (click)="ionRequestActionSheet(request)">
-    <ion-card-header>
-      ID: {{request.id}} 
+    <ion-card-header class="{{request.state}}">
+      ID: {{request.id}}
     </ion-card-header>
-    <ion-card-content >
-      <table>
-        <tr><td>{{'REQUESTS_PAGE.Line' | translate}}: </td><td>{{request.lineId}}</td></tr>
-        <tr><td>{{'REQUESTS_PAGE.Bus' | translate}}: </td><td>{{request.busId}}</td></tr>
-        <tr><td>{{'REQUESTS_PAGE.Time' | translate}}: </td><td>{{request.pickUpTime.toDate() | date:'HH:mm'}}</td></tr>
-        <tr *ngSwitchCase="1"><td>{{ 'REQUESTS_PAGE.State' | translate }}:</td><td>{{ 'REQUESTS_PAGE.StatePending' | translate }}</td></tr>
-        <tr *ngSwitchCase="2"><td>{{ 'REQUESTS_PAGE.State' | translate }}:</td><td>{{ 'REQUESTS_PAGE.StateAccepting' | translate }}</td></tr>
-        <tr *ngSwitchCase="3"><td>{{ 'REQUESTS_PAGE.State' | translate }}:</td><td>{{ 'REQUESTS_PAGE.StateRejected' | translate }}</td></tr>
-        <tr *ngSwitchCase="4"><td>{{ 'REQUESTS_PAGE.State' | translate }}:</td><td>{{ 'REQUESTS_PAGE.StateCompleted' | translate }}</td></tr>
-      <div *ngSwitchDefault></div>
-      </table>
-
+    <ion-card-content>
+      <ion-list no-lines>
+        <ion-item>
+          {{'REQUESTS_PAGE.Line' | translate}}
+          <span item-right>
+          {{request.lineId}}
+        </span>
+        </ion-item>
+        <ion-item>
+          {{'REQUESTS_PAGE.Bus' | translate}}
+          <span item-right>
+          {{request.busId}} {{request.state}}
+        </span>
+        </ion-item>
+        <ion-item>
+          {{'REQUESTS_PAGE.Time' | translate}}
+          <span item-right>
+          {{request.pickUpTime.toDate() | date:'HH:mm'}}
+        </span>
+        </ion-item>
+        <ion-item>
+          {{'REQUESTS_PAGE.State' | translate}}
+          <span item-right>
+          {{'REQUESTS_PAGE.'+request.state | translate}}
+        </span>
+        </ion-item>
+      </ion-list>
     </ion-card-content>
   </ion-card>
 </ion-content>
diff --git a/CitizenApplication/app/pages/requests/requests.scss b/CitizenApplication/app/pages/requests/requests.scss
@@ -7,4 +7,37 @@
             margin-top: 10px;
         }
     }
+    ion-card {
+        background-color: #fff;
+        .item {
+            background-color: #fff !important;
+            padding: 0;
+            min-height: 2.4rem;
+        }
+        ion-label {
+            margin: 6px 4px 6px 0;
+        }
+        span[item-right] {
+            margin: 0;
+        }
+        ion-list {
+            margin-top: 0;
+        }
+        ion-card-header {
+            padding-bottom: 8px;
+            border-bottom: none;
+        }
+        ion-card-header.StatePending {
+            background-color: #FDC90C;;
+        }
+        ion-card-header.StateAccepting {
+            background-color: #159038;
+        }
+        ion-card-header.StateRejected {
+            background-color: #C31d1d;
+        }
+        ion-card-header.StateCompleted {
+            background-color: lightgrey;
+        }
+    }
 }
diff --git a/CitizenApplication/app/pages/requests/requests.ts b/CitizenApplication/app/pages/requests/requests.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef } from '@angular/core';
 import { NavController, Refresher, ActionSheet } from 'ionic-angular';
-import {ViewRequestState} from '../models';
+import {ViewRequestState, ViewRequestStates} from '../models';
 import {TransformationService} from '../../providers/transformation';
 import {TranslateService} from 'ng2-translate';
 
@@ -19,14 +19,7 @@ export class RequestsPage {
 
   public doRefresh(refresher?: Refresher) {
     this.dataAccess.getRequests().subscribe((reqs: Array<ViewRequestState>) => {
-      this.empty = false;
-      this.requests = reqs.filter(item => { // We don't care for already completed requests
-        if (item.state > 3) {
-          return false;
-        }
-        return true;
-      });
-      this.empty = this.requests.length === 0;
+      this.requestsReceived(reqs);
       if (refresher) {
         refresher.complete();
       }
@@ -71,9 +64,20 @@ export class RequestsPage {
     this.element.nativeElement.setAttribute('hidden', '');
   }
 
+  requestsReceived(reqs: Array<ViewRequestState>) {
+    this.empty = true;
+    this.requests = reqs.filter(item => { // We don't care for already completed requests
+      if (ViewRequestStates[item.state] > 3) {
+        return false;
+      }
+      this.empty = false;
+      return true;
+    });
+  }
+
   updateStates() {
-    this.dataAccess.getRequests().subscribe(res => {
-      this.requests = res;
+    this.dataAccess.getRequests().subscribe((reqs: Array<ViewRequestState>) => {
+      this.requestsReceived(reqs);
       if (this.update) {
         setTimeout(() => {
           this.updateStates();