Bump version to 9.2.0

.babelrc.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true)
+
+  const presets = ['@babel/preset-env']
+
+  return {
+    presets,
+  }
+}

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+not IE 11
+not dead

.editorconfig

@@ -0,0 +1,15 @@
+[*]
+charset=utf-8
+end_of_line=lf
+trim_trailing_whitespace=true
+insert_final_newline=true
+indent_style=space
+indent_size=4
+
+[{.babelrc,.stylelintrc,.eslintrc,jest.config,*.bowerrc,*.jsb3,*.jsb2,*.json,*.yaml,*.yml}]
+indent_style=space
+indent_size=2
+
+[{*.js,*.vue,*.ts}]
+indent_style=space
+indent_size=2

.eslintrc.yaml

@@ -0,0 +1,28 @@
+---
+extends:
+  - standard
+  - plugin:import/recommended
+  - plugin:import/typescript # this line does the trick
+
+# or configure manually:
+plugins:
+  - import
+  - promise
+  - standard
+  - '@typescript-eslint'
+
+parser: '@typescript-eslint/parser'
+
+parserOptions:
+  sourceType: module
+  ecmaVersion: 6
+
+env:
+    browser: true
+    node: true
+
+rules:
+  comma-dangle: off
+  "import/order": "error"
+  "no-unused-vars": "off"
+  "@typescript-eslint/no-unused-vars": ["error"]

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.idea
+.vscode
+dist

config/metadata.cjs

@@ -0,0 +1,28 @@
+const pkg = require('../package.json')
+
+module.exports = {
+  name: '3CX TAPI',
+  namespace: 'http://cp-solutions.at',
+  version: pkg.version,
+  author: pkg.author,
+  copyright: 'Copyright 2021 CP Solutions GmbH',
+  source: pkg.repository.url,
+  downloadURL: 'https://source.cp-austria.at/git/CPATRD/3cx_tapi/raw/branch/master/3CX_TAPI.user.js',
+  match: [
+    'https://192.168.0.154:5001/*',
+    'https://cpsolution.my3cx.at:5001/*'
+  ],
+  require: [
+    'https://cdn.jsdelivr.net/gh/CoeJoder/waitForKeyElements.js@v1.2/waitForKeyElements.js',
+  ],
+  grant: [
+    'GM.xmlHttpRequest',
+    'GM.notification',
+    'GM.getValue',
+    'GM.setValue'
+  ],
+  connect: [
+    'cpatapi.cpsrvweb2016.cp-austria.at'
+  ],
+  'run-at': 'document-end'
+}

config/webpack.config.base.cjs

@@ -0,0 +1,51 @@
+const path = require('path')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const webpackConfig = {
+  resolve: {
+    extensions: ['.js', '.ts']
+  },
+  optimization: {
+    minimize: false,
+    moduleIds: 'named',
+  },
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../dist')
+  },
+  externals: {
+    jquery: '$',
+  },
+  module: {
+    rules: [
+      {
+        use: {
+          loader: 'babel-loader',
+        },
+        test: /\.js$/,
+      },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader'
+      },
+      {
+        test: /\.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'less-loader', // 将 Less 编译为 CSS
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+        ]
+      }
+    ]
+  },
+  plugins: process.env.npm_config_report ? [new BundleAnalyzerPlugin()] : [],
+}
+
+module.exports = webpackConfig

config/webpack.config.dev.cjs

