FEATURE: Added icons, Update page with current results, current page label

* fixed colors, some bugs
 * moved saved pages action to actions menu
 * updated settings with nicer buttons/layout

DynamicBibleIonic/package.json

@@ -28,14 +28,15 @@
     "@angular/platform-server": "2.2.1",
     "@ionic/storage": "1.1.7",
     "@types/jasmine": "^2.5.38",
-    "ionic-angular": "2.0.0-rc.4",
+    "ionic-angular": "2.0.0-rc.5",
     "ionic-native": "2.2.11",
     "ionicons": "3.0.0",
     "rxjs": "5.0.0-beta.12",
-    "zone.js": "0.6.26"
+    "zone.js": "0.6.26",
+    "sw-toolbox": "3.4.0"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "0.0.47",
+    "@ionic/app-scripts": "1.0.0",
     "@types/jasmine": "2.5.38",
     "@types/node": "6.0.42",
     "angular-cli": "1.0.0-beta.24",
@@ -53,7 +54,7 @@
     "ts-node": "1.7.2",
     "tslint": "4.1.1",
     "tslint-eslint-rules": "3.2.0",
-    "typescript": "2.0.10"
+    "typescript": "2.0.9"
   },
   "cordovaPlugins": [
     "cordova-plugin-whitelist",

DynamicBibleIonic/src/app/app.component.ts

@@ -38,7 +38,19 @@ export class MyApp
     openPage(page)
     {
         // close the menu when clicking a link from the menu
-        this.menu.close();
+        this.menu.close('pages');
+        
+        // because the actions menu is on a Page component, and you swap the SearchPage out,
+        //  the menu get registered multiple times.  to avoid some pages not opening the menu because
+        //  multiple menus with the same id exist and the first one in the list is returned (which happens
+        //  be disabled when another of the same id is added) it won't show. because not enabled.
+        // ---
+        // unregistering the actions menu whenever a new page is opened fixes the problem, because the menu
+        //  will get reregistered when SearchPage loads.  Also, if you go to a non SearchPage, the actions
+        //  menu won't be there, but the unregister function doesn't fail if a non existent id is given,
+        //  so thats ok.
+        this.menu.unregister(this.menu.get('actions'));
+        
         // navigate to the new page if it is not the current page
         this.nav.setRoot(page.component, page.params);
     }

DynamicBibleIonic/src/app/app.html

@@ -1,4 +1,4 @@
-<ion-menu [content]="content">
+<ion-menu [content]="content" id="pages">
     <ion-header>
         <ion-toolbar>
             <ion-title>Pages</ion-title>
@@ -7,7 +7,7 @@
     <ion-content>
         <ion-list>
             <button ion-item *ngFor="let p of pagesSvc.getMainPages()" (click)="openPage(p)">
-                {{p.title}}
+                <ion-icon name="{{p.icon}}" item-left></ion-icon> {{p.title}}
             </button>
         </ion-list>
         <ion-list>
@@ -15,9 +15,10 @@
                 Saved Pages
             </ion-list-header>
             <button ion-item *ngFor="let p of pagesSvc.getSavedPages()" (click)="openPage(p)">
-                {{p.title}}
+                <ion-icon name="bookmark" item-left></ion-icon> {{p.title}}
             </button>
         </ion-list>
     </ion-content>
 </ion-menu>
+
 <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

DynamicBibleIonic/src/components/passage/passage.html

@@ -1,5 +1,5 @@
 <ion-item class="title passage-title">
-    {{item.ref}}
+    <ion-icon name="book" item-left></ion-icon> {{item.ref}}
     <button ion-button icon-only item-right large clear (click)="close()">
         <ion-icon name="close-circle"></ion-icon>
     </button>

DynamicBibleIonic/src/components/passage/passage.scss

@@ -1,17 +1,19 @@
-.passage-title {
-    background-color: #c3cce4;
+passage .button-clear-md {
+    color: #3D5699;
 }
 
+.passage-title {
+    background-color: #c3cce4;
+}
 
 passage .passage-text {
     padding-bottom: 12px;
 }
 
-.passage-text + .passage-text
-{
+.passage-text + .passage-text {
     border-top: 1px dotted #808080;
     padding-top: 12px;
-} 
+}
 
 @media screen and (min-width: 800px) {
     passage .passage-text {
@@ -28,4 +30,4 @@ passage .passage-text {
         -moz-column-rule-width: 1px; /* Firefox */
         column-rule-width: 1px;
     }
-}
+}

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

@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            Strongs: {{item.prefix}}{{item.sn}}
+            <ion-icon name="paper" item-left></ion-icon> Strongs: {{item.prefix}}{{item.sn}}
         </ion-title>
         <ion-buttons start>
             <button ion-button (click)="dismiss()" large>

DynamicBibleIonic/src/components/strongs/strongs.html

@@ -1,5 +1,5 @@
 <ion-item class="title strongs-title" padding>
-    {{item.prefix}}{{item.sn}}
+    <ion-icon name="paper" item-left></ion-icon> {{item.prefix}}{{item.sn}}
     <button ion-button icon-only item-right large clear (click)="close()">
         <ion-icon name="close-circle"></ion-icon>
     </button>

DynamicBibleIonic/src/components/words/words.html

@@ -1,5 +1,5 @@
 <ion-item class="title words-title" padding>
-    {{item.refs.length}} results for {{item.word}}
+    <ion-icon name="grid" item-left></ion-icon> {{item.refs.length}} results for {{item.word}}
     <button ion-button icon-only item-right large clear (click)="close()">
         <ion-icon name="close-circle"></ion-icon>
     </button>

DynamicBibleIonic/src/pages/search/search.html

@@ -1,31 +1,38 @@
+<ion-menu side="right" [content]="searchcontent" id="actions">
+    <ion-header>
+        <ion-toolbar>
+            <ion-title>Actions</ion-title>
+        </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+        <ion-list>
+            <button ion-item menuClose="actions" (click)="addPage()">
+                <ion-icon name="bookmarks" item-left></ion-icon>Save Current Results as Page
+            </button>
+            <button ion-item menuClose="actions" (click)="updatePage()">
+                <ion-icon name="arrow-up" item-left></ion-icon>Update Page with current Results
+            </button>
+        </ion-list>
+    </ion-content>
+</ion-menu>
+
 <ion-header>
     <ion-navbar>
         <button ion-button icon-only menuToggle left>
             <ion-icon name="menu" large></ion-icon>
         </button>
         <ion-searchbar (search)="getQuery($event)" (input)="setQuery($event)" [showCancelButton]="true"></ion-searchbar>
+        <ion-buttons right>
+            <button ion-button icon-only secondary (click)="actionsMenu()">
+                <ion-icon name="apps" large></ion-icon>
+            </button>
+        </ion-buttons>
     </ion-navbar>
 </ion-header>
 
-<ion-content padding class="search-card">
-    <ion-card>
-        <ion-grid>
-            <ion-row>
-                <ion-col style="width: 95px;">
-                    <button ion-button right small (click)="addPage()">
-                        <ion-icon name="cloud-upload"></ion-icon><div>&nbsp;&nbsp;Save</div>
-                    </button>
-                </ion-col>
-                <ion-col style="flex-grow: 100 !important">
-                    <ion-item>
-                        <ion-input type="text" placeholder="Saved Results Title goes here" [(ngModel)]="saved_results_title"></ion-input>
-                    </ion-item>
-                </ion-col>
-                
-            </ion-row>
-        </ion-grid>
-    </ion-card>
-
+<ion-content #searchcontent padding class="search-card">
+    <span style="font-size: .8em; color: #555;">CURRENT PAGE: {{title}}</span>
     <ion-card *ngFor="let item of userProfile.user.items">
         <error *ngIf="isError(item.type)" [cardItem]="item" [item]="item.data" (onClose)="removeItem($event)"></error>
         <passage *ngIf="isPassage(item.type)" [cardItem]="item" [item]="item.data" (onClose)="removeItem($event)" [dict]="item.dict" (onItemClicked)="getItemsNextToCard($event)"></passage>

DynamicBibleIonic/src/pages/search/search.scss

@@ -17,7 +17,7 @@
 
     a {
         color: black;
-        border-bottom: 1px dotted gainsboro;
+        border-bottom: 1px dotted #ccc;
     }
 }
 
@@ -36,4 +36,8 @@ body {
 
 .item-md.item-block .item-inner {
     padding: 0px;
+}
+
+.item-md ion-icon[item-left] + .item-inner {
+    margin-left: 6px;
 }

DynamicBibleIonic/src/pages/search/search.ts

@@ -1,5 +1,5 @@
 import { Type, Component } from '@angular/core';
-import { Loading, LoadingController, ModalController, NavParams } from 'ionic-angular';
+import { Loading, LoadingController, ModalController, NavParams, AlertController, MenuController } from 'ionic-angular';
 import { Storage } from '@ionic/storage';
 
 import { StrongsModal } from '../../components/strongs-modal/strongs-modal';
@@ -23,17 +23,19 @@ export class SearchPage
     userProfile: UserProfile;
     last: CardItem;
     loader: Loading;
-    saved_results_title: string = "";
+    title: string;
 
     constructor(
-         private strongsService: StrongsService
-        ,private bibleService: BibleService
-        ,private wordService: WordService
-        ,private pagesService: PagesService
-        ,public loadingCtrl: LoadingController
-        ,public modalCtrl: ModalController
-        ,public local: Storage
-        ,public params: NavParams
+        private strongsService: StrongsService
+        , private bibleService: BibleService
+        , private wordService: WordService
+        , private pagesService: PagesService
+        , private alertCtrl: AlertController
+        , private menu: MenuController
+        , public loadingCtrl: LoadingController
+        , public modalCtrl: ModalController
+        , public local: Storage
+        , public params: NavParams
     )
     {
         this.userProfile = new UserProfile(UserProfile.createDefaultUser());
@@ -54,13 +56,54 @@ export class SearchPage
             console.log(error);
         });
     }
