newosinadjango/osinaweb/static/js/osichat-admin/rooms.js

let admin_chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
let protocol = window.location.protocol === "https:" ? "https" : "http";
let admin_chat_domain = "osina.ositcom.com";
let userId = document.getElementById('userId').textContent.trim();
let osichatadminroomSocket = null;
let currentChatId = null;

// FUNCTIONS TO SHOW & HIDE THE LOADER
function showLoader() {
    const roomsLoader = document.getElementById('roomsLoader');
    if (roomsLoader) {
        roomsLoader.classList.remove('hidden');
    }
}

function hideLoader() {
    const roomsLoader = document.getElementById('roomsLoader');
    if (roomsLoader) {
        roomsLoader.classList.add('hidden');
    }
}


function appendInnerConversationScript(div) {
    const innerConversationScript = document.createElement('script');
    innerConversationScript.type = 'text/javascript';
    innerConversationScript.src = `${protocol}://${admin_chat_domain}/static/js/osichat-admin/inner-conversation.js`;
    div.appendChild(innerConversationScript);
}



function initializeOsichat(){
    osichatroomsSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat/`);

    osichatroomsSocket.onopen = function () {
        console.log('WebSocket connection to rooms established');
        hideLoader();
        osichatroomsSocket.send(JSON.stringify({
            'event_type': 'set_client_type',
            'client_type': 'website_admin',
            'user_id': userId
        }));
    };

    osichatroomsSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const leftDiv = document.getElementById('widgetLeftSide');
        const leftDynamicDiv = document.getElementById('leftDynamic');
        switch (data.event_type) {
            case 'get_chats':
                leftDynamicDiv.innerHTML = data.html;
                appendInnerConversationScript(leftDiv);
                break;

            case 'get_visitors':
                leftDynamicDiv.innerHTML = data.html;
                break;

            case 'new_chat_update':
                const roomsContainer = document.getElementById('chatrooms');
                const chatRoomDiv = roomsContainer.querySelector(`.chat-room[data-roomid='${data.chatroom_id}']`);
        
                if (chatRoomDiv) {
                    chatRoomDiv.remove();  // Remove the existing chat room div
                }
                // Insert the new chat room HTML at the top of the container
                const newChatRoomDiv = document.createElement('div');
                newChatRoomDiv.innerHTML = data.html;
                roomsContainer.insertAdjacentElement('afterbegin', newChatRoomDiv.firstElementChild);

                if (parseInt(currentChatId) === parseInt(data.chatroom_id)) { 
                    const unreadIndicator = roomsContainer.querySelector(`.unread[data-roomid='${data.chatroom_id}']`);
                    if (unreadIndicator) {
                        unreadIndicator.classList.add('hidden');  
                    }
                    if (!data.user) { // If it is sent by a guest play a notification sound for the guest
                        const notificationSound = document.getElementById('notification-sound');
                        notificationSound.play();

                    }
                    } else {
                        const unreadIndicator = roomsContainer.querySelector(`.unread[data-roomid='${data.chatroom_id}']`);
                        if (unreadIndicator) {
                            unreadIndicator.classList.remove('hidden');  
                        }
                        if (!data.user) { // If it is sent by a guest play a notification sound for the guest
                            const notificationSound = document.getElementById('out-notification-sound');
                            notificationSound.play();
                        }
                    }


                    appendInnerConversationScript(leftDiv);
                    break;
        
            default:
                console.log('Unknown event type:', data.event_type);
        }
    };

    osichatroomsSocket.onclose = function () {
        showLoader();
        setTimeout(() => {
            console.log('Attempting to reconnect to WebSocket...');
            initializeOsichat();
        }, 2000);
    };

    osichatroomsSocket.onerror = function (error) {
        showLoader();
        console.error('WebSocket error:', error);
    };

    window.addEventListener('offline', () => {
        showLoader();
        if (osichatroomsSocket) {
            osichatroomsSocket.close();
        }
    });

}

const chatsTab = document.getElementById('chatsTab');
const visitorsTab = document.getElementById('visitorsTab');

function switchToChats() {
    chatsTab.classList.add('bg-white', 'text-secondosiblue', 'shadow-md');
    chatsTab.classList.remove('bg-gray-100', 'text-gray-400');
    visitorsTab.classList.add('bg-gray-100', 'text-gray-400');
    visitorsTab.classList.remove('bg-white', 'text-secondosiblue', 'shadow-md');

    osichatroomsSocket.send(JSON.stringify({
        event_type: 'get_chats'
    }));
}

function switchToVisitors() {
    visitorsTab.classList.add('bg-white', 'text-secondosiblue', 'shadow-md');
    visitorsTab.classList.remove('bg-gray-100', 'text-gray-400');
    chatsTab.classList.add('bg-gray-100', 'text-gray-400');
    chatsTab.classList.remove('bg-white', 'text-secondosiblue', 'shadow-md');

    osichatroomsSocket.send(JSON.stringify({
        event_type: 'get_visitors'
    }));
}

chatsTab.addEventListener('click', switchToChats);
visitorsTab.addEventListener('click', switchToVisitors);


initializeOsichat();