@@ -0,0 +1,37 @@
+const path = require('path')
+const { merge } = require('webpack-merge')
+const LiveReloadPlugin = require('webpack-livereload-plugin')
+const { UserScriptMetaDataPlugin } = require('userscript-metadata-webpack-plugin')
+
+const metadata = require('./metadata.cjs')
+const webpackConfig = require('./webpack.config.base.cjs')
+
+metadata.require.push(
+  'file://' + path.resolve(__dirname, '../dist/index.prod.user.js')
+)
+
+const cfg = merge(webpackConfig, {
+  entry: {
+    prod: webpackConfig.entry,
+    dev: path.resolve(__dirname, './empty.cjs'),
+  },
+  output: {
+    filename: 'index.[name].user.js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  devtool: 'inline-source-map',
+  watch: true,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+  plugins: [
+    new LiveReloadPlugin({
+      delay: 500,
+    }),
+    new UserScriptMetaDataPlugin({
+      metadata,
+    }),
+  ],
+})
+
+module.exports = cfg

config/webpack.config.production.cjs

@@ -0,0 +1,19 @@
+const { merge } = require('webpack-merge')
+const { UserScriptMetaDataPlugin } = require('userscript-metadata-webpack-plugin')
+
+const metadata = require('./metadata.cjs')
+const webpackConfig = require('./webpack.config.base.cjs')
+
+const cfg = merge(webpackConfig, {
+  mode: 'production',
+  output: {
+    filename: metadata.name + '.prod.user.js',
+  },
+  plugins: [
+    new UserScriptMetaDataPlugin({
+      metadata,
+    }),
+  ],
+})
+
+module.exports = cfg

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "3cx-tapi",
+  "description": "3CX CP Tapi and Projectmanager integration",
+  "version": "9.2.1",
+  "author": {
+    "name": "Daniel Triendl",
+    "email": "d.triendl@cp-solutions.at"
+  },
+  "eslintIgnore": [
+    "dist/*.js",
+    "node_modules"
+  ],
+  "scripts": {
+    "lint": "eslint --ext .ts,.js src",
+    "preversion": "npm run lint",
+    "postversion": "git push --follow-tags",
+    "anylize": "npm_config_report=true npm run build",
+    "build": "webpack --mode production --config config/webpack.config.production.cjs",
+    "dev": "webpack --mode development --config config/webpack.config.dev.cjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://source.cp-austria.at/git/CPATRD/3cx_tapi.git"
+  },
+  "private": true,
+  "dependencies": {
+    "chrono-node": "^2.7.7"
+  },
+  "devDependencies": {
+    "@types/greasemonkey": "^4.0.7",
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "babel-loader": "^9.2.1",
+    "browserslist": "^4.21.9",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.12.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "^7.1.0S",
+    "less": "4.2.0",
+    "less-loader": "^12.2.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "userscript-metadata-webpack-plugin": "^0.4.0",
+    "webpack": "^5.95.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-livereload-plugin": "3.0.2",
+    "webpack-merge": "^6.0.1"
+  }
+}

readme.md

