import { Component , ElementRef , ViewChild } from '@angular/core' ; import { NavController , LoadingController , Events , Content , ToastController } from 'ionic-angular' ; import { Subject } from 'rxjs/Subject' ; import 'rxjs/add/operator/debounceTime' ; import { Observable } from 'rxjs/Observable' ; import { Observer } from 'rxjs/Observer' ; import { Subscription } from 'rxjs/Subscription' ; import { Keyboard } from '@ionic-native/keyboard' ; import { Util } from '../../core/utils' ; import { DBService } from '../../core/db' ; import { contacts , mockContacts } from './mock-data' ; @ Component ( { selector : 'page-contact' , templateUrl : 'contact.html' } ) export class ContactPage { @ ViewChild ( Content ) content : Content ; private version : string ; private searchWord : string ; private textEmitter : Subject < string > = new Subject ( ) ; private eventBus : Observable < any > ; private observer : Observer < any > ; private hideSubscription : Subscription ; private showSubscription : Subscription ; private loading : any ; private contacts ; private letters = [ 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' , 'K' , 'L' , 'M' , 'N' , 'O' , 'P' , 'Q' , 'R' , 'S' , 'T' , 'U' , 'V' , 'W' , 'X' , 'Y' , 'Z' , '#' ] ; constructor ( private keyboard , private event , private navCtrl , private loadingCtrl , private elementRef , private util , private db , private toastCtrl ) { this . version = this . util . getNavigator ( ) ; this . searchWord = '' ; this . loading = null ; this . contacts = contacts ; this . eventBus = new Observable ( observer => this . observer = observer ) . debounceTime ( 500 ) ; this . eventBus . subscribe ( text => { if ( text ) { this . getDataFromDB ( text ) ; } } ) ; } private initData ( ) { let sqls = [ ] ; for ( let item of mockContacts ) { let childItem = [ ] ; let firstStr = 'replace into contact' + '(name,' + 'phone,' + 'index) ' + 'values (?,?,?)' ; childItem . push ( firstStr ) ; let second = [ item . name , item . phone , item . index , ] ; childItem . push ( second ) ; sqls . push ( childItem ) ; } return this . db . myDataBase . sqlBatch ( sqls ) . then ( ( ) => { console . log ( '批量插入成功' ) ; } ) . catch ( ( ) => { console . log ( '批量插入失败' ) ; } ) ; } ionViewDidEnter ( ) { this . hideSubscription = this . keyboard . onKeyboardShow ( ) . subscribe ( ( ) => this . event . publish ( 'hideTabs' ) ) ; this . showSubscription = this . keyboard . onKeyboardHide ( ) . subscribe ( ( ) => this . event . publish ( 'showTabs' ) ) ; } private scrollTo ( letter ) { this . toastCtrl . create ( { message : letter , duration : 1000 , position : 'middle' } ) . present ( ) ; if ( letter === '#' ) { letter = '\\#' ; } let topLocation = 0 ; for ( let item in this . letters ) { let itemDom = this . elementRef . nativeElement . querySelector ( 'div#' + this . letters [ item ] ) ; if ( itemDom ) { topLocation = itemDom . getBoundingClientRect ( ) . top ; break ; } } let ele = this . elementRef . nativeElement . querySelector ( 'div#' + letter ) ; if ( ele ) { let s = ele . getBoundingClientRect ( ) ; this . content . scrollTo ( 0 , s . top - topLocation , 300 ) ; } } private getDataFromDB ( text ? ) { if ( text ) { let sql = "select * from contact where name like '%" + text + "%'" + " or phone like '%" + text + "%'" + " order by index" ; console . log ( sql ) ; this . db . myDataBase . executeSql ( sql , { } ) . then ( data => { console . log ( '查询' + text + '数据成功' ) ; this . contacts = this . setContracts ( data ) ; } ) . catch ( erroe => { console . log ( '查询' + text + '数据失败' ) ; } ) ; } else { let sql = "select * from contact order by index" ; console . log ( sql ) ; this . db . myDataBase . executeSql ( sql , { } ) . then ( data => { console . log ( '获取所有数据成功' ) ; this . contacts = this . setContracts ( data ) ; } ) . catch ( erroe => { console . log ( '获取所有数据失败' ) ; } ) ; } } private onInput ( event ) { this . observer . next ( event . target . value . trim ( ) ) ; } private onClear ( event ) { this . keyboard . close ( ) ; this . searchWord = '' ; this . presentLoading ( ) ; this . getDataFromDB ( ) ; this . dismissLoading ( ) ; } private setContracts ( data ) { const length = data . rows . length ; let showList = [ ] ; let specialList = [ ] ; let rows = data . rows ; for ( let i = 0 ; i < length ; i ++ ) { if ( rows . item ( i ) . index . trim ( ) === '#' ) { let specialItem = { name : rows . item ( i ) . name , phone : rows . item ( i ) . phone , type : 1 , firstLetter : rows . item ( i ) . name . charAt ( 0 ) , index : rows . item ( i ) . index } ; specialList . push ( specialItem ) ; continue ; } if ( i === 0 || rows . item ( i ) . index . trim ( ) !== rows . item ( i - 1 ) . index . trim ( ) ) { let item = { type : 0 , index : rows . item ( i ) . index . toUpperCase ( ) } ; showList . push ( item ) ; } let dataItem = { name : rows . item ( i ) . name , phone : rows . item ( i ) . phone , type : 1 , firstLetter : rows . item ( i ) . name . charAt ( 0 ) , index : rows . item ( i ) . index } ; showList . push ( dataItem ) ; } if ( specialList . length > 0 ) { let item = { type : 0 , index : '#' } ; showList . push ( item ) ; return showList . concat ( specialList ) ; } else { return showList ; } } private presentLoading ( ) { if ( ! this . loading ) { this . loading = this . loadingCtrl . create ( { content : '请稍候' } ) ; this . loading . present ( ) ; } } private dismissLoading ( ) { if ( this . loading ) { this . loading . dismiss ( ) ; this . loading = null ; } } ionViewWillLeave ( ) { this . keyboard . close ( ) ; if ( this . hideSubscription ) { this . hideSubscription . unsubscribe ( ) ; this . hideSubscription = null ; } if ( this . showSubscription ) { this . showSubscription . unsubscribe ( ) ; this . showSubscription = null ; } this . dismissLoading ( ) ; } }