new
emile
9 months ago
parent
ed5ff67bab
commit
411b2e3cca
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,20 +0,0 @@
|
||||
<p id="userId" class="hidden">{{request.user.id}}</p>
|
||||
<div class="h-full flex flex-col text-secondosiblue">
|
||||
<!-- CHATS -->
|
||||
{% for chat in latest_chat_rooms %}
|
||||
<div class="chat-room w-full flex flex-col gap-1 py-3 px-3 border-b border-gray-100 text-sm cursor-pointer" data-chatid ="{{chat.id}}" data-session="{{chat.chatroomguest.visitor.session_id}}">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<p class="text-secondosiblue font-poppinsBold">{{chat.chatroomguest.visitor.session_id}}</p>
|
||||
|
||||
<div
|
||||
class="w-[20px] h-[20px] bg-osiblue rounded-full shadow-md flex justify-center items-center text-white text-[10px]">
|
||||
<p>22</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-xs">{{chat.chatmessage_set.all.last.content}}</p>
|
||||
|
||||
<p class="text-gray-500 opacity-70 text-xs">{{chat.last_updated}}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<div data-roomid = {{chat_room.id}} data-session="{{chat_room.chatroomguest.visitor.session_id}}" class="chat-room w-full flex flex-col gap-1 py-3 px-3 border-b border-gray-100 text-sm cursor-pointer">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<p class="text-secondosiblue font-poppinsBold">{{chat_room.chatroomguest.visitor.ip_address}}</p>
|
||||
|
||||
<div
|
||||
class="w-[20px] h-[20px] bg-osiblue rounded-full shadow-md flex justify-center items-center text-white text-[10px]">
|
||||
<p>{{number_of_unread}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-xs">{{chat_room.chatmessage_set.all.last.content}}</p>
|
||||
|
||||
<p class="text-gray-500 opacity-70 text-xs">{{chat_room.last_updated}}</p>
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
<!-- HEADER -->
|
||||
<div class="grid grid-cols-2 sticky top-0 z-10">
|
||||
<div
|
||||
class="w-full flex items-center justify-center gap-1 py-3 px-3 border-b border-gray-100 bg-white rounded-md shadow-md cursor-pointer text-secondosiblue">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
|
||||
</svg>
|
||||
<p>Chats</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="w-full flex items-center justify-center gap-1 py-3 px-3 border-b border-gray-100 bg-gray-100 text-gray-400 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" fill="none">
|
||||
<path
|
||||
d="M2.5 8.18677C2.60406 6.08705 2.91537 4.77792 3.84664 3.84664C4.77792 2.91537 6.08705 2.60406 8.18677 2.5M21.5 8.18677C21.3959 6.08705 21.0846 4.77792 20.1534 3.84664C19.2221 2.91537 17.9129 2.60406 15.8132 2.5M15.8132 21.5C17.9129 21.3959 19.2221 21.0846 20.1534 20.1534C21.0846 19.2221 21.3959 17.9129 21.5 15.8132M8.18676 21.5C6.08705 21.3959 4.77792 21.0846 3.84664 20.1534C2.91537 19.2221 2.60406 17.9129 2.5 15.8132"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M19.6352 11.3178C19.8784 11.6224 20 11.7746 20 12C20 12.2254 19.8784 12.3776 19.6352 12.6822C18.5423 14.0504 15.7514 17 12 17C8.24862 17 5.45768 14.0504 4.36483 12.6822C4.12161 12.3776 4 12.2254 4 12C4 11.7746 4.12161 11.6224 4.36483 11.3178C5.45768 9.9496 8.24862 7 12 7C15.7514 7 18.5423 9.9496 19.6352 11.3178Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
<path
|
||||
d="M14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
</svg>
|
||||
<p>Visitors</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-full flex flex-col text-secondosiblue" id="chatrooms">
|
||||
<!-- CHATS -->
|
||||
{% for chat_room in chat_rooms %}
|
||||
<div data-roomid = {{chat_room.id}} data-session="{{chat_room.chatroomguest.visitor.session_id}}" class="chat-room w-full flex flex-col gap-1 py-3 px-3 border-b border-gray-100 text-sm cursor-pointer">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<p class="text-secondosiblue font-poppinsBold">{{chat_room.chatroomguest.visitor.ip_address}}</p>
|
||||
|
||||
<div
|
||||
class="w-[20px] h-[20px] bg-osiblue rounded-full shadow-md flex justify-center items-center text-white text-[10px]">
|
||||
<p>{{chat_room.number_of_unread}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-xs">{{chat_room.chatmessage_set.all.last.content}}</p>
|
||||
|
||||
<p class="text-gray-500 opacity-70 text-xs">{{chat_room.last_updated}}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="mb-2 flex justify-start items-center gap-2" id="typing">
|
||||
<div
|
||||
class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
|
||||
<img class="w-full h-full rounded-full object-cover" src="{{chat_room.chatroomguest.visitor.flag_image_url}}">
|
||||
</div>
|
||||
<div
|
||||
class="w-fit rounded-r-3xl rounded-tl-3xl px-3 py-3 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
|
||||
<div class="h-1.5 w-1.5 bg-secondosiblue rounded-full animate-typing"></div>
|
||||
<div class="h-1.5 w-1.5 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
|
||||
<div class="h-1.5 w-1.5 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 929 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 929 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 929 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 937 KiB |
@ -1,87 +0,0 @@
|
||||
const admin_chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const protocol = window.location.protocol === "https:" ? "https" : "http";
|
||||
const admin_chat_domain = "osina.ositcom.com";
|
||||
let chatWebSocket;
|
||||
const userId = document.getElementById('userId').textContent.trim();
|
||||
|
||||
|
||||
function handleChatRoomClick(event) {
|
||||
const sessionId = event.currentTarget.getAttribute('data-session');
|
||||
const chatId = event.currentTarget.getAttribute('data-chatid');
|
||||
if (sessionId && chatId) {
|
||||
openConversation(sessionId, chatId);
|
||||
} else {
|
||||
console.error('Session ID not found for this chat room.');
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.chat-room').forEach(div => {
|
||||
div.addEventListener('click', handleChatRoomClick);
|
||||
});
|
||||
|
||||
function appendTextAreaScript(domain, conversationContainer) {
|
||||
if (!document.querySelector(`script[src="${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js"]`)) {
|
||||
const textareaScript = document.createElement('script');
|
||||
textareaScript.type = 'text/javascript';
|
||||
textareaScript.src = `${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js`;
|
||||
conversationContainer.appendChild(textareaScript);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function openConversation(sessionid, chatid) {
|
||||
if (chatWebSocket && chatWebSocket.readyState !== WebSocket.CLOSED) { //Close previous sockets
|
||||
chatWebSocket.close();
|
||||
}
|
||||
chatWebSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat-admin/${sessionid}/${chatid}/`);
|
||||
chatWebSocket.onopen = function () {
|
||||
console.log('WebSocket connection to osichat established');
|
||||
chatWebSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_admin' }));
|
||||
};
|
||||
function handleLoadChatEvent(data, chatWebSocket) {
|
||||
let chatDiv = document.getElementById('inner-conversation');
|
||||
chatDiv.innerHTML = data.html;
|
||||
appendTextAreaScript(admin_chat_domain, chatDiv);
|
||||
|
||||
const sendMessageForm = document.querySelector('#sendMessage');
|
||||
sendMessageForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
const message = event.target.elements.message.value;
|
||||
const eventMessage = {
|
||||
'event_type': 'send_message',
|
||||
'message': message,
|
||||
'user_id': userId
|
||||
};
|
||||
|
||||
chatWebSocket.send(JSON.stringify(eventMessage));
|
||||
event.target.reset();
|
||||
});
|
||||
}
|
||||
|
||||
chatWebSocket.onmessage = function (e) {
|
||||
const data = JSON.parse(e.data);
|
||||
switch (data.event_type) {
|
||||
case 'load_chat':
|
||||
handleLoadChatEvent(data, chatWebSocket);
|
||||
break;
|
||||
case 'send_message':
|
||||
const messagesDiv = document.getElementById('messages_container');
|
||||
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
||||
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();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown event type:', data.event_type);
|
||||
}
|
||||
};
|
||||
|
||||
chatWebSocket.onclose = function () {
|
||||
console.log('WebSocket connection to osichat closed');
|
||||
};
|
||||
|
||||
chatWebSocket.onerror = function (error) {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
(function() {
|
||||
function handleChatRoomClick(event) {
|
||||
const sessionId = event.currentTarget.getAttribute('data-session');
|
||||
const chatId = event.currentTarget.getAttribute('data-roomid');
|
||||
if (sessionId && chatId) {
|
||||
openConversation(sessionId, chatId);
|
||||
} else {
|
||||
console.error('Session ID not found for this chat room.');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.querySelectorAll('.chat-room').forEach(div => {
|
||||
div.addEventListener('click', handleChatRoomClick);
|
||||
});
|
||||
|
||||
function appendTextAreaScript(domain, conversationContainer) {
|
||||
if (!document.querySelector(`script[src="${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js"]`)) {
|
||||
const textareaScript = document.createElement('script');
|
||||
textareaScript.type = 'text/javascript';
|
||||
textareaScript.src = `${protocol}://${admin_chat_domain}/static/js/osichat-admin/textarea.js`;
|
||||
conversationContainer.appendChild(textareaScript);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function openConversation(sessionid, chatid) {
|
||||
if (osichatadminroomSocket && osichatadminroomSocket.readyState !== WebSocket.CLOSED) { //Close previous sockets
|
||||
osichatadminroomSocket.close();
|
||||
}
|
||||
osichatadminroomSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat-admin/${sessionid}/${chatid}/`);
|
||||
osichatadminroomSocket.onopen = function () {
|
||||
console.log('WebSocket connection to osichat established');
|
||||
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_admin' }));
|
||||
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
||||
};
|
||||
function handleLoadChatEvent(data, osichatadminroomSocket) {
|
||||
let chatDiv = document.getElementById('widgetRightSide');
|
||||
chatDiv.innerHTML = data.html;
|
||||
appendTextAreaScript(admin_chat_domain, chatDiv);
|
||||
|
||||
const sendMessageForm = document.querySelector('#sendMessage');
|
||||
sendMessageForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
const message = event.target.elements.message.value;
|
||||
const eventMessage = {
|
||||
'event_type': 'send_message',
|
||||
'message': message,
|
||||
'user_id': userId
|
||||
};
|
||||
|
||||
osichatadminroomSocket.send(JSON.stringify(eventMessage));
|
||||
event.target.reset();
|
||||
});
|
||||
}
|
||||
|
||||
osichatadminroomSocket.onmessage = function (e) {
|
||||
const data = JSON.parse(e.data);
|
||||
const typingDiv = document.getElementById('typing');
|
||||
const messagesDiv = document.getElementById('messages_container');
|
||||
switch (data.event_type) {
|
||||
case 'load_chat':
|
||||
handleLoadChatEvent(data, osichatadminroomSocket);
|
||||
break;
|
||||
case 'typing':
|
||||
if(!typingDiv && data.user != userId){
|
||||
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
||||
}
|
||||
break;
|
||||
case 'stopped_typing':
|
||||
if (typingDiv) {
|
||||
typingDiv.remove();
|
||||
}
|
||||
break;
|
||||
case 'send_message':
|
||||
osichatadminroomSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'user_id': userId, 'chat_state': 'open' }));
|
||||
messagesDiv.insertAdjacentHTML('beforeend', data.html);
|
||||
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();
|
||||
if (typingDiv) {
|
||||
typingDiv.remove();
|
||||
}
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown event type:', data.event_type);
|
||||
}
|
||||
};
|
||||
|
||||
osichatadminroomSocket.onclose = function () {
|
||||
console.log('WebSocket connection to osichat closed');
|
||||
};
|
||||
|
||||
osichatadminroomSocket.onerror = function (error) {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
}
|
||||
})();
|
||||
@ -0,0 +1,64 @@
|
||||
let admin_chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
let protocol = window.location.protocol === "https:" ? "https" : "http";
|
||||
let admin_chat_domain = "192.168.1.111:8000";
|
||||
let userId = document.getElementById('userId').textContent.trim();
|
||||
let osichatroomsSocket;
|
||||
let osichatadminroomSocket;
|
||||
|
||||
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 getRooms(){
|
||||
osichatroomsSocket = new WebSocket(`${admin_chat_ws_scheme}://${admin_chat_domain}/ws/osichat/rooms/`);
|
||||
|
||||
osichatroomsSocket.onopen = function () {
|
||||
console.log('WebSocket connection to rooms established');
|
||||
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');
|
||||
switch (data.event_type) {
|
||||
case 'get_chats':
|
||||
leftDiv.innerHTML = data.html;
|
||||
appendInnerConversationScript(leftDiv);
|
||||
break;
|
||||
case 'new_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);
|
||||
|
||||
appendInnerConversationScript(leftDiv);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unknown event type:', data.event_type);
|
||||
}
|
||||
};
|
||||
|
||||
osichatroomsSocket.onclose = function () {
|
||||
console.log('WebSocket connection to rooms closed');
|
||||
};
|
||||
|
||||
osichatroomsSocket.onerror = function (error) {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
}
|
||||
|
||||
getRooms();
|
||||
Loading…
Reference in New Issue