@@ -0,0 +1,53 @@
+# 3CX TAPI
+
+Inject CPA TAPI functions into the 3CX Webclient
+
+## dev
+
+1. Allow Tampermonkey's access to local file URIs [tampermonkey/faq](https://tampermonkey.net/faq.php?ext=dhdg#Q204)
+2. install deps with `npm i` or `npm ci`.
+3. `npm run dev` to start your development.
+4. open `webpack-userscript-template/dist/index.dev.user.js` in your Chrome and install it with your userscript manager.
+
+this userscript's meta contains `// @require file://path/to/dist/index.prod.user.js`,
+it will run the code in `index.prod.user.js`,
+which take [src/js/index.js](./src/js/index.js) as entry point.
+
+every times you edit your metadata, you'll have to install it again,
+because Tampermonkey don't read it from dist every times.
+
+5. edit [src/js/index.js](./src/js/index.js) with es6, you can even import css or less files. You can use scss if you like.
+
+livereload is default enabled, use [this chrome extension](https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei)
+
+## dependencies
+
+There are two ways to using a package on npm.
+
+### UserScript way
+
+Like original UserScript way, you will need to add them to your [user script metadata's require section](./config/metadata.js#L13-L17) , and exclude them in [config/webpack.config.base.js](./config/webpack.config.base.js#L21-L25)
+
+### Webpack way
+
+just install a package and import it in your js file. webpack will pack them with in your final production js file.
+
+## build
+
+```
+npm run build
+```
+
+`dist/index.prod.user.js` is the final script.
+
+## distribution
+
+```
+cp "dist/3CX TAPI.prod.user.js" 3CX_TAPI.user.js
+```
+
+And commit 3CX_TAPI.user.js
+
+## see also
+
+Based on [webpack-userscript-template](https://github.com/Trim21/webpack-userscript-template/)

src/call-history.ts

@@ -0,0 +1,99 @@
+import * as chrono from 'chrono-node'
+import { TapiContact } from './tapi-contact'
+import { extractNumber } from './utils'
+import GM_fetch from './gm-fetch'
+
+export class CallHistory {
+  private callerIds: { [number: string]: TapiContact } = {}
+
+  private updateCallHistoryEntry (call: HTMLElement, callerId: TapiContact) {
+    var span = call.querySelector(':scope > span')
+    this.showTimeManager(call, call.querySelector('.date').textContent, callerId)
+
+    if (callerId && callerId.tD_NAME !== '') {
+      var text = span.textContent
+      span.textContent = callerId.tD_NAME + ' ' + callerId.tD_NUMBER
+    }
+  }
+
+  private showTimeManager (call: HTMLElement, date: string, callerId: TapiContact) {
+    var dateParts = date.match(/^(?<date>.*), (?<duration>[0-9]{2}:[0-9]{2}:[0-9]{2})$/)
+    var duration = '00:00:00'
+    if (dateParts) {
+      date = dateParts.groups.date
+      duration = dateParts.groups.duration
+    }
+    var parsedDate = chrono.parseDate(date)
+    var parsedDateDe = chrono.de.parseDate(date)
+    if (parsedDateDe) {
+      parsedDate = parsedDateDe
+    }
+    if (!parsedDate) {
+      return
+    }
+    // Date parsing is awful, just assume the first number is the day of month
+    var day = date.match(/[0-9]+/)[0]
+
+    var parsedDuration = chrono.parseDate(duration)
+    console.log('TAPI call history time:', date, 'parsedDate:', parsedDate, 'duration:', duration, 'parsedDuration:', parsedDuration)
+
+    var connect = parsedDate.getFullYear().toString() +
+      (parsedDate.getMonth() + 1).toString().padStart(2, '0') + // (January gives 0)
+      day.toString().padStart(2, '0') +
+      parsedDate.getHours().toString().padStart(2, '0') +
+      parsedDate.getMinutes().toString().padStart(2, '0')
+
+    var length = (parsedDuration.getHours() * 60 + parsedDuration.getMinutes()).toString()
+
+    var toolbar = call.querySelector('call-history-options')
+    var href = 'domizil://PM/Zeitbuchung?'
+    if (callerId && callerId.tD_ID) {
+      href += 'KontaktId=' + callerId.tD_ID + '&'
+    }
+    href += 'connect=' + connect + '&length=' + length
+    var a = document.createElement('a')
+    a.title = 'PM Zeitbuchung'
+    a.dataset.domizilLink = href
+    a.onclick = () => {
+      window.open(href)
+    }
+    a.innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.98 559.98">' +
+      '<g>' +
+      '  <g>' +
+      '    <path d="M279.99,0C125.601,0,0,125.601,0,279.99c0,154.39,125.601,279.99,279.99,279.99c154.39,0,279.99-125.601,279.99-279.99' +
+      '      C559.98,125.601,434.38,0,279.99,0z M279.99,498.78c-120.644,0-218.79-98.146-218.79-218.79' +
+      '      c0-120.638,98.146-218.79,218.79-218.79s218.79,98.152,218.79,218.79C498.78,400.634,400.634,498.78,279.99,498.78z"/>' +
+      '    <path d="M304.226,280.326V162.976c0-13.103-10.618-23.721-23.716-23.721c-13.102,0-23.721,10.618-23.721,23.721v124.928' +
+      '      c0,0.373,0.092,0.723,0.11,1.096c-0.312,6.45,1.91,12.999,6.836,17.926l88.343,88.336c9.266,9.266,24.284,9.266,33.543,0' +
+      '      c9.26-9.266,9.266-24.284,0-33.544L304.226,280.326z"/>' +
+      '  </g>' +
+      '</g>' +
+      '</svg>'
+
+    a.classList.add('btn');
+    a.classList.add('btn-plain');
+    toolbar.insertBefore(a, toolbar.firstChild)
+  }
+
+  public async showCallHistory (element: HTMLElement) {
+    var span = element.querySelector(':scope > span')
+    var number = extractNumber(span.textContent)
+    if (!number) {
+      this.updateCallHistoryEntry(element, undefined)
+      return
+    }
+
+    if (this.callerIds[number] !== undefined) {
+      this.updateCallHistoryEntry(element, this.callerIds[number])
+    } else {
+      var response = await GM_fetch('http://cpatapi.cpsrvweb2016.cp-austria.at/callerid/' + encodeURIComponent(number))
+      var callerId: TapiContact = { tD_NAME: '' }
+      if (response.status === 200) {
+        callerId = await response.json() as TapiContact
+      }
+      console.log('TAPI call histroy callerid response', number, response, callerId)
+      this.callerIds[number] = callerId
+      this.updateCallHistoryEntry(element, callerId)
+    }
+  }
+}

src/call-notification.ts

@@ -0,0 +1,32 @@
+import GM_fetch from './gm-fetch'
+import { TapiContact } from './tapi-contact'
+import { extractNumber } from './utils'
+
+export class CallNotification {
+  public async showCallNotification (element: HTMLElement) {
+    var number = element.querySelector('.callNumber').textContent
+    console.log('TAPI call notification', number)
+
+    number = extractNumber(number)
+    if (!number) {
+      console.log('TAPI callerid no number found')
+      return
+    }
+
+    console.log('TAPI searching callerid for', number)
+    var response = await GM_fetch('http://cpatapi.cpsrvweb2016.cp-austria.at/callerid/' + encodeURIComponent(number))
+    console.log('TAPI callerid response', response)
+    var notification = {
+      text: number
+    }
+    if (response.status === 200) {
+      var callerId = await response.json() as TapiContact
+      if (callerId) {
+        notification.text = callerId.tD_NAME + '\r\n' + number + ' (' + callerId.tD_MEDIUM + ')'
+      }
+    }
+
+    // eslint-disable-next-line no-undef
+    GM.notification(notification.text, 'TAPI Anruf')
+  }
+}

src/debounce.js

@@ -0,0 +1,13 @@
+export function debounce (func, wait) {
+  let timeout
+
+  return function executedFunction (...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}

src/gm-fetch/index.ts

@@ -0,0 +1,55 @@
+import { parseGMResponse } from "./utils";
+
+export default async function GM_fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  const request = new Request(input, init);
+
+  let data: string | undefined;
+  if (init?.body) {
+    data = await request.text();
+  }
+
+  return await XHR(request, init, data);
+}
+
+function XHR(request: Request, init: RequestInit | undefined, data: string | undefined): Promise<Response> {
+  return new Promise((resolve, reject) => {
+    if (request.signal && request.signal.aborted) {
+      return reject(new DOMException("Aborted", "AbortError"));
+    }
+
+    GM.xmlHttpRequest({
+      url: request.url,
+      method: gmXHRMethod(request.method.toUpperCase()),
+      headers: Object.fromEntries(new Headers(init?.headers).entries()),
+      data: data,
+      responseType: "blob",
+      onload(res) {
+        resolve(parseGMResponse(request, res));
+      },
+      onabort() {
+        reject(new DOMException("Aborted", "AbortError"));
+      },
+      ontimeout() {
+        reject(new TypeError("Network request failed, timeout"));
+      },
+      onerror(err) {
+        reject(new TypeError("Failed to fetch: " + err.finalUrl));
+      },
+    });
+  });
+}
+
+const httpMethods = ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "TRACE", "OPTIONS", "CONNECT"] as const;
+
+// a ts type helper to narrow type
+function includes<T extends U, U>(array: ReadonlyArray<T>, element: U): element is T {
+  return array.includes(element as T);
+}
+
+function gmXHRMethod(method: string): (typeof httpMethods)[number] {
+  if (includes(httpMethods, method)) {
+    return method;
+  }
+
+  throw new Error(`unsupported http method ${method}`);
+}

src/gm-fetch/utils.ts

@@ -0,0 +1,145 @@
+export function parseRawHeaders(h: string): Headers {
+  const s = h.trim();
+  if (!s) {
+    return new Headers();
+  }
+
+  const array: [string, string][] = s.split("\r\n").map((value) => {
+    let s = value.split(":");
+    return [s[0].trim(), s[1].trim()];
+  });
+
+  return new Headers(array);
+}
+
+export function parseGMResponse(req: Request, res: GM.Response<any>): Response {
+  return new ResImpl(res.response as Blob, {
+    statusCode: res.status,
+    statusText: res.statusText,
+    headers: parseRawHeaders(res.responseHeaders),
+    finalUrl: res.finalUrl,
+    redirected: res.finalUrl === req.url,
+  });
+}
+
+interface ResInit {
+  redirected: boolean;
+  headers: Headers;
+  statusCode: number;
+  statusText: string;
+  finalUrl: string;
+}
+
+class ResImpl implements Response {
+  private _bodyUsed: boolean;
+  private readonly rawBody: Blob;
+  private readonly init: ResInit;
+
+  readonly body: ReadableStream<Uint8Array> | null;
+  readonly headers: Headers;
+  readonly redirected: boolean;
+  readonly status: number;
+  readonly statusText: string;
+  readonly type: ResponseType;
+  readonly url: string;
+
+  constructor(body: Blob, init: ResInit) {
+    this.rawBody = body;
+    this.init = init;
+
+    //this.body = toReadableStream(body);
+    const { headers, statusCode, statusText, finalUrl, redirected } = init;
+    this.headers = headers;
+    this.status = statusCode;
+    this.statusText = statusText;
+    this.url = finalUrl;
+    this.type = "basic";
+    this.redirected = redirected;
+    this._bodyUsed = false;
+  }
+
+  get bodyUsed(): boolean {
+    return this._bodyUsed;
+  }
+
+  get ok(): boolean {
+    return this.status < 300;
+  }
+
+  arrayBuffer(): Promise<ArrayBuffer> {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'arrayBuffer' on 'Response': body stream already read");
+    }
+    this._bodyUsed = true;
+    return this.rawBody.arrayBuffer();
+  }
+
+  blob(): Promise<Blob> {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'blob' on 'Response': body stream already read");
+    }
+    this._bodyUsed = true;
+    // `slice` will use empty string as default value, so need to pass all arguments.
+    return Promise.resolve(this.rawBody.slice(0, this.rawBody.size, this.rawBody.type));
+  }
+
+  clone(): Response {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'clone' on 'Response': body stream already read");
+    }
+    return new ResImpl(this.rawBody, this.init);
+  }
+
+  formData(): Promise<FormData> {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'formData' on 'Response': body stream already read");
+    }
+    this._bodyUsed = true;
+    return this.rawBody.text().then(decode);
+  }
+
+  async json(): Promise<any> {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'json' on 'Response': body stream already read");
+    }
+    this._bodyUsed = true;
+    return JSON.parse(await this.rawBody.text());
+  }
+
+  text(): Promise<string> {
+    if (this.bodyUsed) {
+      throw new TypeError("Failed to execute 'text' on 'Response': body stream already read");
+    }
+    this._bodyUsed = true;
+    return this.rawBody.text();
+  }
+}
+
+function decode(body: string) {
+  const form = new FormData();
+
+  body
+    .trim()
+    .split("&")
+    .forEach(function (bytes) {
+      if (bytes) {
+        const split = bytes.split("=");
+        const name = split.shift()?.replace(/\+/g, " ");
+        const value = split.join("=").replace(/\+/g, " ");
+        form.append(decodeURIComponent(name!), decodeURIComponent(value));
+      }
+    });
+
+  return form;
+}
+
+/*
+function toReadableStream(value: Blob) {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(value);
+      controller.close();
+    },
+  });
+}
+*/

