corrade-http-templates – Rev 44
?pathlinks?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Corrade Instant Message Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Group Chat Relay using Corrade">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery UI CSS -->
<link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<!-- Modal -->
<div id="dialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Enter Agent Name</h2>
</div>
<form role="form" data-toggle="validator" class="form-inline">
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<label for="firstname">First Name</label>
<input class="form-control" maxlength="8" type="text" id="firstname" placeholder="Corrade" required>
</div>
<div class="input-group">
<label for="lastname">Last Name</label>
<input class="form-control" maxlength="8" type="text" id="lastname" placeholder="Resident" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="startConversation" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<form role="form" data-toggle="validator" action="javascript:return;">
<div class="form-group row">
<div class="input-group">
<span class="input-group-addon">
<label for="name">Your Name</label>
</span>
<input type="text" maxlength="8" value="Someone" id="name" class="form-control" required>
<span class="input-group-btn">
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button>
</span>
</div>
</div>
</form>
<!-- This div holds the tabs that will be created. This structure should not be deleted. -->
<div id="tabs">
<ul>
</ul>
<div>
</div>
</div>
</div>
<!-- Include jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include jQuery UI -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Include Bootstrap -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Include Bootstrap Validator -->
<script src="bower_components/bootstrap-validator/js/validator.js"></script>
<!-- Include Velocity -->
<script src="bower_components/velocity/velocity.min.js"></script>
<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();
$("#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);
});
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("");
$("#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
);
});
}
// 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;
}
// 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;
// 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));
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> \
<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 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
);
});
});
// 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
);
});
</script>
</body>
</html>
Generated by GNU Enscript 1.6.5.90.