pabx-app/scriptApl/supervisorchat.js

$(function () {
    const url = new URL(window.location.href);
    const matricula = url.searchParams.get("matricula");
    if (matricula) {
        atendimentoAgente(matricula)
        atualizaStatusAgente(matricula)
    }

    localStorage.setItem('monitorRamaisStatus', $("input[name='conframal']:checked").val())
    $('input[name=conframal]').on('change', () => {
        localStorage.removeItem('monitorRamaisStatus')
        localStorage.setItem('monitorRamaisStatus', $("input[name='conframal']:checked").val())
    })
    
    resizegrid()
})

const desconectMesa = async () => {
    function req() {
       return $.ajax({
        url: 'index.php?idProg=307&pbxRequest=1&ajax=desconnect',
        type: "GET"
        }); 
    }
    await req().then(() => {
        window.location.href = "index.php?idProg=307&pbxRequest=1";
    })
}

const criarGrid = (data) => {
    let cont = 0
    let line = ''
    let rline = ''
    let cdata = 0
    data.forEach((e) => {
        cont++
        line += e.row
        if (cont > 4 || cdata >= data.length) {
            rline += `<tr>${line}</tr>`
            line = ''
            cont = 0
        }
        cdata++
    })

    if(cont <= 4){
        rline += `<tr>${line}</tr>`
    }
    
    $('#dadosContato').append(rline);
}

const HangupCall = (id) => {
    $.ajax({
        url: "index.php?idProg=307&pbxRequest=1&ajax=hangup&f=" + id,
        type: "GET",
        success: function (res) {
            if (res) {
                console.log(res)
            }
        }
    });
}

const AtualizaChamdas = () => {
    
    if(!localStorage.getItem('monitorRamaisStatus')){
        return
    }
    
    $.ajax({
        url: "index.php?idProg=307&pbxRequest=1&ajax=ramais",
        type: "GET",
        success: function (res) {
            if (res) {
                let lrow = []
                let crow = 0
                Object.keys(res).forEach((el) => {
                    if (res[el].Status == localStorage.getItem('monitorRamaisStatus') || res[el].Status.indexOf(localStorage.getItem('monitorRamaisStatus')) >= 0) {
                        let direct = ''
                        if (res[el].StatusCall == 'E') {
                            direct = res[el].CallInput + `&nbsp<img src="imgSite/direcaoE32.png" width="12px" align="absmiddle" style="margin-top:-2px">`
                        } else if (res[el].StatusCall == 'S') {
                            direct = res[el].CallOutput + `&nbsp<img src="imgSite/direcaoS32.png" width="12px" align="absmiddle" style="margin-top:-2px">`
                        }

                        let status = `<img src="imgSite/ledGreen.png" width="12px" align="absmiddle" style="margin-top:-2px"> LIVRE`
                        if (direct) {
                            status = `<img src="imgSite/ledRed.png" width="12px" align="absmiddle" style="margin-top:-2px"> OCUPADO`
                        } else if (res[el].Status == "UNKNOWN") {
                            status = `<img src="imgSite/Warning.png" width="12px" align="absmiddle" style="margin-top:-2px"> INATIVO`
                        }

                        // let tbl = `<table align='center' style='border: 1px solid #D7D7D7;border-collapse: collapse;padding: 15px;' id='tblFunc'><tr>`
                        // if (res[el].CallChannel) {
                        //     /**  ATIVACAO DO HUNGUP NA TELA DA MESA **/ 
                        //     tbl += `<td><a id='${res[el].CallChannel}' href="#" onClick='HangupCall(this.id)'><img src='imgSite/exit16.png' background-repeat: no-repeat;border:0;padding-top:0"></a></td>`
                        // }
                        // tbl += `</tr></table>`

                        lrow.push({
                            ramal: res[el].ObjectName,
                            row: `<th id="${res[el].ObjectName}">
                                        <h3>${res[el].ObjectName}</h3>
                                        <p>${res[el].Duration} - ${direct}</p>
                                        <p>${status}</p>
                                        <p>${res[el].Status}</p>
                                    </th>`})
                        crow++
                    }
                })
                $("#dadosContato").html('')
                criarGrid(lrow)
            }
        }
    });
    setTimeout(function () {
        AtualizaChamdas();
        var alturaTable = $('#dadosContato').height();
        if (alturaTable + 300 > 1360) {
            $('#rodapeSite').css({"top": alturaTable + 300});
            $('#tabLayout').css({"height": alturaTable + 325});
        }
    }, 1200);
}

function timeDiffCalc(dateFuture, dateNow) {
    let diffInMilliSeconds = Math.abs(dateFuture - dateNow) / 1000;
    const days = Math.floor(diffInMilliSeconds / 86400);
    diffInMilliSeconds -= days * 86400;
    const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
    diffInMilliSeconds -= hours * 3600;
    const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
    diffInMilliSeconds -= minutes * 60;
    const seconds = Math.floor(diffInMilliSeconds);

    const adicionaZero = (numero) => {
        if (numero <= 9) {
            return "0" + numero;
        } else {
            return numero;
        }
    }

    let difference = '';
    if (days > 0) {
        difference += (days === 1) ? `${days}` : `${days}`;
    }

    difference += adicionaZero(hours);
    difference += ":" + adicionaZero(minutes);
    difference += ":" + adicionaZero(seconds);
    return difference;
}

const resizegrid = () => {
    
    let heightgrid = $('#content').height()
    if(heightgrid > 600){
        $('#rodapeSite').css({"top": $('#content').height() + 200});
    }
    
    setTimeout(() => {
        resizegrid()
    }, 1000);
}