src/index.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as chrono from 'chrono-node'
+import { CallHistory } from './call-history'
+import { CallNotification } from './call-notification'
+import { Search } from './search'
+import { Status } from './status'
+
+console.log('script start')
+
+const search = new Search()
+// eslint-disable-next-line no-undef
+waitForKeyElements('ongoing-call-button', (element) => { search.createSearchWindow(element) }, false)
+
+const callNotification = new CallNotification()
+// eslint-disable-next-line no-undef
+waitForKeyElements('call-view', (element) => { callNotification.showCallNotification(element) }, false)
+
+const callHistory = new CallHistory()
+// eslint-disable-next-line no-undef
+waitForKeyElements('.call-history-list call', (element) => { callHistory.showCallHistory(element) }, false)
+
+const status = new Status()
+// eslint-disable-next-line no-undef
+waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false)

src/search.css

@@ -0,0 +1,42 @@
+.tapi-search-autocomplete {
+    /*the container must be positioned relative:*/
+    position: relative;
+    display: inline-block;
+    margin-right: 20px;
+  }
+.tapi-search-autocomplete input {
+    border: 1px solid transparent;
+    background-color: #f1f1f1;
+    /*padding: 10px;*/
+    /*font-size: 16px;*/
+}
+.tapi-search-autocomplete input[type=text] {
+    background-color: #f1f1f1;
+    width: 100%;
+}
+
+.tapi-search-autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+.tapi-search-autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
+    color: #000;
+}
+.tapi-search-autocomplete-items div p {
+    margin: 0;
+}
+.tapi-search-autocomplete-items div:hover, .tapi-search-autocomplete-active {
+    /*when hovering an item:*/
+    background-color: #E7E6E6 !important;
+}

