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: {{this.profileService.title}}
        </ion-list-header>

        <ion-list>
            <button ion-item menuClose="actions" (click)="addPage()">
                <ion-icon name="bookmarks" item-left></ion-icon>Save Results as New Page
            </button>
            <button *ngIf="this.profileService.isOnSearchPage()" ion-item menuClose="actions" (click)="updatePage()">
                <ion-icon name="arrow-up" item-left></ion-icon>Update Page with Results
            </button>
        </ion-list>

        <ion-list-header>
            <ion-icon name="search" item-left></ion-icon>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>
            <ion-icon name="browsers" item-left></ion-icon>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>
            <ion-icon name="sync" item-left></ion-icon>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>
            <ion-icon name="text" item-left></ion-icon>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-item>
                <ion-label>Font Family</ion-label>
                <ion-select [(ngModel)]="this.profileService.profile().font_family" (ionChange)="fontFamilyChanged()">
                    <ion-option value="Roboto, Helvetica, Arial, sans-serif">Sans Serif</ion-option>
                    <ion-option value="'Times New Roman', serif">Times</ion-option>
                    <ion-option value="Georgia, serif">Georgia</ion-option>
                    <ion-option value="Merriweather, serif">Merriweather</ion-option>
                    <ion-option value="Consolas, monotype">Monospaced</ion-option>
                    <ion-option value="'PT Serif'ß, serif">PT Serif</ion-option>
                </ion-select>
            </ion-item>
        </ion-list>

        <ion-list-header>
            <ion-icon name="log-in" item-left></ion-icon>Login/Logout
        </ion-list-header>

        <ng-template [ngIf]="!profileService.currentUser()">
            <ion-item center>
                <button ion-button block (click)="profileService.authenticate()">Login With Google</button>
            </ion-item>
        </ng-template>
        <ng-template [ngIf]="profileService.currentUser()">
            <ion-item center>
                <button ion-button block (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-auto-complete [dataProvider]="autocompleteService" (search)="getQuery($event)" (input)="setQuery($event)"
            (itemSelected)="itemSelected($event)" [options]="{ showCancelButton : 'true' }" #searchbar></ion-auto-complete>
        <!--<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)="this.profileService.removeItem($event)"
            (onItemClicked)="getItemsNextToCard($event)"></passage>
        <strongs *ngIf="isStrongs(item.type)" [cardItem]="item" (onClose)="this.profileService.removeItem($event)"
            (onItemClicked)="getItemsNextToCard($event)"></strongs>
        <words *ngIf="isWords(item.type)" [cardItem]="item" (onClose)="this.profileService.removeItem($event)"
            (onItemClicked)="getItemsNextToCard($event)"></words>
        <error *ngIf="isError(item.type)" [cardItem]="item" (onClose)="this.profileService.removeItem($event)"></error>
    </ion-card>
</ion-content>