Version 8.0.0.

package.json

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

readme.md

@@ -43,7 +43,7 @@ npm run build
 ## distribution
 
 ```
-cp "dist/3CX TAPI.prod.user.js" 3CX_TAPI.user.js
+cp dist/index.prod.user.js 3CX_TAPI.user.js
 ```
 
 And commit 3CX_TAPI.user.js

src/call-history.ts

@@ -6,12 +6,18 @@ export class CallHistory {
   private callerIds: { [number: string]: TapiContact } = {}
 
   private updateCallHistoryEntry (call: HTMLElement, callerId: TapiContact) {
-    var span = call.querySelector(':scope > span')
+    var span = call.querySelector('span')
-    this.showTimeManager(call, call.querySelector('.date').textContent, callerId)
+    this.showTimeManager(call, span.nextSibling.textContent.trim(), callerId)
 
     if (callerId && callerId.tD_NAME !== '') {
       var text = span.textContent
-      span.textContent = callerId.tD_NAME + ' ' + callerId.tD_NUMBER
+      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)
     }
   }
 
@@ -22,6 +28,7 @@ export class CallHistory {
       date = dateParts.groups.date
       duration = dateParts.groups.duration
     }
+
     var parsedDate = chrono.de.parseDate(date)
     if (!parsedDate) {
       parsedDate = chrono.parseDate(date)
@@ -43,7 +50,7 @@ export class CallHistory {
 
     var length = (parsedDuration.getHours() * 60 + parsedDuration.getMinutes()).toString()
 
-    var toolbar = call.querySelector('call-history-options')
+    var toolbar = call.querySelector('.wcToolbarTiles')
     var href = 'domizil://PM/Zeitbuchung?'
     if (callerId && callerId.tD_ID) {
       href += 'KontaktId=' + callerId.tD_ID + '&'
@@ -55,7 +62,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">' +
+    a.innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.98 559.98" width="20" height="20">' +
       '<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' +
@@ -67,14 +74,11 @@ 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(':scope > span')
+    var span = element.querySelector('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.querySelector('.callNumber').textContent
+    var number = element.dataset.id
     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('ongoing-call-button', (element) => { search.createSearchWindow(element) }, true)
+waitForKeyElements('div.nav-search', (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('wc-account-menu', (element) => { status.showStatus(element) }, false)
+waitForKeyElements('#status-change', (element) => { status.showStatus(element) }, false)

src/search.ts

@@ -19,8 +19,6 @@ export class Search {
       }
       if (items.length > 0) {
         this.dial((<HTMLElement>items[0]).dataset.tapiNumber)
-      } else {
-        this.dial((<HTMLInputElement>document.getElementById('tapiSearchInput')).value)
       }
 
       return false
@@ -63,7 +61,7 @@ export class Search {
     icon.style.color = 'grey'
     searchWrapper.appendChild(icon)
 
-    element.parentElement.insertBefore(form, element)
+    element.appendChild(form)
   }
 
   private removeSearchResults () {
@@ -172,15 +170,12 @@ export class Search {
   }
 
   private dial (number: string) {
-    console.log('TAPI Search dialing', number);
+    var searchInput = document.getElementsByName('searchByNumberInput')
-    var searchInput = document.getElementById('dialpad-input');
+    if (searchInput.length > 0) {
-    (<HTMLInputElement>searchInput).value = number;
+      (<HTMLInputElement>searchInput[0]).value = number
-    (<HTMLInputElement>searchInput).focus;
+      searchInput[0].focus()
-    fireChangeEvents(searchInput);
 
-    var toaster = document.querySelector('toaster-container');
+      fireChangeEvents(searchInput[0])
-    if (window.getComputedStyle(toaster, null).display == 'none') {
-      document.getElementById('menuDialer').click();
     }
   }
 }

src/status.css

@@ -11,7 +11,6 @@
     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,61 +18,20 @@ 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);
 
-    this.checkStatus();
+    var div = document.createElement('div');
+    div.classList.add('tapi-dropdown');
 
-    waitForKeyElements("wc-account-menu > div > ul", (element: HTMLElement) => { this.addZcStatusPopup(element) }, true);
+    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);
-  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);
-    }
-  }
-
-  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 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">' +
@@ -86,7 +45,7 @@ export class Status {
       '  </select>' +
       '</div>' +
       '<div class="form-group">' +
-    '        <label for="tapi-zc-off">Signed out</label>' +
+      '  <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>' +
@@ -98,24 +57,15 @@ export class Status {
       '    <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');
+    var dropdown = document.createElement('div');
-    btnClose.onclick = () => {
+    dropdown.classList.add('tapi-dropdown-content');
-      document.getElementById('zc-modal').classList.toggle('show');
+    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') as HTMLInputElement;
     zcUser.value = this._user;
@@ -153,5 +103,27 @@ export class Status {
       console.log('tapi-zc-off', this._statusOff);
       this._currentStatus = undefined;
     }
+
+    this.checkStatus();
+  }
+
+  private async checkStatus() {
+    if (this._enabled) {
+      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);
+        }
+      }
+      setTimeout(() => this.checkStatus(), 10000);
+    }
   }
 }