Licitator/httpdocs/public/js/chat.js

let topic = "";
let emisorId;
let isloading = false;
let slaMsgsParent;
window.addEventListener('resize', function () {
    document.querySelectorAll('.sala_logo')
        .forEach(el => el.style.height = el.clientWidth + 'px');
});
window.addEventListener('load', function() {
    document.querySelectorAll('.sala_logo')
        .forEach(el => el.style.height = el.clientWidth + 'px');
    let formElem = document.getElementById('chat-msg-form');
    if(formElem === undefined){
        return false;
    }
    slaMsgsParent = document.getElementById('sala-msgs-parent');
    emisorId = formElem.dataset.emisorId;
    emisorId = parseInt(emisorId);
    formElem.onsubmit = function (e) {
        e.preventDefault();
        if(!topic || topic === '')
            return false;
        const publishRoute = "chat/" + topic;
        let message = this.elements.message.value;
        fetch(publishRoute, {method: 'POST', body: JSON.stringify({message: message})});
        this.elements.message.value = '';
        this.elements.message.focus();
    }
    document.getElementById('chat-message').oninput = function (e) {
        document.getElementById('msgsubmit').disabled = this.value === '' || isloading;
        this.style.height = 'inherit';
        let computed = window.getComputedStyle(this);

        let height = parseInt(computed.getPropertyValue('border-top-width'), 10)
            + parseInt(computed.getPropertyValue('padding-top'), 10)
            + this.scrollHeight
            + parseInt(computed.getPropertyValue('padding-bottom'), 10)
            + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

        this.style.height = height + 'px';
    }
    let dataURL= document.getElementById('chat-wrapper').dataset.subscribeUrl;
    const subscribeURL = new URL(dataURL);
    document.querySelectorAll('.sala_item')
        .forEach(el => {
            el.addEventListener('click', changeSala);
            el.addEventListener('keypress', changeSala);
            el.setAttribute('disabled', 'disabed');
            const pubUrl = el.dataset.publishUrl;
            topic = pubUrl.split("/").pop();
            subscribeURL.searchParams.append('topic', topic);
            //updateEventSource(subscribeURL);

        });
    new EventSource(subscribeURL).onmessage = ({data}) => {
        const message = JSON.parse(data);
        let ul = document.getElementById('message-list');
        if(!message) throw new Error("Datos no válidos");
        if(registration)
            registration.showNotification("Nuevo mensaje", {body:message.notifMsg});
        let htmlMsg = message.emisorId === emisorId ? message.emisorView : message.receptorView;
        let liElem = document.createElement("li");
        let sala = message.sala;
        updateLastMessageAndDate(sala, message.salaDescView);
        if(message.emisorId !== emisorId){
            if(!ul || (slaMsgsParent.dataset.activeChat && slaMsgsParent.dataset.activeChat !== sala)){
                updateUnreadedBadge(sala);
            }
            if(ul && slaMsgsParent.dataset.activeChat && slaMsgsParent.dataset.activeChat === sala){
                let liNewMsg = ul.getElementsByClassName( 'unreaded-list' );
                if(!liNewMsg || liNewMsg.length === 0){
                    liElem.setAttribute("class", "unreaded-list");
                    liElem.innerHTML = '<hr><span>Nuevo</span><hr>';
                    ul.prepend(liElem);
                }
            }
        }
        if(ul && slaMsgsParent.dataset.activeChat && slaMsgsParent.dataset.activeChat === sala){
            liElem = document.createElement("li");
            liElem.innerHTML = htmlMsg;
            ul.prepend(liElem);
        }
    };
});

function updateLastMessageAndDate(sala, salaDescView){
    let salaItem = document.getElementById(sala);
    let salaDesc = salaItem.getElementsByClassName('sala_desc')[0];
    if(salaDesc){
        let salaOldNameItem = salaDesc.getElementsByClassName('sala_name')[0];
        let salaName = '';
        if(salaOldNameItem){
            salaName = salaOldNameItem.innerText;
        }
        salaDesc.innerHTML = salaDescView;
        salaOldNameItem = salaDesc.getElementsByClassName('sala_name')[0];
        salaOldNameItem.innerText = salaName;
    }
    salaItem.parentElement.prepend(salaItem);
}

function updateUnreadedBadge(sala){
    let salaItem = document.getElementById(sala);
    let unreadedBadge = salaItem.getElementsByClassName( 'unreaded' )[0];
    if(!unreadedBadge){
        unreadedBadge = document.createElement("span");
        unreadedBadge.setAttribute("class", "unreaded");
        unreadedBadge.innerText = "1";
        let salaImage = salaItem.getElementsByClassName( 'sala_img' )[0];
        if(salaImage){
            salaImage.prepend(unreadedBadge);
        }
    }else{
        let unreadedCount = parseInt(unreadedBadge.innerText);
        unreadedCount += 1;
        unreadedBadge.innerText = unreadedCount;
    }
}

function getUl(){
    let ul = document.getElementById('message-list');
    if(!ul){
        ul = document.createElement('ul');
        ul.id = "message-list";
        ul.setAttribute("class", "scroll-bar-custom");
        document.getElementById("sala-msgs-parent").append(ul);
        document.getElementById('sala-no-seleccionada').remove();
    }
    return ul;
}
function changeSala(e) {
    if (e.type === 'click' || e.keyCode === 9) {
        isloading = false;
        document.getElementById('msgsubmit').disabled = true;
        let currentTarget = e.currentTarget;
        let ul = getUl();
        ul.innerHTML = "";
        document.querySelector('.loader').classList.add('show');
        $.get(currentTarget.dataset.loadPath, function (data) {
            isloading = false;
            let chatMsgElem = document.getElementById('chat-message');
            chatMsgElem.disabled = false;
            chatMsgElem.placeholder = chatMsgElem.dataset.placeholder;
            const pubUrl = currentTarget.dataset.publishUrl;
            topic = pubUrl.split("/").pop();
            //const subscribeURL = new URL(dataURL);
            //subscribeURL.searchParams.append('topic', topic);
            //updateEventSource(subscribeURL);
            document.querySelector('.loader').classList.remove('show');
            let activeChat = document.querySelector('.active_chat');
            if(activeChat)
                activeChat.classList.remove('active_chat');
            currentTarget.classList.add('active_chat');
            let msgsBadge = currentTarget.getElementsByClassName("unreaded")[0];
            if(msgsBadge)
                msgsBadge.remove();
            slaMsgsParent.innerHTML = data;
            slaMsgsParent.dataset.activeChat = currentTarget.id;
            document.getElementById('msgsubmit').disabled = false;
        });
    }
}