corrade-http-templates

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ HEAD  →  ?path2? @ 1
/instantMessage/instantMessage.html
@@ -1,319 +1,252 @@
<!DOCTYPE html>
<!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="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery UI CSS -->
<link href="node_modules/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link rel="stylesheet" href="css/style.css?v=1.3">
</head>
 
<body>
<title>Corrade Instant Message Template</title>
<!-- 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">&times;</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="63" type="text" id="firstname" placeholder="Corrade" required>
</div>
<div class="input-group">
<label for="lastname">Last Name</label>
<input class="form-control" maxlength="63" 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>
<link rel="stylesheet" href="css/fonts.css?v=1.0">
<link rel="stylesheet" href="css/style.css?v=1.9">
 
</div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
 
<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="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Include jQuery UI -->
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
<!-- Include Bootstrap and Validator -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/bootstrap-validator/js/validator.js"></script>
<!-- Include Velocity -->
<script src="node_modules/velocity-animate/velocity.min.js"></script>
<script>
$(function() {
$.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();
var firstName = $("#firstname"),
lastName = $("#lastname"),
tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 0,
messageIntervals = {},
getConversationsTimer;
 
$("#startConversation")
.on("click", function() {
var tabs = $("#tabs").tabs();
 
// Custom buttons and a "close" callback resetting the form inside.
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: 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
);
});
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
form[0].reset();
}
});
 
// 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(),
token: token
}
}).done(function(data) {
if(data)
alert(data);
$("#message-" + index).val("");
$("#controls-" + index).animate(
{
opacity: 1
},
{
duration: 1000,
easing: "linear"
}
);
});
}
// Calls addTab function on submit and closes the dialog.
var form = dialog.find("form").on("submit", function(event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// The add tab button just opens the dialog and prompts for the avatar name.
$("#add_tab")
.button()
.on("click", function() {
dialog.dialog("open");
});
 
// 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
);
// 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);
});
}
});
}
 
// 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;
}
// Function to send the message to an agent by passing it back through PHP.
function sendInstantMessage(e) {
var index = e.data.index;
$("#controls-" + index).animate({
opacity: 'hide'
}, 'slow');
$.ajax({
type: 'post',
url: "sendInstantMessage.php",
data: {
name: $("#name").val(),
firstname: $("#firstname-" + index).val(),
lastname: $("#lastname-" + index).val(),
message: $("#message-" + index).val()
}
return exists;
}).done(function(data) {
if(data)
alert(data);
$("#message-" + index).val("");
$("#controls-" + index).animate({
opacity: 'show'
}, 'slow');
});
}
 
// 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);
});
 
$("#chat-" + index).animate({
scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height()
}, 1000);
}
 
// 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();
// 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> \
</div> \
</div> \
</div> \
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \
</form> \
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + " \
<div id='container-" + tabCounter + "'> \
<textarea id='chat-" + tabCounter + "' rows='12'></textarea><br/> \
<div id='controls-" + tabCounter + "'> \
Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \
<button type='button' id='send-" + tabCounter + "'>Send</button> \
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \
</div> \
</div>");
tabs.tabs("refresh");
$("#form-" + tabCounter).validator();
</div> \
" + "</p></div>");
tabs.tabs("refresh");
 
// 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;
}
});
 
++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(),
token: token
}
}).done(function(data) {
$("#" + panelId).remove();
tabs.tabs("refresh");
// Resume the conversation retrieval timer.
getConversationsTimeout = setTimeout(
getConversations,
1000
);
});
// 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;
}
});
 
// 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);
}
});
++tabCounter;
}
 
messageIntervals[selectedIndex] = setTimeout(
loadInstantMessage,
1000,
selectedIndex
// 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.
clearInterval(getConversationsTimer);
$.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.
getConversationsTimer = setInterval(
getConversations,
1000
);
});
});
 
// Start a timer to load tabs of existing conversations.
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] = setInterval(
loadInstantMessage,
1000,
selectedIndex
);
});
 
// Start a timer to load tabs of existing conversations.
getConversationsTimer = setInterval(
getConversations,
1000
);
 
});
</script>
</head>
 
<body>
<div id="dialog" title="Agent Name">
<form>
<fieldset class="ui-helper-reset">
<label for="firstname">Firstname</label>
<input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all">
<label for="lastname">Lastname</label>
<input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<p>
Your name: <input type="text" size="8" value="Someone" id="name"></input>
<button id="add_tab">New Conversation</button>
</p>
 
<!-- This div holds the tabs that will be created. This structure should not be deleted. -->
<div id="tabs">
<ul>
 
</ul>
<div>
 
</div>
</div>
 
</body>
 
</html>