+
+    actionsMenu()
+    {
+        this.menu.open('actions');
+    }
 
     addPage()
     {
-        let p = { queries: this.userProfile.user.items.slice(), title: this.saved_results_title };
-        this.userProfile.user.saved_pages.push(p);
+        let alert = this.alertCtrl.create({
+            title: 'Save Search as Page',
+            inputs: [
+                {
+                    name: 'title',
+                    placeholder: 'Page Title'
+                }
+            ],
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    handler: data =>
+                    {
+                        console.log('Cancel clicked');
+                    }
+                },
+                {
+                    text: 'Save',
+                    handler: data =>
+                    {
+                        let p = { queries: this.userProfile.user.items.slice(), title: data.title };
+                        this.userProfile.user.saved_pages.push(p);
+                        this.userProfile.save(this.local);
+                        this.pagesService.addPage(p);
+                    }
+                }
+            ]
+        });
+        alert.present();
+    }
+
+    updatePage()
+    {
+        let page = this.userProfile.user.saved_pages.find( 
+            i=>
+                i.title == this.params.data.title
+            );
+        page.queries = this.userProfile.user.items.slice();
         this.userProfile.save(this.local);
-        this.pagesService.addPage(p);
     }
 
     initializeItems(u: UserProfile)
@@ -69,6 +112,10 @@ export class SearchPage
         this.pagesService.initializePages(u.user.saved_pages);
         if (this.params.data.queries !== undefined)
             this.userProfile.user.items = this.params.data.queries.slice();
