GUI fix front page

config.xml

@@ -3,7 +3,7 @@
     <name>Northbricks</name>
     <description>http://www.northbricks.com</description>
     <author email="info@northbricks.com" href="http://www.northbricks.io/">Northbricks Team</author>
-    <content original-src="index.html" src="http://192.168.51.166:8100" />
+    <content src="index.html" />
     <access origin="*" />
     <allow-navigation href="http://ionic.local/*" />
     <allow-intent href="http://*/*" />
@@ -99,8 +99,9 @@
     <allow-navigation href="http://172.22.94.161:8100" />
     <allow-navigation href="http://192.168.1.43:8101" />
     <allow-navigation href="http://192.168.1.43:8100" />
+    <engine name="ios" spec="~4.5.4" />
     <plugin name="cordova-plugin-inappbrowser" spec="^2.0.2" />
     <allow-navigation href="http://192.168.51.83:8100" />
     <allow-navigation href="http://192.168.51.166:8100" />
-    <engine name="ios" spec="^4.5.4" />
+    <allow-navigation href="http://10.33.13.53:8100" />
 </widget>

src/pages/home/home.html

@@ -2,8 +2,8 @@
   <ion-navbar>
     <ion-title>MY BANKS</ion-title>
     <ion-buttons end>
-      <button (click)="openLogin()" ion-button outline>
-        Add bank
+      <button clear (click)="openLogin()" ion-button outline>
+        <ion-icon style="zoom:1.5;" class="iconAdd" name="add"></ion-icon>
       </button>
     </ion-buttons>
   </ion-navbar>
@@ -16,11 +16,11 @@
   </ion-refresher>
 
   <ion-slides pager class="slider">
-    <ion-slide *ngFor="let bank of banks" (click)="fetchAccounts(bank)">
+    <ion-slide *ngFor="let bank of banks">
       <div class="wrapper">
-        <header>
+        <header (click)="showBank(bank)">
           <div class="headerImage">
-            <div class="cards"></div>
+            <div [ngStyle]="{'background': 'url(../assets/banks/nordea/' + bank.shortName + '.png) no-repeat top left', 'margin-left':'18px','margin-top':'13px', 'background-size': 'contain','height':'36px','width':'36px'}"></div>
           </div>
           <div class="headerTitle">{{bank.fullName}}</div>
         </header>
@@ -32,12 +32,18 @@
         </main>
         <footer>
           <ion-item>
+            <div (click)="showActionsSheetAccounts()">
+              <div style="color:#8E8E93;font-size: 12px">
+                Select account
+              </div>
+              <div style="width: 100%;">
+                <span style="color:#000;font-weight: 500; font-size: 15px">{{selectedAccount?.iban}}</span>
+                <div float-right class="arrowDisclosure">
+                  <!-- <ion-icon class="arrowDisclosure" name="arrow-down" style="color:#C7C7CC"></ion-icon> -->
+                </div>
+              </div>
+            </div>
 
-            <ion-label class="link">
-            </ion-label>
-            <ion-select [(ngModel)]="selectedAccount" (ionChange)="onItemSelection($event)">
-              <ion-option *ngFor="let account of accounts" [value]="account">{{account.iban}}</ion-option>
-            </ion-select>
           </ion-item>
         </footer>
       </div>

src/pages/home/home.scss

@@ -17,13 +17,29 @@
     margin: 5px auto 0 auto;
 
 }
+.arrowDisclosure {
+
+    background: url(../assets/images/disclosureindicator.svg) no-repeat top left;
+    background-size: contain;
+    width: 22px;
+    height: 22px;
+    padding-right: 12px;
+    // margin: 0px auto 0 auto;
+
+
+}
+.iconAdd{
+    width: 16px;
+    height: 16px;
+}
 .cards {
 
-    background: url(../assets/images/cards.svg) no-repeat top left;
+    // background: url(../assets/banks/nordea/nordea.png) no-repeat top left;
     background-size: contain;
-    width: 20px;
-    height: 20px;
-    margin:7px;
+    width: 36px;
+    height: 36px;
+    margin-left: 18px;
+    margin-top: 13px;
     // margin: 20px auto 0 auto;
 
 }
@@ -63,17 +79,18 @@
         margin-top: 2px;
         margin-left: 2px;
         line-height: 30px;
-        img{
+        img {
             height: 20px;
 
         }
     }
     div.headerTitle{
         float: left;
         margin-left: 10px;
+        margin-top:13px;
         height: 40px;
         line-height: 30px;
-        font-size: 15px;
+        font-size: 14px;
 
     }
 }

src/pages/home/home.ts

@@ -1,6 +1,6 @@
 import { BankAuthPage } from '../bank/bank-auth/bank-auth';
 import { Component } from '@angular/core';
