dynamicbible/DynamicBibleIonic/src/pages/search/search.html

<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-header>
            Current Page: {{title}}
        </ion-list-header>

        <ion-list>
            <button ion-item menuClose="actions" (click)="addPage()">
                <ion-icon name="bookmarks" item-left></ion-icon>Save Current Results as New Page
            </button>
            <button *ngIf="title !== 'Search'" ion-item menuClose="actions" (click)="updatePage()">
                <ion-icon name="arrow-up" item-left></ion-icon>Update Page with current Results
            </button>
        </ion-list>

        <ion-list-header>Search Settings</ion-list-header>
        <ion-item>
            <ion-label>Show Strongs as Modal</ion-label>
            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().strongs_modal" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Clear Search after Query</ion-label>
            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().clear_search_after_query" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Append Results Below</ion-label>
            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().append_to_bottom" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Insert Result Next to Item</ion-label>
            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().insert_next_to_item" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>

        <ion-list-header>Display Settings</ion-list-header>
        <ion-item>
            <ion-label>Each Verse on New Line</ion-label>
            <ion-toggle color="dark" [(ngModel)]="this.profileService.profile().verses_on_new_line" (ionChange)="this.profileService.localSave()"></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)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Show Paragraphs</ion-label>
            <ion-toggle color="dark" [(ngModel)]="profileService.profile().show_paragraphs" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Show Paragraph Headings</ion-label>
            <ion-toggle color="dark" [(ngModel)]="profileService.profile().show_paragraph_headings" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>
        
        <ion-list-header>Profile Settings</ion-list-header>
        <ion-item>
                <ion-label>Sync Search Items</ion-label>
                <ion-toggle color="dark" [(ngModel)]="profileService.profile().sync_search_items" (ionChange)="this.profileService.localSave()"></ion-toggle>
        </ion-item>

        <ion-list-header>Adjust Text</ion-list-header>
        <ion-list>
            <ion-item>
                <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="this.profileService.profile().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>

        <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>
        </ng-template>
    </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)="versePicker()">
                <ion-icon name="albums" large></ion-icon>
            </button>
            <button ion-button icon-only secondary (click)="actionsMenu()">
                <ion-icon name="apps" large></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content #searchcontent padding class="search-card">
    <ion-card *ngFor="let item of this.profileService.profile().items">
        <passage *ngIf="isPassage(item.type)" [cardItem]="item" (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>