+        if (this.params.data.title === undefined)
+            this.title = "Search";
+        else
+            this.title = this.params.data.title;
     }
 
     presentStrongsModal(strongs: StrongsResult)

DynamicBibleIonic/src/pages/settings/settings.html

@@ -8,17 +8,7 @@
 </ion-header>
 <ion-content padding>
     <template [ngIf]="userProfile.user">
-        <ion-list>
-            <ion-list-header>
-                Adjust Text
-            </ion-list-header>
-            <ion-item>
-                <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="userProfile.user.font_size" (ionChange)="textSizeChanged()">
-                    <ion-label range-left class="small-text">A</ion-label>
-                    <ion-label range-right>A</ion-label>
-                </ion-range>
-            </ion-item>
-        </ion-list>
+        <h4>Search Settings</h4>
         <ion-item>
             <ion-label>Show Strongs as Modal</ion-label>
             <ion-toggle color="dark" [(ngModel)]="userProfile.user.strongs_modal" (ionChange)="save()"></ion-toggle>
@@ -39,14 +29,24 @@
             <button ion-button (click)="reset()">Reset Settings</button>
         </ion-item>
 
+        <h4>Adjust Text</h4>
         <ion-list>
-            <ion-list-header>Manage Pages</ion-list-header>
-            <div *ngFor="let p of userProfile.user.saved_pages">
-                <ion-item>
-                    {{p.title}}
-                    <button ion-button round (click)="removePage(p)"><ion-icon name="trash"></ion-icon></button>
-                </ion-item>
-            </div>
+            <ion-item>
+                <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="userProfile.user.font_size" (ionChange)="textSizeChanged()">
+                    <ion-label range-left class="small-text">A</ion-label>
+                    <ion-label range-right>A</ion-label>
+                </ion-range>
+            </ion-item>
+        </ion-list>
+
+        <h4>Manage Pages</h4>
+        <ion-list>
+            <ion-item *ngFor="let p of userProfile.user.saved_pages">
+                {{p.title}}
+                <button ion-button item-right outline icon-right (click)="removePage(p)">
+                    Delete Page <ion-icon name="trash"></ion-icon>
+                </button>
+            </ion-item>
         </ion-list>
     </template>
 </ion-content>