-import { LoadingController, ModalController, NavController } from 'ionic-angular';
+import { LoadingController, ModalController, NavController, ActionSheetController, ActionSheetButton, ActionSheet } from 'ionic-angular';
 
 import { Banks, Bank } from '../../interface/iBanks';
 import { Transaction } from '../../interface/iTransaction';
@@ -29,25 +29,56 @@ export class HomePage {
   user: User;
   accounts: Account[] = [];
   countTransactions: number = 0;
-
+  actionSheet: ActionSheet;
   constructor(public modalCtrl: ModalController,
+    private actionSheetCtrl: ActionSheetController,
     public loadingCtrl: LoadingController,
     public northbricksApi: NorthbricksApi,
     public navCtrl: NavController,
     public toastCtrl: ToastService,
     private storage: NorthbricksStorage) {
 
+
+
   }
 
-  public onItemSelection(selection) {
+  onItemSelection(selection) {
     console.log(JSON.stringify(selection));
     if (selection) {
       // console.log("item selected: " + selection.iban);
+      this.selectedAccount = selection;
       this.fetchAccountsTransactions(selection);
     } else {
       console.log("no item selected");
     }
   }
+
+  loadActionSheet() {
+    // if (this.actionSheet) {
+    //   console.log('Action sheet exists');
+    //   this.actionSheet.present();
+
+    // } else {
+    //   console.log('Action does not  exists');
+
+    //   if (this.selectedBank) {
+    //     this.fetchAccounts(this.selectedBank);
+    //   } else {
+    //     this.fetchBanks();
+    //   }
+    // }
+    this.actionSheet = this.actionSheetCtrl.create({
+      title: 'Accounts'
+    });
+    console.log(JSON.stringify(this.accounts));
+    this.accounts.forEach(element => {
+      this.actionSheet.addButton({ text: element.iban, handler: () => { this.onItemSelection(element) } });
+    });
+    this.actionSheet.present();
+
+  }
+
+
   getColor(value: string) {
     // console.log('Value is ' + value);
     if (value.toString().startsWith("-")) {
@@ -73,6 +104,8 @@ export class HomePage {
     }, error => {
       alert(error);
     });
+
+    // this.loadActionSheet();
   }
   showTransaction(transactionId: string) {
     let transactionModal = this.modalCtrl.create(TransactionPage, { bankId: this.selectedBank.id, transactionId: transactionId, accountId: this.selectedAccount.id });
@@ -90,14 +123,22 @@ export class HomePage {
     // alert(bank.id);
     this.navCtrl.push(BankPage, { bank: bank, user: this.user });
 
+  }
+  showActionsSheetAccounts() {
+    this.loadActionSheet();
+
   }
 
   fetchAccounts(bank: Bank) {
+
     this.northbricksApi.fetchAccounts(bank.id).subscribe(account => {
       console.log(JSON.stringify(account.accounts));
 
       this.accounts = account.accounts;
       this.selectedAccount = this.accounts[0];
+      console.log('Fetching accounts');
+
+
       if (this.selectedAccount != null) {
         this.fetchAccountsTransactions(this.selectedAccount);
       }
@@ -106,18 +147,12 @@ export class HomePage {
     });
   }
 
-  ionViewCanEnter() {
-
-  }
-
-
-
   AddBank(bankId: string, name: string) {
     // alert(bankId);
     let authModal = this.modalCtrl.create(BankAuthPage, { bankId: bankId, name: name });
     authModal.present();
     authModal.onDidDismiss(dismissed => {
-      this.fetchAccounts(this.selectedBank);
+      this.fetchBanks();
     });
 
   }

src/providers/auth-service-northbricks/auth-service-northbricks.ts

@@ -11,7 +11,7 @@ export class AuthServiceNorthbricksProvider {
   private oAuthUrl = `https://api.northbricks.io/oauth/authorize?client_id=sampleClientId&redirect_uri=https://localhost/oauth/token&scope=read&response_type=token`;
 
   public static accessToken: string = '';
-  public static devAccessToken: string = '22b3531c-04b5-476c-838c-f801ac5fb218';
+  public static devAccessToken: string = 'd11af3aa-e05e-4c5a-aada-1d1265045fc3';
   public tokenType: string = '';
 
   options: InAppBrowserOptions = {

src/theme/variables.scss

@@ -30,7 +30,8 @@ $colors: (
   light:      #f4f4f4,
   dark:       #222,
   navbarColor: #fff,
-  northbricksorange: #f05f40
+  northbricksorange: #f05f40,
+  toolbarTitleTextColor:#000
 );
 $toolbar-backgroud:#fff;
 $tabs-background:#3B3B3B;
@@ -55,7 +56,7 @@ $text-color:#000;
 // iOS only Sass variables can go here
 .toolbar-title.toolbar-title-md, 
 .toolbar-title.toolbar-title-ios, 
-.toolbar-title.toolbar-title-wp { color: map-get($colors, northbricksorange); }
+.toolbar-title.toolbar-title-wp { color: map-get($colors, toolbarTitleTextColor); }