FEATURE: Toggle showing the verse numbers

DynamicBibleIonic/src/components/passage/passage.html

@@ -10,12 +10,17 @@
         <h2 *ngIf="data.cs.length > 1">
             <b>Chapter {{ch.ch}}</b>
         </h2>
-        <span *ngFor="let vs of ch.vss">
-            <b>{{vs.v}}.</b> <span *ngFor="let w of vs.w">
-                <ng-template [ngIf]="!isPunct(w.t)"> </ng-template><a *ngIf="w.s != null" (click)="openStrongs(w.s)" (press)="openMenu(w.s)">{{w.t}}</a>
-                <ng-template [ngIf]="w.s == null">{{w.t}}</ng-template>
-            </span><br *ngIf="versesOnNewLine">
-        </span>
+        <div *ngFor="let para of getParas(ch)">
+            <h3 *ngIf="hasHeader(para.p)">{{para.p.h}}</h3>
+            <p>
+                <span *ngFor="let vs of para.vss">
+                    <b *ngIf="showVerseNumbers">{{vs.v}}.</b> <span *ngFor="let w of vs.w">
+                        <ng-template [ngIf]="!isPunct(w.t)"> </ng-template><a *ngIf="w.s != null" (click)="openStrongs(w.s)" (press)="openMenu(w.s)">{{w.t}}</a>
+                        <ng-template [ngIf]="w.s == null">{{w.t}}</ng-template>
+                    </span><br *ngIf="versesOnNewLine">
+                </span>
+            </p>
+        </div>
     </div>
 </ion-card-content>
 <ion-card-content *ngIf="data !== undefined && data.status === -1">
@@ -23,7 +28,7 @@
 </ion-card-content>
 <div style="float: left">
     <button ion-button icon-start clear (click)="close()">
-        <ion-icon name="close-circle"></ion-icon>
+        <ion-icon name="close-circle"></ion-icon>
         <div>Close</div>
     </button>
 </div>
@@ -37,4 +42,4 @@
     <button ion-button icon-center clear (click)="next()" *ngIf="ref !== undefined && ref.Section.end.chapter !== ref.Section.end.book.last_chapter.toString()">
         <ion-icon name="fastforward"></ion-icon>
     </button>
-</div>
+</div>

DynamicBibleIonic/src/components/passage/passage.scss

@@ -1,6 +1,7 @@
 passage {
     a {
         user-select: text !important;
+        cursor: pointer;
     }
 }
 
@@ -14,6 +15,15 @@ passage .button {
 
 passage .passage-text {
     padding-bottom: 12px;
+
+    h3 {
+        font-size: 1.6rem;
+        font-weight: bold;
+    }
+
+    p {
+        text-indent: 1em;
+    }
 }
 
 .passage-text + .passage-text {

DynamicBibleIonic/src/components/passage/passage.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from '@angular/core';
 import { OpenData, CardItem } from '../../pages/search/search';
-import { BiblePassageResult, BibleService } from '../../services/bible-service';
+import { BiblePassageResult, BibleService, BiblePassage, BibleVerse, HashTable, Paragraph } from '../../services/bible-service';
 import { Reference } from '../../libs/Reference';
 
 @Component({
@@ -8,7 +8,7 @@ import { Reference } from '../../libs/Reference';
     templateUrl: 'passage.html',
     providers: [BibleService]
 })
-export class Passage implements OnInit
+export class Passage implements OnInit
 {
     @Output()
     onItemClicked = new EventEmitter<OpenData>();
@@ -21,20 +21,23 @@ export class Passage implements OnInit
     @Input()
     versesOnNewLine: boolean;
 
+    @Input()
+    showVerseNumbers: boolean;
+
     data: BiblePassageResult;
     ref: Reference;
 
-    constructor(private bibleService: BibleService, private elementRef: ElementRef)
+    constructor(private bibleService: BibleService, private elementRef: ElementRef)
     {
     }
 
-    ngOnInit(): void
+    ngOnInit(): void
     {
         this.ref = new Reference(this.cardItem.qry);
-        this.bibleService.getResultAsPromise(this.ref.Section).then(data => this.data = data);
+        this.bibleService.getResultAsPromise(this.ref.Section).then(data => this.data = data);
     }
-
-    close()
+
+    close()
     {
         let d = 250;
         this.elementRef.nativeElement.parentElement.animate({
@@ -45,7 +48,7 @@ export class Passage implements OnInit
                 iterations: 1,
                 easing: 'ease-in-out'
             });
-        setTimeout(() =>
+        setTimeout(() =>
         {
             this.onClose.emit(this.cardItem);
         }, d);
@@ -90,7 +93,7 @@ export class Passage implements OnInit
             this.ref = new Reference(data.ref);
         });
     }
-    
+
     expand()
     {
         const last_verse_for_end = this.ref.Section.end.book.chapters[parseInt(this.ref.Section.end.chapter)];
@@ -138,17 +141,71 @@ export class Passage implements OnInit
         });
     }
 