DynamicBibleIonic/src/pages/settings/settings.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
 import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { NavController, AlertController } from 'ionic-angular';
 import { Storage } from '@ionic/storage';
 import { SavedPage, UserProfile } from '../../libs/UserProfile';
 
@@ -13,7 +13,10 @@ export class SettingsPage
     textSize: number = 0;
     userProfile: UserProfile;
 
-    constructor(public navCtrl: NavController, public local: Storage)
+    constructor(
+        public navCtrl: NavController
+        , public local: Storage
+        , private alertCtrl: AlertController)
     {
         this.userProfile = new UserProfile(UserProfile.createDefaultUser());
 
@@ -50,10 +53,31 @@ export class SettingsPage
 
     removePage(page: SavedPage)
     {
-        let idx = this.userProfile.user.saved_pages.indexOf(page);
-        this.userProfile.user.saved_pages.splice(idx, 1);
+        let alert = this.alertCtrl.create({
+            title: 'Confirm Delete',
+            message: 'Do you want to delete the ' + page.title + ' page?',
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    handler: () =>
+                    {
+                        console.log('Cancel clicked');
+                    }
+                },
+                {
+                    text: 'Ok',
+                    handler: () =>
+                    {
+                        let idx = this.userProfile.user.saved_pages.indexOf(page);
+                        this.userProfile.user.saved_pages.splice(idx, 1);
 
-        // save the users settings.
-        this.userProfile.save(this.local);
+                        // save the users settings.
+                        this.userProfile.save(this.local);
+                    }
+                }
+            ]
+        });
+        alert.present();
     }
 }

DynamicBibleIonic/src/services/pages-service.ts

@@ -7,14 +7,14 @@ import { SavedPage } from "../libs/UserProfile";
 @Injectable()
 export class PagesService
 {
-    pages: Array<{ title: string, component: any, params: any }>;
+    pages: Array<{ title: string, component: any, params: any, icon: string }>;
     savedPages: Array<{ title: string, component: any, params: any }>;
 
     constructor(public local: Storage)
     {
         this.pages = [
-            { title: 'Search', component: SearchPage, params: { queries: []} },
-            { title: 'Settings', component: SettingsPage, params: {} }
+            { title: 'Search', component: SearchPage, params: { queries: [], title: "Search" }, icon: "search" },
+            { title: 'Settings', component: SettingsPage, params: {}, icon: "settings" }
         ];
         this.savedPages = [];
     }
@@ -23,7 +23,7 @@ export class PagesService
     {
         return this.pages;
     }
-    
+
     getSavedPages(): Array<{ title: string, component: any }>
     {
         return this.savedPages;
@@ -31,20 +31,16 @@ export class PagesService
 
     addPage(page: SavedPage)
     {
-        this.savedPages.push({ title: page.title, component: SearchPage, params: { queries: page.queries } });
+        this.savedPages.push({ title: page.title, component: SearchPage, params: { queries: page.queries, title: page.title } });
     }
 
     initializePages(page_array: SavedPage[])
     {
-        this.pages = [
-            { title: 'Search', component: SearchPage, params: { queries: [] } },
-            { title: 'Settings', component: SettingsPage, params: {} }
-        ];
         this.savedPages = [];
 
         for (let p of page_array)
         {
-            this.savedPages.push({ title: p.title, component: SearchPage, params: { queries: p.queries } });
+            this.savedPages.push({ title: p.title, component: SearchPage, params: { queries: p.queries, title: p.title } });
         }
     }
 }