src/search.ts

@@ -0,0 +1,153 @@
+import './search.css'
+import { TapiContact } from './tapi-contact'
+import { debounce } from './debounce'
+import { fireChangeEvents } from './utils'
+import GM_fetch from './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();
+    }
+  }
+}

src/status.css

@@ -0,0 +1,19 @@
+.tapi-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.tapi-dropdown-content {
+    display: none;
+    position: absolute;
+    min-width: 200px;
+    overflow: auto;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    color: #000;
+    background-color: #fff;
+}
+
+.show {
+    display: block;
+}

src/status.ts

@@ -0,0 +1,159 @@
+import GM_fetch from './gm-fetch';
+import './status.css';
+import { ZcStatus } from './zc-status';
+
+declare function waitForKeyElements(selectorOrFunction: any, callback: any, waitOnce: boolean): any;
+
+export class Status {
+  private _user: string;
+  private _enabled = false;
+  private _statusOn = 'menuAvailable';
+  private _statusOff = 'menuAway';
+  private _currentStatus: boolean = undefined;
+
+  public async showStatus(element: HTMLElement) {
+    this._user = await GM.getValue('tapi-zc-user', '');
+    this._enabled = await GM.getValue('tapi-zc-enabled', false);
+    this._statusOn = await GM.getValue('tapi-zc-on', 'menuAvailable');
+    this._statusOff = await GM.getValue('tapi-zc-off', 'menuAvailable');
+    console.log('tapi-zc-user', this._user, 'tapi-zc-enabled', this._enabled, 'tapi-zc-on', this._statusOn, 'tapi-zc-off', this._statusOff);
+
+    this.checkStatus();
+
+    waitForKeyElements("wc-account-menu > div > ul", (element: HTMLElement) => { this.addZcStatusPopup(element) }, true);
+  }
+
+  private async checkStatus() {
+    if (this._enabled) {
+      try {
+        var response = await GM_fetch('http://cpatapi.cpsrvweb2016.cp-austria.at/availability/' + encodeURIComponent(this._user));
+        if (response.status == 200) {
+          var status = await response.json() as ZcStatus;
+          if (this._currentStatus !== status.loggedIn) {
+            this._currentStatus = status.loggedIn;
+            console.log('New status, loggedIn', this._currentStatus);
+            var accMenu = document.getElementsByTagName("wc-account-menu")[0];
+            var avatar = accMenu.getElementsByTagName("app-avatar")[0] as HTMLAnchorElement;
+            avatar.click();
+            setTimeout(() => {
+              var statusId = this._currentStatus ? this._statusOn : this._statusOff;
+              console.log('Clicking status', statusId);
+              (document.getElementById(statusId) as HTMLSpanElement).click();
+            }, 1000);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+      setTimeout(() => this.checkStatus(), 30000);
+    }
+  }
+
+  private addZcStatusPopup(element: HTMLElement) {
+    var divider = document.createElement('li');
+    divider.classList.add('divider');
+    divider.classList.add('dropdown-divider');
+    element.appendChild(divider);
+
+    var menu = document.createElement('li');
+    element.appendChild(menu);
+
+    var link = document.createElement('a');
+    link.id = 'tapi-zc-button';
+    link.innerText = 'ZeitConsens';
+    link.classList.add('dropdown-item');
+    link.classList.add('d-flex');
+    link.onclick = () => {
+      document.getElementById('zc-modal').classList.toggle('show');
+    }
+    menu.appendChild(link);
+
+    var html =
+    '<div role="document" class="modal-dialog">' +
+    '  <div class="modal-content">' +
+    '    <div class="modal-header">' +
+    '      <h4 class="modal-title">ZeitConsens Status</h4><button id="zc-btnClose" type="button" aria-label="Close" class="btn-close"  data-qa="modal-cross"></button>' +
+    '    </div>' +
+    '    <div class="modal-body">' +
+    '      <div class="form-group">' +
+    '        <label for="tapi-zc-user">Username</label>' +
+    '        <input type="text" class="form-control" name="tapi-zc-user" id="tapi-zc-user">' +
+    '      </div>' +
+    '      <div class="form-group">' +
+    '        <label for="tapi-zc-on">Signed in</label>' +
+    '        <select id="tapi-zc-on" class="form-control">' +
+    '          <option value="menuAvailable">Available</option>' +
+    '          <option value="menuOutofoffice">Do Not Disturb</option>' +
+    '          <option value="menuCustom1">Verfügbar DW</option>' +
+    '        </select>' +
+    '      </div>' +
+    '      <div class="form-group">' +
+    '        <label for="tapi-zc-off">Signed out</label>' +
+    '        <select id="tapi-zc-off" class="form-control">' +
+    '          <option value="menuAway">Away</option>' +
+    '          <option value="menuOutofoffice">Do Not Disturb</option>' +
+    '        </select>' +
+    '      </div>' +
+    '      <div class="checkbox">' +
+    '        <label class="i-checks" for="tapi-zc-enabled">' +
+    '          <input type="checkbox" id="tapi-zc-enabled">' +
+    '          <i></i><span>Enabled</span>' +
+    '      </label>' +
+    '      </div>' +
+    '    </div>' +
+    //'    <div class="modal-footer">' +
+    //'      <button id="zc-btnOk" type="button" class="btn btn-primary" data-qa="modal-ok">OK </button>' +
+    //'      <button id="zc-btnCancel" type="button" class="btn btn-border" data-qa="modal-close">Cancel </button>' +
+    //'    </div>' +
+    '  </div>' +
+    '</div>';
+    var modal = document.createElement('modal-container');
+    modal.id = 'zc-modal';
+    modal.classList.add('modal');
+    modal.classList.add('fade');
+    modal.innerHTML = html;
+    document.getElementsByTagName('body')[0].appendChild(modal);
+
+    var btnClose = document.getElementById('zc-btnClose');
+    btnClose.onclick = () => {
+      document.getElementById('zc-modal').classList.toggle('show');
+    }
+
+    var zcUser = document.getElementById('tapi-zc-user') as HTMLInputElement;
+    zcUser.value = this._user;
+    zcUser.onchange = () => {
+      this._user = zcUser.value;
+      GM.setValue('tapi-zc-user', this._user);
+      console.log('tapi-zc-user', this._user);
+      this._currentStatus = undefined;
+    }
+
+    var zcEnabled = document.getElementById('tapi-zc-enabled') as HTMLInputElement;
+    zcEnabled.checked = this._enabled;
+    zcEnabled.onchange = () => {
+      this._enabled = zcEnabled.checked;
+      GM.setValue('tapi-zc-enabled', this._enabled);
+      console.log('tapi-zc-enabled', this._enabled);
+      this._currentStatus = undefined;
+      this.checkStatus();
+    }
+
+    var zcOn = document.getElementById('tapi-zc-on') as HTMLSelectElement;
+    zcOn.value = this._statusOn;
+    zcOn.onchange = () => {
+      this._statusOn = zcOn.value;
+      GM.setValue('tapi-zc-on', this._statusOn);
+      console.log('tapi-zc-on', this._statusOn);
+      this._currentStatus = undefined;
+    }
+
+    var zcOff = document.getElementById('tapi-zc-off') as HTMLSelectElement;
+    zcOff.value = this._statusOff;
+    zcOff.onchange = () => {
+      this._statusOff = zcOff.value;
+      GM.setValue('tapi-zc-off', this._statusOff);
+      console.log('tapi-zc-off', this._statusOff);
+      this._currentStatus = undefined;
+    }
+  }
+}

src/tapi-contact.ts

@@ -0,0 +1,8 @@
+/* eslint-disable camelcase */
+export interface TapiContact {
+  tD_ID?: string;
+  tD_NAME: string;
+  tD_NUMBER?: string;
+  tD_NUMBER_TAPI?: string;
+  tD_MEDIUM?: string;
+}

src/utils.ts

@@ -0,0 +1,29 @@
+export function extractNumber (s: string) {
+  var match = /(\+?[0-9]{4,})/.exec(s)
+  if (!match) {
+    return undefined
+  }
+
+  var number = match[1]
+  if (number.startsWith('+')) {
+    number = number.replace('+', '00')
+  }
+
+  return number
+}
+
+export function fireChangeEvents (element: Element) {
+  var changeEvent = null
+  changeEvent = document.createEvent('HTMLEvents')
+  changeEvent.initEvent('input', true, true)
+  element.dispatchEvent(changeEvent)
+  console.debug('input event dispatched for element: ' + element.id)
+  changeEvent = document.createEvent('HTMLEvents')
+  changeEvent.initEvent('keyup', true, true)
+  element.dispatchEvent(changeEvent)
+  console.debug('keyup event dispatched for element: ' + element.id)
+  changeEvent = document.createEvent('HTMLEvents')
+  changeEvent.initEvent('change', true, true)
+  element.dispatchEvent(changeEvent)
+  console.debug('change event dispatched for element: ' + element.id)
+}

src/zc-status.ts

@@ -0,0 +1,4 @@
+export class ZcStatus {
+  public user: string;
+  public loggedIn: boolean;
+}

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "ESNext",
+    "target": "ES2022",
+    "allowJs": true,
+    "moduleResolution": "node"
+  }
+}