corrade-http-templates – Rev 43
?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">
<link rel="stylesheet" href="css/style.css?v=2.0">
<!-- 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">
<!-- <link rel="stylesheet" href="css/style.css?v=1.3"> -->
</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>
<h4 class="modal-title">Enter Agent Name</h4>
</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 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> -->
<div class="container">
<form role="form" data-toggle="validator">
<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="button" id="add_tab" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Tab</button>
</span>
</div>
</div>
</form>
<!-- This div holds the tabs that will be created. This structure should not be deleted. -->
<!-- <ul class="nav nav-tabs" role="tablist" id="tabs">
</ul> -->
<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' role='presentation'>Remove Tab</span></li>",
tabCounter = 0,
messageIntervals = {},
getConversationsTimeout;
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();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
form[0].reset();
}
});
// 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");
});*/
$("#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: 'hide'
}, 'slow');
$.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: '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);*/
// 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 + "'><p>" + " \
<div id='container-" + tabCounter + "'> \
<textarea readonly='readonly' 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> \
" + "</p></div>");
tabs.tabs("refresh");
// 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.