corrade-http-templates – Diff between revs 23 and 43

Subversion Repositories:

?pathlinks?

Rev 23 – Rev 44 – Go to most recent revision – Details – Blame – Last modification – View Log

-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+<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">
-    <title>Corrade Instant Message Template</title>
     <meta name="author" content="Wizardry and Steamworks">
+    <link rel="icon" href="favicon.ico">
+    <link rel="stylesheet" href="css/style.css?v=2.0">
-    <link rel="stylesheet" href="css/fonts.css?v=1.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">&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>
-    <link rel="stylesheet" href="css/style.css?v=2.0">
+        </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 -->
-    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
+    <script src="bower_components/bootstrap-validator/js/validator.js"></script>
-    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <!-- Include Velocity -->
-    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
+    <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();
+            var tabs = $("#tabs").tabs()
             // 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() {
             // 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()
-                    $("#chat-" + index).html(data);
+                    }, 1000);*/
                     // Scroll to the bottom of the conversation.
                     $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight);
                     messageIntervals[index] = setTimeout(
                         loadInstantMessage,
             );
         });
-    </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>
     </script>
 </body>