-    openStrongs(strongs: string)
+    openStrongs(strongs: string)
     {
         this.onItemClicked.emit({ card: this.cardItem, qry: this.cardItem.dict + strongs, from_search_bar: false });
     }
-
-    openMenu(strongs: string)
+
+    openMenu(strongs: string)
     {
     }
-
-    isPunct(c: string)
+
+    isPunct(c: string)
     {
         return new RegExp('^[\.\,\;\:\?\!]$').test(c);
     }
+
+    hasHeader(p: Paragraph)
+    {
+        if (p === undefined)
+            return false;
+
+        return p.h.length > 0;
+    }
+
+    isPara(vs: BibleVerse)
+    {
+        return this.getRefKey(vs) in BibleService.paragraphs;
+    }
+
+    getRefKey(vs: BibleVerse)
+    {
+        return this.ref.Section.start.book.book_number + ';' + this.ref.Section.start.chapter + ';' + vs.v;
+    }
+
+    getParas(ch: BiblePassage)
+    {
+        // group the verses into paragraphs.
+
+        // create an initial paragraph to hold verses that might come before a paragraph.
+        let para: BiblePara = { p: { h: '', p: 0 }, vss: [] };
+        let paras: BiblePara[] = [];
+
+        // for each verse in the chapter, break them into paragraphs.
+        for (let v of ch.vss)
+        {
+            if (this.isPara(v))
+            {
+                paras.push(para);
+                para = { p: BibleService.paragraphs[this.getRefKey(v)], vss: [v] };
+                if (para.p === undefined)
+                    para.p = { h: '', p: 0 }; // just in case you can't find a paragraph.
+            }
+            else
+            {
+                para.vss.push(v);
+            }
+        }
+
+        // add the final paragraph if it has verses.
+        if (para.vss.length > 0)
+            paras.push(para);
+
+        return paras;
+    }
+}
+
+type BiblePara = {
+    p: Paragraph,
+    vss: BibleVerse[],
 }

DynamicBibleIonic/src/pages/search/search.html

@@ -18,18 +18,7 @@
                 <ion-icon name="arrow-up" item-left></ion-icon>Update Page with current Results
             </button>
         </ion-list>
-        
-        <ng-template  [ngIf]="!profileService.currentUser()">
-            <ion-item>
-                <button ion-button (click)="profileService.authenticate()">Login With Google</button>
-            </ion-item>
-        </ng-template>
-        <ng-template  [ngIf]="profileService.currentUser()">
-            <ion-item>
-                <button ion-button (click)="profileService.logout()">Logout</button>
-            </ion-item>
-        </ng-template>
-        
+
         <ion-list-header>Search Settings</ion-list-header>
         <ion-item>
             <ion-label>Show Strongs as Modal</ion-label>
@@ -51,6 +40,10 @@
             <ion-label>Each Verse on New Line</ion-label>
             <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().verses_on_new_line" (ionChange)="save()"></ion-toggle>
         </ion-item>
