Moved userscript to client

2026-03-18 10:34:20 +01:00
parent c8b8199e93
commit 26f1902996
20 changed files with 5 additions and 5 deletions
@@ -0,0 +1,153 @@
+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();
+    }
+  }
+}