corrade-http-templates

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 49  →  ?path2? @ 50
/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>
/instantMessage/sendInstantMessage.php
@@ -18,6 +18,13 @@
## INTERNALS ##
###########################################################################
 
# CRSF.
session_start();
if (empty($_POST['token']) || !hash_equals($_SESSION['token'], $_POST['token'])) {
http_response_code(403);
die('Forbidden.');
}
 
# Check that we have all the necessary variables.
if(!isset($_POST['message']) ||
empty($_POST['message']) ||
/instantMessage/session.php
@@ -0,0 +1,18 @@
<?php
 
###########################################################################
## Copyright (C) Wizardry and Steamworks 2017 - License: GNU GPLv3 ##
###########################################################################
 
session_start();
 
if (empty($_SESSION['token'])) {
if (function_exists('mcrypt_create_iv')) {
$_SESSION['token'] = bin2hex(mcrypt_create_iv(32, MCRYPT_DEV_URANDOM));
} else {
$_SESSION['token'] = bin2hex(openssl_random_pseudo_bytes(32));
}
}
 
echo $_SESSION['token'];