/instantMessage/instantMessage.html |
@@ -1,19 +1,120 @@ |
<!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"> |
<title>Corrade Instant Message Template</title> |
|
<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/fonts.css?v=1.0"> |
<link rel="stylesheet" href="css/style.css?v=2.0"> |
|
<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> |
<!-- 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"), |
@@ -23,10 +124,10 @@ |
messageIntervals = {}, |
getConversationsTimeout; |
|
var tabs = $("#tabs").tabs(); |
var tabs = $("#tabs").tabs() |
|
// Custom buttons and a "close" callback resetting the form inside. |
var dialog = $("#dialog").dialog({ |
/*var dialog = $("#dialog").dialog({ |
autoOpen: false, |
modal: true, |
buttons: { |
@@ -55,6 +156,12 @@ |
.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. |
@@ -106,6 +213,9 @@ |
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( |
@@ -229,36 +339,6 @@ |
|
}); |
</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> |