+        <ion-item>
+            <ion-label>Show Verse #'s</ion-label>
+            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().show_verse_numbers" (ionChange)="save()"></ion-toggle>
+        </ion-item>
         <ion-list-header>Adjust Text</ion-list-header>
         <ion-list>
             <ion-item>
@@ -60,6 +53,22 @@
                 </ion-range>
             </ion-item>
         </ion-list>
+
+        <ion-list-header>Login/Logout</ion-list-header>
+
+        <ng-template [ngIf]="!profileService.currentUser()">
+            <ion-item>
+                <button ion-button (click)="profileService.authenticate()">Login With Google</button>
+            </ion-item>
+        </ng-template>
+        <ng-template [ngIf]="profileService.currentUser()">
+            <ion-item>
+                <button ion-button (click)="profileService.logout()">Logout</button>
+            </ion-item>
+            <ion-item>
+                <button ion-button (click)="profileService.Refresh()">Refresh</button>
+            </ion-item>
+        </ng-template>
     </ion-content>
 </ion-menu>
 
@@ -82,21 +91,10 @@
 
 <ion-content #searchcontent padding class="search-card">
     <ion-card *ngFor="let item of this.profileService.profile().items">
-        <passage *ngIf="isPassage(item.type)"
-                 [cardItem]="item"
-                 [versesOnNewLine]="this.profileService.profile().verses_on_new_line"
-                 (onClose)="removeItem($event)"
-                 (onItemClicked)="getItemsNextToCard($event)"></passage>
-        <strongs *ngIf="isStrongs(item.type)"
-                 [cardItem]="item"
-                 (onClose)="removeItem($event)"
-                 (onItemClicked)="getItemsNextToCard($event)"></strongs>
-        <words *ngIf="isWords(item.type)"
-               [cardItem]="item"
-               (onClose)="removeItem($event)"
-               (onItemClicked)="getItemsNextToCard($event)"></words>
-        <error *ngIf="isError(item.type)"
-               [cardItem]="item"
-               (onClose)="removeItem($event)"></error>
+        <passage *ngIf="isPassage(item.type)" [cardItem]="item" [versesOnNewLine]="this.profileService.profile().verses_on_new_line"
+            [showVerseNumbers]="this.profileService.profile().show_verse_numbers" (onClose)="removeItem($event)" (onItemClicked)="getItemsNextToCard($event)"></passage>
+        <strongs *ngIf="isStrongs(item.type)" [cardItem]="item" (onClose)="removeItem($event)" (onItemClicked)="getItemsNextToCard($event)"></strongs>
+        <words *ngIf="isWords(item.type)" [cardItem]="item" (onClose)="removeItem($event)" (onItemClicked)="getItemsNextToCard($event)"></words>
+        <error *ngIf="isError(item.type)" [cardItem]="item" (onClose)="removeItem($event)"></error>
     </ion-card>
 </ion-content>

DynamicBibleIonic/src/pages/search/search.scss

@@ -3,17 +3,14 @@
         margin: 1em 0;
         font-size: 1em;
     }
-
     .button-large {
         height: 3.6rem !important;
     }
-
     .title {
         font-size: 1.3em;
         font-family: 'Roboto', Helvetica, Arial, sans-serif;
         font-weight: 400;
     }
