import { Component , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { Router } from '@angular/router' ; import { debounceTime } from 'rxjs/operators' ; import { SearchService } from '../services/search.service' ; import { AccountService } from '../services/account.service' ; import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch' ; import { ChainService } from '../services/chain.service' ; import { HttpClient } from '@angular/common/http' ; import { Title } from '@angular/platform-browser' ; @ Component ( { selector : 'app-home' , templateUrl : './home.component.html' , styleUrls : [ './home.component.css' ] } ) export class HomeComponent implements OnInit { searchForm : FormGroup ; filteredAccounts : string [ ] ; faSearch = faSearch ; searchPlaceholder : string ; placeholders = [ 'Search by account name...' , 'Search by block number...' , 'Search by transaction id...' , 'Search by public key...' ] ; err = '' ; private currentPlaceholder = 0 ; constructor ( private formBuilder , private router , private accountService , private searchService , public chainData , private title ) { this . searchForm = this . formBuilder . group ( { search_field : [ '' , Validators . required ] } ) ; this . filteredAccounts = [ ] ; this . searchPlaceholder = this . placeholders [ 0 ] ; setInterval ( ( ) => { this . currentPlaceholder ++ ; if ( ! this . placeholders [ this . currentPlaceholder ] ) { this . currentPlaceholder = 0 ; } this . searchPlaceholder = this . placeholders [ this . currentPlaceholder ] ; } , 2000 ) ; } ngOnInit ( ) { this . searchForm . get ( 'search_field' ) . valueChanges . pipe ( debounceTime ( 300 ) ) . subscribe ( async ( result ) => { this . filteredAccounts = await this . searchService . filterAccountNames ( result ) ; } ) ; if ( this . chainData . chainInfoData . chain_name ) { this . title . setTitle ( `${ this . chainData . chainInfoData . chain_name } Hyperion Explorer` ) ; } } async submit ( ) { if ( ! this . searchForm . valid ) { return ; } const searchText = this . searchForm . get ( 'search_field' ) . value ; this . searchForm . reset ( ) ; const status = this . searchService . submitSearch ( searchText , this . filteredAccounts ) ; if ( ! status ) { this . err = 'no results for ' + searchText ; } } }