frytimo
0c4122cb94
Minor change requests implemented that were forgotten: - Removed the line between the extension that belong to the user and the other extensions. - Added the permissions for the tabs so they are not visible yet. "Extensions" and "Calls" are the only ones with the permissions after running app defaults
2374 lines
86 KiB
JavaScript
2374 lines
86 KiB
JavaScript
/**
|
|
* Live Operator Panel — JavaScript controller
|
|
*
|
|
* Three-tab, fully WebSocket-driven panel: Calls | Conferences | Agents.
|
|
* NO Ajax is used anywhere. All data arrives as WebSocket events, and all
|
|
* operator actions (hangup, transfer, eavesdrop, record, user status, agent
|
|
* status) are sent as WebSocket action requests.
|
|
*
|
|
* Depends on:
|
|
* websocket_client.js — ws_client class
|
|
* ws_config — PHP-injected WS settings
|
|
* status_colors — PHP-injected theme colours
|
|
* status_icons — PHP-injected FA icon classes
|
|
* status_tooltips — PHP-injected translated strings
|
|
* status_show_icon — PHP-injected boolean for icon visibility
|
|
* permissions — PHP-injected permission booleans
|
|
* text — PHP-injected translated strings
|
|
* domain_name — PHP-injected session domain
|
|
* user_uuid — PHP-injected session user UUID
|
|
* token — PHP-injected WS auth token {name, hash}
|
|
* user_statuses — PHP-injected array of allowed status strings
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/** @type {ws_client|null} */
|
|
let ws = null;
|
|
|
|
let reconnect_attempts = 0;
|
|
let ping_interval_timer = null;
|
|
let ping_timeout = null;
|
|
let auth_timeout = null;
|
|
let refresh_interval_timer = null;
|
|
let pong_failure_count = 0;
|
|
let duration_tick_timer = null;
|
|
let extensions_reconcile_timer = null;
|
|
let recording_state_timer = null;
|
|
let registrations_state_timer = null;
|
|
|
|
/**
|
|
* Live call map: uuid → call object.
|
|
* Maintained incrementally from channel events.
|
|
* @type {Map<string, object>}
|
|
*/
|
|
const calls_map = new Map();
|
|
|
|
/**
|
|
* Live conference map: conference_name → conference object.
|
|
* @type {Map<string, object>}
|
|
*/
|
|
const conferences_map = new Map();
|
|
|
|
/**
|
|
* Extension directory: extension_number → extension object (from DB snapshot).
|
|
* Registration status is included. Call state is derived dynamically from calls_map.
|
|
* @type {Map<string, object>}
|
|
*/
|
|
const extensions_map = new Map();
|
|
|
|
/**
|
|
* Current agent stats list (last broadcast).
|
|
* @type {Array<object>}
|
|
*/
|
|
let agents_list = [];
|
|
|
|
/** Debounce timer for extensions re-render triggered by channel events. */
|
|
let extensions_render_debounce = null;
|
|
|
|
/** UUID of the call being dragged from the Calls tab onto an extension block. */
|
|
let dragged_call_uuid = null;
|
|
|
|
/** Source extension number for a dragged call (when available). */
|
|
let dragged_call_source_extension = null;
|
|
|
|
/** Extension number being dragged (for origination). */
|
|
let dragged_extension = null;
|
|
|
|
/** UUID of the call being dragged from eavesdrop icon onto an extension block. */
|
|
let dragged_eavesdrop_uuid = null;
|
|
|
|
/** Calls flagged as actively recording in UI state. */
|
|
const recording_call_uuids = new Set();
|
|
|
|
/** Active group filters (set of lowercase group keys; empty = show all). */
|
|
const active_group_filters = new Set();
|
|
|
|
/** Whether edit mode (drag to reorder cards) is active. */
|
|
let edit_mode_active = false;
|
|
|
|
/** SortableJS instance for edit mode. */
|
|
let sortable_instance = null;
|
|
|
|
/** Saved card order (array of group keys). Persisted to localStorage. */
|
|
let saved_card_order = null;
|
|
let all_group_keys_for_filters = [];
|
|
let tabs_initialized = false;
|
|
|
|
function is_lop_debug_enabled() {
|
|
if (typeof window !== 'undefined' && window.OP_DEBUG === true) return true;
|
|
try {
|
|
if (typeof localStorage !== 'undefined' && localStorage.getItem('op_debug') === '1') return true;
|
|
} catch (err) {
|
|
// Ignore storage access errors.
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function is_lop_reg_trace_enabled() {
|
|
if (typeof window !== 'undefined' && window.OP_REG_TRACE_ENABLED === true) return true;
|
|
try {
|
|
if (typeof localStorage !== 'undefined' && localStorage.getItem('op_reg_trace') === '1') return true;
|
|
} catch (err) {
|
|
// Ignore storage access errors.
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function lop_debug(label, data) {
|
|
const is_reg_trace = typeof label === 'string' && label.indexOf('[OP_REG_TRACE]') !== -1;
|
|
if (!is_lop_debug_enabled() && !(is_reg_trace && is_lop_reg_trace_enabled())) {
|
|
return;
|
|
}
|
|
const now = new Date();
|
|
const ts = now.toISOString().replace('T', ' ').replace('Z', '');
|
|
if (typeof data === 'undefined') {
|
|
console.debug(`[${ts}] ${label}`);
|
|
} else {
|
|
console.debug(`[${ts}] ${label}`, data);
|
|
}
|
|
}
|
|
|
|
function activate_tab(button) {
|
|
if (!button) return;
|
|
|
|
// Prefer Bootstrap Tab API when available.
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Tab) {
|
|
try {
|
|
bootstrap.Tab.getOrCreateInstance(button).show();
|
|
return;
|
|
} catch (err) {
|
|
console.warn('[OP] Bootstrap tab show failed, using fallback:', err);
|
|
}
|
|
}
|
|
|
|
// Fallback tab activation when Bootstrap JS API is unavailable.
|
|
const target_selector = button.getAttribute('data-bs-target');
|
|
if (!target_selector) return;
|
|
const target = document.querySelector(target_selector);
|
|
if (!target) return;
|
|
|
|
document.querySelectorAll('#lop_tabs .nav-link').forEach(link => {
|
|
link.classList.remove('active');
|
|
link.setAttribute('aria-selected', 'false');
|
|
});
|
|
document.querySelectorAll('#lop_tab_content .tab-pane').forEach(pane => {
|
|
pane.classList.remove('show', 'active');
|
|
});
|
|
|
|
button.classList.add('active');
|
|
button.setAttribute('aria-selected', 'true');
|
|
target.classList.add('show', 'active');
|
|
}
|
|
|
|
function init_tab_navigation() {
|
|
if (tabs_initialized) return;
|
|
|
|
const buttons = document.querySelectorAll('#lop_tabs .nav-link[data-bs-target]');
|
|
if (!buttons.length) return;
|
|
|
|
buttons.forEach(btn => {
|
|
btn.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
activate_tab(btn);
|
|
});
|
|
});
|
|
|
|
tabs_initialized = true;
|
|
}
|
|
|
|
function normalize_group_key(raw_group) {
|
|
const key = ((raw_group || '') + '').trim().toLowerCase();
|
|
return key || '';
|
|
}
|
|
|
|
function get_extension_group_key(ext_number) {
|
|
const ext = extensions_map.get((ext_number || '').toString());
|
|
if (!ext) return '';
|
|
return normalize_group_key(ext.call_group || '');
|
|
}
|
|
|
|
function get_call_group_key(call) {
|
|
const presence = ((call.channel_presence_id || '').split('@')[0] || '').trim();
|
|
const dest = ((call.caller_destination_number || '') + '').trim();
|
|
const cid = ((call.caller_caller_id_number || call.caller_id_number || '') + '').trim();
|
|
|
|
const candidates = [presence, dest, cid].filter(Boolean);
|
|
for (const ext of candidates) {
|
|
const key = get_extension_group_key(ext);
|
|
if (key !== '' || extensions_map.has(ext)) return key;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
/**
|
|
* Resolve the opposite-party extension/number for a call leg.
|
|
* Prefers direct per-leg fields; if those are ambiguous (self/self),
|
|
* falls back to scanning sibling rows in calls_map for the same extension.
|
|
*/
|
|
function resolve_peer_number_for_leg(ch, ext_number, direction_raw) {
|
|
const ext = ((ext_number || '') + '').trim();
|
|
const cid = (((ch || {}).caller_caller_id_number || (ch || {}).caller_id_number || '') + '').trim();
|
|
const dest = (((ch || {}).caller_destination_number || '') + '').trim();
|
|
|
|
// Direct per-leg interpretation.
|
|
if (ext) {
|
|
if (dest === ext && cid && cid !== ext) return cid;
|
|
if (cid === ext && dest && dest !== ext) return dest;
|
|
}
|
|
|
|
// Direction-guided fallback when one side is known and non-self.
|
|
if ((direction_raw || '') === 'inbound') {
|
|
if (cid && cid !== ext) return cid;
|
|
if (dest && dest !== ext) return dest;
|
|
}
|
|
if ((direction_raw || '') === 'outbound') {
|
|
if (dest && dest !== ext) return dest;
|
|
if (cid && cid !== ext) return cid;
|
|
}
|
|
|
|
// Cross-leg fallback: find another row that references this extension
|
|
// and exposes a non-self opposite party.
|
|
if (ext) {
|
|
for (const other of calls_map.values()) {
|
|
if (other === ch) continue;
|
|
const ocid = ((other.caller_caller_id_number || other.caller_id_number || '') + '').trim();
|
|
const odest = ((other.caller_destination_number || '') + '').trim();
|
|
if (ocid === ext && odest && odest !== ext) return odest;
|
|
if (odest === ext && ocid && ocid !== ext) return ocid;
|
|
}
|
|
}
|
|
|
|
// Last resort: return whichever side is not self, then any known side.
|
|
if (dest && dest !== ext) return dest;
|
|
if (cid && cid !== ext) return cid;
|
|
return dest || cid || ext;
|
|
}
|
|
|
|
function set_filter_bar_visibility(show) {
|
|
['extensions_filter_bar', 'calls_filter_bar', 'conferences_filter_bar', 'agents_filter_bar'].forEach(id => {
|
|
const bar = document.getElementById(id);
|
|
if (bar) bar.style.display = show ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Connect (or reconnect) to the WebSocket server.
|
|
* Called once on page load from index.php.
|
|
*/
|
|
function connect_websocket() {
|
|
const ws_url = `wss://${window.location.host}/websockets/`;
|
|
|
|
try {
|
|
ws = new ws_client(ws_url, token);
|
|
|
|
// Authentication
|
|
ws.on_event('authenticated', on_authenticated);
|
|
ws.on_event('authentication_failed', on_authentication_failed);
|
|
|
|
ws.ws.addEventListener('open', () => {
|
|
console.log('[OP] WebSocket open');
|
|
reconnect_attempts = 0;
|
|
update_connection_status('connecting');
|
|
|
|
auth_timeout = setTimeout(() => {
|
|
console.error('[OP] Authentication timeout');
|
|
update_connection_status('disconnected');
|
|
redirect_to_login();
|
|
}, ws_config.auth_timeout);
|
|
});
|
|
|
|
ws.ws.addEventListener('close', (ev) => {
|
|
console.warn('[OP] WebSocket closed, code:', ev.code);
|
|
_clear_timers();
|
|
update_connection_status('disconnected');
|
|
|
|
const delay = Math.min(
|
|
ws_config.reconnect_delay * Math.pow(2, reconnect_attempts),
|
|
ws_config.max_reconnect_delay
|
|
);
|
|
reconnect_attempts++;
|
|
console.log(`[OP] Reconnecting in ${delay}ms (attempt ${reconnect_attempts})`);
|
|
setTimeout(connect_websocket, delay);
|
|
});
|
|
|
|
ws.ws.addEventListener('error', (err) => {
|
|
console.error('[OP] WebSocket error:', err);
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error('[OP] Failed to create WebSocket:', err);
|
|
update_connection_status('disconnected');
|
|
}
|
|
}
|
|
|
|
function on_authentication_failed() {
|
|
console.error('[OP] Authentication failed');
|
|
update_connection_status('disconnected');
|
|
redirect_to_login();
|
|
}
|
|
|
|
/**
|
|
* Called once authentication succeeds.
|
|
* Subscribes to the service topics and requests initial snapshots.
|
|
*/
|
|
function on_authenticated() {
|
|
init_tab_navigation();
|
|
|
|
console.log('[OP] Authenticated');
|
|
pong_failure_count = 0;
|
|
update_connection_status('warning');
|
|
|
|
if (auth_timeout) { clearTimeout(auth_timeout); auth_timeout = null; }
|
|
|
|
// Start keep-alive
|
|
send_ping();
|
|
if (ping_interval_timer) clearInterval(ping_interval_timer);
|
|
ping_interval_timer = setInterval(send_ping, ws_config.ping_interval);
|
|
|
|
// Start 1-second duration ticker
|
|
if (duration_tick_timer) clearInterval(duration_tick_timer);
|
|
duration_tick_timer = setInterval(tick_durations, 1000);
|
|
|
|
// Star-code/auto-recording does not always produce consumable events,
|
|
// so poll recording state by UUID.
|
|
if (recording_state_timer) clearInterval(recording_state_timer);
|
|
recording_state_timer = setInterval(sync_recording_state, 2000);
|
|
|
|
// Reconcile registration flags in case registration_change events are missed.
|
|
if (registrations_state_timer) clearInterval(registrations_state_timer);
|
|
if (typeof registrations_reconcile_enabled !== 'undefined' && registrations_reconcile_enabled) {
|
|
registrations_state_timer = setInterval(sync_registrations_state, 3000);
|
|
sync_registrations_state();
|
|
} else {
|
|
lop_debug('[OP][reg][reconcile] disabled by setting registrations_reconcile_enabled');
|
|
}
|
|
|
|
// Register incremental event handlers before subscribing so we do not
|
|
// miss the first pushed event that can arrive immediately after subscribe.
|
|
// Call events
|
|
const call_topics = [
|
|
'channel_create', 'channel_callstate', 'call_update',
|
|
'channel_destroy', 'channel_park', 'channel_unpark', 'valet_info',
|
|
];
|
|
call_topics.forEach(t => ws.on_event(t, on_call_event));
|
|
ws.on_event('calls_active', on_calls_snapshot_event);
|
|
|
|
// Conference events
|
|
const conf_topics = [
|
|
'conference_create', 'conference_destroy',
|
|
'add_member', 'del_member',
|
|
'start_talking', 'stop_talking',
|
|
'mute_member', 'unmute_member',
|
|
'deaf_member', 'undeaf_member',
|
|
'floor_change', 'lock', 'unlock',
|
|
'kick_member', 'energy_level', 'gain_level', 'volume_level',
|
|
];
|
|
conf_topics.forEach(t => ws.on_event(t, on_conference_event));
|
|
|
|
// Agent stats broadcast
|
|
ws.on_event('agent_stats', on_agent_stats);
|
|
|
|
// Registration events (extension register / unregister)
|
|
ws.on_event('registration_change', on_registration_change);
|
|
|
|
// Action responses
|
|
ws.on_event('action_response', on_action_response);
|
|
|
|
// Pong handler: resolves keep-alive pings that arrive as server-pushed events
|
|
// (e.g. after reconnect when the pending request map was cleared)
|
|
ws.on_event('pong', on_pong);
|
|
|
|
// Fire subscribe first, then immediately request initial snapshots.
|
|
// Do not wait on subscribe promise resolution because some deployments
|
|
// do not send an explicit subscribe response, which would block loading.
|
|
ws.subscribe('active.operator.panel').catch((err) => {
|
|
console.error('[OP] Failed to subscribe to service:', err);
|
|
});
|
|
|
|
load_extensions_snapshot();
|
|
load_calls_snapshot();
|
|
load_conferences_snapshot();
|
|
load_agents_snapshot();
|
|
sync_recording_state();
|
|
|
|
// One-time reconciliation shortly after auth to capture any early
|
|
// registration changes that may race initial subscription startup.
|
|
if (extensions_reconcile_timer) clearTimeout(extensions_reconcile_timer);
|
|
extensions_reconcile_timer = setTimeout(() => {
|
|
load_extensions_snapshot();
|
|
extensions_reconcile_timer = null;
|
|
}, 500);
|
|
}
|
|
|
|
/** Tear down all recurring timers. */
|
|
function _clear_timers() {
|
|
if (auth_timeout) { clearTimeout(auth_timeout); auth_timeout = null; }
|
|
if (ping_timeout) { clearTimeout(ping_timeout); ping_timeout = null; }
|
|
if (ping_interval_timer) { clearInterval(ping_interval_timer); ping_interval_timer = null; }
|
|
if (refresh_interval_timer) { clearInterval(refresh_interval_timer); refresh_interval_timer = null; }
|
|
if (duration_tick_timer) { clearInterval(duration_tick_timer); duration_tick_timer = null; }
|
|
if (extensions_reconcile_timer) { clearTimeout(extensions_reconcile_timer); extensions_reconcile_timer = null; }
|
|
if (recording_state_timer) { clearInterval(recording_state_timer); recording_state_timer = null; }
|
|
if (registrations_state_timer) { clearInterval(registrations_state_timer); registrations_state_timer = null; }
|
|
}
|
|
|
|
/** Redirect to the FusionPBX login page. */
|
|
function redirect_to_login() {
|
|
const base = (typeof PROJECT_PATH !== 'undefined') ? PROJECT_PATH : '';
|
|
window.location.href = base + '/?path=' + encodeURIComponent(window.location.pathname);
|
|
}
|
|
|
|
|
|
// Keep-alive ping / pong
|
|
function send_ping() {
|
|
if (!ws || !ws.ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
|
|
const had_failures = pong_failure_count > 0;
|
|
|
|
ping_timeout = setTimeout(() => {
|
|
pong_failure_count++;
|
|
if (pong_failure_count >= ws_config.pong_timeout_max_retries) {
|
|
update_connection_status('disconnected');
|
|
window.location.reload();
|
|
} else {
|
|
update_connection_status('warning');
|
|
}
|
|
}, ws_config.pong_timeout);
|
|
|
|
ws.request('active.operator.panel', 'ping', {})
|
|
.then(() => {
|
|
if (ping_timeout) { clearTimeout(ping_timeout); ping_timeout = null; }
|
|
pong_failure_count = 0;
|
|
update_connection_status('connected');
|
|
if (had_failures) {
|
|
// Refresh all four snapshots after a reconnect
|
|
load_extensions_snapshot();
|
|
load_calls_snapshot();
|
|
load_conferences_snapshot();
|
|
load_agents_snapshot();
|
|
}
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Handle a pong that arrives as a server-pushed event rather than as a
|
|
* response to a pending request (e.g. after reconnect clears _pending).
|
|
*/
|
|
function on_pong() {
|
|
if (ping_timeout) { clearTimeout(ping_timeout); ping_timeout = null; }
|
|
pong_failure_count = 0;
|
|
update_connection_status('connected');
|
|
}
|
|
|
|
function update_connection_status(state) {
|
|
const el = document.getElementById('connection_status');
|
|
if (!el) return;
|
|
|
|
const color = (status_colors && status_colors[state]) || '#6c757d';
|
|
const tooltip = (status_tooltips && status_tooltips[state]) || state;
|
|
|
|
el.title = tooltip;
|
|
el.style.backgroundColor = color;
|
|
el.style.color = '#fff';
|
|
|
|
const icon_el = document.getElementById('connection_status_icon');
|
|
if (icon_el) {
|
|
const icon = (status_icons && status_icons[state]) || '';
|
|
icon_el.className = icon;
|
|
icon_el.style.marginRight = '5px';
|
|
}
|
|
|
|
const text_el = document.getElementById('connection_status_text');
|
|
if (text_el) {
|
|
text_el.textContent = tooltip;
|
|
}
|
|
}
|
|
|
|
function esc(text) {
|
|
if (text === null || text === undefined) return '';
|
|
return text.toString()
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
/** Format a Unix microsecond timestamp as elapsed time hh:mm:ss */
|
|
function format_elapsed(us_timestamp) {
|
|
if (!us_timestamp || us_timestamp === '0') return '--:--:--';
|
|
const start = Math.floor(Number(us_timestamp) / 1000000);
|
|
const now = Math.floor(Date.now() / 1000);
|
|
let sec = Math.max(0, now - start);
|
|
const h = Math.floor(sec / 3600); sec -= h * 3600;
|
|
const m = Math.floor(sec / 60); sec -= m * 60;
|
|
return [h, m, sec].map(n => String(n).padStart(2, '0')).join(':');
|
|
}
|
|
|
|
/** Update all visible duration elements every second. */
|
|
function tick_durations() {
|
|
document.querySelectorAll('[data-created]').forEach(el => {
|
|
const ts = el.getAttribute('data-created');
|
|
if (ts && ts !== '0') {
|
|
el.textContent = format_elapsed(ts);
|
|
}
|
|
});
|
|
}
|
|
|
|
/** Format a Unix-second timestamp as HH:MM */
|
|
function format_time(unix_seconds) {
|
|
if (!unix_seconds || unix_seconds === '0') return '--:--';
|
|
const d = new Date(Number(unix_seconds) * 1000);
|
|
return d.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
|
|
}
|
|
|
|
/** Normalize the call UUID field across snapshot and event payload variants. */
|
|
function get_call_uuid(ch) {
|
|
if (!ch || typeof ch !== 'object') return '';
|
|
return ch.unique_id || ch.uuid || ch.channel_uuid || '';
|
|
}
|
|
|
|
/**
|
|
* Request a full calls snapshot from the service.
|
|
* Snapshot response arrives as a topic='calls_active' event.
|
|
*/
|
|
function load_calls_snapshot() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
ws.request('active.operator.panel', 'calls_active', {domain_name: domain_name})
|
|
.then(response => {
|
|
apply_calls_snapshot(response.payload || []);
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/** Apply a full calls snapshot array/object to calls_map and refresh UI. */
|
|
function apply_calls_snapshot(payload) {
|
|
const channels = Array.isArray(payload)
|
|
? payload
|
|
: ((payload && Array.isArray(payload.rows)) ? payload.rows : []);
|
|
|
|
calls_map.clear();
|
|
channels.forEach(ch => {
|
|
const uuid = get_call_uuid(ch);
|
|
if (uuid) calls_map.set(uuid, ch);
|
|
});
|
|
|
|
render_calls_tab();
|
|
// Re-render extensions so their active/idle state reflects calls snapshot.
|
|
schedule_extensions_render();
|
|
}
|
|
|
|
/** Handle server-pushed full calls snapshot event (topic='calls_active'). */
|
|
function on_calls_snapshot_event(event) {
|
|
const payload = event.payload || event.data || event;
|
|
apply_calls_snapshot(payload);
|
|
}
|
|
|
|
/**
|
|
* Handle incremental call / channel events from FreeSWITCH.
|
|
* @param {object} event
|
|
*/
|
|
function on_call_event(event) {
|
|
const name = (event.event_name || event.topic || '').toLowerCase();
|
|
const uuid = get_call_uuid(event);
|
|
|
|
if (!uuid) return;
|
|
|
|
switch (name) {
|
|
case 'channel_create':
|
|
case 'channel_callstate':
|
|
case 'call_update':
|
|
case 'channel_park':
|
|
case 'channel_unpark':
|
|
case 'valet_info':
|
|
// Merge/upsert into the map
|
|
calls_map.set(uuid, Object.assign(calls_map.get(uuid) || {}, event));
|
|
break;
|
|
|
|
case 'channel_destroy':
|
|
recording_call_uuids.delete(uuid);
|
|
calls_map.delete(uuid);
|
|
break;
|
|
|
|
default:
|
|
calls_map.set(uuid, Object.assign(calls_map.get(uuid) || {}, event));
|
|
break;
|
|
}
|
|
|
|
schedule_extensions_render();
|
|
render_calls_tab();
|
|
}
|
|
|
|
function call_is_recording(ch, uuid) {
|
|
if (ch && (ch.is_recording === true || ch.is_recording === 'true' || ch.is_recording === 1 || ch.is_recording === '1')) return true;
|
|
const app = ((ch && (ch.variable_current_application || ch.application)) || '').toString().toLowerCase();
|
|
const app_data = ((ch && ch.application_data) || '').toString().toLowerCase();
|
|
if (app.indexOf('record') !== -1 || app_data.indexOf('record') !== -1) return true;
|
|
if (uuid && recording_call_uuids.has(uuid)) return true;
|
|
return false;
|
|
}
|
|
|
|
function sync_recording_state() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
const uuids = Array.from(calls_map.keys());
|
|
if (!uuids.length) return;
|
|
|
|
send_action('recording_state', { uuids })
|
|
.then((response) => {
|
|
const payload = response && response.payload ? response.payload : response;
|
|
const states = payload && payload.states ? payload.states : null;
|
|
if (!states || typeof states !== 'object') return;
|
|
|
|
// If either leg reports recording, treat all linked UUIDs as recording.
|
|
const effective_recording = new Set();
|
|
Object.entries(states).forEach(([id, is_rec]) => {
|
|
if (!is_rec) return;
|
|
get_conversation_call_uuids(id).forEach(linked_id => effective_recording.add(linked_id));
|
|
effective_recording.add(id);
|
|
});
|
|
|
|
let changed = false;
|
|
uuids.forEach((id) => {
|
|
const ch = calls_map.get(id);
|
|
if (!ch) return;
|
|
const next = effective_recording.has(id);
|
|
if (!!ch.is_recording !== next) {
|
|
ch.is_recording = next;
|
|
changed = true;
|
|
}
|
|
if (next) recording_call_uuids.add(id);
|
|
else recording_call_uuids.delete(id);
|
|
});
|
|
|
|
if (changed) {
|
|
render_calls_tab();
|
|
schedule_extensions_render();
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// Silent polling failure handling.
|
|
});
|
|
}
|
|
|
|
function sync_registrations_state() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
if (extensions_map.size === 0) return;
|
|
|
|
send_action('registrations_state', {})
|
|
.then((response) => {
|
|
const payload = response && response.payload ? response.payload : response;
|
|
const states = payload && payload.states ? payload.states : null;
|
|
if (!states || typeof states !== 'object') {
|
|
lop_debug('[OP][reg][reconcile][drop] no states payload', { payload_keys: payload ? Object.keys(payload) : [] });
|
|
return;
|
|
}
|
|
lop_debug('[OP][reg][reconcile][states]', {
|
|
state_count: Object.keys(states).length,
|
|
has_555: Object.prototype.hasOwnProperty.call(states, '555'),
|
|
has_102: Object.prototype.hasOwnProperty.call(states, '102'),
|
|
});
|
|
|
|
let changed = false;
|
|
extensions_map.forEach((ext, ext_num) => {
|
|
const count = Number(states[ext_num] || 0);
|
|
const next_registered = count > 0;
|
|
const prev_registered = !!ext.registered;
|
|
const prev_count = Number(ext.registration_count || 0);
|
|
if (prev_registered !== next_registered || prev_count !== count) {
|
|
ext.registered = next_registered;
|
|
ext.registration_count = count;
|
|
changed = true;
|
|
lop_debug('[OP][reg][reconcile]', { extension: ext_num, prev_registered, next_registered, prev_count, count });
|
|
}
|
|
});
|
|
|
|
if (changed) {
|
|
schedule_extensions_render();
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// silent polling failure
|
|
});
|
|
}
|
|
|
|
function get_linked_call_uuids(uuid) {
|
|
const linked = new Set();
|
|
if (!uuid) return linked;
|
|
linked.add(uuid);
|
|
|
|
const ch = calls_map.get(uuid);
|
|
if (ch) {
|
|
const direct = [ch.other_leg_unique_id, ch.variable_bridge_uuid, ch.bridge_uuid]
|
|
.map(v => ((v || '') + '').trim())
|
|
.filter(Boolean);
|
|
direct.forEach(v => linked.add(v));
|
|
}
|
|
|
|
// Reverse lookup for legs that reference this UUID.
|
|
for (const [other_uuid, other_ch] of calls_map.entries()) {
|
|
if (other_uuid === uuid) continue;
|
|
const refs = [other_ch.other_leg_unique_id, other_ch.variable_bridge_uuid, other_ch.bridge_uuid]
|
|
.map(v => ((v || '') + '').trim());
|
|
if (refs.includes(uuid)) linked.add(other_uuid);
|
|
}
|
|
|
|
return linked;
|
|
}
|
|
|
|
function get_conversation_key(ch) {
|
|
if (!ch) return '';
|
|
const ext = (((ch.channel_presence_id || '').split('@')[0]) || '').trim();
|
|
const cid = ((ch.caller_caller_id_number || ch.caller_id_number || '') + '').trim();
|
|
const dest = ((ch.caller_destination_number || '') + '').trim();
|
|
let direction_raw = (ch.call_direction || ch.variable_call_direction || '').toString().toLowerCase();
|
|
if (ext && cid && dest) {
|
|
if (ext === cid && ext !== dest) direction_raw = 'outbound';
|
|
else if (ext === dest && ext !== cid) direction_raw = 'inbound';
|
|
}
|
|
const peer = resolve_peer_number_for_leg(ch, ext, direction_raw);
|
|
if (!ext || !peer || ext === peer) return '';
|
|
return [ext, peer].sort().join('|');
|
|
}
|
|
|
|
function get_conversation_call_uuids(uuid) {
|
|
const all = new Set(get_linked_call_uuids(uuid));
|
|
const seed = calls_map.get(uuid);
|
|
if (!seed) return all;
|
|
const key = get_conversation_key(seed);
|
|
if (!key) return all;
|
|
for (const [id, ch] of calls_map.entries()) {
|
|
if (get_conversation_key(ch) === key) all.add(id);
|
|
}
|
|
return all;
|
|
}
|
|
|
|
/**
|
|
* Render the Calls tab from the in-memory calls_map.
|
|
*/
|
|
function render_calls_tab() {
|
|
const container = document.getElementById('calls_container');
|
|
if (!container) return;
|
|
|
|
const calls = Array.from(calls_map.values());
|
|
|
|
// Update badge
|
|
const badge = document.getElementById('calls_count');
|
|
if (badge) badge.textContent = calls.length;
|
|
|
|
if (calls.length === 0) {
|
|
container.innerHTML = `<p class="text-muted">${esc(text['label-no_calls_active'] || 'No active calls.')}</p>`;
|
|
return;
|
|
}
|
|
|
|
let html = "<div class='card'>\n";
|
|
html += "<table class='list'>\n";
|
|
html += "<tr class='list-header'>\n";
|
|
html += `<th class="mono" style="width:28px"></th>\n`;
|
|
html += `<th>${esc(text['label-caller_id'] || 'Caller ID')}</th>\n`;
|
|
html += `<th>${esc(text['label-destination'] || 'Destination')}</th>\n`;
|
|
html += `<th>${esc(text['label-state'] || 'State')}</th>\n`;
|
|
html += `<th>${esc(text['label-duration'] || 'Duration')}</th>\n`;
|
|
html += `<th class="right">${esc(text['label-actions'] || 'Actions')}</th>\n`;
|
|
html += "</tr>\n";
|
|
|
|
calls.forEach(ch => {
|
|
const uuid_raw = get_call_uuid(ch);
|
|
if (!uuid_raw) return;
|
|
const uuid = esc(uuid_raw);
|
|
const group_key = esc(get_call_group_key(ch));
|
|
const ext_number = ((ch.channel_presence_id || '').split('@')[0] || '').trim();
|
|
const raw_cid_name = (ch.caller_caller_id_name || ch.caller_id_name || '').toString();
|
|
const raw_cid_num = (ch.caller_caller_id_number || ch.caller_id_number || '').toString().trim();
|
|
const raw_dest_num = (ch.caller_destination_number || '').toString().trim();
|
|
|
|
// Derive per-leg direction so B-leg rows do not incorrectly show outbound.
|
|
let direction_raw = (ch.call_direction || ch.variable_call_direction || '').toString().toLowerCase();
|
|
if (ext_number && raw_cid_num && raw_dest_num) {
|
|
if (ext_number === raw_cid_num && ext_number !== raw_dest_num) {
|
|
direction_raw = 'outbound';
|
|
}
|
|
else if (ext_number === raw_dest_num && ext_number !== raw_cid_num) {
|
|
direction_raw = 'inbound';
|
|
}
|
|
}
|
|
|
|
const peer_number = resolve_peer_number_for_leg(ch, ext_number, direction_raw);
|
|
let caller_number_raw = (ext_number || raw_cid_num || '').toString().trim();
|
|
|
|
// If this leg is ambiguous (same number on both CID and destination),
|
|
// show the inferred peer as the leg owner for inbound perspective.
|
|
if (direction_raw === 'inbound' && raw_cid_num && raw_dest_num && raw_cid_num === raw_dest_num && peer_number && raw_cid_num !== peer_number) {
|
|
caller_number_raw = peer_number;
|
|
}
|
|
if (caller_number_raw === peer_number) {
|
|
if (raw_dest_num && raw_dest_num !== peer_number) caller_number_raw = raw_dest_num;
|
|
else if (raw_cid_num && raw_cid_num !== peer_number) caller_number_raw = raw_cid_num;
|
|
}
|
|
|
|
const cid_name = esc(raw_cid_name);
|
|
const cid_number = esc(caller_number_raw);
|
|
const dest = esc(peer_number || raw_dest_num || ext_number);
|
|
const state = esc(ch.channel_call_state || ch.answer_state || '');
|
|
const direction = esc(direction_raw);
|
|
const direction_icon = direction_raw === 'inbound'
|
|
? '../operator_panel/resources/images/inbound.png'
|
|
: (direction_raw === 'outbound' ? '../operator_panel/resources/images/outbound.png' : '');
|
|
const created_ts = ch.caller_channel_created_time || '0';
|
|
const elapsed = esc(format_elapsed(created_ts));
|
|
const is_recording = call_is_recording(ch, uuid_raw);
|
|
const record_icon = is_recording
|
|
? '../operator_panel/resources/images/recording.png'
|
|
: '../operator_panel/resources/images/record.png';
|
|
|
|
html += `<tr class="list-row" id="call_row_${uuid}" draggable="true" data-uuid="${uuid}" data-group-key="${group_key}" ondragstart="on_drag_call('${uuid}', event)" ondragend="on_drag_end(); document.querySelectorAll('.op-ext-block').forEach(b=>b.classList.remove('op-ext-drop-over'))">\n`;
|
|
const show_cid_name = raw_cid_name && raw_cid_name.toLowerCase() !== 'outbound call' && raw_cid_name.toLowerCase() !== 'inbound call';
|
|
html += ` <td class="mono">${direction_icon ? `<img src="${direction_icon}" width="12" height="12" alt="${direction}" title="${direction}" style="vertical-align:middle;">` : ''}</td>\n`;
|
|
html += ` <td>${show_cid_name ? `${cid_name}<br><small>${cid_number}</small>` : cid_number}</td>\n`;
|
|
html += ` <td>${dest}</td>\n`;
|
|
html += ` <td>${state}</td>\n`;
|
|
html += ` <td class="mono" data-created="${created_ts}">${elapsed}</td>\n`;
|
|
html += ` <td class="right">\n`;
|
|
|
|
if (permissions.operator_panel_hangup) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-hangup'] || 'Hangup')}" onclick="action_hangup('${uuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/kill.png" alt="${esc(text['button-hangup'] || 'Hangup')}"></a> `;
|
|
}
|
|
if (permissions.operator_panel_eavesdrop) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-eavesdrop'] || 'Eavesdrop')}" onclick="action_eavesdrop('${uuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/eavesdrop.png" alt="${esc(text['button-eavesdrop'] || 'Eavesdrop')}"></a> `;
|
|
}
|
|
if (permissions.operator_panel_coach) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-whisper'] || 'Whisper')}" onclick="action_whisper('${uuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/whisper.svg" alt="${esc(text['button-whisper'] || 'Whisper')}"></a> `;
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-barge'] || 'Barge')}" onclick="action_barge('${uuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/barge.svg" alt="${esc(text['button-barge'] || 'Barge')}"></a> `;
|
|
}
|
|
if (permissions.operator_panel_record) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-record'] || 'Record')}" onclick="action_record('${uuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="${record_icon}" alt="${esc(text['button-record'] || 'Record')}"></a> `;
|
|
}
|
|
|
|
html += " </td>\n";
|
|
html += "</tr>\n";
|
|
});
|
|
|
|
html += "</table>\n</div>\n";
|
|
container.innerHTML = html;
|
|
apply_calls_filters();
|
|
}
|
|
|
|
/**
|
|
* Request a full conferences snapshot.
|
|
*/
|
|
function load_conferences_snapshot() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
ws.request('active.operator.panel', 'conferences_active', {domain_name: domain_name})
|
|
.then(response => {
|
|
const conferences = response.payload || [];
|
|
conferences_map.clear();
|
|
conferences.forEach(conf => {
|
|
if (conf.conference_name) conferences_map.set(conf.conference_name, conf);
|
|
});
|
|
render_conferences_tab();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Handle incremental conference events.
|
|
* @param {object} event
|
|
*/
|
|
function on_conference_event(event) {
|
|
const action = (event.event_name || event.topic || '').toLowerCase();
|
|
const conference_name = event.conference_name || event.channel_presence_id || '';
|
|
|
|
if (!conference_name) return;
|
|
|
|
switch (action) {
|
|
case 'conference_create': {
|
|
conferences_map.set(conference_name, {
|
|
conference_name: conference_name,
|
|
conference_display_name: event.conference_display_name || '',
|
|
member_count: 0,
|
|
members: [],
|
|
});
|
|
break;
|
|
}
|
|
|
|
case 'conference_destroy': {
|
|
conferences_map.delete(conference_name);
|
|
break;
|
|
}
|
|
|
|
case 'add_member': {
|
|
const conf = conferences_map.get(conference_name) || {
|
|
conference_name,
|
|
conference_display_name: event.conference_display_name || '',
|
|
member_count: 0,
|
|
members: [],
|
|
};
|
|
// Upsert member
|
|
const member = event.member || { id: event.member_id, uuid: event.unique_id,
|
|
caller_id_name: event.caller_id_name || event.caller_caller_id_name || '',
|
|
caller_id_number: event.caller_id_number || event.caller_caller_id_number || '',
|
|
flags: {
|
|
can_hear: (event.hear || 'true') === 'true',
|
|
can_speak: (event.speak || 'true') === 'true',
|
|
talking: (event.talking || 'false') === 'true',
|
|
has_video: (event.video || 'false') === 'true',
|
|
has_floor: (event.floor || 'false') === 'true',
|
|
is_moderator: (event.member_type || '') === 'moderator',
|
|
}
|
|
};
|
|
const members = conf.members || [];
|
|
const idx = members.findIndex(m => String(m.id) === String(member.id));
|
|
if (idx >= 0) members[idx] = member; else members.push(member);
|
|
conf.members = members;
|
|
conf.member_count = event.member_count || members.length;
|
|
conferences_map.set(conference_name, conf);
|
|
break;
|
|
}
|
|
|
|
case 'del_member': {
|
|
const conf = conferences_map.get(conference_name);
|
|
if (!conf) break;
|
|
const members = (conf.members || []).filter(m => String(m.id) !== String(event.member_id));
|
|
conf.members = members;
|
|
conf.member_count = event.member_count !== undefined ? event.member_count : members.length;
|
|
conferences_map.set(conference_name, conf);
|
|
break;
|
|
}
|
|
|
|
case 'start_talking':
|
|
case 'stop_talking':
|
|
case 'mute_member':
|
|
case 'unmute_member':
|
|
case 'deaf_member':
|
|
case 'undeaf_member':
|
|
case 'floor_change': {
|
|
const conf = conferences_map.get(conference_name);
|
|
if (!conf) break;
|
|
const members = conf.members || [];
|
|
const member = members.find(m => String(m.id) === String(event.member_id));
|
|
if (member && member.flags) {
|
|
if (action === 'start_talking') member.flags.talking = true;
|
|
if (action === 'stop_talking') member.flags.talking = false;
|
|
if (action === 'mute_member') member.flags.can_speak = false;
|
|
if (action === 'unmute_member') member.flags.can_speak = true;
|
|
if (action === 'deaf_member') member.flags.can_hear = false;
|
|
if (action === 'undeaf_member') member.flags.can_hear = true;
|
|
if (action === 'floor_change') { members.forEach(m => { if (m.flags) m.flags.has_floor = false; }); member.flags.has_floor = true; }
|
|
}
|
|
conferences_map.set(conference_name, conf);
|
|
break;
|
|
}
|
|
|
|
default:
|
|
break;
|
|
}
|
|
|
|
render_conferences_tab();
|
|
}
|
|
|
|
/**
|
|
* Render the Conferences tab from the in-memory conferences_map.
|
|
*/
|
|
function render_conferences_tab() {
|
|
const container = document.getElementById('conferences_container');
|
|
if (!container) return;
|
|
|
|
const conferences = Array.from(conferences_map.values());
|
|
|
|
const badge = document.getElementById('conferences_count');
|
|
if (badge) badge.textContent = conferences.length;
|
|
|
|
if (conferences.length === 0) {
|
|
container.innerHTML = `<p class="text-muted">${esc(text['label-no_conferences_active'] || 'No active conferences.')}</p>`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
conferences.forEach(conf => {
|
|
const name = conf.conference_name || '';
|
|
const display = conf.conference_display_name || name.split('@')[0] || name;
|
|
const count = conf.member_count || (conf.members || []).length;
|
|
const members = conf.members || [];
|
|
const conf_group_keys = new Set();
|
|
members.forEach(m => {
|
|
const n = ((m.caller_id_number || '') + '').trim();
|
|
if (!n) return;
|
|
conf_group_keys.add(get_extension_group_key(n));
|
|
});
|
|
if (conf_group_keys.size === 0) conf_group_keys.add('');
|
|
const conf_group_attr = esc(Array.from(conf_group_keys).join(','));
|
|
|
|
html += `<div class="card mb-3" data-group-keys="${conf_group_attr}">\n`;
|
|
html += ` <div class="card-header d-flex justify-content-between align-items-center">\n`;
|
|
html += ` <strong>${esc(display)}</strong>\n`;
|
|
html += ` <span class="badge bg-secondary">${count} ${esc(text['label-members'] || 'members')}</span>\n`;
|
|
html += ` </div>\n`;
|
|
|
|
if (members.length > 0) {
|
|
html += ` <div class="card-body p-0"><table class="list mb-0">\n`;
|
|
html += ` <tr class="list-header">`;
|
|
html += ` <th>${esc(text['label-caller_id'] || 'Caller ID')}</th>`;
|
|
html += ` <th>${esc(text['label-member_id'] || 'ID')}</th>`;
|
|
html += ` <th>${esc(text['label-flags'] || 'Flags')}</th>`;
|
|
if (permissions.operator_panel_hangup || permissions.operator_panel_manage) {
|
|
html += ` <th class="right">${esc(text['label-actions'] || 'Actions')}</th>`;
|
|
}
|
|
html += ` </tr>\n`;
|
|
|
|
members.forEach(m => {
|
|
const mid = esc(String(m.id || ''));
|
|
const muuid = esc(m.uuid || '');
|
|
const cid = esc(m.caller_id_name || '');
|
|
const cid_num = esc(m.caller_id_number || '');
|
|
const flags = m.flags || {};
|
|
|
|
html += ` <tr class="list-row" id="conf_member_${muuid}">\n`;
|
|
html += ` <td>${cid ? `${cid}<br><small>${cid_num}</small>` : cid_num}</td>\n`;
|
|
html += ` <td>${mid}</td>\n`;
|
|
html += ` <td style="white-space:nowrap;">`;
|
|
html += ` <span class="badge bg-${flags.talking ? 'info' : 'secondary'}" title="${esc(text['label-talking'] || 'Talking')}" style="margin:0 3px;">${esc(text['label-talking'] || 'Talking')}</span>`;
|
|
html += ` <span class="badge bg-${flags.can_speak === false ? 'warning text-dark' : 'success'}" title="${esc(text['label-muted'] || 'Muted')}" style="margin:0 3px;">${esc(text['label-muted'] || 'Muted')}</span>`;
|
|
html += ` <span class="badge bg-${flags.can_hear === false ? 'warning text-dark' : 'success'}" title="${esc(text['label-deaf'] || 'Deaf')}" style="margin:0 3px;">${esc(text['label-deaf'] || 'Deaf')}</span>`;
|
|
if (flags.has_floor) html += ` <span class="badge bg-warning text-dark" title="${esc(text['label-floor'] || 'Floor')}" style="margin:0 3px;">${esc(text['label-floor'] || 'Floor')}</span>`;
|
|
if (flags.is_moderator) html += ` <span class="badge bg-primary" title="${esc(text['label-moderator'] || 'Moderator')}" style="margin:0 3px;">${esc(text['label-moderator'] || 'Moderator')}</span>`;
|
|
html += ` </td>\n`;
|
|
|
|
if (permissions.operator_panel_hangup || permissions.operator_panel_manage) {
|
|
html += ` <td class="right">\n`;
|
|
if (permissions.operator_panel_hangup) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-hangup'] || 'Hangup')}" onclick="action_hangup('${muuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/kill.png" alt="${esc(text['button-hangup'] || 'Hangup')}"></a> `;
|
|
}
|
|
if (permissions.operator_panel_manage) {
|
|
html += ` <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-transfer'] || 'Transfer')}" onclick="open_transfer_modal('${muuid}')">`
|
|
+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/keypad_transfer.png" alt="${esc(text['button-transfer'] || 'Transfer')}"></a> `;
|
|
}
|
|
html += ` </td>\n`;
|
|
}
|
|
|
|
html += ` </tr>\n`;
|
|
});
|
|
|
|
html += ` </table></div>\n`;
|
|
}
|
|
|
|
html += `</div>\n`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
apply_conferences_filters();
|
|
}
|
|
|
|
/**
|
|
* Request a full agents snapshot.
|
|
*/
|
|
function load_agents_snapshot() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
ws.request('active.operator.panel', 'agents_active', {domain_name: domain_name})
|
|
.then(response => {
|
|
agents_list = response.payload || [];
|
|
render_agents_tab();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Handle the server-pushed agent stats broadcast (timer-driven every N seconds).
|
|
* @param {object} event
|
|
*/
|
|
function on_agent_stats(event) {
|
|
agents_list = event.payload || event.data || [];
|
|
render_agents_tab();
|
|
}
|
|
|
|
/**
|
|
* Status → Bootstrap badge colour helper.
|
|
* @param {string} status
|
|
* @returns {string}
|
|
*/
|
|
function agent_status_class(status) {
|
|
switch ((status || '').toLowerCase()) {
|
|
case 'available': return 'bg-success';
|
|
case 'available (on demand)': return 'bg-info';
|
|
case 'on break': return 'bg-warning text-dark';
|
|
case 'do not disturb': return 'bg-secondary';
|
|
case 'logged out': return 'bg-dark';
|
|
default: return 'bg-secondary';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render the Agents tab from the in-memory agents_list.
|
|
*/
|
|
function render_agents_tab() {
|
|
const container = document.getElementById('agents_container');
|
|
if (!container) return;
|
|
|
|
const badge = document.getElementById('agents_count');
|
|
if (badge) badge.textContent = agents_list.length;
|
|
|
|
if (agents_list.length === 0) {
|
|
container.innerHTML = `<p class="text-muted">${esc(text['label-no_agents'] || 'No agents.')}</p>`;
|
|
return;
|
|
}
|
|
|
|
let html = "<div class='card'>\n";
|
|
html += "<table class='list'>\n";
|
|
html += "<tr class='list-header'>\n";
|
|
html += ` <th>${esc(text['label-agent'] || 'Agent')}</th>\n`;
|
|
html += ` <th>${esc(text['label-queue'] || 'Queue')}</th>\n`;
|
|
html += ` <th>${esc(text['label-status'] || 'Status')}</th>\n`;
|
|
html += ` <th>${esc(text['label-state'] || 'State')}</th>\n`;
|
|
html += ` <th>${esc(text['label-calls_answered'] || 'Answered')}</th>\n`;
|
|
html += ` <th>${esc(text['label-talk_time'] || 'Talk Time')}</th>\n`;
|
|
html += ` <th>${esc(text['label-last_call'] || 'Last Call')}</th>\n`;
|
|
if (permissions.operator_panel_manage) {
|
|
html += ` <th class="right">${esc(text['label-actions'] || 'Actions')}</th>\n`;
|
|
}
|
|
html += "</tr>\n";
|
|
|
|
agents_list.forEach(agent => {
|
|
const name = esc(agent.agent_name || '');
|
|
const queue = esc(agent.queue_name || agent.queue_extension || '');
|
|
const group_key = esc(get_extension_group_key(agent.queue_extension || ''));
|
|
const status = agent.status || '';
|
|
const state = esc(agent.state || '');
|
|
const answered = esc(agent.calls_answered || '0');
|
|
const talk_time = esc(agent.talk_time || '0');
|
|
const last_call = format_time(agent.last_bridge_start || 0);
|
|
const status_cls = agent_status_class(status);
|
|
|
|
html += `<tr class="list-row" id="agent_row_${name}" data-group-key="${group_key}">\n`;
|
|
html += ` <td>${name}</td>\n`;
|
|
html += ` <td>${queue}</td>\n`;
|
|
html += ` <td><span class="badge ${status_cls}">${esc(status)}</span></td>\n`;
|
|
html += ` <td>${state}</td>\n`;
|
|
html += ` <td class="center">${answered}</td>\n`;
|
|
html += ` <td class="mono">${talk_time}</td>\n`;
|
|
html += ` <td>${esc(last_call)}</td>\n`;
|
|
|
|
if (permissions.operator_panel_manage) {
|
|
html += ` <td class="right">\n`;
|
|
// Status change select
|
|
html += ` <select class="element select-sm" onchange="action_agent_status('${name.replace(/'/g, "\\'")}', this.value)">\n`;
|
|
const statuses = ['Available', 'Available (On Demand)', 'On Break', 'Do Not Disturb', 'Logged Out'];
|
|
statuses.forEach(s => {
|
|
const selected = s === status ? ' selected' : '';
|
|
html += ` <option value="${esc(s)}"${selected}>${esc(s)}</option>\n`;
|
|
});
|
|
html += ` </select>\n`;
|
|
html += ` </td>\n`;
|
|
}
|
|
|
|
html += `</tr>\n`;
|
|
});
|
|
|
|
html += "</table>\n</div>\n";
|
|
container.innerHTML = html;
|
|
apply_agents_filters();
|
|
}
|
|
|
|
/**
|
|
* Send a generic action to the service.
|
|
* @param {string} action
|
|
* @param {object} extra Additional payload fields.
|
|
* @returns {Promise}
|
|
*/
|
|
function send_action(action, extra) {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) {
|
|
console.error('[OP] Cannot send action: WebSocket not connected');
|
|
return Promise.reject(new Error('Not connected'));
|
|
}
|
|
return ws.request('active.operator.panel', 'action', Object.assign({ action, domain_name }, extra));
|
|
}
|
|
|
|
/** Handle action responses from the server. */
|
|
function on_action_response(event) {
|
|
const payload = event.payload || event;
|
|
if (!payload.success) {
|
|
console.warn('[OP] Action failed:', payload.message);
|
|
show_toast(payload.message || 'Action failed', 'danger');
|
|
}
|
|
}
|
|
|
|
function action_hangup(uuid) {
|
|
if (!confirm(text['label-confirm_hangup'] || 'Hang up this call?')) return;
|
|
send_action('hangup', { uuid }).catch(console.error);
|
|
}
|
|
|
|
/** Open the transfer modal for the given UUID. */
|
|
function open_transfer_modal(uuid) {
|
|
const uuid_field = document.getElementById('transfer_uuid');
|
|
const dest_field = document.getElementById('transfer_destination');
|
|
if (!uuid_field || !dest_field) return;
|
|
|
|
uuid_field.value = uuid;
|
|
dest_field.value = '';
|
|
|
|
const modal_el = document.getElementById('transfer_modal');
|
|
if (!modal_el) return;
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modal_el);
|
|
modal.show();
|
|
setTimeout(() => dest_field.focus(), 350);
|
|
}
|
|
|
|
/** Called by the Transfer button inside the modal. */
|
|
function confirm_transfer() {
|
|
const uuid = (document.getElementById('transfer_uuid') || {}).value || '';
|
|
const destination = (document.getElementById('transfer_destination') || {}).value || '';
|
|
|
|
if (!uuid || !destination) {
|
|
show_toast(text['label-destination_required'] || 'Please enter a destination.', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Close modal
|
|
const modal_el = document.getElementById('transfer_modal');
|
|
if (modal_el) bootstrap.Modal.getInstance(modal_el)?.hide();
|
|
|
|
send_action('transfer', { uuid, destination, context: domain_name }).catch(console.error);
|
|
}
|
|
|
|
function action_eavesdrop(uuid) {
|
|
if (!uuid) return;
|
|
|
|
// If user has exactly one extension, use it directly (no prompt).
|
|
if (Array.isArray(user_own_extensions) && user_own_extensions.length === 1) {
|
|
send_action('eavesdrop', { uuid, destination: user_own_extensions[0], destination_extension: user_own_extensions[0] })
|
|
.then(() => show_toast(text['button-eavesdrop'] || 'Eavesdrop started', 'success'))
|
|
.catch((err) => {
|
|
console.error(err);
|
|
show_toast((err && err.message) || 'Eavesdrop failed', 'danger');
|
|
});
|
|
return;
|
|
}
|
|
|
|
const ext = prompt(text['label-your_extension'] || 'Your extension to receive the call:');
|
|
if (!ext) return;
|
|
send_action('eavesdrop', { uuid, destination: ext, destination_extension: ext })
|
|
.then(() => show_toast(text['button-eavesdrop'] || 'Eavesdrop started', 'success'))
|
|
.catch((err) => {
|
|
console.error(err);
|
|
show_toast((err && err.message) || 'Eavesdrop failed', 'danger');
|
|
});
|
|
}
|
|
|
|
function action_whisper(uuid) {
|
|
action_monitor_mode('whisper', uuid, text['button-whisper'] || 'Whisper started');
|
|
}
|
|
|
|
function action_barge(uuid) {
|
|
action_monitor_mode('barge', uuid, text['button-barge'] || 'Barge started');
|
|
}
|
|
|
|
function action_monitor_mode(mode, uuid, success_message) {
|
|
if (!uuid) return;
|
|
|
|
if (Array.isArray(user_own_extensions) && user_own_extensions.length === 1) {
|
|
const ext = user_own_extensions[0];
|
|
send_action(mode, { uuid, destination: ext, destination_extension: ext })
|
|
.then(() => show_toast(success_message, 'success'))
|
|
.catch((err) => {
|
|
console.error(err);
|
|
show_toast((err && err.message) || (mode + ' failed'), 'danger');
|
|
});
|
|
return;
|
|
}
|
|
|
|
const ext = prompt(text['label-your_extension'] || 'Your extension to receive the call:');
|
|
if (!ext) return;
|
|
|
|
send_action(mode, { uuid, destination: ext, destination_extension: ext })
|
|
.then(() => show_toast(success_message, 'success'))
|
|
.catch((err) => {
|
|
console.error(err);
|
|
show_toast((err && err.message) || (mode + ' failed'), 'danger');
|
|
});
|
|
}
|
|
|
|
/** Called when dragging the eavesdrop icon onto an extension block. */
|
|
function on_eavesdrop_dragstart(uuid, event) {
|
|
event.stopPropagation();
|
|
dragged_eavesdrop_uuid = uuid;
|
|
dragged_call_uuid = null;
|
|
dragged_extension = null;
|
|
event.dataTransfer.setData('text/plain', uuid);
|
|
event.dataTransfer.setData('application/x-op-eavesdrop-uuid', uuid);
|
|
event.dataTransfer.effectAllowed = 'copy';
|
|
set_drag_visual_state(true);
|
|
}
|
|
|
|
function action_record(uuid) {
|
|
const ch = calls_map.get(uuid);
|
|
const stopping = call_is_recording(ch, uuid);
|
|
send_action('record', { uuid, stop: stopping })
|
|
.then(() => {
|
|
const related = get_conversation_call_uuids(uuid);
|
|
related.forEach((id) => {
|
|
if (stopping) recording_call_uuids.delete(id);
|
|
else recording_call_uuids.add(id);
|
|
const leg = calls_map.get(id);
|
|
if (leg) leg.is_recording = !stopping;
|
|
});
|
|
render_calls_tab();
|
|
schedule_extensions_render();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Send user status change through WebSocket.
|
|
* Triggered by the status dropdown in the action bar.
|
|
* @param {string} status
|
|
*/
|
|
function send_user_status(status) {
|
|
send_action('user_status', { status, user_uuid }).catch(console.error);
|
|
}
|
|
|
|
function action_agent_status(agent_name, status) {
|
|
send_action('agent_status', { agent_name, status }).catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Show a brief Bootstrap toast notification.
|
|
* @param {string} message
|
|
* @param {string} [variant='info'] Bootstrap color variant.
|
|
*/
|
|
function show_toast(message, variant) {
|
|
variant = variant || 'info';
|
|
let container = document.getElementById('lop_toast_container');
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.id = 'lop_toast_container';
|
|
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
|
container.style.zIndex = '9999';
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
const toast_el = document.createElement('div');
|
|
toast_el.className = `toast align-items-center text-bg-${variant} border-0`;
|
|
toast_el.setAttribute('role', 'alert');
|
|
toast_el.setAttribute('aria-live', 'assertive');
|
|
toast_el.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body">${esc(message)}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>`;
|
|
|
|
container.appendChild(toast_el);
|
|
const toast = new bootstrap.Toast(toast_el, { delay: 4000 });
|
|
toast.show();
|
|
toast_el.addEventListener('hidden.bs.toast', () => toast_el.remove());
|
|
}
|
|
|
|
/**
|
|
* Request a full extensions snapshot from the service.
|
|
*/
|
|
function load_extensions_snapshot() {
|
|
if (!ws || ws.ws.readyState !== WebSocket.OPEN) return;
|
|
ws.request('active.operator.panel', 'extensions_active', {domain_name: domain_name})
|
|
.then(response => {
|
|
extensions_map.clear();
|
|
(response.payload || []).forEach(ext => {
|
|
if (ext.extension) extensions_map.set(ext.extension, ext);
|
|
});
|
|
render_extensions_tab();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Derive call state for a given extension number by scanning calls_map.
|
|
* @param {string} ext_number
|
|
* @returns {{ state: string, call_uuid: string|null, call_info: object|null }}
|
|
*/
|
|
function get_extension_call_state(ext_number) {
|
|
const candidates = [];
|
|
|
|
for (const [uuid, ch] of calls_map) {
|
|
const presence = (ch.channel_presence_id || '').split('@')[0];
|
|
const dest = ch.caller_destination_number || '';
|
|
const cid_num = ch.caller_caller_id_number || '';
|
|
const context = ch.caller_context || '';
|
|
|
|
const matches = (presence === ext_number)
|
|
|| (dest === ext_number)
|
|
|| (cid_num === ext_number)
|
|
|| ((dest === ext_number || cid_num === ext_number) && (context === domain_name || context === 'default'));
|
|
|
|
if (!matches) continue;
|
|
|
|
const cs = (ch.channel_call_state || '').toUpperCase();
|
|
const as = (ch.answer_state || '').toUpperCase();
|
|
|
|
let state = 'active';
|
|
if (cs === 'HELD' || as === 'HELD') {
|
|
state = 'held';
|
|
} else if (cs.indexOf('RING') !== -1 || as.indexOf('RING') !== -1 || as === 'EARLY') {
|
|
// EARLY and RING* states map to offering/ringing from the panel perspective.
|
|
state = 'ringing';
|
|
}
|
|
|
|
// Pick the most relevant leg for this extension first.
|
|
let leg_score = 0;
|
|
if (presence === ext_number) leg_score = 4;
|
|
else if (dest === ext_number) leg_score = 3;
|
|
else if (cid_num === ext_number) leg_score = 2;
|
|
else leg_score = 1;
|
|
|
|
const state_score = (state === 'ringing') ? 3 : (state === 'active' ? 2 : (state === 'held' ? 1 : 0));
|
|
|
|
candidates.push({ uuid, ch, state, leg_score, state_score });
|
|
}
|
|
|
|
if (candidates.length === 0) {
|
|
return { state: 'idle', call_uuid: null, call_info: null };
|
|
}
|
|
|
|
candidates.sort((a, b) => {
|
|
if (b.leg_score !== a.leg_score) return b.leg_score - a.leg_score;
|
|
return b.state_score - a.state_score;
|
|
});
|
|
|
|
const best = candidates[0];
|
|
return { state: best.state, call_uuid: best.uuid, call_info: best.ch };
|
|
}
|
|
|
|
/**
|
|
* Render one extension block as an HTML string.
|
|
* @param {object} ext
|
|
* @param {boolean} is_mine True when this extension belongs to the logged-in user.
|
|
* @returns {string}
|
|
*/
|
|
function render_ext_block(ext, is_mine) {
|
|
const num = ext.extension || '';
|
|
const raw_name = ext.effective_caller_id_name || ext.description || '';
|
|
const show_name = raw_name && raw_name !== num;
|
|
const dnd = (ext.do_not_disturb || '') === 'true';
|
|
const reg = ext.registered === true;
|
|
const voicemail_enabled = (ext.voicemail_enabled || '') === 'true';
|
|
const { state, call_uuid, call_info } = get_extension_call_state(num);
|
|
|
|
const user_status_raw = (ext.user_status || '').trim();
|
|
|
|
let css_state;
|
|
if (!reg) {
|
|
css_state = 'op-ext-unregistered';
|
|
} else if (state === 'ringing') {
|
|
css_state = 'op-ext-ringing';
|
|
} else if (state === 'active') {
|
|
css_state = 'op-ext-active';
|
|
} else if (state === 'held') {
|
|
css_state = 'op-ext-held';
|
|
} else if (dnd || user_status_raw === 'Do Not Disturb') {
|
|
css_state = 'op-ext-dnd';
|
|
} else if (user_status_raw === 'On Break') {
|
|
css_state = 'op-ext-on-break';
|
|
} else if (user_status_raw === 'Available' || user_status_raw === 'Available (On Demand)') {
|
|
css_state = 'op-ext-available';
|
|
} else {
|
|
// Registered with no explicit/active status — blue
|
|
css_state = 'op-ext-registered';
|
|
}
|
|
|
|
// Icon color per state
|
|
const icon_colors = {
|
|
'op-ext-available': '#1e7e34',
|
|
'op-ext-on-break': '#8a6508',
|
|
'op-ext-dnd': '#a71d2a',
|
|
'op-ext-registered': '#2b6cb0',
|
|
'op-ext-logged-out': '#6c757d',
|
|
'op-ext-unregistered': '#6c757d',
|
|
'op-ext-ringing': '#0e6882',
|
|
'op-ext-active': '#2a7a2b',
|
|
'op-ext-held': '#1a6c7a'
|
|
};
|
|
const icon_color = icon_colors[css_state] || '#7a8499';
|
|
|
|
// Only show a state label when something notable is happening
|
|
let state_label = '';
|
|
if (dnd && reg) {
|
|
state_label = text['label-do_not_disturb'] || 'Do Not Disturb';
|
|
} else if (reg && state !== 'idle') {
|
|
switch (state) {
|
|
case 'ringing': state_label = text['label-ringing'] || 'Ringing\u2026'; break;
|
|
case 'active': state_label = text['label-on_call'] || 'On Call'; break;
|
|
case 'held': state_label = text['label-on_hold'] || 'On Hold'; break;
|
|
}
|
|
if (call_info) {
|
|
const call_dest = ((call_info.caller_destination_number || '') + '').trim();
|
|
const call_cid = ((call_info.caller_caller_id_number || call_info.caller_id_number || '') + '').trim();
|
|
const call_name = ((call_info.caller_caller_id_name || call_info.caller_id_name || '') + '').trim();
|
|
|
|
// Show the opposite party relative to this extension to avoid
|
|
// misleading CID values when both legs are internal extensions.
|
|
let peer = '';
|
|
if (call_dest === num && call_cid && call_cid !== num) {
|
|
peer = call_cid;
|
|
} else if (call_cid === num && call_dest && call_dest !== num) {
|
|
peer = call_dest;
|
|
} else if (call_cid && call_cid !== num) {
|
|
peer = call_cid;
|
|
} else if (call_dest && call_dest !== num) {
|
|
peer = call_dest;
|
|
} else {
|
|
peer = call_name || call_cid || call_dest || '';
|
|
}
|
|
|
|
if (peer) state_label += ': ' + esc(peer);
|
|
}
|
|
}
|
|
|
|
const mine_cls = is_mine ? ' op-ext-mine' : '';
|
|
const mine_label = is_mine ? `<span class="op-ext-mine-label" title="${esc(text['label-your_extension'] || 'Your extension')}">☇</span>` : '';
|
|
const data_uuid = call_uuid ? ` data-call-uuid="${esc(call_uuid)}"` : '';
|
|
// Always allow extension-to-extension drag originate; backend routing handles
|
|
// availability, call forwarding, follow_me, and voicemail decisions.
|
|
const can_receive_originate = true;
|
|
const can_manual_originate = reg && state === 'idle';
|
|
const has_live_call = reg && state !== 'idle' && !!call_info;
|
|
const call_uuid_js = (call_uuid || '').replace(/'/g, "\\'");
|
|
const call_dest = ((call_info || {}).caller_destination_number || '').trim();
|
|
const call_cid = ((call_info || {}).caller_caller_id_number || '').trim();
|
|
let direction_raw = '';
|
|
if (call_dest === num && call_cid !== num) {
|
|
direction_raw = 'inbound';
|
|
} else if (call_cid === num && call_dest !== num) {
|
|
direction_raw = 'outbound';
|
|
} else {
|
|
direction_raw = (((call_info || {}).call_direction || (call_info || {}).variable_call_direction || '') + '').toLowerCase();
|
|
}
|
|
const direction_icon = direction_raw === 'inbound'
|
|
? '../operator_panel/resources/images/inbound.png'
|
|
: (direction_raw === 'outbound' ? '../operator_panel/resources/images/outbound.png' : '');
|
|
const is_recording = call_is_recording(call_info, call_uuid);
|
|
const record_icon = is_recording
|
|
? '../operator_panel/resources/images/recording.png'
|
|
: '../operator_panel/resources/images/record.png';
|
|
const duration_raw = has_live_call ? format_elapsed((call_info || {}).caller_channel_created_time || '0') : '';
|
|
const user_status = (ext.user_status || '').trim();
|
|
let status_icon = 'status_logged_out';
|
|
let status_hover = text['label-status_logged_out_or_unknown'] || text['label-status_logged_out'] || 'Logged Out';
|
|
switch (user_status) {
|
|
case 'Available':
|
|
status_icon = 'status_available';
|
|
status_hover = text['label-status_available'] || 'Available';
|
|
break;
|
|
case 'Available (On Demand)':
|
|
status_icon = 'status_available_on_demand';
|
|
status_hover = text['label-status_available_on_demand'] || 'Available (On Demand)';
|
|
break;
|
|
case 'On Break':
|
|
status_icon = 'status_on_break';
|
|
status_hover = text['label-status_on_break'] || 'On Break';
|
|
break;
|
|
case 'Do Not Disturb':
|
|
status_icon = 'status_do_not_disturb';
|
|
status_hover = text['label-status_do_not_disturb'] || 'Do Not Disturb';
|
|
break;
|
|
default:
|
|
if (reg) {
|
|
// In this panel, registered-without-explicit-status uses the same icon as Available.
|
|
status_icon = 'status_available';
|
|
status_hover = text['label-status_available'] || 'Available';
|
|
} else {
|
|
status_icon = 'status_logged_out';
|
|
status_hover = text['label-status_logged_out_or_unknown'] || text['label-status_logged_out'] || 'Logged Out';
|
|
}
|
|
}
|
|
if (!reg) {
|
|
status_icon = 'status_logged_out';
|
|
status_hover = text['label-status_logged_out_or_unknown'] || text['label-status_logged_out'] || 'Logged Out';
|
|
}
|
|
if (dnd) {
|
|
status_icon = 'status_do_not_disturb';
|
|
status_hover = text['label-status_do_not_disturb'] || 'Do Not Disturb';
|
|
}
|
|
|
|
// Allow dragging from idle extensions (originate) and live-call extensions (transfer).
|
|
const is_draggable = reg && (state === 'idle' || has_live_call);
|
|
const drag_attrs = is_draggable
|
|
? ` draggable="true" ondragstart="on_ext_dragstart('${esc(num)}', event)" ondragend="on_drag_end()"`
|
|
: '';
|
|
const dialpad_html = can_manual_originate
|
|
? `<div class="op-ext-dial-wrap">` +
|
|
`<button type="button" class="op-ext-dial-toggle" title="${esc(text['label-dial'] || 'Dial')}" onclick="toggle_ext_dialpad('${esc(num)}', event)">` +
|
|
`<img src="../operator_panel/resources/images/keypad_call.png" width="12" height="12" alt="${esc(text['label-dial'] || 'Dial')}">` +
|
|
`</button>` +
|
|
`<input type="text" class="op-ext-dial-input d-none" placeholder="${esc(text['label-destination'] || 'Destination')}" ` +
|
|
`onkeydown="if (event.key === 'Enter') submit_ext_dial('${esc(num)}', event)" onblur="toggle_ext_dialpad('${esc(num)}', event)" onclick="event.stopPropagation()">` +
|
|
`</div>`
|
|
: '';
|
|
const live_call_meta_html = has_live_call
|
|
? `<div class="op-ext-call-meta">` +
|
|
(direction_icon ? `<img class="op-ext-call-direction" src="${direction_icon}" alt="${esc(text['label-call_direction'] || 'Direction')}" title="${esc(text['label-call_direction'] || 'Direction')}">` : '') +
|
|
`<span class="op-ext-call-duration" data-created="${(call_info || {}).caller_channel_created_time || '0'}">${esc(duration_raw)}</span>` +
|
|
`</div>`
|
|
: '';
|
|
const live_actions_html = has_live_call
|
|
? `<div class="op-ext-call-actions">` +
|
|
(permissions.operator_panel_record
|
|
? `<img class="op-ext-action-icon" src="${record_icon}" alt="${esc(text['button-record'] || 'Record')}" title="${esc(text['button-record'] || 'Record')}" onclick="action_record('${call_uuid_js}')">`
|
|
: '') +
|
|
(permissions.operator_panel_eavesdrop
|
|
? `<img class="op-ext-action-icon" src="../operator_panel/resources/images/eavesdrop.png" alt="${esc(text['button-eavesdrop'] || 'Eavesdrop')}" title="${esc(text['button-eavesdrop'] || 'Eavesdrop')}" draggable="true" ondragstart="on_eavesdrop_dragstart('${call_uuid_js}', event)" ondragend="on_drag_end()" onclick="action_eavesdrop('${call_uuid_js}')">`
|
|
: '') +
|
|
(permissions.operator_panel_coach
|
|
? `<img class="op-ext-action-icon" src="../operator_panel/resources/images/whisper.svg" alt="${esc(text['button-whisper'] || 'Whisper')}" title="${esc(text['button-whisper'] || 'Whisper')}" onclick="action_whisper('${call_uuid_js}')">`
|
|
: '') +
|
|
(permissions.operator_panel_coach
|
|
? `<img class="op-ext-action-icon" src="../operator_panel/resources/images/barge.svg" alt="${esc(text['button-barge'] || 'Barge')}" title="${esc(text['button-barge'] || 'Barge')}" onclick="action_barge('${call_uuid_js}')">`
|
|
: '') +
|
|
(permissions.operator_panel_hangup
|
|
? `<img class="op-ext-action-icon" src="../operator_panel/resources/images/kill.png" alt="${esc(text['button-hangup'] || 'Hangup')}" title="${esc(text['button-hangup'] || 'Hangup')}" onclick="action_hangup('${call_uuid_js}')">`
|
|
: '') +
|
|
`</div>`
|
|
: '';
|
|
|
|
return `<div class="op-ext-block ${css_state}${mine_cls}" id="ext_block_${esc(num)}"` +
|
|
` data-extension="${esc(num)}"${data_uuid}` +
|
|
` data-can-receive-originate="${can_receive_originate ? 'true' : 'false'}"` +
|
|
drag_attrs +
|
|
` ondragover="on_ext_dragover(event)"` +
|
|
` ondragleave="event.currentTarget.classList.remove('op-ext-drop-over')"` +
|
|
` ondrop="on_ext_drop('${esc(num)}', event)">` +
|
|
`<div class="op-ext-icon" title="${esc(status_hover)}"><img class="op-ext-status-icon" src="../operator_panel/resources/images/${status_icon}.png" width="28" height="28" alt="${esc(status_hover)}"></div>` +
|
|
`<div class="op-ext-info${has_live_call ? ' op-has-live-call' : ''}">` +
|
|
`${mine_label}` +
|
|
`<div class="op-ext-number">${esc(num)}</div>` +
|
|
dialpad_html +
|
|
(show_name ? `<div class="op-ext-name" title="${esc(raw_name)}">${esc(raw_name)}</div>` : '') +
|
|
(state_label ? `<div class="op-ext-state-info">${state_label}</div>` : '') +
|
|
live_call_meta_html +
|
|
live_actions_html +
|
|
`</div>` +
|
|
`</div>`;
|
|
}
|
|
|
|
/**
|
|
* Convert a string to Title Case.
|
|
*/
|
|
function to_title_case(str) {
|
|
if (!str) return '';
|
|
return str.replace(/\S+/g, function(word) {
|
|
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Render a group card (dashboard-style widget card) containing extension blocks.
|
|
* @param {string} group_key Lowercase group key for data attribute
|
|
* @param {string} title The card title (call group name in Title Case)
|
|
* @param {Array} exts Array of extension objects
|
|
* @param {boolean} is_mine Whether these are the user's own extensions
|
|
* @returns {string}
|
|
*/
|
|
function render_group_card(group_key, title, exts, is_mine) {
|
|
const hidden = active_group_filters.size > 0 && !active_group_filters.has(group_key) ? ' op-hidden' : '';
|
|
// Card label position from default settings (global for all cards).
|
|
const valid_positions = ['top', 'left', 'right', 'bottom', 'hidden'];
|
|
let position = (typeof card_label_position === 'string' ? card_label_position.toLowerCase() : 'left');
|
|
if (!valid_positions.includes(position)) position = 'left';
|
|
|
|
let html = `<div class="op-group-card${hidden}" data-group-key="${esc(group_key)}"`;
|
|
html += ` data-position="${esc(position)}"`;
|
|
// Tooltip: show group name on hover using title attribute
|
|
html += ` title="${esc(title)}">`;
|
|
|
|
// For "My Extensions" card, hide the header text but keep grey shading
|
|
const is_my_card = is_mine || group_key === '__my__';
|
|
if (is_my_card) {
|
|
html += `<div class="op-group-card-header op-hidden-text"></div>`;
|
|
} else {
|
|
html += `<div class="op-group-card-header">${esc(title)}</div>`;
|
|
}
|
|
|
|
html += `<div class="op-group-card-body">`;
|
|
html += '<div class="op-ext-grid">';
|
|
exts.forEach(ext => { html += render_ext_block(ext, is_mine); });
|
|
html += '</div>';
|
|
html += '</div></div>';
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Build the group filter buttons in the filter bar.
|
|
* @param {Array} group_keys Sorted array of {key, display} objects
|
|
*/
|
|
function build_group_filter_buttons(group_keys) {
|
|
all_group_keys_for_filters = group_keys.slice();
|
|
|
|
const targets = [
|
|
document.getElementById('group_filter_buttons'),
|
|
document.getElementById('group_filter_buttons_calls'),
|
|
document.getElementById('group_filter_buttons_conferences'),
|
|
document.getElementById('group_filter_buttons_agents'),
|
|
].filter(Boolean);
|
|
if (targets.length === 0) return;
|
|
|
|
let html = `<button type="button" class="op-group-filter-btn active" data-group-key="__all__" onclick="toggle_group_filter(this)">${esc(text['button-all'] || 'All')}</button>`;
|
|
group_keys.forEach(g => {
|
|
const is_active = active_group_filters.has(g.key) ? ' active' : '';
|
|
html += `<button type="button" class="op-group-filter-btn${is_active}" data-group-key="${esc(g.key)}" onclick="toggle_group_filter(this)">${esc(g.display).toUpperCase()}</button>`;
|
|
});
|
|
targets.forEach(container => {
|
|
container.innerHTML = html;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Toggle a group filter button on/off.
|
|
*/
|
|
function toggle_group_filter(btn) {
|
|
const key = btn.getAttribute('data-group-key');
|
|
|
|
if (key === '__all__') {
|
|
// "All" button: clear all filters (show everything)
|
|
active_group_filters.clear();
|
|
document.querySelectorAll('.op-group-filter-btn').forEach(b => {
|
|
b.classList.toggle('active', b.getAttribute('data-group-key') === '__all__');
|
|
});
|
|
} else {
|
|
// Toggle individual group
|
|
if (active_group_filters.has(key)) {
|
|
active_group_filters.delete(key);
|
|
} else {
|
|
active_group_filters.add(key);
|
|
}
|
|
btn.classList.toggle('active');
|
|
// Update "All" button state
|
|
const all_btn = document.querySelector('.op-group-filter-btn[data-group-key="__all__"]');
|
|
if (all_btn) all_btn.classList.toggle('active', active_group_filters.size === 0);
|
|
}
|
|
|
|
apply_extension_filters();
|
|
apply_calls_filters();
|
|
apply_conferences_filters();
|
|
apply_agents_filters();
|
|
}
|
|
|
|
function matches_group_filter(group_key) {
|
|
return active_group_filters.size === 0 || active_group_filters.has(group_key || '');
|
|
}
|
|
|
|
function apply_calls_filters() {
|
|
const container = document.getElementById('calls_container');
|
|
if (!container) return;
|
|
const table = container.querySelector('table.list');
|
|
if (!table) return;
|
|
|
|
const filter_text = (((document.getElementById('calls_text_filter') || {}).value) || '').trim().toLowerCase();
|
|
let visible_count = 0;
|
|
table.querySelectorAll('tr.list-row').forEach(row => {
|
|
const group_key = row.getAttribute('data-group-key') || '';
|
|
const group_ok = matches_group_filter(group_key);
|
|
const text_ok = !filter_text || (row.textContent || '').toLowerCase().indexOf(filter_text) !== -1;
|
|
const show = group_ok && text_ok;
|
|
row.style.display = show ? '' : 'none';
|
|
if (show) visible_count++;
|
|
});
|
|
|
|
let empty = container.querySelector('.op-empty-filter-result');
|
|
if (visible_count === 0) {
|
|
if (!empty) {
|
|
empty = document.createElement('p');
|
|
empty.className = 'text-muted op-empty-filter-result';
|
|
empty.textContent = text['label-no_calls_active'] || 'No active calls.';
|
|
container.appendChild(empty);
|
|
}
|
|
} else if (empty) {
|
|
empty.remove();
|
|
}
|
|
}
|
|
|
|
function apply_conferences_filters() {
|
|
const container = document.getElementById('conferences_container');
|
|
if (!container) return;
|
|
const filter_text = (((document.getElementById('conferences_text_filter') || {}).value) || '').trim().toLowerCase();
|
|
let visible_count = 0;
|
|
|
|
container.querySelectorAll('.card.mb-3').forEach(card => {
|
|
const group_keys_raw = card.getAttribute('data-group-keys') || '';
|
|
const group_keys = group_keys_raw ? group_keys_raw.split(',') : [''];
|
|
const group_ok = active_group_filters.size === 0 || group_keys.some(k => active_group_filters.has(k || ''));
|
|
const text_ok = !filter_text || (card.textContent || '').toLowerCase().indexOf(filter_text) !== -1;
|
|
const show = group_ok && text_ok;
|
|
card.style.display = show ? '' : 'none';
|
|
if (show) visible_count++;
|
|
});
|
|
|
|
let empty = container.querySelector('.op-empty-filter-result');
|
|
if (visible_count === 0 && container.querySelector('.card.mb-3')) {
|
|
if (!empty) {
|
|
empty = document.createElement('p');
|
|
empty.className = 'text-muted op-empty-filter-result';
|
|
empty.textContent = text['label-no_conferences_active'] || 'No active conferences.';
|
|
container.appendChild(empty);
|
|
}
|
|
} else if (empty) {
|
|
empty.remove();
|
|
}
|
|
}
|
|
|
|
function apply_agents_filters() {
|
|
const container = document.getElementById('agents_container');
|
|
if (!container) return;
|
|
const table = container.querySelector('table.list');
|
|
if (!table) return;
|
|
|
|
const filter_text = (((document.getElementById('agents_text_filter') || {}).value) || '').trim().toLowerCase();
|
|
let visible_count = 0;
|
|
table.querySelectorAll('tr.list-row').forEach(row => {
|
|
const group_key = row.getAttribute('data-group-key') || '';
|
|
const group_ok = matches_group_filter(group_key);
|
|
const text_ok = !filter_text || (row.textContent || '').toLowerCase().indexOf(filter_text) !== -1;
|
|
const show = group_ok && text_ok;
|
|
row.style.display = show ? '' : 'none';
|
|
if (show) visible_count++;
|
|
});
|
|
|
|
let empty = container.querySelector('.op-empty-filter-result');
|
|
if (visible_count === 0) {
|
|
if (!empty) {
|
|
empty = document.createElement('p');
|
|
empty.className = 'text-muted op-empty-filter-result';
|
|
empty.textContent = text['label-no_agents'] || 'No agents.';
|
|
container.appendChild(empty);
|
|
}
|
|
} else if (empty) {
|
|
empty.remove();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply group filter and text filter to show/hide cards and extension blocks.
|
|
*/
|
|
function apply_extension_filters() {
|
|
const text_val = (document.getElementById('extensions_text_filter') || {}).value || '';
|
|
const filter_text = text_val.trim().toLowerCase();
|
|
|
|
document.querySelectorAll('.op-group-card').forEach(card => {
|
|
const key = card.getAttribute('data-group-key') || '';
|
|
// Group filter
|
|
const group_visible = active_group_filters.size === 0 || active_group_filters.has(key);
|
|
card.classList.toggle('op-hidden', !group_visible);
|
|
|
|
if (group_visible && filter_text) {
|
|
// Text filter within visible cards
|
|
let any_visible = false;
|
|
card.querySelectorAll('.op-ext-block').forEach(block => {
|
|
const ext_num = (block.getAttribute('data-extension') || '').toLowerCase();
|
|
const ext_name = (block.querySelector('.op-ext-name') || {}).textContent || '';
|
|
const matches = ext_num.indexOf(filter_text) !== -1 || ext_name.toLowerCase().indexOf(filter_text) !== -1;
|
|
block.style.display = matches ? '' : 'none';
|
|
if (matches) any_visible = true;
|
|
});
|
|
card.classList.toggle('op-hidden', !any_visible);
|
|
} else if (group_visible) {
|
|
card.querySelectorAll('.op-ext-block').forEach(block => {
|
|
block.style.display = '';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Toggle edit mode for rearranging group cards via drag-and-drop.
|
|
*/
|
|
function toggle_edit_mode() {
|
|
edit_mode_active = !edit_mode_active;
|
|
const btn = document.getElementById('edit_mode_btn');
|
|
const container = document.getElementById('extensions_container');
|
|
if (btn) btn.classList.toggle('active', edit_mode_active);
|
|
if (!container) return;
|
|
|
|
if (edit_mode_active) {
|
|
container.classList.add('op-edit-mode');
|
|
if (typeof Sortable !== 'undefined') {
|
|
sortable_instance = Sortable.create(container, {
|
|
animation: 150,
|
|
draggable: '.op-group-card',
|
|
handle: '.op-group-card-header',
|
|
ghostClass: 'sortable-ghost',
|
|
filter: '.op-ext-block, .op-ext-action-icon',
|
|
preventOnFilter: false,
|
|
onEnd: function() {
|
|
save_card_order();
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
container.classList.remove('op-edit-mode');
|
|
if (sortable_instance) {
|
|
sortable_instance.destroy();
|
|
sortable_instance = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Save card order to localStorage.
|
|
*/
|
|
function save_card_order() {
|
|
const container = document.getElementById('extensions_container');
|
|
if (!container) return;
|
|
const order = [];
|
|
container.querySelectorAll('.op-group-card').forEach(card => {
|
|
order.push(card.getAttribute('data-group-key'));
|
|
});
|
|
saved_card_order = order;
|
|
try {
|
|
localStorage.setItem('op_card_order_' + domain_name, JSON.stringify(order));
|
|
} catch(e) { /* ignore */ }
|
|
}
|
|
|
|
/**
|
|
* Load saved card order from localStorage.
|
|
*/
|
|
function load_card_order() {
|
|
try {
|
|
const raw = localStorage.getItem('op_card_order_' + domain_name);
|
|
if (raw) saved_card_order = JSON.parse(raw);
|
|
} catch(e) { /* ignore */ }
|
|
}
|
|
|
|
/**
|
|
* Select a user status button and send it.
|
|
*/
|
|
function select_user_status(btn) {
|
|
const status = btn.getAttribute('data-status');
|
|
document.querySelectorAll('.op-status-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
send_user_status(status);
|
|
}
|
|
|
|
/**
|
|
* Render the Extensions tab from extensions_map, with the logged-in user's
|
|
* extensions shown first, then other extensions grouped by call_group in cards.
|
|
*/
|
|
function render_extensions_tab() {
|
|
const container = document.getElementById('extensions_container');
|
|
const my_container = document.getElementById('my_extensions_container');
|
|
if (!container) return;
|
|
|
|
const all = Array.from(extensions_map.values());
|
|
const own = all.filter(e => user_own_extensions.includes(e.extension));
|
|
const others = all.filter(e => !user_own_extensions.includes(e.extension));
|
|
|
|
const badge = document.getElementById('extensions_count');
|
|
if (badge) badge.textContent = all.length;
|
|
|
|
if (all.length === 0) {
|
|
if (my_container) my_container.innerHTML = '';
|
|
container.innerHTML = `<p class="text-muted">${esc(text['label-no_extensions'] || 'No extensions found.')}</p>`;
|
|
set_filter_bar_visibility(false);
|
|
return;
|
|
}
|
|
|
|
// Group remaining extensions by call_group (case-insensitive)
|
|
const groups = new Map();
|
|
others.forEach(ext => {
|
|
const raw_group = (ext.call_group || '').trim();
|
|
const key = raw_group.toLowerCase() || '';
|
|
if (!groups.has(key)) {
|
|
groups.set(key, { display: raw_group ? to_title_case(raw_group) : '', exts: [] });
|
|
}
|
|
groups.get(key).exts.push(ext);
|
|
});
|
|
|
|
// Sort groups: named groups alphabetically, ungrouped last
|
|
let sorted_keys = Array.from(groups.keys()).sort((a, b) => {
|
|
if (a === '' && b !== '') return 1;
|
|
if (a !== '' && b === '') return -1;
|
|
return a.localeCompare(b);
|
|
});
|
|
|
|
// Build the list of all group keys for filters (including "my_extensions")
|
|
const filter_keys = [];
|
|
if (own.length > 0) {
|
|
filter_keys.push({ key: '__my__', display: text['label-my_extensions'] || 'My Extensions' });
|
|
}
|
|
sorted_keys.forEach(key => {
|
|
const g = groups.get(key);
|
|
filter_keys.push({ key, display: g.display });
|
|
});
|
|
|
|
// Build filter buttons
|
|
build_group_filter_buttons(filter_keys);
|
|
|
|
// Show the filter bar now that we have data
|
|
set_filter_bar_visibility(true);
|
|
|
|
// Apply saved card order if available (only for other groups, not __my__)
|
|
if (!saved_card_order) load_card_order();
|
|
if (saved_card_order && saved_card_order.length > 0) {
|
|
const all_keys_set = new Set(sorted_keys);
|
|
const ordered = [];
|
|
saved_card_order.forEach(k => {
|
|
if (k === '__my__') return; // skip — My Extensions is always in its own container
|
|
if (all_keys_set.has(k)) {
|
|
ordered.push(k);
|
|
all_keys_set.delete(k);
|
|
}
|
|
});
|
|
// Append any new groups not in saved order
|
|
all_keys_set.forEach(k => ordered.push(k));
|
|
sorted_keys = ordered;
|
|
}
|
|
|
|
// Render My Extensions into its own container
|
|
if (my_container) {
|
|
if (own.length > 0) {
|
|
my_container.innerHTML = render_group_card('__my__', text['label-my_extensions'] || 'My Extensions', own, true);
|
|
} else {
|
|
my_container.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// Render other groups into the main container
|
|
let html = '';
|
|
const was_edit = container.classList.contains('op-edit-mode');
|
|
|
|
if (saved_card_order && saved_card_order.length > 0) {
|
|
// Render in saved order (excluding __my__ which is separate)
|
|
const ordered_render = saved_card_order.filter(k => k !== '__my__' && groups.has(k));
|
|
// Add any new keys not in saved order
|
|
const rendered_set = new Set(ordered_render);
|
|
sorted_keys.forEach(k => { if (!rendered_set.has(k)) ordered_render.push(k); });
|
|
|
|
ordered_render.forEach(k => {
|
|
if (groups.has(k)) {
|
|
const g = groups.get(k);
|
|
html += render_group_card(k, g.display, g.exts, false);
|
|
}
|
|
});
|
|
} else {
|
|
// Default order: sorted groups
|
|
sorted_keys.forEach(key => {
|
|
const group = groups.get(key);
|
|
html += render_group_card(key, group.display, group.exts, false);
|
|
});
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
if (was_edit) container.classList.add('op-edit-mode');
|
|
|
|
// Re-apply filters
|
|
apply_extension_filters();
|
|
|
|
// Re-init sortable if edit mode was active
|
|
if (edit_mode_active && typeof Sortable !== 'undefined') {
|
|
if (sortable_instance) sortable_instance.destroy();
|
|
sortable_instance = Sortable.create(container, {
|
|
animation: 150,
|
|
draggable: '.op-group-card',
|
|
handle: '.op-group-card-header',
|
|
ghostClass: 'sortable-ghost',
|
|
filter: '.op-ext-block, .op-ext-action-icon',
|
|
preventOnFilter: false,
|
|
onEnd: function() { save_card_order(); }
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Debounce the extensions re-render so rapid call-events don't thrash the DOM.
|
|
*/
|
|
function schedule_extensions_render() {
|
|
if (extensions_render_debounce) clearTimeout(extensions_render_debounce);
|
|
extensions_render_debounce = setTimeout(render_extensions_tab, 120);
|
|
}
|
|
|
|
/**
|
|
* Called on dragstart of a call row; stores the dragged UUID.
|
|
* @param {string} uuid
|
|
* @param {DragEvent} event
|
|
*/
|
|
function on_drag_call(uuid, event) {
|
|
dragged_call_uuid = uuid;
|
|
dragged_call_source_extension = null;
|
|
dragged_extension = null; // Not dragging an extension
|
|
dragged_eavesdrop_uuid = null;
|
|
event.dataTransfer.setData('text/plain', uuid);
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
set_drag_visual_state(true);
|
|
}
|
|
|
|
/**
|
|
* Called when dragging an idle extension (for call origination).
|
|
* @param {string} ext_number
|
|
* @param {DragEvent} event
|
|
*/
|
|
function on_ext_dragstart(ext_number, event) {
|
|
const call_uuid = (event.currentTarget && event.currentTarget.dataset)
|
|
? (event.currentTarget.dataset.callUuid || '')
|
|
: '';
|
|
|
|
// If this extension currently has a live call, drag-and-drop performs transfer.
|
|
if (call_uuid) {
|
|
dragged_call_uuid = call_uuid;
|
|
dragged_call_source_extension = ext_number;
|
|
dragged_extension = null;
|
|
event.dataTransfer.setData('text/plain', call_uuid);
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
} else {
|
|
dragged_extension = ext_number;
|
|
dragged_call_uuid = null; // Not dragging a call
|
|
dragged_call_source_extension = null;
|
|
event.dataTransfer.setData('text/plain', ext_number);
|
|
event.dataTransfer.effectAllowed = 'copy';
|
|
}
|
|
|
|
dragged_eavesdrop_uuid = null;
|
|
set_drag_visual_state(true);
|
|
}
|
|
|
|
function on_drag_end() {
|
|
set_drag_visual_state(false);
|
|
}
|
|
|
|
function set_drag_visual_state(is_dragging) {
|
|
if (!document || !document.body) return;
|
|
document.body.classList.toggle('op-dragging', !!is_dragging);
|
|
}
|
|
|
|
/** Toggle inline dialpad input for an extension block. */
|
|
function toggle_ext_dialpad(ext_number, event) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
const row = document.getElementById(`ext_block_${ext_number}`);
|
|
if (!row) return;
|
|
|
|
const input = row.querySelector('.op-ext-dial-input');
|
|
if (!input) return;
|
|
|
|
const visible = !input.classList.contains('d-none');
|
|
if (visible) {
|
|
input.classList.add('d-none');
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
input.classList.remove('d-none');
|
|
setTimeout(() => input.focus(), 10);
|
|
}
|
|
|
|
/** Submit manual originate from extension to destination. */
|
|
function submit_ext_dial(ext_number, event) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
const row = document.getElementById(`ext_block_${ext_number}`);
|
|
if (!row) return;
|
|
|
|
const input = row.querySelector('.op-ext-dial-input');
|
|
if (!input) return;
|
|
|
|
const destination = (input.value || '').trim();
|
|
if (!destination) {
|
|
show_toast(text['label-destination_required'] || 'Please enter a destination.', 'warning');
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
send_action('originate', { source: ext_number, destination })
|
|
.then(() => {
|
|
input.value = '';
|
|
input.classList.add('d-none');
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
/**
|
|
* Allow dropping onto an extension block and highlight it.
|
|
* @param {DragEvent} event
|
|
*/
|
|
function on_ext_dragover(event) {
|
|
const can_receive_originate = event.currentTarget.dataset.canReceiveOriginate === 'true';
|
|
const can_drop = dragged_call_uuid || dragged_eavesdrop_uuid || (dragged_extension && can_receive_originate);
|
|
if (!can_drop) return;
|
|
|
|
event.preventDefault();
|
|
// Determine drop effect based on what's being dragged
|
|
event.dataTransfer.dropEffect = dragged_call_uuid ? 'move' : 'copy';
|
|
event.currentTarget.classList.add('op-ext-drop-over');
|
|
}
|
|
|
|
/**
|
|
* Handle the drop: transfer the dragged call to the extension, or originate a new call.
|
|
* @param {string} ext_number
|
|
* @param {DragEvent} event
|
|
*/
|
|
function on_ext_drop(ext_number, event) {
|
|
event.preventDefault();
|
|
event.currentTarget.classList.remove('op-ext-drop-over');
|
|
set_drag_visual_state(false);
|
|
|
|
// Determine what was dropped and perform the appropriate action
|
|
if (dragged_call_uuid) {
|
|
// Transfer an existing call to the destination extension
|
|
const uuid = dragged_call_uuid;
|
|
const source_ext = dragged_call_source_extension;
|
|
dragged_call_uuid = null;
|
|
dragged_call_source_extension = null;
|
|
dragged_eavesdrop_uuid = null;
|
|
dragged_extension = null;
|
|
if (!uuid || !ext_number) return;
|
|
if (source_ext && source_ext === ext_number) return;
|
|
send_action('transfer', { uuid, destination: ext_number, context: domain_name })
|
|
.catch(console.error);
|
|
} else if (dragged_eavesdrop_uuid) {
|
|
// Eavesdrop an existing call using dropped extension as destination
|
|
const uuid = dragged_eavesdrop_uuid;
|
|
dragged_eavesdrop_uuid = null;
|
|
dragged_call_uuid = null;
|
|
dragged_call_source_extension = null;
|
|
dragged_extension = null;
|
|
if (!uuid || !ext_number) return;
|
|
send_action('eavesdrop', { uuid, destination: ext_number, destination_extension: ext_number })
|
|
.then(() => show_toast(text['button-eavesdrop'] || 'Eavesdrop started', 'success'))
|
|
.catch((err) => {
|
|
console.error(err);
|
|
show_toast((err && err.message) || 'Eavesdrop failed', 'danger');
|
|
});
|
|
} else if (dragged_extension) {
|
|
// Originate a new call from dragged_extension to ext_number
|
|
const from_ext = dragged_extension;
|
|
dragged_extension = null;
|
|
dragged_eavesdrop_uuid = null;
|
|
dragged_call_source_extension = null;
|
|
const can_receive_originate = event.currentTarget.dataset.canReceiveOriginate === 'true';
|
|
if (!from_ext || !ext_number || from_ext === ext_number) return; // Ignore self-drop
|
|
if (!can_receive_originate) {
|
|
show_toast(text['label-extension_unavailable'] || 'Destination extension is unavailable.', 'warning');
|
|
return;
|
|
}
|
|
send_action('originate', { source: from_ext, destination: ext_number })
|
|
.catch(console.error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle a registration_change event pushed by the service when an
|
|
* extension registers or unregisters with FreeSWITCH.
|
|
* Updates extensions_map in place and re-renders; if the extension is
|
|
* unknown (brand-new registration), reloads the full snapshot.
|
|
* @param {object} event
|
|
*/
|
|
function on_registration_change(event) {
|
|
lop_debug('[OP_REG_TRACE] [OP][reg][recv] registration_change event:', event);
|
|
let ext_num = event.extension || (event.payload && event.payload.extension) || '';
|
|
let evt_domain = event.domain_name || (event.payload && event.payload.domain_name) || '';
|
|
const raw_reg = event.registered ?? (event.payload && event.payload.registered);
|
|
const registered = raw_reg === true || raw_reg === 'true';
|
|
const ws_state = (ws && ws.ws) ? ws.ws.readyState : -1;
|
|
|
|
lop_debug('[OP][reg][step1] raw extraction', {
|
|
extension_raw: ext_num,
|
|
event_domain_raw: evt_domain,
|
|
raw_registered: raw_reg,
|
|
ws_ready_state: ws_state,
|
|
});
|
|
|
|
ext_num = ((ext_num || '') + '').trim();
|
|
evt_domain = ((evt_domain || '') + '').trim().replace(/:\d+$/, '');
|
|
if (ext_num.indexOf('@') !== -1) {
|
|
const parts = ext_num.split('@');
|
|
ext_num = (parts[0] || '').trim();
|
|
if (!evt_domain && parts[1]) evt_domain = parts[1].trim().replace(/:\d+$/, '');
|
|
}
|
|
lop_debug('[OP][reg][normalized]', {
|
|
extension: ext_num,
|
|
event_domain: evt_domain,
|
|
session_domain: domain_name,
|
|
registered: registered,
|
|
raw_registered: raw_reg,
|
|
});
|
|
lop_debug('[OP][reg][step2] map pre-check', {
|
|
map_size: extensions_map.size,
|
|
has_extension: extensions_map.has(ext_num),
|
|
});
|
|
|
|
if (!ext_num) {
|
|
lop_debug('[OP][reg][drop] empty extension after normalization');
|
|
return;
|
|
}
|
|
|
|
// Ignore registration events for other domains
|
|
if (evt_domain && evt_domain !== domain_name) {
|
|
lop_debug('[OP][reg][drop] domain mismatch', { evt_domain, domain_name, extension: ext_num });
|
|
return;
|
|
}
|
|
lop_debug('[OP][reg][step3] domain accepted', {
|
|
extension: ext_num,
|
|
event_domain: evt_domain || domain_name,
|
|
});
|
|
|
|
const ext = extensions_map.get(ext_num);
|
|
if (ext) {
|
|
lop_debug('[OP][reg][update] found extension in map', { extension: ext_num, registered });
|
|
lop_debug('[OP][reg][step4] before update', {
|
|
extension: ext_num,
|
|
previous_registered: ext.registered,
|
|
previous_registration_count: ext.registration_count,
|
|
});
|
|
ext.registered = registered;
|
|
ext.registration_count = registered ? Math.max(1, ext.registration_count || 0) : 0;
|
|
lop_debug('[OP][reg][step5] after update', {
|
|
extension: ext_num,
|
|
new_registered: ext.registered,
|
|
new_registration_count: ext.registration_count,
|
|
});
|
|
schedule_extensions_render();
|
|
lop_debug('[OP][reg][step6] render scheduled', { extension: ext_num });
|
|
} else if (registered && extensions_map.size > 0) {
|
|
lop_debug('[OP][reg][miss] extension not found in map, requesting snapshot', {
|
|
extension: ext_num,
|
|
map_size: extensions_map.size,
|
|
});
|
|
// Extension is new and map is loaded — reload the full snapshot
|
|
load_extensions_snapshot();
|
|
lop_debug('[OP][reg][step4b] snapshot requested due to map miss', { extension: ext_num });
|
|
setTimeout(() => {
|
|
const ext_after = extensions_map.get(ext_num);
|
|
lop_debug('[OP][reg][step5b] snapshot verify', {
|
|
extension: ext_num,
|
|
found_after_snapshot: !!ext_after,
|
|
registered_after_snapshot: ext_after ? ext_after.registered : null,
|
|
map_size_after_snapshot: extensions_map.size,
|
|
});
|
|
}, 700);
|
|
} else {
|
|
lop_debug('[OP][reg][noop] extension missing and/or unregister event', {
|
|
extension: ext_num,
|
|
registered,
|
|
map_size: extensions_map.size,
|
|
});
|
|
}
|
|
|
|
setTimeout(() => {
|
|
const ext_final = extensions_map.get(ext_num);
|
|
lop_debug('[OP][reg][final] post-handler state', {
|
|
extension: ext_num,
|
|
in_map: !!ext_final,
|
|
registered: ext_final ? ext_final.registered : null,
|
|
registration_count: ext_final ? ext_final.registration_count : null,
|
|
});
|
|
}, 250);
|
|
// If the map is empty the initial snapshot is still loading;
|
|
// it will include the current registration state when it arrives.
|
|
}
|