FEATURE: Adding settings and user profile

* fixed bug in card closing injected during other work
 * fixed modal close
 *

DynamicBibleIonic/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { Platform, MenuController, Nav } from 'ionic-angular';
 import { StatusBar, Splashscreen } from 'ionic-native';
 
 import {SearchPage} from "../pages/search/search";
+import {SettingsPage} from "../pages/settings/settings";
 
 @Component({
     templateUrl: 'app.html'
@@ -24,7 +25,8 @@ export class MyApp {
 
         // set our app's pages
         this.pages = [
-            { title: 'Dynamic Bible', component: SearchPage }
+            { title: 'Search', component: SearchPage },
+            { title: 'Settings', component: SettingsPage }
         ];
     }
 

DynamicBibleIonic/src/app/app.module.ts

@@ -1,9 +1,14 @@
 import { NgModule, ErrorHandler  } from '@angular/core';
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
-import { MyApp } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { Storage } from '@ionic/storage';
+
+import { MyApp } from './app.component';
+
 import {SearchPage} from "../pages/search/search";
+import {SettingsPage} from "../pages/settings/settings";
+
 import {ComponentLoader} from "../components/component-loader/component-loader.ts";
 import {Passage} from "../components/passage/passage.ts";
 import {Strongs} from "../components/strongs/strongs.ts";
@@ -13,6 +18,7 @@ import {StrongsModal} from "../components/strongs-modal/strongs-modal.ts";
     declarations: [
         MyApp,
         SearchPage,
+        SettingsPage,
         ComponentLoader,
         Passage,
         Strongs,
@@ -26,10 +32,11 @@ import {StrongsModal} from "../components/strongs-modal/strongs-modal.ts";
     entryComponents: [
         MyApp,
         SearchPage,
+        SettingsPage,
         Passage,
         Strongs,
         StrongsModal,
     ],
-    providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
+    providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }, Storage]
 })
 export class AppModule { }

DynamicBibleIonic/src/components/passage/passage.ts

