3cx_tapi/src/search.ts

import './search.css'
import { TapiContact } from './tapi-contact'
import { debounce } from './debounce'
import { fireChangeEvents } from './utils'
import GM_fetch from '@trim21/gm-fetch'

export class Search {
  private currentSearchText = ''

  public createSearchWindow (element: HTMLElement) {
    console.log('Create TAPI Search')

    var form = document.createElement('form')
    form.onsubmit = () => {
      var items = document.getElementsByClassName('tapi-search-autocomplete-active')
      if (items.length === 0) {
        items = document.getElementsByClassName('tapi-search-autocomplete-item')
      }
      if (items.length > 0) {
        this.dial((<HTMLElement>items[0]).dataset.tapiNumber)
      } else {
        this.dial((<HTMLInputElement>document.getElementById('tapiSearchInput')).value)
      }

      return false
    }

    var searchBox = document.createElement('div')
    searchBox.classList.add('tapi-search-autocomplete')
    searchBox.style.width = '200px'
    searchBox.id = 'tapiSearchBox'
    form.appendChild(searchBox)

    var search = document.createElement('input')
    search.id = 'tapiSearchInput'
    search.autocomplete = 'off'
    search.placeholder = 'TAPI Suche'
    search.onfocus = () => { this.doSearch() }
    search.onkeydown = (ev) => { this.doSearchKeyDown(ev) }
    search.onblur = () => {
      console.log('TAPI Search exit', this)
      setTimeout(() => {
        console.log('TAPI clear search results')
        this.removeSearchResults()
      }, 250)
    }
    searchBox.appendChild(search)

    element.parentElement.insertBefore(form, element)
  }

  private removeSearchResults () {
    var resultList = document.getElementById('tapi-search-autocomplete-list')
    if (resultList) {
      resultList.parentNode.removeChild(resultList)
    }
    this.currentSearchText = ''
  }

  private doSearchKeyDown (ev: KeyboardEvent) {
    if (ev.key === 'ArrowUp') {
      let items = document.getElementsByClassName('tapi-search-autocomplete-active')
      if (items.length > 0) {
        var prev = <Element>items[0].previousSibling
      }
      if (!prev) {
        items = document.getElementsByClassName('tapi-search-autocomplete-item')
        if (items.length > 0) {
          prev = items[items.length - 1]
        }
      }
      if (prev) {
        this.selectResult(prev)
        prev.scrollIntoView(true)
      }
    } else if (ev.key === 'ArrowDown') {
      let items = document.getElementsByClassName('tapi-search-autocomplete-active')
      if (items.length > 0) {
        var next = <Element>items[0].nextSibling
      }
      if (!next) {
        items = document.getElementsByClassName('tapi-search-autocomplete-item')
        if (items.length > 0) {
          next = items[0]
        }
      }
      if (next) {
        this.selectResult(next)
        next.scrollIntoView(false)
      }
    } else {
      this.doSearch()
    }
  }

  private doSearch = debounce(async () => {
    var search = <HTMLInputElement>document.getElementById('tapiSearchInput')
    var searchText = search.value.trim()
    if (searchText === '') {
      this.removeSearchResults()
      return
    } else if (searchText === this.currentSearchText) {
      return
    }
    console.log('Searching TAPI')
    var response = await GM_fetch('http://cpatapi.cpsrvweb2016.cp-austria.at/search?query=' + encodeURIComponent(searchText))
    console.log('TAPI Search response', response)
    var contacts = await response.json() as TapiContact[]
    console.log('TAPI Contacts', contacts)
    this.removeSearchResults()
    this.currentSearchText = searchText

    var results = document.createElement('div');
    results.setAttribute('id', 'tapi-search-autocomplete-list')
    results.setAttribute('class', 'tapi-search-autocomplete-items')
    document.getElementById('tapiSearchBox').appendChild(results)

    contacts.forEach(contact => {
      var item = document.createElement('div');
      item.setAttribute('class', 'tapi-search-autocomplete-item')
      var p = document.createElement('p')
      p.innerHTML = contact.tD_NAME + '<br>' + contact.tD_MEDIUM + ': ' + contact.tD_NUMBER_TAPI
      item.appendChild(p)
      item.onclick = () => { this.dial(contact.tD_NUMBER_TAPI) }
      item.onmouseover = () => { this.selectResult(item) }
      item.dataset.tapiNumber = contact.tD_NUMBER_TAPI
      results.appendChild(item);
    })
  }, 200)

  private selectResult (item: Element) {
    console.log('Select item', item)
    var items = document.getElementsByClassName('tapi-search-autocomplete-active')
    for (var i of items) {
      i.classList.remove('tapi-search-autocomplete-active')
    }

    item.classList.add('tapi-search-autocomplete-active')
  }

  private dial (number: string) {
    console.log('TAPI Search dialing', number);
    var searchInput = document.getElementById('dialpad-input');
    (<HTMLInputElement>searchInput).value = number;
    (<HTMLInputElement>searchInput).focus;
    fireChangeEvents(searchInput);

    var toaster = document.querySelector('toaster-container');
    if (window.getComputedStyle(toaster, null).display == 'none') {
      document.getElementById('menuDialer').click();
    }
  }
}