/instantMessage/instantMessage.html |
@@ -98,71 +98,50 @@ |
|
<script> |
$(function() { |
var firstName = $("#firstname"), |
lastName = $("#lastname"), |
tabTemplate = "<li id='#{id}'> \ |
<a href='#{href}'>#{label}</a> \ |
<span class='ui-icon ui-icon-close'></span> \ |
</li>", |
tabCounter = 0, |
messageIntervals = {}, |
getConversationsTimeout, |
tabs = $("#tabs").tabs(); |
$.get('session.php').then((token) => { |
var firstName = $("#firstname"), |
lastName = $("#lastname"), |
tabTemplate = "<li id='#{id}'> \ |
<a href='#{href}'>#{label}</a> \ |
<span class='ui-icon ui-icon-close'></span> \ |
</li>", |
tabCounter = 0, |
messageIntervals = {}, |
getConversationsTimeout, |
tabs = $("#tabs").tabs(); |
|
$("#startConversation") |
.on("click", function() { |
addTab(); |
$("#dialog").modal('hide'); |
}); |
$("#startConversation") |
.on("click", function() { |
addTab(); |
$("#dialog").modal('hide'); |
}); |
|
// Request the active conversations from the backend script and create tabs. |
function getConversations() { |
$.get("getConversations.php?t=" + Math.random(), function(data) { |
var json = $.parseJSON(data); |
$.each(json, function(index, avatar) { |
if (!conversationExists(avatar.firstname, avatar.lastname)) |
addTab(avatar.firstname, avatar.lastname); |
// Request the active conversations from the backend script and create tabs. |
function getConversations() { |
$.get("getConversations.php?t=" + Math.random(), function(data) { |
var json = $.parseJSON(data); |
$.each(json, function(index, avatar) { |
if (!conversationExists(avatar.firstname, avatar.lastname)) |
addTab(avatar.firstname, avatar.lastname); |
}); |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
); |
}); |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
); |
}); |
} |
} |
|
// Function to send the message to an agent by passing it back through PHP. |
function sendInstantMessage(e) { |
var index = e.data.index; |
// If the parameters are empty, then do not send anything to the PHP script. |
if($.trim($("#firstname-" + index).val()) == '' || |
$.trim($("#lastname-" + index).val()) == '' || |
$.trim($("#message-" + index).val()) == '') |
return; |
$("#controls-" + index).animate( |
{ |
opacity: 0 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
$.ajax({ |
type: 'post', |
url: "sendInstantMessage.php", |
data: { |
name: $("#name").val(), |
firstname: $("#firstname-" + index).val(), |
lastname: $("#lastname-" + index).val(), |
message: $("#message-" + index).val() |
} |
}).done(function(data) { |
if(data) |
alert(data); |
$("#message-" + index).val(""); |
// Function to send the message to an agent by passing it back through PHP. |
function sendInstantMessage(e) { |
var index = e.data.index; |
// If the parameters are empty, then do not send anything to the PHP script. |
if($.trim($("#firstname-" + index).val()) == '' || |
$.trim($("#lastname-" + index).val()) == '' || |
$.trim($("#message-" + index).val()) == '') |
return; |
$("#controls-" + index).animate( |
{ |
opacity: 1 |
opacity: 0 |
}, |
{ |
duration: 1000, |
@@ -169,148 +148,170 @@ |
easing: "linear" |
} |
); |
}); |
} |
$.ajax({ |
type: 'post', |
url: "sendInstantMessage.php", |
data: { |
name: $("#name").val(), |
firstname: $("#firstname-" + index).val(), |
lastname: $("#lastname-" + index).val(), |
message: $("#message-" + index).val() |
} |
}).done(function(data) { |
if(data) |
alert(data); |
$("#message-" + index).val(""); |
$("#controls-" + index).animate( |
{ |
opacity: 1 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
}); |
} |
|
// Loads all the stored instant messages from the log file named after the avatar. |
function loadInstantMessage(index) { |
$.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
$("#chat-" + index).html(data); |
// Scroll to the bottom of the conversation. |
$("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
messageIntervals[index] = setTimeout( |
loadInstantMessage, |
1000, |
index |
); |
}); |
} |
// Loads all the stored instant messages from the log file named after the avatar. |
function loadInstantMessage(index) { |
$.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
$("#chat-" + index).html(data); |
// Scroll to the bottom of the conversation. |
$("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
messageIntervals[index] = setTimeout( |
loadInstantMessage, |
1000, |
index |
); |
}); |
} |
|
// This function checks whether a conversation / tab already exists. |
function conversationExists(firstName, lastName) { |
var exists = false; |
for (var i = tabCounter; i >= 0; --i) { |
if ($("#firstname-" + i).length && |
$("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
$("#lastname-" + i).length && |
$("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
exists = true; |
break; |
// This function checks whether a conversation / tab already exists. |
function conversationExists(firstName, lastName) { |
var exists = false; |
for (var i = tabCounter; i >= 0; --i) { |
if ($("#firstname-" + i).length && |
$("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
$("#lastname-" + i).length && |
$("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
exists = true; |
break; |
} |
} |
return exists; |
} |
return exists; |
} |
|
// Adds a new tab in case a conversation with that agent does not exist. |
function addTab(first, last) { |
var first = typeof first !== 'undefined' ? first : firstName.val(); |
var last = typeof last !== 'undefined' ? last : lastName.val(); |
// Adds a new tab in case a conversation with that agent does not exist. |
function addTab(first, last) { |
var first = typeof first !== 'undefined' ? first : firstName.val(); |
var last = typeof last !== 'undefined' ? last : lastName.val(); |
|
// A conversation with that agent exists, so just do nothing. |
if (conversationExists(first, last)) |
return; |
// A conversation with that agent exists, so just do nothing. |
if (conversationExists(first, last)) |
return; |
|
// Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
first = first.charAt(0).toUpperCase() + first.substr(1); |
last = last.charAt(0).toUpperCase() + last.substr(1); |
// Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
first = first.charAt(0).toUpperCase() + first.substr(1); |
last = last.charAt(0).toUpperCase() + last.substr(1); |
|
// Build the discussion form and add the tab. |
var label = first + " " + last, |
id = "tabs-" + tabCounter, |
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
// Build the discussion form and add the tab. |
var label = first + " " + last, |
id = "tabs-" + tabCounter, |
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
|
tabs.find(".ui-tabs-nav").append(li); |
tabs.append("<div id='" + id + "'>"+ " \ |
<div id='container-" + tabCounter + "'> \ |
<form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
<div class='form-group row'> \ |
<textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
</div> \ |
<div id='controls-" + tabCounter + "' class='form-group row'> \ |
<div class='col-lg-1'> \ |
<div class='input-group'> \ |
<span class='input-group-addon'> \ |
<label for='message-" + tabCounter + "'>Message</label> \ |
</span> \ |
<input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
<span class='input-group-btn' style='font-size: inherit;'> \ |
<button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
</span> \ |
tabs.find(".ui-tabs-nav").append(li); |
tabs.append("<div id='" + id + "'>"+ " \ |
<div id='container-" + tabCounter + "'> \ |
<form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
<div class='form-group row'> \ |
<textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
</div> \ |
<div id='controls-" + tabCounter + "' class='form-group row'> \ |
<div class='col-lg-1'> \ |
<div class='input-group'> \ |
<span class='input-group-addon'> \ |
<label for='message-" + tabCounter + "'>Message</label> \ |
</span> \ |
<input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
<span class='input-group-btn' style='font-size: inherit;'> \ |
<button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
</span> \ |
</div> \ |
</div> \ |
</div> \ |
</div> \ |
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
</form> \ |
</div> \ |
</div>"); |
tabs.tabs("refresh"); |
$("#form-" + tabCounter).validator(); |
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
</form> \ |
</div> \ |
</div>"); |
tabs.tabs("refresh"); |
$("#form-" + tabCounter).validator(); |
|
// Subscribe to click event to send the instant message. |
$("#send-" + tabCounter).on("click", { |
index: tabCounter |
}, sendInstantMessage); |
// Subscribe to click event to send the instant message. |
$("#send-" + tabCounter).on("click", { |
index: tabCounter |
}, sendInstantMessage); |
|
// Subscribe to pressing enter with the message input box selected. |
$("#message-" + tabCounter).keypress({ |
index: tabCounter |
}, function(e) { |
if (e.which == 13) { |
sendInstantMessage(e); |
return false; |
} |
// Subscribe to pressing enter with the message input box selected. |
$("#message-" + tabCounter).keypress({ |
index: tabCounter |
}, function(e) { |
if (e.which == 13) { |
sendInstantMessage(e); |
return false; |
} |
}); |
|
++tabCounter; |
} |
|
// Close icon: removing the tab on click and delete the conversation. |
tabs.on("click", "span.ui-icon-close", function() { |
var panelId = $(this).closest("li").remove().attr("aria-controls"); |
var selectedIndex = $(this).closest("li").remove().attr("id"); |
// Pause the conversation retrieval timer. |
clearTimeout(getConversationsTimeout); |
$.ajax({ |
type: 'post', |
url: "deleteConversation.php", |
data: { |
firstname: $("#firstname-" + selectedIndex).val(), |
lastname: $("#lastname-" + selectedIndex).val() |
} |
}).done(function(data) { |
$("#" + panelId).remove(); |
tabs.tabs("refresh"); |
// Resume the conversation retrieval timer. |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
); |
}); |
}); |
|
++tabCounter; |
} |
// Unbind the message retrieval interval from all other tabs except the active tab. |
tabs.on('tabsactivate', function(event, ui) { |
var selectedIndex = ui.newTab.closest("li").attr("id"); |
$.each(messageIntervals, function(index, value) { |
if (index != selectedIndex) { |
clearInterval(value); |
} |
}); |
|
// Close icon: removing the tab on click and delete the conversation. |
tabs.on("click", "span.ui-icon-close", function() { |
var panelId = $(this).closest("li").remove().attr("aria-controls"); |
var selectedIndex = $(this).closest("li").remove().attr("id"); |
// Pause the conversation retrieval timer. |
clearTimeout(getConversationsTimeout); |
$.ajax({ |
type: 'post', |
url: "deleteConversation.php", |
data: { |
firstname: $("#firstname-" + selectedIndex).val(), |
lastname: $("#lastname-" + selectedIndex).val() |
} |
}).done(function(data) { |
$("#" + panelId).remove(); |
tabs.tabs("refresh"); |
// Resume the conversation retrieval timer. |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
messageIntervals[selectedIndex] = setTimeout( |
loadInstantMessage, |
1000, |
selectedIndex |
); |
}); |
}); |
|
// Unbind the message retrieval interval from all other tabs except the active tab. |
tabs.on('tabsactivate', function(event, ui) { |
var selectedIndex = ui.newTab.closest("li").attr("id"); |
$.each(messageIntervals, function(index, value) { |
if (index != selectedIndex) { |
clearInterval(value); |
} |
}); |
|
messageIntervals[selectedIndex] = setTimeout( |
loadInstantMessage, |
1000, |
selectedIndex |
// Start a timer to load tabs of existing conversations. |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
); |
}); |
|
// Start a timer to load tabs of existing conversations. |
getConversationsTimeout = setTimeout( |
getConversations, |
1000 |
); |
|
}); |
</script> |
</body> |