feat(ucp): NexusPBX v2.5.0 Portail Utilisateur isolé (Refs #4)
This commit is contained in:
sorcier committed
1 parent
7922e338e3
commit
72e43f1a9a
18 files changed
+3499
-62
No files matched your search
@@ -0,0 +1,831 @@
|
||||
'use strict';
|
||||
|
||||
let ucpState = {
|
||||
user: null,
|
||||
extensions: [],
|
||||
forward_targets: [],
|
||||
voicemailsByExt: {},
|
||||
selectedVmExt: '',
|
||||
vmFolderFilter: 'all',
|
||||
phonebook: [],
|
||||
activeTab: 'extensions',
|
||||
};
|
||||
|
||||
let cdrTimer = null;
|
||||
let pollTimer = null;
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function showUcpToast(message, type = 'info') {
|
||||
const container = document.getElementById('ucp-toast-container');
|
||||
if (!container) return;
|
||||
|
||||
const palette = {
|
||||
success: 'bg-emerald-50 border-emerald-200 text-emerald-800',
|
||||
error: 'bg-rose-50 border-rose-200 text-rose-800',
|
||||
info: 'bg-white border-slate-200 text-slate-800',
|
||||
}[type] || 'bg-white border-slate-200 text-slate-800';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = `pointer-events-auto rounded-xl border px-4 py-3 text-xs font-semibold shadow-lg transition-all duration-200 ${palette}`;
|
||||
el.textContent = message;
|
||||
container.appendChild(el);
|
||||
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => el.remove(), 220);
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
function resolveUcpAvatarSrc(photoUrl) {
|
||||
const raw = String(photoUrl || '').trim();
|
||||
if (!raw) return '';
|
||||
if (raw.startsWith('/avatars/')) {
|
||||
const file = raw.slice('/avatars/'.length);
|
||||
return `/api.php?action=avatar&file=${encodeURIComponent(file)}`;
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
|
||||
async function ucpApiCall(action, method = 'GET', body = null) {
|
||||
const opts = {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: {},
|
||||
};
|
||||
let url = `/api.php?action=${encodeURIComponent(action)}`;
|
||||
|
||||
if (method === 'GET' && body && typeof body === 'object') {
|
||||
const params = new URLSearchParams(body);
|
||||
url += `&${params.toString()}`;
|
||||
} else if (method === 'POST') {
|
||||
opts.headers['X-CSRF-Token'] = window.UCP_CSRF_TOKEN || '';
|
||||
if (body instanceof FormData) {
|
||||
opts.body = body;
|
||||
} else {
|
||||
opts.headers['Content-Type'] = 'application/json';
|
||||
opts.body = JSON.stringify(body || {});
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(url, opts);
|
||||
if (res.status === 401 && action !== 'login') {
|
||||
window.location.reload();
|
||||
return null;
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
if (!res.ok || !json.success) {
|
||||
throw new Error(json.message || 'Erreur lors de la requête.');
|
||||
}
|
||||
return json;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// AUTHENTIFICATION
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
const loginForm = document.getElementById('ucp-login-form');
|
||||
if (loginForm) {
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const errBox = document.getElementById('ucp-login-error');
|
||||
const btn = document.getElementById('ucp-login-btn');
|
||||
if (errBox) errBox.classList.add('hidden');
|
||||
if (btn) btn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('login', 'POST', {
|
||||
username: loginForm.elements['username'].value.trim(),
|
||||
password: loginForm.elements['password'].value,
|
||||
});
|
||||
if (res && res.csrf_token) {
|
||||
window.UCP_CSRF_TOKEN = res.csrf_token;
|
||||
}
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
if (errBox) {
|
||||
errBox.textContent = err.message;
|
||||
errBox.classList.remove('hidden');
|
||||
}
|
||||
} finally {
|
||||
if (btn) btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function ucpLogout() {
|
||||
try {
|
||||
await ucpApiCall('logout', 'POST', {});
|
||||
} catch (_) {}
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// NAVIGATION & ÉTAT GLOBAL
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function switchUcpTab(tabName) {
|
||||
ucpState.activeTab = tabName;
|
||||
|
||||
document.querySelectorAll('.ucp-panel').forEach(p => p.classList.add('hidden'));
|
||||
const activePanel = document.getElementById(`ucp-panel-${tabName}`);
|
||||
if (activePanel) activePanel.classList.remove('hidden');
|
||||
|
||||
document.querySelectorAll('.ucp-tab-btn').forEach(btn => {
|
||||
const isMe = btn.dataset.ucpTab === tabName;
|
||||
btn.className = isMe
|
||||
? 'ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 bg-indigo-50 text-indigo-700'
|
||||
: 'ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100';
|
||||
});
|
||||
|
||||
if (tabName === 'voicemail') {
|
||||
loadVoicemailsForSelected();
|
||||
} else if (tabName === 'cdr') {
|
||||
loadPersonalCdr();
|
||||
} else if (tabName === 'phonebook') {
|
||||
loadPhonebook();
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshUcpState(manual = false) {
|
||||
try {
|
||||
const res = await ucpApiCall('get_state', 'GET');
|
||||
if (!res || !res.data) return;
|
||||
|
||||
ucpState.user = res.data.user;
|
||||
ucpState.extensions = res.data.extensions || [];
|
||||
ucpState.forward_targets = res.data.forward_targets || [];
|
||||
if (res.data.csrf_token) {
|
||||
window.UCP_CSRF_TOKEN = res.data.csrf_token;
|
||||
}
|
||||
|
||||
// Sélection par défaut du poste pour la messagerie vocale
|
||||
const vmExts = ucpState.extensions.filter(e => Number(e.voicemail_enabled) === 1);
|
||||
if (!ucpState.selectedVmExt || !vmExts.some(e => e.extension === ucpState.selectedVmExt)) {
|
||||
ucpState.selectedVmExt = vmExts.length ? vmExts[0].extension : (ucpState.extensions[0]?.extension || '');
|
||||
}
|
||||
|
||||
updateBadges();
|
||||
renderExtensionsGrid();
|
||||
renderVmExtPills();
|
||||
syncVmPrefsForm();
|
||||
|
||||
const accExts = document.getElementById('ucp-account-exts');
|
||||
if (accExts) {
|
||||
accExts.textContent = ucpState.extensions.map(e => `${e.extension} (${e.name})`).join(', ') || 'Aucun poste lié';
|
||||
}
|
||||
|
||||
if (manual) {
|
||||
showUcpToast('État actualisé.', 'info');
|
||||
if (ucpState.activeTab === 'voicemail') await loadVoicemailsForSelected();
|
||||
if (ucpState.activeTab === 'cdr') await loadPersonalCdr();
|
||||
if (ucpState.activeTab === 'phonebook') await loadPhonebook();
|
||||
}
|
||||
} catch (err) {
|
||||
if (manual) showUcpToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function updateBadges() {
|
||||
const extBadge = document.getElementById('ucp-badge-exts');
|
||||
if (extBadge) extBadge.textContent = String(ucpState.extensions.length);
|
||||
|
||||
const totalNewVm = ucpState.extensions.reduce((acc, e) => acc + Number(e.vm_inbox_count || 0), 0);
|
||||
const vmBadge = document.getElementById('ucp-badge-vm');
|
||||
if (vmBadge) {
|
||||
vmBadge.textContent = String(totalNewVm);
|
||||
vmBadge.className = totalNewVm > 0
|
||||
? 'px-1.5 py-0.5 rounded-full bg-rose-100 text-rose-700 text-[10px] font-bold'
|
||||
: 'px-1.5 py-0.5 rounded-full bg-slate-200 text-slate-700 text-[10px] font-bold';
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 1. MES POSTES & REDIRECTIONS (DND / CF / CFU)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function buildForwardOptions(extObj, selectedValue) {
|
||||
const val = String(selectedValue || '');
|
||||
let html = `<option value="">— Désactivé —</option>`;
|
||||
|
||||
if (Number(extObj.voicemail_enabled) === 1) {
|
||||
const vmVal = `vm-${extObj.extension}`;
|
||||
html += `<option value="${escapeHtml(vmVal)}" ${val === vmVal ? 'selected' : ''}>📬 Ma messagerie vocale (${escapeHtml(extObj.extension)})</option>`;
|
||||
}
|
||||
|
||||
const others = (ucpState.forward_targets || []).filter(t => t.extension !== extObj.extension);
|
||||
if (others.length > 0) {
|
||||
html += `<optgroup label="Postes internes">`;
|
||||
others.forEach(t => {
|
||||
html += `<option value="${escapeHtml(t.extension)}" ${val === t.extension ? 'selected' : ''}>📱 ${escapeHtml(t.extension)} — ${escapeHtml(t.name)}</option>`;
|
||||
});
|
||||
html += `</optgroup>`;
|
||||
}
|
||||
|
||||
const otherVms = (ucpState.forward_targets || []).filter(t => t.extension !== extObj.extension && Number(t.voicemail_enabled) === 1);
|
||||
if (otherVms.length > 0) {
|
||||
html += `<optgroup label="Messageries vocales d'autres postes">`;
|
||||
otherVms.forEach(t => {
|
||||
const vVal = `vm-${t.extension}`;
|
||||
html += `<option value="${escapeHtml(vVal)}" ${val === vVal ? 'selected' : ''}>📬 Répondeur ${escapeHtml(t.extension)} — ${escapeHtml(t.name)}</option>`;
|
||||
});
|
||||
html += `</optgroup>`;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderExtensionsGrid() {
|
||||
const grid = document.getElementById('ucp-extensions-grid');
|
||||
if (!grid) return;
|
||||
|
||||
if (!ucpState.extensions.length) {
|
||||
grid.innerHTML = `
|
||||
<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-500 col-span-full">
|
||||
Aucun poste SIP n'est encore lié à votre compte. Contactez votre administrateur.
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = ucpState.extensions.map(ext => {
|
||||
const avatarSrc = resolveUcpAvatarSrc(ext.photo_url);
|
||||
const initials = (ext.name || ext.extension).slice(0, 2).toUpperCase();
|
||||
const statusPill = ext.online
|
||||
? `<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-[11px] font-semibold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
En ligne ${ext.rtt_ms !== null ? `• ${ext.rtt_ms} ms` : ''}
|
||||
</span>`
|
||||
: `<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-slate-100 border border-slate-200 text-slate-500 text-[11px] font-semibold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
|
||||
Hors ligne
|
||||
</span>`;
|
||||
|
||||
const vmPill = Number(ext.voicemail_enabled) === 1
|
||||
? `<button type="button" onclick="openExtensionVoicemail('${escapeHtml(ext.extension)}')"
|
||||
class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold border transition ${ext.vm_inbox_count > 0 ? 'bg-rose-50 border-rose-200 text-rose-700 hover:bg-rose-100' : 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'}">
|
||||
📬 ${ext.vm_inbox_count} nouveau(x)
|
||||
</button>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="ucp-card rounded-2xl p-5 space-y-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
${avatarSrc
|
||||
? `<img src="${escapeHtml(avatarSrc)}" alt="" class="w-12 h-12 rounded-full object-cover border border-slate-200 shrink-0">`
|
||||
: `<div class="w-12 h-12 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 font-bold flex items-center justify-center text-sm shrink-0">${escapeHtml(initials)}</div>`}
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-mono font-bold text-indigo-700 text-base">${escapeHtml(ext.extension)}</span>
|
||||
<span class="font-bold text-slate-900 text-sm truncate">${escapeHtml(ext.name)}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1 flex-wrap">
|
||||
${statusPill}
|
||||
${vmPill}
|
||||
</div>
|
||||
${ext.ip ? `<div class="text-[11px] text-slate-400 font-mono mt-1">${escapeHtml(ext.ip)} ${ext.user_agent ? '• ' + escapeHtml(ext.user_agent) : ''}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Switch Ne Pas Déranger (DND) -->
|
||||
<div class="flex items-center justify-between p-3.5 rounded-xl border ${ext.dnd ? 'bg-rose-50/70 border-rose-200' : 'bg-slate-50 border-slate-200'} transition">
|
||||
<div>
|
||||
<div class="text-xs font-bold ${ext.dnd ? 'text-rose-800' : 'text-slate-800'}">Ne Pas Déranger (DND)</div>
|
||||
<div class="text-[11px] ${ext.dnd ? 'text-rose-600' : 'text-slate-500'}">
|
||||
${ext.dnd ? 'Activé — les appels entrants sont refusés / envoyés en messagerie' : 'Désactivé — le poste sonne normalement'}
|
||||
</div>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer shrink-0">
|
||||
<input type="checkbox" id="ucp-dnd-${escapeHtml(ext.extension)}" ${ext.dnd ? 'checked' : ''}
|
||||
onchange="saveExtensionFeatures('${escapeHtml(ext.extension)}')" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-300 rounded-full peer peer-checked:bg-rose-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Redirections (CF & CFU) -->
|
||||
<form onsubmit="event.preventDefault(); saveExtensionFeatures('${escapeHtml(ext.extension)}');" class="space-y-3 pt-1">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-[11px] font-semibold text-slate-600 mb-1">Renvoi inconditionnel (CF)</label>
|
||||
<select id="ucp-cf-${escapeHtml(ext.extension)}"
|
||||
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
||||
${buildForwardOptions(ext, ext.cf)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] font-semibold text-slate-600 mb-1">Renvoi si non-réponse (CFU)</label>
|
||||
<select id="ucp-cfu-${escapeHtml(ext.extension)}"
|
||||
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
||||
${buildForwardOptions(ext, ext.cfu)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="text-[11px] text-slate-400">Renvoi limité aux postes internes & répondeurs</span>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition">
|
||||
Appliquer les renvois
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function saveExtensionFeatures(extNum) {
|
||||
const dndEl = document.getElementById(`ucp-dnd-${extNum}`);
|
||||
const cfEl = document.getElementById(`ucp-cf-${extNum}`);
|
||||
const cfuEl = document.getElementById(`ucp-cfu-${extNum}`);
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('save_call_features', 'POST', {
|
||||
extension: extNum,
|
||||
dnd: dndEl ? dndEl.checked : false,
|
||||
cf: cfEl ? cfEl.value : '',
|
||||
cfu: cfuEl ? cfuEl.value : '',
|
||||
});
|
||||
if (res && res.extensions) {
|
||||
ucpState.extensions = res.extensions;
|
||||
renderExtensionsGrid();
|
||||
}
|
||||
showUcpToast(res.message || 'Enregistré.', 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
refreshUcpState(false);
|
||||
}
|
||||
}
|
||||
|
||||
function openExtensionVoicemail(extNum) {
|
||||
ucpState.selectedVmExt = extNum;
|
||||
switchUcpTab('voicemail');
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 2. MESSAGERIE VOCALE
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function renderVmExtPills() {
|
||||
const container = document.getElementById('ucp-vm-ext-pills');
|
||||
if (!container) return;
|
||||
|
||||
const vmExts = ucpState.extensions.filter(e => Number(e.voicemail_enabled) === 1);
|
||||
if (!vmExts.length) {
|
||||
container.innerHTML = `<span class="text-xs text-slate-400 italic">Aucune boîte vocale activée sur vos postes</span>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = vmExts.map(e => {
|
||||
const active = e.extension === ucpState.selectedVmExt;
|
||||
return `
|
||||
<button type="button" onclick="selectVmExtension('${escapeHtml(e.extension)}')"
|
||||
class="px-3 py-1.5 rounded-xl text-xs font-semibold border transition flex items-center gap-1.5 ${active ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50'}">
|
||||
<span class="font-mono">${escapeHtml(e.extension)}</span>
|
||||
<span>${escapeHtml(e.name)}</span>
|
||||
${e.vm_inbox_count > 0 ? `<span class="px-1.5 py-0.2 rounded-full text-[10px] font-bold ${active ? 'bg-white/20 text-white' : 'bg-rose-100 text-rose-700'}">${e.vm_inbox_count}</span>` : ''}
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function selectVmExtension(extNum) {
|
||||
ucpState.selectedVmExt = extNum;
|
||||
renderVmExtPills();
|
||||
syncVmPrefsForm();
|
||||
loadVoicemailsForSelected();
|
||||
}
|
||||
|
||||
function syncVmPrefsForm() {
|
||||
const form = document.getElementById('ucp-vm-prefs-form');
|
||||
const sub = document.getElementById('ucp-vm-prefs-subtitle');
|
||||
if (!form) return;
|
||||
|
||||
const extObj = ucpState.extensions.find(e => e.extension === ucpState.selectedVmExt);
|
||||
if (!extObj || Number(extObj.voicemail_enabled) !== 1) {
|
||||
if (sub) sub.textContent = 'Aucune boîte vocale sélectionnée';
|
||||
form.classList.add('opacity-50', 'pointer-events-none');
|
||||
return;
|
||||
}
|
||||
|
||||
form.classList.remove('opacity-50', 'pointer-events-none');
|
||||
if (sub) sub.textContent = `Poste ${extObj.extension} — ${extObj.name}`;
|
||||
form.elements['pin'].value = '';
|
||||
form.elements['email'].value = extObj.voicemail_email || '';
|
||||
}
|
||||
|
||||
function setVmFolderFilter(folder) {
|
||||
ucpState.vmFolderFilter = folder;
|
||||
['all', 'INBOX', 'Old'].forEach(f => {
|
||||
const btn = document.getElementById(`vm-filter-${f}`);
|
||||
if (!btn) return;
|
||||
btn.className = f === folder
|
||||
? 'px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-700'
|
||||
: 'px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-50';
|
||||
});
|
||||
renderVoicemailsList();
|
||||
}
|
||||
|
||||
async function loadVoicemailsForSelected() {
|
||||
const listEl = document.getElementById('ucp-vm-list');
|
||||
const extObj = ucpState.extensions.find(e => e.extension === ucpState.selectedVmExt);
|
||||
|
||||
if (!extObj || Number(extObj.voicemail_enabled) !== 1) {
|
||||
if (listEl) {
|
||||
listEl.innerHTML = `<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-400">La messagerie vocale n'est activée sur aucun de vos postes liés.</div>`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('get_voicemails', 'GET', { extension: extObj.extension });
|
||||
ucpState.voicemailsByExt[extObj.extension] = res.messages || [];
|
||||
renderVoicemailsList();
|
||||
} catch (err) {
|
||||
if (listEl) {
|
||||
listEl.innerHTML = `<div class="ucp-card rounded-2xl p-6 text-center text-xs text-rose-600">${escapeHtml(err.message)}</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(sec) {
|
||||
const s = Math.max(0, Number(sec || 0));
|
||||
const m = Math.floor(s / 60);
|
||||
const r = s % 60;
|
||||
return `${m}:${String(r).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function renderVoicemailsList() {
|
||||
const listEl = document.getElementById('ucp-vm-list');
|
||||
if (!listEl) return;
|
||||
|
||||
const all = ucpState.voicemailsByExt[ucpState.selectedVmExt] || [];
|
||||
const filtered = ucpState.vmFolderFilter === 'all'
|
||||
? all
|
||||
: all.filter(m => m.folder === ucpState.vmFolderFilter);
|
||||
|
||||
if (!filtered.length) {
|
||||
listEl.innerHTML = `
|
||||
<div class="ucp-card rounded-2xl p-10 text-center text-sm text-slate-400">
|
||||
Aucun message vocal dans ce dossier.
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
listEl.innerHTML = filtered.map(msg => {
|
||||
const streamUrl = `/api.php?action=stream_voicemail&extension=${encodeURIComponent(msg.extension)}&folder=${encodeURIComponent(msg.folder)}&id=${encodeURIComponent(msg.id)}`;
|
||||
const dlUrl = `${streamUrl}&download=1`;
|
||||
const badge = msg.is_new
|
||||
? `<span class="px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold uppercase">Nouveau</span>`
|
||||
: `<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-[10px] font-semibold uppercase">Lu / Archivé</span>`;
|
||||
|
||||
return `
|
||||
<div class="ucp-card rounded-2xl p-4 space-y-3 ${msg.is_new ? 'border-l-4 border-l-indigo-500' : ''}">
|
||||
<div class="flex flex-wrap items-start justify-between gap-2">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-bold text-slate-900 text-sm">${escapeHtml(msg.callerid)}</span>
|
||||
${badge}
|
||||
</div>
|
||||
<div class="text-xs text-slate-500 mt-0.5">
|
||||
📅 ${escapeHtml(msg.date_human)} • ⏱️ ${formatDuration(msg.duration)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<a href="${dlUrl}" class="px-2.5 py-1.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-[11px] font-semibold text-slate-700 transition">
|
||||
⬇️ Télécharger
|
||||
</a>
|
||||
<button type="button" onclick="toggleVmRead('${escapeHtml(msg.extension)}', '${escapeHtml(msg.folder)}', '${escapeHtml(msg.id)}')"
|
||||
class="px-2.5 py-1.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-[11px] font-semibold text-slate-700 transition">
|
||||
${msg.is_new ? '✓ Marquer lu' : '↺ Marquer non lu'}
|
||||
</button>
|
||||
<button type="button" onclick="deleteVm('${escapeHtml(msg.extension)}', '${escapeHtml(msg.folder)}', '${escapeHtml(msg.id)}')"
|
||||
class="px-2.5 py-1.5 rounded-lg border border-rose-200 bg-rose-50 hover:bg-rose-100 text-[11px] font-semibold text-rose-700 transition">
|
||||
🗑️ Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<audio controls preload="none" src="${streamUrl}" class="w-full h-9 rounded-lg"></audio>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function toggleVmRead(ext, folder, id) {
|
||||
try {
|
||||
const res = await ucpApiCall('toggle_voicemail_read', 'POST', { extension: ext, folder, id });
|
||||
ucpState.voicemailsByExt[ext] = res.messages || [];
|
||||
if (res.extensions) {
|
||||
ucpState.extensions = res.extensions;
|
||||
updateBadges();
|
||||
renderVmExtPills();
|
||||
renderExtensionsGrid();
|
||||
}
|
||||
renderVoicemailsList();
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteVm(ext, folder, id) {
|
||||
if (!confirm('Supprimer définitivement ce message vocal ?')) return;
|
||||
try {
|
||||
const res = await ucpApiCall('delete_voicemail', 'POST', { extension: ext, folder, id });
|
||||
ucpState.voicemailsByExt[ext] = res.messages || [];
|
||||
if (res.extensions) {
|
||||
ucpState.extensions = res.extensions;
|
||||
updateBadges();
|
||||
renderVmExtPills();
|
||||
renderExtensionsGrid();
|
||||
}
|
||||
renderVoicemailsList();
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
const vmPrefsForm = document.getElementById('ucp-vm-prefs-form');
|
||||
if (vmPrefsForm) {
|
||||
vmPrefsForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (!ucpState.selectedVmExt) return;
|
||||
const btn = document.getElementById('ucp-vm-prefs-btn');
|
||||
if (btn) btn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('save_voicemail_prefs', 'POST', {
|
||||
extension: ucpState.selectedVmExt,
|
||||
pin: vmPrefsForm.elements['pin'].value.trim(),
|
||||
email: vmPrefsForm.elements['email'].value.trim(),
|
||||
});
|
||||
if (res.extensions) {
|
||||
ucpState.extensions = res.extensions;
|
||||
syncVmPrefsForm();
|
||||
}
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
} finally {
|
||||
if (btn) btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 3. JOURNAL D'APPELS PERSONNEL
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function debounceLoadCdr() {
|
||||
clearTimeout(cdrTimer);
|
||||
cdrTimer = setTimeout(loadPersonalCdr, 300);
|
||||
}
|
||||
|
||||
async function loadPersonalCdr() {
|
||||
const tbody = document.getElementById('ucp-cdr-tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('get_personal_cdr', 'GET', {
|
||||
direction: document.getElementById('ucp-cdr-direction')?.value || 'all',
|
||||
disposition: document.getElementById('ucp-cdr-disposition')?.value || 'all',
|
||||
period: document.getElementById('ucp-cdr-period')?.value || 'all',
|
||||
search: document.getElementById('ucp-cdr-search')?.value || '',
|
||||
});
|
||||
const data = res.data || {};
|
||||
const calls = data.calls || [];
|
||||
const stats = data.stats || { total: 0, answered: 0, missed: 0 };
|
||||
|
||||
document.getElementById('ucp-cdr-total').textContent = String(stats.total);
|
||||
document.getElementById('ucp-cdr-answered').textContent = String(stats.answered);
|
||||
document.getElementById('ucp-cdr-missed').textContent = String(stats.missed);
|
||||
|
||||
if (!calls.length) {
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="py-8 text-center text-slate-400">Aucun appel correspondant.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = calls.map(c => {
|
||||
const dirMap = {
|
||||
inbound: '<span class="px-2 py-0.5 rounded-full bg-sky-50 text-sky-700 border border-sky-200 text-[10px] font-bold">↘ Entrant</span>',
|
||||
outbound: '<span class="px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-200 text-[10px] font-bold">↗ Sortant</span>',
|
||||
internal: '<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 border border-slate-200 text-[10px] font-bold">⇄ Interne</span>',
|
||||
};
|
||||
const ok = c.disposition === 'ANSWERED';
|
||||
const stBadge = ok
|
||||
? '<span class="px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 text-[10px] font-bold">Répondu</span>'
|
||||
: '<span class="px-2 py-0.5 rounded-full bg-rose-50 text-rose-700 border border-rose-200 text-[10px] font-bold">Manqué</span>';
|
||||
|
||||
return `
|
||||
<tr class="hover:bg-slate-50/80 transition">
|
||||
<td class="py-3 px-4 text-slate-600 font-mono whitespace-nowrap">${escapeHtml(c.date_human || c.calldate || '')}</td>
|
||||
<td class="py-3 px-4">${dirMap[c.direction] || escapeHtml(c.direction)}</td>
|
||||
<td class="py-3 px-4 font-semibold text-slate-900">${escapeHtml(c.src_label || c.src || '')}</td>
|
||||
<td class="py-3 px-4 font-semibold text-slate-900">${escapeHtml(c.dst_label || c.dst || '')}</td>
|
||||
<td class="py-3 px-4 font-mono text-slate-600">${formatDuration(c.billsec || c.duration || 0)}</td>
|
||||
<td class="py-3 px-4">${stBadge}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
} catch (err) {
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="py-6 text-center text-rose-600">${escapeHtml(err.message)}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 4. ANNUAIRE & PROFIL UTILISATEUR
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
async function loadPhonebook() {
|
||||
try {
|
||||
const res = await ucpApiCall('get_phonebook', 'GET');
|
||||
ucpState.phonebook = res.contacts || [];
|
||||
renderPhonebookGrid();
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderPhonebookGrid() {
|
||||
const grid = document.getElementById('ucp-pb-grid');
|
||||
if (!grid) return;
|
||||
|
||||
const q = (document.getElementById('ucp-pb-search')?.value || '').trim().toLowerCase();
|
||||
const list = (ucpState.phonebook || []).filter(c => {
|
||||
if (!q) return true;
|
||||
return [c.display_name, c.internal_number, c.mobile_number, c.other_number, c.email, c.group_name]
|
||||
.some(v => String(v || '').toLowerCase().includes(q));
|
||||
});
|
||||
|
||||
if (!list.length) {
|
||||
grid.innerHTML = `<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-400 col-span-full">Aucun contact trouvé.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = list.map(c => {
|
||||
const avatarSrc = resolveUcpAvatarSrc(c.photo_url);
|
||||
const initials = (c.display_name || '?').slice(0, 2).toUpperCase();
|
||||
const mineBadge = c.is_mine
|
||||
? `<span class="px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-200 text-[10px] font-bold">Mon poste</span>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="ucp-card rounded-2xl p-4 flex flex-col justify-between gap-3 ${c.is_mine ? 'ring-1 ring-indigo-200' : ''}">
|
||||
<div class="flex items-start gap-3">
|
||||
${avatarSrc
|
||||
? `<img src="${escapeHtml(avatarSrc)}" alt="" class="w-12 h-12 rounded-full object-cover border border-slate-200 shrink-0">`
|
||||
: `<div class="w-12 h-12 rounded-full bg-slate-100 text-slate-600 font-bold flex items-center justify-center text-sm shrink-0">${escapeHtml(initials)}</div>`}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="font-bold text-slate-900 text-sm truncate">${escapeHtml(c.display_name)}</span>
|
||||
${mineBadge}
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400">${escapeHtml(c.group_name || 'Général')}</div>
|
||||
<div class="mt-2 space-y-1 text-xs text-slate-600">
|
||||
${c.internal_number ? `<div class="font-mono">📱 Interne : <strong class="text-slate-900">${escapeHtml(c.internal_number)}</strong></div>` : ''}
|
||||
${c.mobile_number ? `<div class="font-mono">📲 Mobile : ${escapeHtml(c.mobile_number)}</div>` : ''}
|
||||
${c.other_number ? `<div class="font-mono">☎️ Autre : ${escapeHtml(c.other_number)}</div>` : ''}
|
||||
${c.email ? `<div class="truncate">✉️ ${escapeHtml(c.email)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${c.is_mine ? `
|
||||
<button type="button" onclick="openProfileModal('${escapeHtml(c.mine_extension)}')"
|
||||
class="w-full py-1.5 px-3 rounded-xl bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold border border-indigo-200 transition">
|
||||
✏️ Modifier ma photo / mon e-mail
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function openProfileModal(extNum) {
|
||||
const contact = (ucpState.phonebook || []).find(c => c.is_mine && String(c.mine_extension) === String(extNum));
|
||||
if (!contact) return;
|
||||
|
||||
document.getElementById('ucp-profile-ext').value = extNum;
|
||||
document.getElementById('ucp-profile-modal-sub').textContent = `Poste ${extNum} — ${contact.display_name}`;
|
||||
document.getElementById('ucp-profile-email-input').value = contact.email || '';
|
||||
|
||||
updateProfileModalPreview(contact.photo_url, contact.display_name);
|
||||
document.getElementById('ucp-profile-modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function updateProfileModalPreview(photoUrl, name) {
|
||||
const img = document.getElementById('ucp-profile-preview');
|
||||
const init = document.getElementById('ucp-profile-initials');
|
||||
const src = resolveUcpAvatarSrc(photoUrl);
|
||||
|
||||
if (src) {
|
||||
img.src = src;
|
||||
img.classList.remove('hidden');
|
||||
init.classList.add('hidden');
|
||||
} else {
|
||||
img.classList.add('hidden');
|
||||
init.textContent = (name || '?').slice(0, 2).toUpperCase();
|
||||
init.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function closeProfileModal() {
|
||||
document.getElementById('ucp-profile-modal').classList.add('hidden');
|
||||
}
|
||||
|
||||
async function uploadSelectedAvatar() {
|
||||
const input = document.getElementById('ucp-avatar-input');
|
||||
const ext = document.getElementById('ucp-profile-ext').value;
|
||||
if (!input || !input.files || !input.files[0] || !ext) return;
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('extension', ext);
|
||||
fd.append('avatar', input.files[0]);
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('upload_my_avatar', 'POST', fd);
|
||||
if (res.contacts) ucpState.phonebook = res.contacts;
|
||||
if (res.extensions) ucpState.extensions = res.extensions;
|
||||
updateProfileModalPreview(res.photo_url, ext);
|
||||
renderPhonebookGrid();
|
||||
renderExtensionsGrid();
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
} finally {
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const profileEmailForm = document.getElementById('ucp-profile-email-form');
|
||||
if (profileEmailForm) {
|
||||
profileEmailForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const ext = document.getElementById('ucp-profile-ext').value;
|
||||
const email = document.getElementById('ucp-profile-email-input').value.trim();
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('save_my_email', 'POST', { extension: ext, email });
|
||||
if (res.contacts) ucpState.phonebook = res.contacts;
|
||||
if (res.extensions) ucpState.extensions = res.extensions;
|
||||
renderPhonebookGrid();
|
||||
closeProfileModal();
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 5. CHANGEMENT DE MOT DE PASSE UCP
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
const passwordForm = document.getElementById('ucp-password-form');
|
||||
if (passwordForm) {
|
||||
passwordForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const cur = passwordForm.elements['current_password'].value;
|
||||
const nw = passwordForm.elements['new_password'].value;
|
||||
const conf = passwordForm.elements['confirm_password'].value;
|
||||
|
||||
if (nw !== conf) {
|
||||
showUcpToast('Les deux nouveaux mots de passe ne correspondent pas.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await ucpApiCall('change_password', 'POST', {
|
||||
current_password: cur,
|
||||
new_password: nw,
|
||||
});
|
||||
passwordForm.reset();
|
||||
showUcpToast(res.message, 'success');
|
||||
} catch (err) {
|
||||
showUcpToast(err.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// INITIALISATION
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
if (window.UCP_IS_AUTH) {
|
||||
refreshUcpState(false);
|
||||
pollTimer = setInterval(() => {
|
||||
if (!document.hidden) {
|
||||
refreshUcpState(false);
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
Reference in new issue
Block a user