FEATURE: improve typeahead. add previous search history.

This commit is contained in:
walljm 2019-01-02 22:57:12 -05:00
parent f93817a8fc
commit c15c5988aa
7 changed files with 193 additions and 159 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="302000" id="walljm.dynamicbible" version="3.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<widget android-versionCode="302002" id="walljm.dynamicbible" version="3.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Dynamic Bible</name>
<description>A bible app designed for bible study</description>
<author email="jason@walljm.com" href="http://dynamicbible.com/">Jason Wall</author>

View File

@ -16,7 +16,9 @@
"start": "ionic serve",
"lab": "ionic serve --lab",
"test": "ng test",
"test-coverage": "ng test --code-coverage"
"test-coverage": "ng test --code-coverage",
"release-android": "ionic cordova build android --release -- --buildConfig=./build.json",
"android": "ionic cordova run android"
},
"dependencies": {
"@angular/common": "5.0.0",

View File

@ -6,10 +6,6 @@
<ion-label>Show Strongs as Modal</ion-label>
<ion-toggle color='dark' [(ngModel)]='profileService.profile().strongs_modal' (ionChange)='profileService.localSave()'></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Clear Search after Query</ion-label>
<ion-toggle color='dark' [(ngModel)]='profileService.profile().clear_search_after_query' (ionChange)='profileService.localSave()'></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Append Results Below</ion-label>
<ion-toggle color='dark' [(ngModel)]='profileService.profile().append_to_bottom' (ionChange)='profileService.localSave()'></ion-toggle>

View File

@ -27,8 +27,11 @@
<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-auto-complete [dataProvider]='autocompleteService'
[(keyword)]='searchQuery'
(search)='getQuery($event)' (input)='setQuery($event)'
(itemSelected)='itemSelected($event)' [options]='{ showCancelButton : "true" }'
(autoFocus)='showHistory($event)' #searchbar></ion-auto-complete>
<ion-buttons right>
<button ion-button icon-only secondary (click)='versePicker()'>
<ion-icon name='albums' large></ion-icon>

View File

@ -1,61 +1,55 @@
import { Type, Component, OnInit, ViewChild } from '@angular/core';
import { Loading, LoadingController, ModalController, NavParams, AlertController, MenuController } from 'ionic-angular';
import { AutoCompleteComponent } from 'ionic2-auto-complete';
import { Type, Component, OnInit, ViewChild } from "@angular/core";
import { Loading, LoadingController, ModalController, NavParams, AlertController, MenuController, TextInput, Searchbar } from "ionic-angular";
import { AutoCompleteComponent } from "ionic2-auto-complete";
import { StrongsModal } from '../../components/strongs-modal/strongs-modal';
import { VersePickerModal } from '../../components/verse-picker/verse-picker';
import { Settings } from '../../components/settings/settings';
import { StrongsModal } from "../../components/strongs-modal/strongs-modal";
import { VersePickerModal } from "../../components/verse-picker/verse-picker";
import { PagesService } from '../../services/pages-service';
import { ProfileService, User } from './../../services/profile-service';
import { SearchAutoCompleteService } from '../../services/search-autocomplete-service';
import { Reference } from '../../libs/Reference';
import { PagesService } from "../../services/pages-service";
import { ProfileService, User } from "./../../services/profile-service";
import { SearchAutoCompleteService } from "../../services/search-autocomplete-service";
import { Reference } from "../../libs/Reference";
@Component({
templateUrl: 'search.html',
templateUrl: "search.html",
providers: [SearchAutoCompleteService]
})
export class SearchPage implements OnInit {
searchQuery = '';
searchQuery = "";
loader: Loading;
@ViewChild('searchbar')
@ViewChild("searchbar")
searchbar: AutoCompleteComponent;
constructor(
private pagesService: PagesService
, private alertCtrl: AlertController
, private menu: MenuController
, public loadingCtrl: LoadingController
, public modalCtrl: ModalController
, public profileService: ProfileService
, public params: NavParams
, public autocompleteService: SearchAutoCompleteService
) {
}
private pagesService: PagesService,
private alertCtrl: AlertController,
private menu: MenuController,
public loadingCtrl: LoadingController,
public modalCtrl: ModalController,
public profileService: ProfileService,
public params: NavParams,
public autocompleteService: SearchAutoCompleteService
) {}
ngOnInit(): void {
if (this.profileService.localIsLoaded) {
this.loader = this.loadingCtrl.create({ content: 'Loading Page...' });
this.loader = this.loadingCtrl.create({ content: "Loading Page..." });
this.loader.present().then(() => {
let t = this.profileService.profile();
this.initializeItems(t);
this.loader.dismiss();
});
}
else {
} else {
this.profileService.onLocalStorageLoaded.subscribe(t => {
// Check if there is a profile saved in local storage
this.loader = this.loadingCtrl.create({ content: 'Loading Page...' });
this.loader = this.loadingCtrl.create({ content: "Loading Page..." });
this.loader.present().then(() => {
this.initializeItems(t);
this.loader.dismiss();
this.pagesService.initializePages(this.profileService.profile().saved_pages);
});
});
this.profileService.onSavedPagesChanged.subscribe(sp => {
this.pagesService.initializePages(sp);
@ -69,17 +63,17 @@ export class SearchPage implements OnInit {
for (let i in u.items) {
if (u.items.hasOwnProperty(i)) {
let ci = u.items[i];
if (ci['data'] !== undefined) {
if (ci['data'].qry !== undefined)
u.items[i] = { qry: ci['data'].qry, dict: ci.dict, type: ci.type };
else if (ci['data'].ref !== undefined)
u.items[i] = { qry: ci['data'].ref, dict: ci.dict, type: ci.type };
else if (ci['data'].word !== undefined)
u.items[i] = { qry: ci['data'].word, dict: ci.dict, type: ci.type };
else if (ci['data'].sn !== undefined)
if (ci["data"] !== undefined) {
if (ci["data"].qry !== undefined)
u.items[i] = { qry: ci["data"].qry, dict: ci.dict, type: ci.type };
else if (ci["data"].ref !== undefined)
u.items[i] = { qry: ci["data"].ref, dict: ci.dict, type: ci.type };
else if (ci["data"].word !== undefined)
u.items[i] = { qry: ci["data"].word, dict: ci.dict, type: ci.type };
else if (ci["data"].sn !== undefined)
u.items[i] = {
qry: ci['data'].sn,
dict: ci['prefix'] === 'G' ? 'grk' : 'heb',
qry: ci["data"].sn,
dict: ci["prefix"] === "G" ? "grk" : "heb",
type: ci.type
};
@ -92,17 +86,17 @@ export class SearchPage implements OnInit {
for (let i in pg.queries) {
if (pg.queries.hasOwnProperty(i)) {
let ci = pg.queries[i];
if (ci['data'] !== undefined) {
if (ci['data'].qry !== undefined)
pg.queries[i] = { qry: ci['data'].qry, dict: ci.dict, type: ci.type };
else if (ci['data'].ref !== undefined)
pg.queries[i] = { qry: ci['data'].ref, dict: ci.dict, type: ci.type };
else if (ci['data'].word !== undefined)
pg.queries[i] = { qry: ci['data'].word, dict: ci.dict, type: ci.type };
else if (ci['data'].sn !== undefined)
if (ci["data"] !== undefined) {
if (ci["data"].qry !== undefined)
pg.queries[i] = { qry: ci["data"].qry, dict: ci.dict, type: ci.type };
else if (ci["data"].ref !== undefined)
pg.queries[i] = { qry: ci["data"].ref, dict: ci.dict, type: ci.type };
else if (ci["data"].word !== undefined)
pg.queries[i] = { qry: ci["data"].word, dict: ci.dict, type: ci.type };
else if (ci["data"].sn !== undefined)
pg.queries[i] = {
qry: ci['data'].sn,
dict: ci['prefix'] === 'G' ? 'grk' : 'heb',
qry: ci["data"].sn,
dict: ci["prefix"] === "G" ? "grk" : "heb",
type: ci.type
};
@ -119,18 +113,14 @@ export class SearchPage implements OnInit {
if (this.params.data.queries !== undefined)
this.profileService.profile().items = JSON.parse(JSON.stringify(this.params.data.queries));
if (this.params.data.title === undefined)
this.profileService.title = 'Search';
else
this.profileService.title = this.params.data.title;
if (this.params.data.title === undefined) this.profileService.title = "Search";
else this.profileService.title = this.params.data.title;
if (has_migrated)
this.profileService.save();
if (has_migrated) this.profileService.save();
if (this.profileService.profile().items === undefined) {
this.profileService.profile().items = []; // sometimes, maybe because of all the weirdness with the remote syncing, this gets set to undefined, and it needs to be reset.
}
}
textSizeChanged() {
@ -142,28 +132,28 @@ export class SearchPage implements OnInit {
this.profileService.localSave();
}
actionsMenu() {
this.menu.open('actions');
this.menu.open("actions");
}
addPage() {
const alert = this.alertCtrl.create({
title: 'Save Search as Page',
title: "Save Search as Page",
inputs: [
{
name: 'title',
placeholder: 'Page Title'
name: "title",
placeholder: "Page Title"
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
text: "Cancel",
role: "cancel",
handler: (): void => {
console.log('Cancel clicked');
console.log("Cancel clicked");
}
},
{
text: 'Save',
text: "Save",
handler: data => {
const p = { queries: this.profileService.profile().items.slice(), title: data.title };
this.profileService.profile().saved_pages.push(p);
@ -177,30 +167,28 @@ export class SearchPage implements OnInit {
}
updatePage() {
const page = this.profileService.profile().saved_pages.find(
i =>
i.title === this.params.data.title
);
const page = this.profileService.profile().saved_pages.find(i => i.title === this.params.data.title);
page.queries = this.profileService.profile().items.slice();
this.profileService.save();
}
itemSelected(autocomplete: string) {
let qry = autocomplete;
let idx = qry.lastIndexOf(';');
let prefix = '';
let words = [];
let idx = qry.lastIndexOf(";");
let prefix = "";
if (idx > -1) {
qry = autocomplete.substr(idx + 1).trim();
prefix = autocomplete.substr(0, idx).trim() + '; ';
prefix = autocomplete.substr(0, idx).trim() + "; ";
}
if (qry.startsWith('Book:')) {
this.searchQuery = prefix + qry.substr(qry.indexOf('Book:')+5).trim();
autocomplete = this.searchQuery;
}
else {
this.searchQuery = autocomplete;
const bk = Reference.parseBook(qry);
if (bk.book_number > 0) {
this.searchQuery = prefix + qry.trim() + " ";
this.searchbar.setFocus();
} else {
this.searchQuery = prefix + autocomplete;
this.getQuery();
}
}
@ -208,21 +196,36 @@ export class SearchPage implements OnInit {
this.searchQuery = searchbar.target.value;
}
getQuery(searchbar) {
this.updateUIwithItems(this.searchQuery, true);
getQuery() {
const qry = this.searchQuery;
this.searchQuery = "";
this.searchbar.setValue("");
this.profileService.addSearchRequestToHistory(qry);
this.updateUIwithItems(qry, true);
}
showHistory() {
if (
this.searchQuery.trim().length === 0 &&
this.profileService.searchHistory !== null &&
this.profileService.searchHistory.length > 0
) {
this.searchbar.suggestions = this.profileService.searchHistory;
this.searchbar.showItemList();
}
}
isError(t: string) {
return t === 'Error';
return t === "Error";
}
isPassage(t: string) {
return t === 'Passage';
return t === "Passage";
}
isStrongs(t: string) {
return t === 'Strongs';
return t === "Strongs";
}
isWords(t: string) {
return t === 'Words';
return t === "Words";
}
versePicker() {
@ -238,47 +241,44 @@ export class SearchPage implements OnInit {
getItemList(search: string): Promise<CardItem[]> {
this.searchbar.hideItemList();
return new Promise((resolve) => {
return new Promise(resolve => {
const list: CardItem[] = [];
try {
const qs = search.split(';');
const qs = search.split(";");
for (let x in qs) {
if (qs.hasOwnProperty(x)) {
let q = qs[x].trim();
if (q !== '') {
if (q !== "") {
// its a search term.
if (q.search(/[0-9]/i) === -1)
list.push({ qry: q, dict: 'na', type: 'Words' });
if (q.search(/[0-9]/i) === -1) list.push({ qry: q, dict: "na", type: "Words" });
else if (q.search(/(H|G)[0-9]/i) !== -1) {
// its a strongs lookup
let dict = q.substring(0, 1);
if (dict.search(/h/i) !== -1)
dict = 'heb';
else
dict = 'grk';
if (dict.search(/h/i) !== -1) dict = "heb";
else dict = "grk";
q = q.substring(1, q.length);
list.push({ qry: q, dict: dict, type: 'Strongs' });
}
else {
list.push({ qry: q, dict: dict, type: "Strongs" });
} else {
// its a verse reference.
if (q.trim() !== '') {
if (q.trim() !== "") {
const myref = new Reference(q.trim());
list.push({ qry: myref.toString(), dict: myref.Section.start.book.book_number > 39 ? 'G' : 'H', type: 'Passage' });
list.push({
qry: myref.toString(),
dict: myref.Section.start.book.book_number > 39 ? "G" : "H",
type: "Passage"
});
}
}
}
}
}
if (this.profileService.profile().clear_search_after_query)
$('.searchbar-input').val('');
this.profileService.save();
}
catch (error) {
list.push({ qry: error, type: 'Error', dict: 'na' });
} catch (error) {
list.push({ qry: error, type: "Error", dict: "na" });
console.log(error);
}
@ -287,27 +287,32 @@ export class SearchPage implements OnInit {
}
updateUIwithItems(search: string, from_search_bar: boolean) {
// clear search box.
this.searchQuery = "";
this.searchbar.setValue("");
this.getItemList(search).then(lst => {
this.loader = this.loadingCtrl.create({ content: 'Looking up Query...' });
this.loader.present().then(
() => {
for (let item of lst) {
if (item.type === 'Strongs' && this.profileService.profile().strongs_modal && !from_search_bar) {
const modal = this.modalCtrl.create(StrongsModal, { sn: parseInt(item.qry), dict: item.dict, onItemClicked: this });
modal.present();
} else
this.profileService.addItemToList(item);
}
this.loader.dismiss();
this.loader = this.loadingCtrl.create({ content: "Looking up Query..." });
this.loader.present().then(() => {
for (let item of lst) {
if (item.type === "Strongs" && this.profileService.profile().strongs_modal && !from_search_bar) {
const modal = this.modalCtrl.create(StrongsModal, {
sn: parseInt(item.qry),
dict: item.dict,
onItemClicked: this
});
modal.present();
} else this.profileService.addItemToList(item);
}
);
this.loader.dismiss();
});
});
}
}
export type OpenData = { card: CardItem, qry: string, from_search_bar: boolean }
export type OpenData = { card: CardItem; qry: string; from_search_bar: boolean };
export type CardItem = { qry: string, type: string, dict: string }
export type CardItem = { qry: string; type: string; dict: string };
class Item {
id: number;

View File

@ -1,19 +1,19 @@
/// <reference path='../../typings/globals/jquery/index.d.ts' />
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { Catch } from 'rxjs/add/operator';
import { Storage } from '@ionic/storage';
import { Injectable } from "@angular/core";
import { AngularFireDatabase, AngularFireObject } from "angularfire2/database";
import { AngularFireAuth } from "angularfire2/auth";
import * as firebase from "firebase/app";
import { Observable } from "rxjs/Observable";
import { Catch } from "rxjs/add/operator";
import { Storage } from "@ionic/storage";
import { CardItem } from '../pages/search/search';
import { Promise } from 'q';
import { setTimeout } from 'timers';
import { CardItem } from "../pages/search/search";
import { Promise } from "q";
import { setTimeout } from "timers";
import { Output, EventEmitter } from '@angular/core';
import { Output, EventEmitter } from "@angular/core";
export const DEFAULT_USER_NAME = 'john_doe';
export const DEFAULT_USER_NAME = "john_doe";
@Injectable()
export class ProfileService {
@ -34,11 +34,21 @@ export class ProfileService {
last: CardItem;
title: string;
searchHistory: string[] = [];
constructor(private local: Storage, private db: AngularFireDatabase, public firebaseAuth: AngularFireAuth) {
this.url = document.URL;
this.isWeb = document.URL.startsWith('http') && !document.URL.startsWith('http://localhost:8080');
this.isWeb = document.URL.startsWith("http") && !document.URL.startsWith("http://localhost:8080");
this.localIsLoaded = false;
this.local.get("searchHistory").then(v => {
if (v === null) {
this.searchHistory = [];
} else {
this.searchHistory = v;
}
});
// asyncrounosly kick off a poller that does the work of syncing remotely when the
// profile needs to be synced.
(function poll(self) {
@ -49,9 +59,9 @@ export class ProfileService {
// If we have a remote profile then save it there too
if (self.remoteProfile && self.localProfile.uid) {
let st = new Date();
console.log('Saving the remote profile...');
console.log("Saving the remote profile...");
self.remoteProfile.ref.set(self.localProfile);
console.log(' Finished saving remote profile. ' + self.elapsed(st, new Date()) + 'ms');
console.log(" Finished saving remote profile. " + self.elapsed(st, new Date()) + "ms");
}
self.needsSync = false;
}
@ -60,7 +70,7 @@ export class ProfileService {
}, 2000);
})(this);
this.local.get('profile').then(json_profile => {
this.local.get("profile").then(json_profile => {
let t = this.profile();
if (json_profile !== null) t = JSON.parse(json_profile);
@ -73,6 +83,27 @@ export class ProfileService {
this.firebaseAuth.authState.subscribe(state => this.subscribeToRemoteProfile(this.db, state));
}
addSearchRequestToHistory(qry: string) {
if (this.searchHistory === null) {
this.searchHistory = [];
}
// if the query already exists, remove it so it will be unique
this.searchHistory = this.searchHistory.filter( v => v === qry);
// put it at the top.
this.searchHistory.unshift(qry);
// no more than 5.
if (this.searchHistory.length > 5)
{
this.searchHistory = this.searchHistory.slice(0, 5);
}
// save it to storage.
this.local.set("searchHistory", this.searchHistory);
}
//#region Profile
removeItem(item) {
@ -99,7 +130,7 @@ export class ProfileService {
}
isOnSearchPage() {
return this.title !== 'Search';
return this.title !== "Search";
}
profile(): User {
@ -111,10 +142,10 @@ export class ProfileService {
}
subscribeToRemoteProfile(db: AngularFireDatabase, user: firebase.User) {
console.log('subscribeToRemoteProfile');
console.log("subscribeToRemoteProfile");
if (!user || this.firebaseUser) return;
console.log('You got the firebase user.');
let obj = db.object('/settings/' + user.uid);
console.log("You got the firebase user.");
let obj = db.object("/settings/" + user.uid);
this.remoteProfile = {
ref: obj as AngularFireObject<User>,
stream: obj.valueChanges() as Observable<User>
@ -136,7 +167,7 @@ export class ProfileService {
}
handleRemotePreferenceChange(user: User) {
console.log('handleRemotePreferenceChange');
console.log("handleRemotePreferenceChange");
if (user) {
let changed = false;
if (user.saved_pages !== undefined) {
@ -177,7 +208,7 @@ export class ProfileService {
}
authenticate() {
console.log('Authenticating to remote...');
console.log("Authenticating to remote...");
let self = this;
let provider = new firebase.auth.GoogleAuthProvider();
@ -200,13 +231,13 @@ export class ProfileService {
}
refresh() {
console.log('refresh');
console.log("refresh");
this.logout();
this.authenticate();
}
logout() {
console.log('logout');
console.log("logout");
this.firebaseAuth.auth.signOut(); // sign out
this.remoteProfile = null; // inform the profile service not to bother
this.remoteLoggedIn = false;
@ -218,8 +249,8 @@ export class ProfileService {
}
localSave() {
console.log('saving local');
this.local.set('profile', JSON.stringify(this.profile()));
console.log("saving local");
this.local.set("profile", JSON.stringify(this.profile()));
}
private elapsed(start: Date, finish: Date) {
@ -252,7 +283,6 @@ export class ProfileService {
private resetUser() {
this.profile().strongs_modal = true;
this.profile().clear_search_after_query = false;
this.profile().items = [];
this.profile().append_to_bottom = false;
this.profile().insert_next_to_item = false;
@ -282,11 +312,11 @@ export class ProfileService {
// TODO(jwall): This belongs somewhere else.
textSizeChanged() {
$('html').css('font-size', this.profile().font_size + 'px');
$("html").css("font-size", this.profile().font_size + "px");
}
fontFamilyChanged() {
document.querySelector('html').style.cssText = '--card-font: ' + this.profile().font_family;
document.querySelector("html").style.cssText = "--card-font: " + this.profile().font_family;
this.textSizeChanged();
}
@ -295,11 +325,10 @@ export class ProfileService {
username: DEFAULT_USER_NAME,
uid: null,
font_size: 10,
font_family: 'roboto, helvetica, arial, sans-serif',
font_family: "roboto, helvetica, arial, sans-serif",
saved_pages: [],
items: [],
strongs_modal: true,
clear_search_after_query: false,
append_to_bottom: false,
insert_next_to_item: false,
@ -322,7 +351,6 @@ export type User = {
username: string;
uid: string | null;
strongs_modal: boolean;
clear_search_after_query: boolean;
items: CardItem[];
append_to_bottom: boolean;
insert_next_to_item: boolean;