Bump version to 9.0.2

3CX_TAPI.user.js

@@ -1,10 +1,10 @@
 // ==UserScript==
 // @name          3CX TAPI
 // @namespace     http://cp-solutions.at
-// @version       8.0.0
+// @version       9.0.2
 // @author        Daniel Triendl <d.triendl@cp-solutions.at>
 // @copyright     Copyright 2021 CP Solutions GmbH
-// @source        http://scootaloo.cp-austria.at/gitlist/3cx_tapi.git
+// @source        https://source.cp-austria.at/git/CPATRD/3cx_tapi.git
 // @downloadURL   https://source.cp-austria.at/git/CPATRD/3cx_tapi/raw/branch/master/3CX_TAPI.user.js
 // @match         https://192.168.0.154:5001/webclient*
 // @match         https://cpsolution.my3cx.at:5001/webclient*
@@ -7586,6 +7586,23 @@ module.exports = function (cssWithMappingToString) {
   };
 });
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./src/search.css":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".tapi-search-result {\n    color: #000;\n    padding: 5px;\n}\n\n.tapi-search-result:hover, .tapi-search-result-selected {\n    background-color: #E7E6E6;\n}\n\n", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./src/status.css":
@@ -7598,7 +7615,7 @@ module.exports = function (cssWithMappingToString) {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".tapi-dropdown {\n    position: relative;\n    display: inline-block;\n}\n\n.tapi-dropdown-content {\n    display: none;\n    position: absolute;\n    min-width: 200px;\n    overflow: auto;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 1;\n    color: #000;\n}\n\n.show {\n    display: block;\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".tapi-dropdown {\n    position: relative;\n    display: inline-block;\n}\n\n.tapi-dropdown-content {\n    display: none;\n    position: absolute;\n    min-width: 200px;\n    overflow: auto;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 1;\n    color: #000;\n    background-color: #fff;\n}\n\n.show {\n    display: block;\n}\n", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
 
@@ -8013,17 +8030,11 @@ class CallHistory {
         this.callerIds = {};
     }
     updateCallHistoryEntry(call, callerId) {
-        var span = call.querySelector('span');
-        this.showTimeManager(call, span.nextSibling.textContent.trim(), callerId);
+        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;
-            var br = document.createElement('br');
-            var span2 = document.createElement('span');
-            span2.style.fontSize = 'small';
-            span2.textContent = text;
-            span.parentNode.insertBefore(br, span.nextSibling);
-            span.parentNode.insertBefore(span2, span.nextSibling);
+            span.textContent = callerId.tD_NAME + ' ' + callerId.tD_NUMBER;
         }
     }
     showTimeManager(call, date, callerId) {
@@ -8050,7 +8061,7 @@ class CallHistory {
             parsedDate.getHours().toString().padStart(2, '0') +
             parsedDate.getMinutes().toString().padStart(2, '0');
         var length = (parsedDuration.getHours() * 60 + parsedDuration.getMinutes()).toString();
-        var toolbar = call.querySelector('.wcToolbarTiles');
+        var toolbar = call.querySelector('call-history-options');
         var href = 'domizil://PM/Zeitbuchung?';
         if (callerId && callerId.tD_ID) {
             href += 'KontaktId=' + callerId.tD_ID + '&';
@@ -8062,7 +8073,7 @@ class CallHistory {
         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" width="20" height="20">' +
+        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' +
@@ -8074,11 +8085,13 @@ class CallHistory {
             '  </g>' +
             '</g>' +
             '</svg>';
+        a.classList.add('btn');
+        a.classList.add('btn-plain');
         toolbar.insertBefore(a, toolbar.firstChild);
     }
     showCallHistory(element) {
         return __awaiter(this, void 0, void 0, function* () {
-            var span = element.querySelector('span');
+            var span = element.querySelector(':scope > span');
             var number = extractNumber(span.textContent);
             if (!number) {
                 this.updateCallHistoryEntry(element, undefined);
@@ -8115,7 +8128,7 @@ var call_notification_awaiter = (undefined && undefined.__awaiter) || function (
 class CallNotification {
     showCallNotification(element) {
         return call_notification_awaiter(this, void 0, void 0, function* () {
-            var number = element.dataset.id;
+            var number = element.querySelector('.callNumber').textContent;
             console.log('TAPI call notification', number);
             number = extractNumber(number);
             if (!number) {
@@ -8140,6 +8153,25 @@ class CallNotification {
     }
 }
 
+// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
+var injectStylesIntoStyleTag = __webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/search.css
+var search = __webpack_require__("./node_modules/css-loader/dist/cjs.js!./src/search.css");
+;// CONCATENATED MODULE: ./src/search.css
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = injectStylesIntoStyleTag_default()(search/* default */.Z, options);
+
+
+
+/* harmony default export */ var src_search = (search/* default.locals */.Z.locals || {});
 ;// CONCATENATED MODULE: ./src/debounce.js
 function debounce(func, wait) {
   let timeout;
@@ -8165,6 +8197,7 @@ var search_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _a
 };
 
 
+
 class Search {
     constructor() {
         this.currentSearchText = '';
@@ -8194,7 +8227,6 @@ class Search {
             contacts.forEach(contact => {
                 var li = document.createElement('li');
                 li.classList.add('tapi-search-result');
-                li.classList.add('search-result');
                 li.classList.add('pointer');
                 li.onmouseover = () => { this.selectResult(li); };
                 li.dataset.tapiNumber = contact.tD_NUMBER_TAPI;
@@ -8227,6 +8259,9 @@ class Search {
             if (items.length > 0) {
                 this.dial(items[0].dataset.tapiNumber);
             }
+            else {
+                this.dial(document.getElementById('tapiSearchInput').value);
+            }
             return false;
         };
         var searchBox = document.createElement('div');
@@ -8262,7 +8297,7 @@ class Search {
         icon.classList.add('form-control-feedback');
         icon.style.color = 'grey';
         searchWrapper.appendChild(icon);
-        element.appendChild(form);
+        element.parentElement.insertBefore(form, element);
     }
     removeSearchResults() {
         var resultList = document.getElementById('tapiResults');
@@ -8311,37 +8346,35 @@ class Search {
     selectResult(resultLi) {
         var items = document.getElementsByClassName('tapi-search-result');
         for (var item of items) {
-            item.classList.remove('bg-light');
             item.classList.remove('tapi-search-result-selected');
         }
-        resultLi.classList.add('bg-light');
         resultLi.classList.add('tapi-search-result-selected');
     }
     dial(number) {
-        var searchInput = document.getElementsByName('searchByNumberInput');
-        if (searchInput.length > 0) {
-            searchInput[0].value = number;
-            searchInput[0].focus();
-            fireChangeEvents(searchInput[0]);
+        console.log('TAPI Search dialing', number);
+        var searchInput = document.getElementById('dialpad-input');
+        searchInput.value = number;
+        searchInput.focus;
+        fireChangeEvents(searchInput);
+        var toaster = document.querySelector('toaster-container');
+        if (window.getComputedStyle(toaster, null).display == 'none') {
+            document.getElementById('menuDialer').click();
         }
     }
 }
 
-// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
-var injectStylesIntoStyleTag = __webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
-var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/status.css
 var cjs_js_src_status = __webpack_require__("./node_modules/css-loader/dist/cjs.js!./src/status.css");
 ;// CONCATENATED MODULE: ./src/status.css
 
             
 
-var options = {};
+var status_options = {};
 
-options.insert = "head";
-options.singleton = false;
+status_options.insert = "head";
+status_options.singleton = false;
 
-var update = injectStylesIntoStyleTag_default()(cjs_js_src_status/* default */.Z, options);
+var status_update = injectStylesIntoStyleTag_default()(cjs_js_src_status/* default */.Z, status_options);
 
 
 
@@ -8372,83 +8405,8 @@ class Status {
             this._statusOn = yield GM.getValue('tapi-zc-on', 'menuAvailable');
             this._statusOff = yield 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);
-            var div = document.createElement('div');
-            div.classList.add('tapi-dropdown');
-            var button = document.createElement('button');
-            button.id = 'tapi-zc-button';
-            button.classList.add('btn');
-            button.classList.add('btn-default');
-            button.innerText = 'ZeitConsens';
-            button.onclick = () => {
-                document.getElementById('tapi-zc-dropdown').classList.toggle('show');
-            };
-            div.appendChild(button);
-            var html = '<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 in</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>';
-            var dropdown = document.createElement('div');
-            dropdown.classList.add('tapi-dropdown-content');
-            dropdown.classList.add('panel-body');
-            dropdown.id = 'tapi-zc-dropdown';
-            dropdown.innerHTML = html;
-            div.appendChild(dropdown);
-            element.insertBefore(div, element.firstChild);
-            var zcUser = document.getElementById('tapi-zc-user');
-            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');
-            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');
-            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');
-            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;
-            };
             this.checkStatus();
+            waitForKeyElements("wc-account-menu > div > ul", (element) => { this.addZcStatusPopup(element); }, true);
         });
     }
     checkStatus() {
@@ -8461,7 +8419,7 @@ class Status {
                         if (this._currentStatus !== status.loggedIn) {
                             this._currentStatus = status.loggedIn;
                             console.log('New status, loggedIn', this._currentStatus);
-                            document.getElementsByClassName("current-status")[0].click();
+                            document.getElementsByTagName("wcavatar")[0].click();
                             setTimeout(() => {
                                 var statusId = this._currentStatus ? this._statusOn : this._statusOff;
                                 document.getElementById(statusId).click();
@@ -8476,6 +8434,104 @@ class Status {
             }
         });
     }
+    addZcStatusPopup(element) {
+        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 float-left">ZeitConsens Status</h4><button id="zc-btnClose" type="button" aria-label="Close" class="close float-right"><span aria-hidden="true">×</span></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">OK </button>' +
+            '      <button id="zc-btnCancel" type="button" class="btn btn-light">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;
+        var body = 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');
+        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');
+        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');
+        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');
+        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;
+        };
+    }
 }
 
 ;// CONCATENATED MODULE: ./src/index.js
@@ -8486,10 +8542,10 @@ class Status {
 
 
 console.log('script start');
-const search = new Search(); // eslint-disable-next-line no-undef
+const src_search_0 = new Search(); // eslint-disable-next-line no-undef
 
-waitForKeyElements('div.nav-search', element => {
-  search.createSearchWindow(element);
+waitForKeyElements('ongoing-call-button', element => {
+  src_search_0.createSearchWindow(element);
 }, true);
 const callNotification = new CallNotification(); // eslint-disable-next-line no-undef
 
@@ -8503,7 +8559,7 @@ waitForKeyElements('.call-history-list call', element => {
 }, false);
 const src_status_0 = new Status(); // eslint-disable-next-line no-undef
 
-waitForKeyElements('#status-change', element => {
+waitForKeyElements('wc-account-menu', element => {
   src_status_0.showStatus(element);
 }, false);
 }();

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "3cp-tapi",
-  "description": "Build your UserScript with webpack",
-  "version": "8.0.0",
+  "name": "3cx-tapi",
+  "description": "3CX CP Tapi and Projectmanager integration",
+  "version": "9.0.2",
   "author": {
     "name": "Daniel Triendl",
     "email": "d.triendl@cp-solutions.at"
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "http://scootaloo.cp-austria.at/gitlist/3cx_tapi.git"
+    "url": "https://source.cp-austria.at/git/CPATRD/3cx_tapi.git"
   },
   "private": true,
   "dependencies": {

src/call-history.ts

@@ -6,18 +6,12 @@ export class CallHistory {
   private callerIds: { [number: string]: TapiContact } = {}
 
   private updateCallHistoryEntry (call: HTMLElement, callerId: TapiContact) {
-    var span = call.querySelector('span')
-    this.showTimeManager(call, span.nextSibling.textContent.trim(), callerId)
+    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
-      var br = document.createElement('br')
-      var span2 = document.createElement('span')
-      span2.style.fontSize = 'small'
-      span2.textContent = text
-      span.parentNode.insertBefore(br, span.nextSibling)
-      span.parentNode.insertBefore(span2, span.nextSibling)
+      span.textContent = callerId.tD_NAME + ' ' + callerId.tD_NUMBER
     }
   }
 
@@ -28,7 +22,6 @@ export class CallHistory {
       date = dateParts.groups.date
       duration = dateParts.groups.duration
     }
-
     var parsedDate = chrono.de.parseDate(date)
     if (!parsedDate) {
       parsedDate = chrono.parseDate(date)
@@ -50,7 +43,7 @@ export class CallHistory {
 
     var length = (parsedDuration.getHours() * 60 + parsedDuration.getMinutes()).toString()
 
-    var toolbar = call.querySelector('.wcToolbarTiles')
+    var toolbar = call.querySelector('call-history-options')
     var href = 'domizil://PM/Zeitbuchung?'
     if (callerId && callerId.tD_ID) {
       href += 'KontaktId=' + callerId.tD_ID + '&'
@@ -62,7 +55,7 @@ export class CallHistory {
     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" width="20" height="20">' +
+    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' +
@@ -74,11 +67,14 @@ export class CallHistory {
       '  </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('span')
+    var span = element.querySelector(':scope > span')
     var number = extractNumber(span.textContent)
     if (!number) {
       this.updateCallHistoryEntry(element, undefined)

src/call-notification.ts

@@ -3,7 +3,7 @@ import { axios, extractNumber } from './utils'
 
 export class CallNotification {
   public async showCallNotification (element: HTMLElement) {
-    var number = element.dataset.id
+    var number = element.querySelector('.callNumber').textContent
     console.log('TAPI call notification', number)
 
     number = extractNumber(number)

src/index.js

@@ -9,7 +9,7 @@ console.log('script start')
 
 const search = new Search()
 // eslint-disable-next-line no-undef
-waitForKeyElements('div.nav-search', (element) => { search.createSearchWindow(element) }, true)
+waitForKeyElements('ongoing-call-button', (element) => { search.createSearchWindow(element) }, true)
 
 const callNotification = new CallNotification()
 // eslint-disable-next-line no-undef
@@ -21,4 +21,4 @@ waitForKeyElements('.call-history-list call', (element) => { callHistory.showCal
 
 const status = new Status()
 // eslint-disable-next-line no-undef
-waitForKeyElements('#status-change', (element) => { status.showStatus(element) }, false)
+waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false)

src/search.css

@@ -0,0 +1,9 @@
+.tapi-search-result {
+    color: #000;
+    padding: 5px;
+}
+
+.tapi-search-result:hover, .tapi-search-result-selected {
+    background-color: #E7E6E6;
+}
+

src/search.ts

@@ -1,3 +1,4 @@
+import './search.css'
 import { TapiContact } from './tapi-contact'
 import { debounce } from './debounce'
 import { axios, fireChangeEvents } from './utils'
@@ -19,6 +20,8 @@ export class Search {
       }
       if (items.length > 0) {
         this.dial((<HTMLElement>items[0]).dataset.tapiNumber)
+      } else {
+        this.dial((<HTMLInputElement>document.getElementById('tapiSearchInput')).value)
       }
 
       return false
@@ -61,7 +64,7 @@ export class Search {
     icon.style.color = 'grey'
     searchWrapper.appendChild(icon)
 
-    element.appendChild(form)
+    element.parentElement.insertBefore(form, element)
   }
 
   private removeSearchResults () {
@@ -135,7 +138,6 @@ export class Search {
     contacts.forEach(contact => {
       var li = document.createElement('li')
       li.classList.add('tapi-search-result')
-      li.classList.add('search-result')
       li.classList.add('pointer')
       li.onmouseover = () => { this.selectResult(li) }
       li.dataset.tapiNumber = contact.tD_NUMBER_TAPI
@@ -161,21 +163,22 @@ export class Search {
   private selectResult (resultLi: Element) {
     var items = document.getElementsByClassName('tapi-search-result')
     for (var item of items) {
-      item.classList.remove('bg-light')
       item.classList.remove('tapi-search-result-selected')
     }
 
-    resultLi.classList.add('bg-light')
     resultLi.classList.add('tapi-search-result-selected')
   }
 
   private dial (number: string) {
-    var searchInput = document.getElementsByName('searchByNumberInput')
-    if (searchInput.length > 0) {
-      (<HTMLInputElement>searchInput[0]).value = number
-      searchInput[0].focus()
+    console.log('TAPI Search dialing', number);
+    var searchInput = document.getElementById('dialpad-input');
+    (<HTMLInputElement>searchInput).value = number;
+    (<HTMLInputElement>searchInput).focus;
+    fireChangeEvents(searchInput);
 
-      fireChangeEvents(searchInput[0])
+    var toaster = document.querySelector('toaster-container');
+    if (window.getComputedStyle(toaster, null).display == 'none') {
+      document.getElementById('menuDialer').click();
     }
   }
 }

src/status.css

@@ -11,6 +11,7 @@
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
     color: #000;
+    background-color: #fff;
 }
 
 .show {

src/status.ts

@@ -18,54 +18,104 @@ export class Status {
     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);
 
-    var div = document.createElement('div');
-    div.classList.add('tapi-dropdown');
+    this.checkStatus();
 
-    var button = document.createElement('button');
-    button.id = 'tapi-zc-button';
-    button.classList.add('btn');
-    button.classList.add('btn-default');
-    button.innerText = 'ZeitConsens';
-    button.onclick = () => {
-      document.getElementById('tapi-zc-dropdown').classList.toggle('show');
+    waitForKeyElements("wc-account-menu > div > ul", (element: HTMLElement) => { this.addZcStatusPopup(element) }, true);
+  }
+
+  private async checkStatus() {
+    if (this._enabled) {
+      try {
+        var response = await axios.get<ZcStatus>('http://cpatapi.cpsrvweb2016.cp-austria.at/availability/' + encodeURIComponent(this._user));
+
+        if (response.status == 200) {
+          var status = response.data;
+          if (this._currentStatus !== status.loggedIn) {
+            this._currentStatus = status.loggedIn;
+            console.log('New status, loggedIn', this._currentStatus);
+            (document.getElementsByTagName("wcavatar")[0] as HTMLAnchorElement).click();
+            setTimeout(() => {
+              var statusId = this._currentStatus ? this._statusOn : this._statusOff;
+              (document.getElementById(statusId) as HTMLSpanElement).click();
+            }, 1000);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+      setTimeout(() => this.checkStatus(), 30000);
     }
-    div.appendChild(button);
+  }
+
+  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 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 in</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 role="document" class="modal-dialog">' +
+    '  <div class="modal-content">' +
+    '    <div class="modal-header">' +
+    '      <h4 class="modal-title float-left">ZeitConsens Status</h4><button id="zc-btnClose" type="button" aria-label="Close" class="close float-right"><span aria-hidden="true">×</span></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">OK </button>' +
+    '      <button id="zc-btnCancel" type="button" class="btn btn-light">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;
+    var body = document.getElementsByTagName('body')[0].appendChild(modal);
 
-    var dropdown = document.createElement('div');
-    dropdown.classList.add('tapi-dropdown-content');
-    dropdown.classList.add('panel-body');
-    dropdown.id = 'tapi-zc-dropdown';
-    dropdown.innerHTML = html;
-    div.appendChild(dropdown);
-
-    element.insertBefore(div, element.firstChild);
+    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;
@@ -103,31 +153,5 @@ export class Status {
       console.log('tapi-zc-off', this._statusOff);
       this._currentStatus = undefined;
     }
-
-    this.checkStatus();
-  }
-
-  private async checkStatus() {
-    if (this._enabled) {
-      try {
-        var response = await axios.get<ZcStatus>('http://cpatapi.cpsrvweb2016.cp-austria.at/availability/' + encodeURIComponent(this._user));
-
-        if (response.status == 200) {
-          var status = response.data;
-          if (this._currentStatus !== status.loggedIn) {
-            this._currentStatus = status.loggedIn;
-            console.log('New status, loggedIn', this._currentStatus);
-            (document.getElementsByClassName("current-status")[0] as HTMLAnchorElement).click();
-            setTimeout(() => {
-              var statusId = this._currentStatus ? this._statusOn : this._statusOff;
-              (document.getElementById(statusId) as HTMLAnchorElement).click();
-            }, 1000);
-          }
-        }
-      } catch (error) {
-        console.log(error);
-      }
-      setTimeout(() => this.checkStatus(), 30000);
-    }
   }
 }