377 lines
16 KiB
PHTML
Executable File
377 lines
16 KiB
PHTML
Executable File
<link href="<?php echo $block->getAssetUrl('IpSupply_ChatMessage::css/chatWidget.css'); ?>" type="text/css" rel="stylesheet" />
|
|
|
|
<?php $customerInfo = $block->getCustomerInfo(); ?>
|
|
|
|
<body>
|
|
<div class="prology-chat">
|
|
<div class="prology-chat__wrapper">
|
|
<div class="prology-chat__header">
|
|
<div class="prology-chat__header-brand"><img src="<?php echo $this->getViewFileUrl('IpSupply_ChatMessage::images/prology_icon.png'); ?>">
|
|
</div>
|
|
<div class="prology-chat__header-label">
|
|
<div class="prology-chat__header-label-main">
|
|
<h3>Support Team</h3>
|
|
</div>
|
|
<div class="prology-chat__header-label-sub">
|
|
<h4>Online 24/7</h4>
|
|
</div>
|
|
</div>
|
|
<div class="prology-chat__header-minimizer" onclick="showHideChatContent()"></div>
|
|
</div>
|
|
|
|
<div class="prology-chat__content <?= $customerInfo["logged"] == True ? '' : 'not-logged' ?>">
|
|
<div class="prology-chat__content-auth"><img src="<?php echo $this->getViewFileUrl('IpSupply_ChatMessage::images/prology_icon.png'); ?>">
|
|
<div class="prology-chat__content-welcome">
|
|
<h3>Chat with Prology</h3>
|
|
<h4>Hello, How can we help you?</h4>
|
|
</div>
|
|
<div class="prology-chat__content-not-logged-button">
|
|
<button class="btn" onclick="openLoginPage()">Login</button>
|
|
<button class="btn" onclick="openRegisterPage()">Register</button>
|
|
</div>
|
|
</div>
|
|
<div class="prology-chat__content-view">
|
|
<div class="prology-chat__content-view-wrapper">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prology-chat__control">
|
|
<form>
|
|
<input id="input-chat" placeholder="Type something">
|
|
<button id="submit-message">
|
|
<img src="<?= $this->getViewFileUrl('IpSupply_ChatMessage::images/send_icon.png'); ?>">
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="prology-chat__footer">
|
|
<div class="prology-chat__footer-brand"><img src="<?php echo $this->getViewFileUrl('IpSupply_ChatMessage::images/prology_icon.png'); ?>"></div>
|
|
<div class="prology-chat__footer-powered">
|
|
<p>Powered by Prology</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="prology-chat-icon">
|
|
<img id="prology-show-hide-content" src="<?php echo $this->getViewFileUrl('IpSupply_ChatMessage::images/prology_icon.png'); ?>" onclick="showHideChatContent()" >
|
|
<span id="prology-livechat-label">Live chat</span>
|
|
<span id="number-unread"></span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var myID = 8;
|
|
var topic;
|
|
var logged = false;
|
|
var contentState = "hidden";
|
|
var messages = [];
|
|
var monthCharacter = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
var loginPageUrl = "<?= $block->getBaseUrl(); ?>customer/account/login/";
|
|
var registerPageUrl = "<?= $block->getBaseUrl(); ?>customer/account/create/";
|
|
const audio = new Audio("<?= $this->getViewFileUrl('IpSupply_ChatMessage::audio/new-message-notify.mp3'); ?>");
|
|
|
|
var input = document.getElementById("input-chat");
|
|
// Execute a function submitChat when the user presses a key on the keyboard
|
|
if (input != null) {
|
|
input.addEventListener("keypress", function(event) {
|
|
// If the user presses the "Enter" key on the keyboard
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
submitChat()
|
|
}
|
|
});
|
|
}
|
|
|
|
var submitButton = document.getElementById("submit-message");
|
|
// Execute a function submitChat when the user click button send
|
|
if (submitButton != null) {
|
|
submitButton.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
submitChat();
|
|
});
|
|
}
|
|
|
|
function checkUserLogged() {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>chatmessage/api/register";
|
|
request.open("GET", destination);
|
|
|
|
request.onreadystatechange = function() {
|
|
if(this.readyState === 4 && this.status === 200) {
|
|
if (this.responseText != null && this.responseText != "") {
|
|
let response = JSON.parse(this.responseText);
|
|
localStorage.setItem("zulipTopic", response);
|
|
logged = true;
|
|
topic = response;
|
|
getChatUnRead();
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
request.send();
|
|
}
|
|
|
|
function openLoginPage() {
|
|
let width = 500;
|
|
let height = 500;
|
|
let marginLeft = (screen.width/2) - (width/2);
|
|
let marginTop = (screen.height/2) - (height/2);
|
|
let subWindow = window.open(loginPageUrl, 'login', 'location=yes, height=500, width=500, top='+marginTop+', left='+marginLeft);
|
|
|
|
// function call when sub-window redirect to another url
|
|
// that's mean login success or fail
|
|
subWindow.onbeforeunload = function () {
|
|
checkInterval = setInterval(function() {
|
|
if (subWindow.location.href != loginPageUrl) {
|
|
subWindow.close();
|
|
window.location.reload();
|
|
clearInterval(checkInterval);
|
|
}
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
function openRegisterPage() {
|
|
let width = 500;
|
|
let height = 600;
|
|
let marginLeft = (screen.width/2) - (width/2);
|
|
let marginTop = (screen.height/2) - (height/2);
|
|
let subWindow = window.open(registerPageUrl, 'register', 'location=yes, height=600, width=500, top='+marginTop+', left='+marginLeft);
|
|
|
|
// function call when sub-window redirect to another url
|
|
// that's mean login success or fail
|
|
subWindow.onbeforeunload = function () {
|
|
checkInterval = setInterval(function() {
|
|
if (subWindow.location.href != registerPageUrl) {
|
|
subWindow.close();
|
|
window.location.reload();
|
|
clearInterval(checkInterval);
|
|
}
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
function renderChatContent() {
|
|
let chatFrame = document.getElementsByClassName('prology-chat__content-view')[0];
|
|
let objChat = document.getElementsByClassName("prology-chat__content-view-wrapper")[0];
|
|
let now = new Date();
|
|
let time = new Date(0);
|
|
let chatContent = "";
|
|
for (let i = 0; i < messages.length; i++) {
|
|
|
|
let message_timestamp = new Date(parseInt(messages[i]["timestamp"]) * 1000);
|
|
if (time.toDateString() != message_timestamp.toDateString()) {
|
|
time = message_timestamp;
|
|
if (time.toDateString() == now.toDateString()) {
|
|
chatContent += "<div class='time'><span>Today</span></div>";
|
|
}
|
|
else {
|
|
let format_date = monthCharacter[time.getMonth()] + " " + time.getDate() + ", " + time.getFullYear();
|
|
chatContent += "<div class='time'><span>" + format_date + "</span></div>";
|
|
}
|
|
}
|
|
|
|
// let message_format_time = message_timestamp.getHours().toString().padStart(2, '0')+":"
|
|
// +message_timestamp.getMinutes().toString().padStart(2, '0')+":"
|
|
// +message_timestamp.getSeconds().toString().padStart(2, '0');
|
|
let message_format_time = message_timestamp.getHours().toString().padStart(2, '0')+":"
|
|
+message_timestamp.getMinutes().toString().padStart(2, '0');
|
|
if (messages[i]["sender_id"] == myID) {
|
|
chatContent += "<div class='owner'><span class='time'>"+message_format_time+"</span><p><span class='content'>"+messages[i]['content']+"</span></p></div>";
|
|
}
|
|
else {
|
|
chatContent += "<div class='client'><span class='time'>"+message_format_time+"</span><p><span class='content'>"+messages[i]['content']+"</span></p></div>";
|
|
}
|
|
}
|
|
objChat.innerHTML = chatContent;
|
|
chatFrame.scrollTop = chatFrame.scrollHeight;
|
|
}
|
|
|
|
function getChatUnRead() {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/get-message-unread?topic=" + topic;
|
|
request.open("GET", destination);
|
|
|
|
request.onreadystatechange = function() {
|
|
if(this.readyState === 4 && this.status === 200) {
|
|
let response = JSON.parse(this.responseText);
|
|
let messageUnRead = response["messages"].length;
|
|
if(messageUnRead != 0) {
|
|
document.getElementById("number-unread").style.display = "inline-block";
|
|
document.getElementById("number-unread").innerHTML = messageUnRead;
|
|
}
|
|
registerQueue();
|
|
getChatContent();
|
|
}
|
|
};
|
|
|
|
request.send();
|
|
}
|
|
|
|
function getChatContent() {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/get-message?topic=" + topic;
|
|
request.open("GET", destination);
|
|
|
|
request.onreadystatechange = function() {
|
|
if(this.readyState === 4 && this.status === 200) {
|
|
let response = JSON.parse(this.responseText);
|
|
let newMessages = [];
|
|
listMessage = response["messages"];
|
|
for (let i = 0; i < listMessage.length; i++) {
|
|
let content = listMessage[i]["content"];
|
|
let message = {
|
|
"id": listMessage[i]["id"],
|
|
"sender_id": listMessage[i]["sender_id"],
|
|
"content": listMessage[i]["content"],
|
|
"timestamp": listMessage[i]["timestamp"],
|
|
}
|
|
newMessages.push(message);
|
|
}
|
|
messages = newMessages;
|
|
renderChatContent();
|
|
}
|
|
};
|
|
|
|
request.send();
|
|
}
|
|
|
|
function registerQueue() {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/register-queue";
|
|
request.open("POST", destination);
|
|
|
|
request.onreadystatechange = function() {
|
|
if(this.readyState === 4 && this.status === 200) {
|
|
let response = JSON.parse(this.responseText);
|
|
let queue_id = response["queue_id"];
|
|
localStorage.setItem("queue_id", queue_id);
|
|
localStorage.setItem("last_event_id", -1);
|
|
listenMessage();
|
|
}
|
|
};
|
|
|
|
let formData = new FormData();
|
|
formData.append("topic", topic);
|
|
|
|
request.send(formData);
|
|
}
|
|
|
|
function listenMessage() {
|
|
let queue_id = localStorage.getItem("queue_id");
|
|
let last_event_id = localStorage.getItem("last_event_id");
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/listen-message?queue_id=" + queue_id + "&last_event_id=" + last_event_id;
|
|
request.open("GET", destination);
|
|
|
|
request.onreadystatechange = function() {
|
|
if(this.readyState === 4 && this.status === 200) {
|
|
let response = JSON.parse(this.responseText);
|
|
if (response["events"][0]["type"] == "message") {
|
|
let newMessages = response["events"];
|
|
for (var i = 0; i < newMessages.length; i++) {
|
|
let message = newMessages[i];
|
|
if (message["type"] == "message") {
|
|
messages.push({
|
|
"id": message["message"]["id"],
|
|
"sender_id": message["message"]["sender_id"],
|
|
"content": message["message"]["content"],
|
|
"timestamp": message["message"]["timestamp"],
|
|
});
|
|
}
|
|
}
|
|
|
|
if (contentState == "hidden") {
|
|
let numberNewMessages = newMessages.length;
|
|
let currentUnRead = document.getElementById("number-unread").textContent != ''
|
|
? document.getElementById("number-unread").textContent : 0;
|
|
let totalUnRead = parseInt(currentUnRead) + numberNewMessages;
|
|
document.getElementById("number-unread").style.display = "inline-block";
|
|
document.getElementById("number-unread").innerHTML = totalUnRead;
|
|
audio.autoplay = true;
|
|
audio.play();
|
|
}
|
|
else {
|
|
// call function to mark all message in topic as read
|
|
markMessageAsRead();
|
|
}
|
|
|
|
let last_event_id = response["events"][newMessages.length - 1]["id"];
|
|
localStorage.setItem("last_event_id", last_event_id);
|
|
renderChatContent();
|
|
listenMessage();
|
|
}
|
|
else {
|
|
// re-call listen message when receive events heartbeat
|
|
let last_event_id = response["events"][response["events"].length - 1]["id"];
|
|
localStorage.setItem("last_event_id", last_event_id);
|
|
listenMessage();
|
|
}
|
|
}
|
|
};
|
|
|
|
request.send();
|
|
}
|
|
|
|
function submitChat() {
|
|
let documentInput = document.getElementById("input-chat");
|
|
if (documentInput.value != "") {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/send-message";
|
|
request.open("POST", destination);
|
|
|
|
let formData = new FormData();
|
|
let chatContent = documentInput.value;
|
|
formData.append("content", chatContent);
|
|
formData.append("topic", topic);
|
|
|
|
request.send(formData);
|
|
documentInput.value = "";
|
|
}
|
|
}
|
|
|
|
function markMessageAsRead() {
|
|
let request = new XMLHttpRequest();
|
|
let destination = "<?= $block->getBaseUrl(); ?>rest/all/V1/client/mark-topic-as-read";
|
|
request.open("POST", destination);
|
|
|
|
let formData = new FormData();
|
|
formData.append("topic", topic);
|
|
|
|
request.send(formData);
|
|
}
|
|
|
|
function showHideChatContent () {
|
|
let chatFrame = document.getElementsByClassName('prology-chat__content-view')[0];
|
|
let chatContent = document.getElementsByClassName("prology-chat__wrapper")[0];
|
|
let objChat = document.getElementsByClassName("prology-chat__content-view-wrapper")[0];
|
|
let unReadContent = document.getElementById("number-unread");
|
|
if (contentState == "hidden") {
|
|
chatContent.style.display = "inline-block";
|
|
contentState = "visible";
|
|
unReadContent.style.display = "none";
|
|
if (logged) {
|
|
unReadContent.innerHTML = "";
|
|
chatFrame.scrollTop = chatFrame.scrollHeight;
|
|
// call function to mark all message in topic as read
|
|
if (messages.length != 0) {
|
|
markMessageAsRead();
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
chatContent.style.display = "none";
|
|
contentState = "hidden";
|
|
}
|
|
}
|
|
|
|
require(['jquery'], function($) {
|
|
checkUserLogged();
|
|
});
|
|
|
|
</script>
|