-
     a {
         color: black;
         border-bottom: 1px dotted #b3bfd0;
@@ -22,21 +19,25 @@
 
 body {
     -webkit-user-select: auto !important;
-
     .scroll {
         -webkit-user-select: inherit;
+        user-select: inherit;
     }
 }
 
-.card h2 {
-    font-size: 1.2em;
-    font-weight: bold;
+.card {
+    h2 {
+        font-size: 1.2em;
+        font-weight: bold;
+    }
+
+    font-family: "Roboto", "Arial", "Helvetica", sans-serif;
 }
 
 .item.item-block .item-inner {
     padding: 0px;
 }
 
-.item ion-icon[item-left] + .item-inner {
+.item ion-icon[item-left]+.item-inner {
     margin-left: 6px;
-}
+}

DynamicBibleIonic/src/services/bible-service.ts

@@ -1,19 +1,61 @@
-/// <reference path="../../typings/globals/jquery/index.d.ts" />
+/// <reference path="../../typings/globals/jquery/index.d.ts" />
 /// <reference path="../../typings/globals/mathjs/index.d.ts" />
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
-import { Section, Reference } from '../libs/Reference';
+import { Section, Reference } from '../libs/Reference';
 
 @Injectable()
 export class BibleService
 {
     chapters: BiblePassage[];
     result: BiblePassageResult;
+    static paragraphs: HashTable<Paragraph>;
     count = 0;
     $: any;
 
     constructor(private http: Http)
     {
+        this.getParagraphMarkersAsPromise()
+    }
+
+    getParagraphMarkersAsPromise(): Promise<HashTable<Paragraph>>
+    {
+        return new Promise((resolve) => { resolve(this.getParagraphMarkers()); });
+    }
+
+    getParagraphMarkers() : HashTable<Paragraph>
+    {
+        try
+        {
+            if (BibleService.paragraphs !== undefined && '1;1;1' in BibleService.paragraphs)
+                return BibleService.paragraphs;
+
+            const self = this;
+
+            const url = 'data/bibles/paras.json';
+
+            $.ajax({
+                async: false,
+                type: 'GET',
+                url: url,
+                dataType: 'json',
+                success(d: HashTable<Paragraph>)
+                {
+                    BibleService.paragraphs = d;
+                },
+                error()
+                {
+                    console.log('Unable to retrieve paragraphs.');
+                }
+            });
+
+            return BibleService.paragraphs;
+        }
+        catch (error)
+        {
+            console.log(error);
+        }
+        return null;
     }
 
     getResultAsPromise(section: Section): Promise<BiblePassageResult>
@@ -26,14 +68,14 @@ export class BibleService
         try
         {
             const self = this;
-            this.chapters = []; // the verses from the chapter.
-            this.result = {
-                cs: [],
-                testament: '',
-                ref: Reference.toString(section),
-                status: 0,
-                msg: ':)'
-        };
+            this.chapters = []; // the verses from the chapter.
+            this.result = {
+                cs: [],
+                testament: '',
+                ref: Reference.toString(section),
+                status: 0,
+                msg: ':)'
+            };
 
             if (Number(section.start.chapter) > section.start.book.last_chapter)
             {
@@ -60,8 +102,8 @@ export class BibleService
                     type: 'GET',
                     url: url,
                     dataType: 'json',
-                    success(d: BiblePassage)
-                    {
+                    success(d: BiblePassage)
+                    {
                         self.chapters.push(d);
                     },
                     error()
@@ -85,12 +127,12 @@ export class BibleService
                 if (j === 0)
                 {
                     if (section.start.verse.indexOf('*') !== -1) // you sometimes use this as a shortcut to the last verse
-                    {
+                    {
                         // replace the * with the last verse, then eval the expression.
                         section.start.verse = section.start.verse.replace('*', (this.chapters[j].vss.length).toString());
-                        
-                        start = math.eval(section.start.verse);
-
+
+                        start = math.eval(section.start.verse);
+
                         // update the section and the ref.
                         section.start.verse = start.toString();
                         this.result.ref = Reference.toString(section);
@@ -116,12 +158,12 @@ export class BibleService
                 for (let i = start; i <= end; i++)
                     vss.push(this.chapters[j].vss[i - 1]);
 
-                this.result.cs.push({
-                    ch: this.chapters[j].ch,
-                    vss: vss
-                });
+                this.result.cs.push({
+                    ch: this.chapters[j].ch,
+                    vss: vss
+                });
             }
-
+
 
             if (section.start.book.book_number >= 40)
                 this.result.testament = 'new';
@@ -146,16 +188,26 @@ export type BiblePassageResult = {
     msg: string,
 }
 
-type BiblePassage = {
+export type BiblePassage = {
     ch: number,
     vss: BibleVerse[],
 }
 
-type BibleVerse = {
+export type BibleVerse = {
     v: number,
     w: [
         {
             t: string, s: string,
         }
     ],
-}
+}
+
+export type Paragraph = {
+    h: string,
+    p: number
+}
+
+export interface HashTable<T>
+{
+    [key: string]: T;
+}

DynamicBibleIonic/src/services/profile-service.ts

@@ -8,6 +8,7 @@ import { Catch } from 'rxjs/add/operator';
 import { Storage } from '@ionic/storage';
 
 import { CardItem } from '../pages/search/search';
+import { Promise } from 'q';
 
 type fbObject<T> = {
     ref: AngularFireObject<T>,
@@ -27,6 +28,7 @@ export type User = {
     font_size: number,
     saved_pages: SavedPage[],
     verses_on_new_line: boolean,
+    show_verse_numbers: boolean,
 }
 
 export type SavedPage = {
@@ -49,7 +51,6 @@ export class ProfileService
     {
         this.isWeb = (document.URL.startsWith('http') || !document.URL.startsWith('http://localhost:8080'));
 
-        console.log('Setting up default user initially');
         let localObserver = this.userObserver().subscribe(
             user =>
             {
@@ -78,7 +79,6 @@ export class ProfileService
     {
         if (!this.localProfile)
         {
-            console.log('Initializing default user');
             this.localProfile = ProfileService.createDefaultUser();
         }
 
@@ -88,7 +88,6 @@ export class ProfileService
     subscribeToRemoteProfile(db: AngularFireDatabase, user: firebase.User)
     {
         if (!user) return;
-        console.log('Subscribing to remote settings for user id%s', user.uid);
         let obj = db.object('/settings/' + user.uid);
         this.remoteProfile = {
             ref: obj as AngularFireObject<User>,
@@ -105,7 +104,6 @@ export class ProfileService
     {
         if (user)
         {
-            console.log('handling remote settings for user %s', user.username);
             if (!user.saved_pages) user.saved_pages = [];
             if (!user.items) user.items = [];
             
@@ -117,17 +115,13 @@ export class ProfileService
                 user.saved_pages.concat(this.localProfile.saved_pages);
 
             this.localProfile = user;
-            console.log('Stashed remote changes locally');
             // We only save the local change here since this is an update from our remote profile.
             this.localSave();
-            console.log('Saved remote changes locally');
         }
         else
         {
             // No user is there so we should save our local to the remote.
-            console.log('Saving local to remote for user %s', user.username);
             this.save()
-            console.log('Saved remote for user %s', user.username);
         }
     }
 
@@ -159,6 +153,12 @@ export class ProfileService
         this.remoteLoggedIn = true;
 
     }
+    
+    Refresh()
+    {
+        this.logout();
+        this.authenticate();
+    }
 
     logout()
     {
@@ -176,10 +176,10 @@ export class ProfileService
     {
         // First we save our local copy of the settings.
         this.localSave();
+
         // If we have a remote profile then save it there too 
         if (this.remoteProfile)
         {
-            console.log('Saving remote settings profile for remote user id ' + this.profile().uid);
             this.remoteProfile.ref.set(this.profile());
         }
     }
@@ -220,6 +220,7 @@ export class ProfileService
         this.localProfile.font_size = 10;
         this.localProfile.saved_pages = [];
         this.localProfile.verses_on_new_line = true;
+        this.localProfile.show_verse_numbers = true;
     }
 
     reset()
@@ -256,7 +257,8 @@ export class ProfileService
             insert_next_to_item: false,
             font_size: 10,
             saved_pages: [],
-            verses_on_new_line: true
+            verses_on_new_line: true,
+            show_verse_numbers: true,
         };
     }
 

DynamicBibleIonic/www/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-<head>
+<head>
+  <script data-ionic="inject">
+    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.0';i.angular='5.0.0';i.staticDir='build/';})(window);
+  </script>
     <meta charset="UTF-8">
     <title>Dynamic Bible</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">