Feature: add Paging & Intercom groups (Téléavertissement) with auto-answer headers, Asterisk Page application, and interactive member selection
This commit is contained in:
sorcier committed
1 parent
33ad75d571
commit
2bd1ae0777
5 files changed
+610
No files matched your search
@@ -289,6 +289,11 @@ $currentUser = Auth::getUsername();
|
||||
<span>• Groupes d'extensions</span>
|
||||
<span id="nav-badge-extgroups" class="px-1.5 py-0.2 text-[10px] rounded-full bg-anthracite-800 text-cyan-300 border border-anthracite-700 font-bold">0</span>
|
||||
</button>
|
||||
<button type="button" data-tab="paging" onclick="switchTab('paging')"
|
||||
class="tab-btn w-full flex items-center justify-between px-3 py-1.5 rounded-lg text-xs font-medium text-slate-300 hover:bg-anthracite-800 hover:text-white transition">
|
||||
<span>• Téléavertissement (Paging)</span>
|
||||
<span id="nav-badge-paging" class="px-1.5 py-0.2 text-[10px] rounded-full bg-anthracite-800 text-purple-300 border border-anthracite-700 font-bold">0</span>
|
||||
</button>
|
||||
<button type="button" data-tab="phonebook" onclick="switchTab('phonebook')"
|
||||
class="tab-btn w-full flex items-center justify-between px-3 py-1.5 rounded-lg text-xs font-medium text-slate-300 hover:bg-anthracite-800 hover:text-white transition">
|
||||
<span>• Annuaire d'Entreprise</span>
|
||||
@@ -1140,6 +1145,65 @@ $currentUser = Auth::getUsername();
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- ONGLET 2D : TÉLÉAVERTISSEMENT & INTERPHONIE (PAGING) -->
|
||||
<!-- ========================================================= -->
|
||||
<section id="tab-paging" class="tab-panel hidden space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-bold text-white">Groupes de Téléavertissement & Interphonie (Paging)</h2>
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-purple-500/20 text-purple-300 border border-purple-500/30">Auto-décroché immédiat</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-300">Diffusion d'annonces vocales en direct sur les haut-parleurs des téléphones IP sélectionnés. Composez le numéro du groupe (ex: <code class="text-purple-300 font-mono font-bold">100</code>) pour parler à tous les postes simultanément.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" onclick="openPagingModal()"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-600/20 transition">
|
||||
<span>+ Nouveau Groupe de Téléavertissement</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bannière d'aide rapide Paging & Intercom 1-à-1 -->
|
||||
<div class="p-4 rounded-2xl bg-anthracite-800/90 border border-purple-500/30 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-300 shrink-0 font-bold text-sm">📢</div>
|
||||
<div class="space-y-0.5">
|
||||
<div class="text-xs font-bold text-purple-200">Annonce Générale de Groupe (Paging)</div>
|
||||
<p class="text-[11px] text-slate-300">Composez le numéro du groupe configuré (ex: <span class="font-mono text-purple-300 font-bold">100</span>). Les téléphones cibles décrochent automatiquement sur haut-parleur après un bip d'avertissement sonore.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-xl bg-indigo-500/20 border border-indigo-500/40 flex items-center justify-center text-indigo-300 shrink-0 font-bold text-sm">📞</div>
|
||||
<div class="space-y-0.5">
|
||||
<div class="text-xs font-bold text-indigo-200">Interphonie Directe 1-à-1 (*80 + poste)</div>
|
||||
<p class="text-[11px] text-slate-300">Composez <span class="font-mono text-indigo-300 font-bold">*80</span> suivi du numéro de l'extension (ex: <span class="font-mono text-indigo-300 font-bold">*80101</span>) pour ouvrir directement le haut-parleur et le micro du poste en conversation duplex.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl overflow-hidden shadow-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-anthracite-700 text-[11px] font-semibold uppercase tracking-wider text-slate-300 bg-anthracite-950/60">
|
||||
<th class="py-3.5 px-4">Numéro (Extension)</th>
|
||||
<th class="py-3.5 px-4">Nom du Groupe</th>
|
||||
<th class="py-3.5 px-4">Mode Audio</th>
|
||||
<th class="py-3.5 px-4">Postes Membres Associés</th>
|
||||
<th class="py-3.5 px-4">Si Occupé</th>
|
||||
<th class="py-3.5 px-4">Bip</th>
|
||||
<th class="py-3.5 px-4">Statut</th>
|
||||
<th class="py-3.5 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="paging-tbody" class="divide-y divide-anthracite-700/70 text-sm"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- ONGLET 3 : TRUNKS SIP -->
|
||||
<!-- ========================================================= -->
|
||||
@@ -2813,6 +2877,106 @@ $currentUser = Auth::getUsername();
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MODALE CRUD GROUPE DE TÉLÉAVERTISSEMENT & INTERPHONIE (PAGING) -->
|
||||
<div id="modal-paging" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/75 backdrop-blur-sm p-3 sm:p-4 overflow-y-auto">
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl w-[94vw] max-w-4xl p-6 shadow-2xl my-auto">
|
||||
<div class="flex items-center justify-between pb-3 mb-4 border-b border-anthracite-700">
|
||||
<div>
|
||||
<h3 id="modal-paging-title" class="text-base sm:text-lg font-bold text-white">Groupe de Téléavertissement (Paging / Intercom)</h3>
|
||||
<p class="text-xs text-slate-300">Diffusion d'annonces vocales directes avec auto-décroché immédiat sur haut-parleur.</p>
|
||||
</div>
|
||||
<button type="button" onclick="closeModal('modal-paging')" class="text-slate-300 hover:text-white text-lg">✕</button>
|
||||
</div>
|
||||
<form id="form-paging" class="space-y-4">
|
||||
<input type="hidden" name="id">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
||||
<div class="sm:col-span-3">
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Numéro d'appel (Extension) *</label>
|
||||
<input type="text" name="extension" placeholder="ex: 100" required
|
||||
class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-purple-300 font-mono font-bold">
|
||||
</div>
|
||||
<div class="sm:col-span-5">
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Nom du groupe *</label>
|
||||
<input type="text" name="name" placeholder="ex: Téléavertissement Général, Atelier..." required
|
||||
class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-white">
|
||||
</div>
|
||||
<div class="sm:col-span-4">
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Description (optionnel)</label>
|
||||
<input type="text" name="description" placeholder="ex: Annonce vocale globale"
|
||||
class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Mode Audio</label>
|
||||
<select name="duplex" class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-white">
|
||||
<option value="0">Simplex (Haut-parleur seul / Micro coupé)</option>
|
||||
<option value="1">Duplex (Interphonie 2 voies / Conversation)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Gestion des Postes Occupés</label>
|
||||
<select name="busy_mode" class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-white">
|
||||
<option value="skip">Ignorer si le poste est en communication</option>
|
||||
<option value="force">Forcer l'annonce même si en ligne</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-200 mb-1">Durée maximale d'annonce (sec)</label>
|
||||
<input type="number" name="timeout" value="120" min="10" max="600" required
|
||||
class="w-full px-3 py-2 rounded-lg bg-anthracite-950 border border-anthracite-700 text-sm text-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-6 p-3 rounded-xl bg-anthracite-950 border border-anthracite-700">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" name="play_beep" value="1" checked class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500 bg-anthracite-900 border-anthracite-700">
|
||||
<span class="text-xs font-medium text-slate-200">Émettre un bip sonore d'avertissement avant la prise de parole</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" name="enabled" value="1" checked class="w-4 h-4 rounded text-emerald-600 focus:ring-emerald-500 bg-anthracite-900 border-anthracite-700">
|
||||
<span class="text-xs font-medium text-slate-200">Activer ce groupe de téléavertissement</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Sélection Double Liste Interactive : Postes qui reçoivent l'annonce -->
|
||||
<div class="p-4 rounded-xl bg-anthracite-950 border border-purple-500/40 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold uppercase tracking-wider text-purple-300">Postes membres qui recevront l'annonce (Cliquez pour inclure / retirer)</span>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" onclick="pagingTransferAllExtensions(true)" class="px-2.5 py-1 rounded-lg bg-purple-500/15 hover:bg-purple-500/25 border border-purple-500/30 text-[11px] font-semibold text-purple-300">← Tout inclure</button>
|
||||
<button type="button" onclick="pagingTransferAllExtensions(false)" class="px-2.5 py-1 rounded-lg bg-anthracite-800 hover:bg-anthracite-700 border border-anthracite-600 text-[11px] font-semibold text-slate-300">Tout retirer →</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="p-3 rounded-xl bg-anthracite-900 border border-purple-500/30 min-h-[130px]">
|
||||
<div class="text-xs font-bold text-purple-300 mb-2 flex items-center justify-between">
|
||||
<span>✓ Postes ciblés par le téléavertissement</span>
|
||||
<span id="paging-selected-count" class="px-2 py-0.2 rounded-full bg-purple-500/20 text-[10px]">0</span>
|
||||
</div>
|
||||
<div id="paging-members-allowed-box" class="flex flex-wrap gap-1.5"></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-xl bg-anthracite-900 border border-anthracite-700 min-h-[130px]">
|
||||
<div class="text-xs font-bold text-slate-400 mb-2 flex items-center justify-between">
|
||||
<span>Autres postes disponibles</span>
|
||||
<span id="paging-unselected-count" class="px-2 py-0.2 rounded-full bg-anthracite-800 text-[10px]">0</span>
|
||||
</div>
|
||||
<div id="paging-members-blocked-box" class="flex flex-wrap gap-1.5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="paging-members-checkboxes" class="hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-anthracite-700 flex justify-end gap-2">
|
||||
<button type="button" onclick="closeModal('modal-paging')" class="px-4 py-2 rounded-xl bg-anthracite-700 text-slate-200 text-xs font-semibold">Annuler</button>
|
||||
<button type="submit" class="px-4 py-2 rounded-xl bg-purple-600 hover:bg-purple-500 text-white text-xs font-semibold">Enregistrer le groupe de téléavertissement</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MODALE CRUD ROUTE SORTANTE (OUTBOUND ROUTE : TRUNK SEQUENCE, DIAL PATTERNS, EXTENSION & GROUP ROUTING) -->
|
||||
<div id="modal-outbound" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/75 backdrop-blur-sm p-2 sm:p-4 overflow-y-auto">
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl w-[96vw] max-w-[1380px] p-5 sm:p-7 shadow-2xl my-auto max-h-[94vh] flex flex-col">
|
||||
|
||||
Reference in new issue
Block a user