corrade-http-templates – Diff between revs 23 and 43
?pathlinks?
Rev 23 | Rev 43 | |||
---|---|---|---|---|
Line 1... | Line 1... | |||
1 | <!doctype html> |
1 | <!DOCTYPE html> |
|
2 | <html lang="en"> |
2 | <html lang="en"> |
|
Line 3... | Line 3... | |||
3 | |
3 | |
|
4 | <head> |
- | ||
5 | <meta charset="utf-8"> |
- | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
4 | <head> |
|
Line -... | Line 5... | |||
- | 5 | <title>Corrade Instant Message Template</title> |
||
- | 6 | |
||
- | 7 | <meta charset="utf-8"> |
||
- | 8 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||
- | 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
- | 10 | <meta name="description" content="Group Chat Relay using Corrade"> |
||
Line 7... | Line -... | |||
7 | <title>Corrade Instant Message Template</title> |
- | ||
8 | |
11 | <meta name="author" content="Wizardry and Steamworks"> |
|
Line -... | Line 12... | |||
- | 12 | <link rel="icon" href="favicon.ico"> |
||
- | 13 | |
||
- | 14 | <link rel="stylesheet" href="css/style.css?v=2.0"> |
||
9 | |
15 | |
|
10 | <link rel="stylesheet" href="css/fonts.css?v=1.0"> |
16 | <!-- Bootstrap core CSS --> |
|
- | 17 | <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
||
- | 18 | <!-- jQuery UI CSS --> |
||
- | 19 | <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> |
||
- | 20 | <!-- <link rel="stylesheet" href="css/style.css?v=1.3"> --> |
||
- | 21 | </head> |
||
- | 22 | |
||
- | 23 | <body> |
||
- | 24 | |
||
- | 25 | <!-- Modal --> |
||
- | 26 | <div id="dialog" class="modal fade" role="dialog"> |
||
- | 27 | <div class="modal-dialog"> |
||
- | 28 | |
||
- | 29 | <!-- Modal content--> |
||
- | 30 | <div class="modal-content"> |
||
- | 31 | <div class="modal-header"> |
||
- | 32 | <button type="button" class="close" data-dismiss="modal">×</button> |
||
- | 33 | <h4 class="modal-title">Enter Agent Name</h4> |
||
- | 34 | </div> |
||
- | 35 | <form role="form" data-toggle="validator" class="form-inline"> |
||
- | 36 | <div class="modal-body"> |
||
- | 37 | |
||
- | 38 | <div class="form-group"> |
||
- | 39 | <div class="input-group"> |
||
- | 40 | <label for="firstname">First Name</label> |
||
- | 41 | <input class="form-control" maxlength="8" type="text" id="firstname" placeholder="Corrade" required> |
||
- | 42 | </div> |
||
- | 43 | <div class="input-group"> |
||
- | 44 | <label for="lastname">Last Name</label> |
||
- | 45 | <input class="form-control" maxlength="8" type="text" id="lastname" placeholder="Resident" required> |
||
- | 46 | </div> |
||
- | 47 | </div> |
||
- | 48 | |
||
- | 49 | |
||
- | 50 | </div> |
||
- | 51 | <div class="modal-footer"> |
||
- | 52 | <button type="button" id="startConversation" class="btn btn-primary btn-lg"> |
||
- | 53 | <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start |
||
- | 54 | </button> |
||
- | 55 | <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
||
- | 56 | </div> |
||
- | 57 | </form> |
||
- | 58 | </div> |
||
- | 59 | |
||
- | 60 | </div> |
||
- | 61 | </div> |
||
- | 62 | |
||
- | 63 | <!-- <div id="dialog" title="Agent Name"> |
||
- | 64 | <form> |
||
- | 65 | <fieldset class="ui-helper-reset"> |
||
- | 66 | <label for="firstname">Firstname</label> |
||
- | 67 | <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"> |
||
- | 68 | <label for="lastname">Lastname</label> |
||
- | 69 | <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"> |
||
- | 70 | </fieldset> |
||
11 | <link rel="stylesheet" href="css/style.css?v=2.0"> |
71 | </form> |
|
- | 72 | </div> --> |
||
- | 73 | |
||
- | 74 | <!-- <p> |
||
- | 75 | Your name: <input type="text" size="8" value="Someone" id="name"></input> |
||
- | 76 | <button id="add_tab">New Conversation</button> |
||
- | 77 | </p> --> |
||
- | 78 | |
||
- | 79 | <div class="container"> |
||
- | 80 | <form role="form" data-toggle="validator"> |
||
- | 81 | <div class="form-group row"> |
||
- | 82 | <div class="input-group"> |
||
- | 83 | <span class="input-group-addon"> |
||
- | 84 | <label for="name">Your Name</label> |
||
- | 85 | </span> |
||
- | 86 | <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
||
- | 87 | <span class="input-group-btn"> |
||
- | 88 | <button type="button" id="add_tab" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Tab</button> |
||
- | 89 | </span> |
||
- | 90 | </div> |
||
- | 91 | </div> |
||
- | 92 | </form> |
||
- | 93 | |
||
- | 94 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
||
- | 95 | <!-- <ul class="nav nav-tabs" role="tablist" id="tabs"> |
||
- | 96 | </ul> --> |
||
- | 97 | <div id="tabs"> |
||
Line -... | Line 98... | |||
- | 98 | <ul> |
||
- | 99 | |
||
- | 100 | </ul> |
||
- | 101 | <div> |
||
- | 102 | |
||
- | 103 | </div> |
||
- | 104 | </div> |
||
- | 105 | </div> |
||
- | 106 | |
||
- | 107 | <!-- Include jQuery --> |
||
- | 108 | <script src="bower_components/jquery/dist/jquery.min.js"></script> |
||
- | 109 | <!-- Include jQuery UI --> |
||
- | 110 | <script src="bower_components/jquery-ui/jquery-ui.min.js"></script> |
||
- | 111 | <!-- Include Bootstrap --> |
||
- | 112 | <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
||
12 | |
113 | <!-- Include Bootstrap Validator --> |
|
13 | <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> |
114 | <script src="bower_components/bootstrap-validator/js/validator.js"></script> |
|
14 | <script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
115 | <!-- Include Velocity --> |
|
15 | <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> |
116 | <script src="bower_components/velocity/velocity.min.js"></script> |
|
16 | |
117 | |
|
17 | <script> |
118 | <script> |
|
18 | $(function() { |
119 | $(function() { |
|
19 | var firstName = $("#firstname"), |
120 | var firstName = $("#firstname"), |
|
Line 20... | Line 121... | |||
20 | lastName = $("#lastname"), |
121 | lastName = $("#lastname"), |
|
Line 21... | Line 122... | |||
21 | tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", |
122 | tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", |
|
22 | tabCounter = 0, |
123 | tabCounter = 0, |
|
23 | messageIntervals = {}, |
124 | messageIntervals = {}, |
|
24 | getConversationsTimeout; |
125 | getConversationsTimeout; |
|
25 | |
126 | |
|
26 | var tabs = $("#tabs").tabs(); |
127 | var tabs = $("#tabs").tabs() |
|
27 | |
128 | |
|
Line 53... | Line 154... | |||
53 | // The add tab button just opens the dialog and prompts for the avatar name. |
154 | // The add tab button just opens the dialog and prompts for the avatar name. |
|
54 | $("#add_tab") |
155 | $("#add_tab") |
|
55 | .button() |
156 | .button() |
|
56 | .on("click", function() { |
157 | .on("click", function() { |
|
57 | dialog.dialog("open"); |
158 | dialog.dialog("open"); |
|
- | 159 | });*/ |
||
- | 160 | |
||
- | 161 | $("#startConversation") |
||
- | 162 | .on("click", function() { |
||
- | 163 | addTab(); |
||
- | 164 | $("#dialog").modal('hide'); |
||
58 | }); |
165 | }); |
|
Line 59... | Line 166... | |||
59 | |
166 | |
|
60 | // Request the active conversations from the backend script and create tabs. |
167 | // Request the active conversations from the backend script and create tabs. |
|
61 | function getConversations() { |
168 | function getConversations() { |
|
Line 104... | Line 211... | |||
104 | |
211 | |
|
105 | // Loads all the stored instant messages from the log file named after the avatar. |
212 | // Loads all the stored instant messages from the log file named after the avatar. |
|
106 | function loadInstantMessage(index) { |
213 | function loadInstantMessage(index) { |
|
107 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
214 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
|
- | 215 | $("#chat-" + index).html(data); |
||
- | 216 | /*$("#chat-" + index).animate({ |
||
- | 217 | scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height() |
||
108 | $("#chat-" + index).html(data); |
218 | }, 1000);*/ |
|
109 | // Scroll to the bottom of the conversation. |
219 | // Scroll to the bottom of the conversation. |
|
110 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
220 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
|
111 | messageIntervals[index] = setTimeout( |
221 | messageIntervals[index] = setTimeout( |
|
112 | loadInstantMessage, |
222 | loadInstantMessage, |
|
Line 227... | Line 337... | |||
227 | 1000 |
337 | 1000 |
|
228 | ); |
338 | ); |
|
Line 229... | Line 339... | |||
229 | |
339 | |
|
230 | }); |
340 | }); |
|
231 | </script> |
- | ||
232 | </head> |
- | ||
233 | |
- | ||
234 | <body> |
- | ||
235 | |
- | ||
236 | <div id="dialog" title="Agent Name"> |
- | ||
237 | <form> |
- | ||
238 | <fieldset class="ui-helper-reset"> |
- | ||
239 | <label for="firstname">Firstname</label> |
- | ||
240 | <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"> |
- | ||
241 | <label for="lastname">Lastname</label> |
- | ||
242 | <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"> |
- | ||
243 | </fieldset> |
- | ||
244 | </form> |
- | ||
245 | </div> |
- | ||
246 | |
- | ||
247 | <p> |
- | ||
248 | Your name: <input type="text" size="8" value="Someone" id="name"></input> |
- | ||
249 | <button id="add_tab">New Conversation</button> |
- | ||
250 | </p> |
- | ||
251 | |
- | ||
252 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
- | ||
253 | <div id="tabs"> |
- | ||
254 | <ul> |
- | ||
255 | |
- | ||
256 | </ul> |
- | ||
257 | <div> |
- | ||
258 | |
- | ||
259 | </div> |
- | ||
260 | </div> |
- | ||
261 | |
341 | </script> |
|
Line 262... | Line 342... | |||
262 | </body> |
342 | </body> |
|
263 | |
343 | |