document.body.insertAdjacentHTML('beforeend', `
`);
class VodiaIdentitySwitcher {
// --- Configuration ---
API_BASE_URL = window.baseurl || '/';
CACHE_DURATION_MS = 60000; // 60 seconds
LOCK_TIMEOUT_MS = 5000; // 5 seconds for a request to complete
CACHE_KEY = 'vodiaIdentityCache';
LOCK_KEY = 'vodiaIdentityCache_lock';
TEXT = {
checking: "Prüfe...",
setting: "Ändere...",
dropdownTitle: "Ausgehende Identität wählen:",
ownExtension: "Eigene Nummer",
customIdentity: "Andere Nummer",
noActiveCall: "Kein aktiver Anruf gefunden.",
lookupError: "Fehler bei der Anrufabfrage.",
fetchError: "Fehler"
};
// --- State ---
elements = {};
templates = {};
constructor(parentElement) {
if (!parentElement) return;
this._initializeTemplates();
if (!this.templates.main || !this.templates.listItem) return;
this._createSwitcherUI(parentElement);
this._addEventListeners();
// Initial load if tab is already visible
if (document.visibilityState === 'visible') {
this.loadIdentity();
}
}
// --- Private Methods: Initialization ---
_initializeTemplates() {
this.templates.main = document.getElementById('vodia-identity-template');
this.templates.listItem = document.getElementById('vodia-list-item-template');
if (!this.templates.main || !this.templates.listItem) {
console.error("Vodia Switcher Error: Required HTML tags not found.");
}
}
_createSwitcherUI(parentElement) {
const fragment = this.templates.main.content.cloneNode(true);
const container = fragment.querySelector('#vodia-identity-container');
this.elements = {
container,
callLookupButton: container.querySelector('[data-ref="callLookupButton"]'),
callLookupIconStack: container.querySelector('[data-ref="callLookupIconStack"]'),
callLookupSpinner: container.querySelector('[data-ref="callLookupSpinner"]'),
toggleButton: container.querySelector('[data-ref="toggleButton"]'),
phoneIcon: container.querySelector('[data-ref="phoneIcon"]'),
currentName: container.querySelector('[data-ref="currentName"]'),
currentNumber: container.querySelector('[data-ref="currentNumber"]'),
dropdownMenu: container.querySelector('[data-ref="dropdownMenu"]'),
identityList: container.querySelector('[data-ref="identityList"]'),
};
this.elements.dropdownMenu.querySelector('[data-ref="dropdownTitle"]').textContent = this.TEXT.dropdownTitle;
parentElement.prepend(fragment);
}
_addEventListeners() {
// Dropdown toggle
this.elements.toggleButton.addEventListener('click', e => {
e.preventDefault();
this.elements.container.classList.toggle('show');
this.elements.toggleButton.setAttribute('aria-expanded', this.elements.container.classList.contains('show'));
});
// Close dropdown on outside click
document.addEventListener('click', e => {
if (!this.elements.container.contains(e.target)) {
this.elements.container.classList.remove('show');
this.elements.toggleButton.setAttribute('aria-expanded', 'false');
}
});
// Call lookup button
this.elements.callLookupButton.addEventListener('click', e => {
e.preventDefault();
this._handleCallLookup();
});
// Reload data when tab becomes visible
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
this.loadIdentity();
}
});
// Sync state across tabs when another tab updates the cache
window.addEventListener('storage', e => {
if (e.key === this.CACHE_KEY && e.newValue) {
this._updateFromState(JSON.parse(e.newValue).data);
}
});
}
// --- Private Methods: API & Data Handling ---
_getCache(key) {
const cachedString = localStorage.getItem(key);
if (!cachedString) return null;
try {
return JSON.parse(cachedString);
} catch (e) {
localStorage.removeItem(key); // Clear corrupted cache
return null;
}
}
_setCache(key, data) {
try {
localStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now() }));
} catch (e) {
console.error(`Vodia Cache Error (${key}): Could not write to localStorage.`, e);
}
}
async _fetchJSON(endpoint, options = {}) {
const response = await fetch(`${this.API_BASE_URL}${endpoint}`, options);
if (!response.ok) throw new Error(`Network response was not ok (${response.status})`);
const data = await response.json();
if (data.status !== "OK") throw new Error(data.message || 'API returned an error');
return data;
}
async loadIdentity() {
// 1. Use fresh cache if available (handles re-focus)
const cached = this._getCache(this.CACHE_KEY);
if (cached && Date.now() - cached.timestamp < this.CACHE_DURATION_MS) {
return this._updateFromState(cached.data);
}
// 2. Check for a lock from another tab to prevent multiple requests
const lock = this._getCache(this.LOCK_KEY);
if (lock && Date.now() - lock.timestamp < this.LOCK_TIMEOUT_MS) {
return; // Another tab is fetching, the 'storage' event will update this tab.
}
// 3. This tab will fetch the data. Set a lock.
this._setCache(this.LOCK_KEY, {}); // Set lock with current timestamp
this._renderState('loading');
try {
const { result } = await this._fetchJSON('User/Api/do=getVodiaIdentity');
this._setCache(this.CACHE_KEY, result); // This triggers 'storage' event for other tabs
this._updateFromState(result);
} catch (error) {
console.error("Vodia Fetch Error:", error.message);
this._renderState('error');
} finally {
localStorage.removeItem(this.LOCK_KEY); // Release lock
}
}
async setVodiaOutboundIdentity(number) {
this._renderState('setting');
this.elements.container.classList.remove('show');
this.elements.toggleButton.setAttribute('aria-expanded', 'false');
try {
await this._fetchJSON('User/Api/do=setVodiaIdentity', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ 'number': number })
});
// Clear cache and lock, then force reload across all tabs
localStorage.removeItem(this.CACHE_KEY);
localStorage.removeItem(this.LOCK_KEY);
this.loadIdentity();
} catch (error) {
console.error("Vodia Set Error:", error.message);
if (window.notify) window.notify('error', "Fehler beim Ändern der ID!");
this._renderState('error'); // Revert to error state, but previous data will be loaded on next focus
}
}
async _handleCallLookup() {
this._setLookupButtonLoadingState(true);
try {
const { result } = await this._fetchJSON('User/Api/do=getVodiaCall');
if (result.number && result.number.length >= 5) {
window.open(`${this.API_BASE_URL}Address/Index?filter[pfm]=${result.number}`, '_blank');
} else {
if (window.notify) window.notify('info', this.TEXT.noActiveCall);
}
} catch (error) {
console.error("Vodia Call Lookup Error:", error.message);
if (window.notify) window.notify('error', this.TEXT.lookupError);
} finally {
this._setLookupButtonLoadingState(false);
}
}
// --- Private Methods: UI Rendering ---
_setLookupButtonLoadingState(isLoading) {
this.elements.callLookupIconStack.classList.toggle('d-none', isLoading);
this.elements.callLookupSpinner.classList.toggle('d-none', !isLoading);
this.elements.callLookupButton.toggleAttribute('disabled', isLoading);
}
_renderState(state, message = '') {
const { phoneIcon, currentName, currentNumber } = this.elements;
phoneIcon.className = 'phone-icon fas fa-phone'; // Reset classes
currentNumber.textContent = '';
switch(state) {
case 'loading':
phoneIcon.classList.add('fa-spin', 'text-warning');
currentName.textContent = this.TEXT.checking;
break;
case 'setting':
phoneIcon.classList.add('fa-spin', 'text-warning');
currentName.textContent = this.TEXT.setting;
break;
case 'error':
phoneIcon.classList.add('text-danger');
currentName.textContent = this.TEXT.fetchError;
break;
case 'success':
phoneIcon.classList.add('text-success');
break;
}
}
_updateFromState(vodiaState) {
if (!vodiaState?.enabled) {
this.elements.container.style.display = 'none';
return;
}
this.elements.container.style.display = 'flex';
this._renderState('success');
this._updateCurrentIdentityDisplay(vodiaState);
this._renderIdentityList(vodiaState);
}
_updateCurrentIdentityDisplay(vodiaState) {
const { 'default': defaultDisplay, default_number, current, identities = {} } = vodiaState;
const currentId = current.replaceAll(' ', "");
const defaultId = default_number.replaceAll(' ', "");
let activeName = this.TEXT.customIdentity;
let activeNumberDisplay = `(${current})`;
if (currentId === defaultId) {
activeName = this.TEXT.ownExtension;
activeNumberDisplay = `(${defaultDisplay})`;
} else {
const foundName = Object.keys(identities).find(name => identities[name].number === currentId);
if (foundName) {
activeName = foundName;
activeNumberDisplay = `(${identities[foundName].display})`;
}
}
this.elements.currentName.textContent = activeName;
this.elements.currentNumber.textContent = activeNumberDisplay;
this.elements.toggleButton.title = `Aktive ID: ${activeName} ${activeNumberDisplay}`;
}
_renderIdentityList(vodiaState) {
this.elements.identityList.innerHTML = '';
const { 'default': defaultDisplay, default_number, current, identities = {} } = vodiaState;
const currentId = current.replaceAll(' ', "");
const defaultId = default_number.replaceAll(' ', "");
// Add own extension
this.elements.identityList.appendChild(this._createListItem({
name: this.TEXT.ownExtension,
number: defaultId,
display: defaultDisplay,
color: 'blue',
isActive: currentId === defaultId
}));
// Add other identities
for (const name in identities) {
const ident = identities[name];
this.elements.identityList.appendChild(this._createListItem({
name,
number: ident.number,
display: ident.display,
color: ident.color,
isActive: currentId === ident.number
}));
}
}
_createListItem({ name, number, display, color, isActive }) {
const fragment = this.templates.listItem.content.cloneNode(true);
const item = fragment.querySelector('li');
item.querySelector('[data-ref="colorBlock"]').className = `vodia-list-item-icon fas fa-circle mr-3 vodia-identity-color-${color || 'grey'}`;
item.querySelector('[data-ref="name"]').textContent = name;
item.querySelector('[data-ref="numberDisplay"]').textContent = display;
if (isActive) {
item.classList.add('active');
} else {
item.classList.add('pointer');
item.addEventListener('click', () => this.setVodiaOutboundIdentity(number));
}
return item;
}
}
// --- Bootstrap ---
document.addEventListener('DOMContentLoaded', () => {
const topbar = document.querySelector("#topbar");
if (topbar) new VodiaIdentitySwitcher(topbar);
});