corrade-http-templates

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 42  →  ?path2? @ 43
/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">&times;</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>