<?php namespace AloVoice; ?> <style> p[data-agent="name"] a { color: inherit; } .row{ display:flex !important; } .queues_content{ position: absolute; width: 100%; left: 0; height: calc(100% - 50px); } .queues_incontent{ height: calc(100% - 40px); } .queues_agent_icon { position: absolute; padding: 2px; bottom: 10px; right: 21px; width: 22px; height: 22px; } #footer_panel{ width:100%; } </style> <div class="queues_content px-2"> <!-- <div class="row" > pt-5 border <h3 class="h3 card-body text-center">Звонки</h3> </div> --> <div class="row p-1 bg-light queues_incontent"> <div class="col-8"> <div id="agents"></div> </div> <div class="col-4" id="queues"></div> </div> <div id="footer_panel"> <button type="button" class="btn btn-outline-info" id="queues_update"> <i data-feather="rotate-ccw" class="w-2 h-2" width="0.7em" height="0.7em"></i> Обновить </button> <button type="button" class="btn btn-outline-primary" id="queues_add"> <i data-feather="plus" class="w-2 h-2" width="0.7em" height="0.7em"></i> Добавить очередь </button> </div> </div> <br/> <script> if (window.intervalId) { try { window.Queues = null clearInterval(window.intervalId) } catch (error) {} } var afterLoadPage = function () { window.queuesUpdate = () => { const page = $('.queues_content') // page switched if (!page.length) { return } loadAloVoiceInfo("alovoice_get_operators", function (res) { console.log(res) if (!window.Queues) { setQueues(res) } else { updateQueues(res) } }); } window.queuesUpdate() window.intervalId = setInterval(() => { window.queuesUpdate(DATA) }, 3 * 1000); $().ready(() => { $('#queues_update').on('click', () => { queuesUpdate() }) }) const target = { agents: "#agents", queues: "#queues" }; const LOCALE = { queues: "Очереди", queuesEmpty: "Список пуст", channelsTitle: "Звонки", } const PARAMS = { agents: { status: { color: { 0: "#CACFD2", // AST_DEVICE_UNKNOWN УСТРОЙСТВО НЕИЗВЕСТНО 1: "#F5B041", // AST_DEVICE_NOT_INUSE УСТРОЙСТВО НЕ ИСПОЛЬЗУЕТСЯ 2: "#2ECC71", // AST_DEVICE_INUSE УСТРОЙСТВО В ИСПОЛЬЗОВАНИИ 3: "#EC7063", // AST_DEVICE_BUSY УСТРОЙСТВО ЗАНЯТО 4: "#D35400", // AST_DEVICE_INVALID УСТРОЙСТВО НЕДЕЙСТВИТЕЛЬНО 5: "#E74C3C", // AST_DEVICE_UNAVAILABLE УСТРОЙСТВО НЕ ДОСТУПНО 6: "#5DADE2", // AST_DEVICE_RINGING УСТРОЙСТВО ЗВОНИТ 7: "#1ABC9C", // AST_DEVICE_RINGINUSE УСТРОЙСТВО 8: "#F1C40F", // AST_DEVICE_ONHOLD УСТРОЙСТВО В ОЖИДАНИИ }, text: { 0: "Неизвестно", // AST_DEVICE_UNKNOWN 1: "Не используется", // AST_DEVICE_NOT_INUSE 2: "Используется", // AST_DEVICE_INUSE 3: "Занято", // AST_DEVICE_BUSY 4: "Недействительно", // AST_DEVICE_INVALID 5: "Нет доступа", // AST_DEVICE_UNAVAILABLE 6: "Звонит", // AST_DEVICE_RINGING 7: "", // AST_DEVICE_RINGINUSE 8: "Ожидание", // AST_DEVICE_ONHOLD } }, statuscode: { 'off' : 'Отключён', 'free' : 'Свободен', 'dnd' : 'DND вкл.', 'incring' : 'Вх.звонок', 'inccall' : 'Вх.разговор', 'outring' : 'Исх.Звонок', 'outcall' : 'Исх.Разговор', }, statuscolor: { 'off' : "#F26B47", 'free' : "#FFF893", 'dnd' : "#F5B041", 'incring' : '#99ffb2', 'inccall' : '#7BC56F', 'outring' : '#73dcff', 'outcall' : '#0070BF', } } } const queueColomsDAta = [ { TEXT: "В Приветствии", TEMPLATE: { BGCOLOR: "#FFFFCC" }, DATA: [ { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, ] }, { TEXT: "В очереди", TEMPLATE: { BGCOLOR: "#9966FF" }, DATA: [ { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, ] }, { TEXT: "Все исходящие", TEMPLATE: { BGCOLOR: "#6699FF" }, DATA: [ { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, ] }, { TEXT: "Переадресованные", TEMPLATE: { BGCOLOR: "#33CC99" }, DATA: [ { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, { TITLE: "5032000", PHONE: "935570470", INFO: "6000", TIME: "10" }, ] }, ] const queueColoms = { TITLE: "Звонки", // now TIME DATAS: queueColomsDAta } const observers = { TEXT: "Observers", DATAS: [ { IMG: "https://bitrix2.cdnvideo.ru/b11827782/resize_cache/44/7acf4cadf975128573a8b1c2766af5d8/main/11e/11e1010b3a10f6dfe0c657bb9ddabdee/ava_kulya2.jpg?h=4uz.bitrix24.ru", USER: "USER FULL NAME" }, { IMG: "https://bitrix2.cdnvideo.ru/b11827782/resize_cache/44/7acf4cadf975128573a8b1c2766af5d8/main/11e/11e1010b3a10f6dfe0c657bb9ddabdee/ava_kulya2.jpg?h=4uz.bitrix24.ru", USER: "USER FULL NAME #2" }, ] } const DATA = { AGERNTS: queues, QUEUES: queueColoms, OBSERVERS: observers } function setQueues(data) { var queuesConstruct, Queues; if (window.Queues) { return Queues; } queuesConstruct = getQuesue(); Queues = new queuesConstruct({ data: data, target: target, locale: LOCALE, params: PARAMS }); Queues.init(); window.Queues = Queues; return Queues; } function updateQueues(data) { if (!window.Queues) { return false; } return window.Queues.update(data); } }; </script> <script src="template/js/footer_queues.js<?php echo '?t='.time();?>"></script> <!-- <script src="template/js/new_footer_queues.js<?php echo '?t='.time();?>"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.7/sweetalert2.js" integrity="sha512-TpJ9I6beSH5yjFlSM3XMwtpwV+TrWlzC4gqskXvhHEDdfJS28OjegMQzBbrdq4tCaa+ARXflVzGYkg99xGpwTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/themes@5.0.5/bootstrap-4/bootstrap-4.css">