@@ -7,7 +7,7 @@ export class Passage {
     @Output()
     onStrongs = new EventEmitter<string>();
     @Output()
-    onClose = new EventEmitter<BiblePassageResult>();
+    onClose = new EventEmitter<CardItem>();
 
     @Input()
     item: BiblePassageResult;
@@ -15,11 +15,14 @@ export class Passage {
     @Input()
     dict: string;
 
+    @Input()
+    cardItem: CardItem;
+
     constructor() {
     }
 
     close() {
-        this.onClose.emit(this.item);
+        this.onClose.emit(this.cardItem);
     }
     openStrongs(strongs: string) {
         this.onStrongs.emit(this.dict+strongs);

DynamicBibleIonic/src/components/strongs-modal/strongs-modal.html

@@ -4,9 +4,8 @@
             Strongs: {{item.prefix}}{{item.sn}}
         </ion-title>
         <ion-buttons start>
-            <button ion-button (click)="dismiss()">
+            <button ion-button (click)="dismiss()" large>
-                <span color="primary" showWhen="ios">Cancel</span>
+                <ion-icon name="md-close"></ion-icon>
-                <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
             </button>
         </ion-buttons>
     </ion-toolbar>

DynamicBibleIonic/src/components/strongs-modal/strongs-modal.ts

@@ -1,5 +1,5 @@
 import {Component} from "@angular/core";
-import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';
+import { Platform, NavParams, ViewController } from 'ionic-angular';
 
 @Component({
     selector: "strongs-modal",

DynamicBibleIonic/src/components/strongs/strongs.ts

@@ -6,15 +6,18 @@ import {EventEmitter, Component, Input, Output} from "@angular/core";
 })
 export class Strongs {
     @Output()
-    onClose = new EventEmitter<StrongsResult>();
+    onClose = new EventEmitter<CardItem>();
 
     @Input()
     item: StrongsResult;
 
+    @Input()
+    cardItem: CardItem;
+
     constructor() {
     }
 
     close() {
-        this.onClose.emit(this.item);
+        this.onClose.emit(this.cardItem);
     }
 }

DynamicBibleIonic/src/pages/search/search.html

@@ -1,15 +1,15 @@
 <ion-header>
     <ion-navbar>
-        <button menuToggle item-left large>
+        <ion-searchbar (search)="getQuery($event)" (input)="setQuery($event)"></ion-searchbar>
+        <button menuToggle item-left large clear>
             <ion-icon name="menu"></ion-icon>
         </button>
-        <ion-searchbar (search)="getQuery($event)" (input)="setQuery($event)"></ion-searchbar>
     </ion-navbar>
 </ion-header>
 <ion-content padding class="search-card">
     <ion-card *ngFor="let item of items" (swipe)="removeItem(item)">
-        <passage *ngIf="isPassage(item.type)" [item]="item.data" [dict]="item.dict" (onStrongs)="getItems($event)" (onClose)="removeItem($event)"></passage>
+        <passage *ngIf="isPassage(item.type)" [cardItem]="item" [item]="item.data" [dict]="item.dict" (onStrongs)="getItems($event)" (onClose)="removeItem($event)"></passage>
-        <strongs *ngIf="isStrongs(item.type)" [item]="item.data" (onClose)="removeItem($event)"></strongs>
+        <strongs *ngIf="isStrongs(item.type)" [cardItem]="item" [item]="item.data" (onClose)="removeItem($event)"></strongs>
         <button ion-button icon-left clear small (click)="removeItem(item)">
             <ion-icon name="close-circle"></ion-icon>
             <div>Close</div>

DynamicBibleIonic/src/pages/search/search.scss

@@ -1,4 +1,4 @@
-.search-card .content {
+.search-card {
     p {
         margin: 20px 0;
         line-height: 22px;

DynamicBibleIonic/src/pages/search/search.ts

@@ -6,8 +6,8 @@ import {LoadingController, ModalController } from "ionic-angular";
 import {StrongsService} from "../../strongs-service";
 import {Strongs} from "../../components/strongs/strongs";
 import {Passage} from "../../components/passage/passage.ts";
-import {ComponentLoader} from "../../components/component-loader/component-loader.ts";
 import {StrongsModal} from "../../components/strongs-modal/strongs-modal.ts";
+import {Storage} from '@ionic/storage';
 
 class Item {
     id: number;
@@ -22,15 +22,27 @@ class Item {
 })
 export class SearchPage {
     searchQuery: string = "";
-    items: any[];
+    items: CardItem[];
     last: number;
+    user: User = { strongs_modal: true };
 
     constructor(
-          private strongsService: StrongsService
+        private strongsService: StrongsService
         , private bibleService: BibleService
         , public loadingCtrl: LoadingController
-        , public modalCtrl: ModalController) {
+        , public modalCtrl: ModalController
+        , public local: Storage) {
         this.initializeItems();
+        // Check if there is a profile saved in local storage
+        this.local.get('profile').then(profile => {
+            if (profile === null) {
+                this.local.set('profile', JSON.stringify(this.user));
+            }
+            else
+                this.user = JSON.parse(profile);
+        }).catch(error => {
+            console.log(error);
+        });
     }
 
     initializeItems() {
@@ -39,7 +51,7 @@ export class SearchPage {
     }
 
     presentStrongsModal(strongs: StrongsResult) {
-        let modal = this.modalCtrl.create(StrongsModal, { strongsid: strongs});
+        let modal = this.modalCtrl.create(StrongsModal, { strongsid: strongs });
         modal.present();
     }
 
@@ -91,15 +103,17 @@ export class SearchPage {
                             }
                             q = q.substring(1, q.length);
                             let result = this.strongsService.getStrongs(parseInt(q), dict);
-                            this.presentStrongsModal(result);
+                            if (this.user.strongs_modal)
-                            //this.items.unshift({ id: this.last++, data: result, type: Strongs });
+                                this.presentStrongsModal(result);
+                            else
+                                this.items.unshift({ id: this.last++, data: result, type: Strongs, dict: "na" });
                         } else {
                             // its a verse reference.
                             if (q.trim() !== "") {
                                 let myref = new Reference(q.trim());
                                 let r = this.bibleService.getPassage(myref.Section);
                                 r.ref = myref.toString();
-                                this.items.unshift({ id: this.last++, data: r, type: Passage, dict: r.testament == 'new' ? "G":"H" });
+                                this.items.unshift({ id: this.last++, data: r, type: Passage, dict: r.testament == 'new' ? "G" : "H" });
                             }
                         }
                     }

DynamicBibleIonic/src/pages/settings/settings.html

@@ -0,0 +1,15 @@
+<ion-header>
+    <ion-navbar>
+
+        <button menuToggle item-left large>
+            <ion-icon name="menu"></ion-icon>
+        </button>
+        <ion-title>Settings</ion-title>
+    </ion-navbar>
+</ion-header>
+<ion-content padding>
+    <ion-item *ngIf="user">
+        <ion-label>Show Strongs as Modal</ion-label>
+        <ion-toggle color="dark" [(ngModel)]="user.strongs_modal" (ionChange)="save()"></ion-toggle>
+    </ion-item>
+</ion-content>

DynamicBibleIonic/src/pages/settings/settings.scss

@@ -0,0 +1,3 @@
+page-settings {
+
+}

DynamicBibleIonic/src/pages/settings/settings.ts

@@ -0,0 +1,33 @@
+/// <reference path="../../types.ts" />
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+import { Storage } from '@ionic/storage';
+
+@Component({
+    selector: 'settings',
+    templateUrl: 'settings.html'
+})
+export class SettingsPage {
+    user: User = { strongs_modal: true };
+    constructor(public navCtrl: NavController, public local: Storage) {
+        
+        // Check if there is a profile saved in local storage
+        this.local.get('profile').then(profile => {
+            if (profile === null) {
+                this.save();
+            }
+            else
+                this.user = JSON.parse(profile);
+        }).catch(error => {
+            console.log(error);
+        });
+    }
+
+    save() {
+        this.local.set('profile', JSON.stringify(this.user));
+    }
+
+    ionViewDidLoad() {
+        console.log('Hello SettingsPage Page');
+    }
+}

DynamicBibleIonic/src/types.ts

@@ -1,4 +1,10 @@
-
+
+type CardItem = { id: number, data: any, type: any, dict: string}
+
+type User = {
+    strongs_modal: boolean
+}
+
 type BiblePassage = {
     ch: number,
     vss: BibleVerse[]