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

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 23 Rev 43
1 <!doctype html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3   3  
4 <head> 4 <head>
5 <meta charset="utf-8"> -  
6 <meta name="viewport" content="width=device-width, initial-scale=1"> -  
7 <title>Corrade Instant Message Template</title> 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">
-   11 <meta name="author" content="Wizardry and Steamworks">
8 -  
9   12 <link rel="icon" href="favicon.ico">
-   13  
-   14 <link rel="stylesheet" href="css/style.css?v=2.0">
-   15  
10 <link rel="stylesheet" href="css/fonts.css?v=1.0"> 16 <!-- Bootstrap core CSS -->
11 <link rel="stylesheet" href="css/style.css?v=2.0"> 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">&times;</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>
-   71 </form>
12   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">
-   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>
-   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"),
20 lastName = $("#lastname"), 121 lastName = $("#lastname"),
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  
28 // Custom buttons and a "close" callback resetting the form inside. 129 // Custom buttons and a "close" callback resetting the form inside.
29 var dialog = $("#dialog").dialog({ 130 /*var dialog = $("#dialog").dialog({
30 autoOpen: false, 131 autoOpen: false,
31 modal: true, 132 modal: true,
32 buttons: { 133 buttons: {
33 Add: function() { 134 Add: function() {
34 addTab(); 135 addTab();
35 $(this).dialog("close"); 136 $(this).dialog("close");
36 }, 137 },
37 Cancel: function() { 138 Cancel: function() {
38 $(this).dialog("close"); 139 $(this).dialog("close");
39 } 140 }
40 }, 141 },
41 close: function() { 142 close: function() {
42 form[0].reset(); 143 form[0].reset();
43 } 144 }
44 }); 145 });
45   146  
46 // Calls addTab function on submit and closes the dialog. 147 // Calls addTab function on submit and closes the dialog.
47 var form = dialog.find("form").on("submit", function(event) { 148 var form = dialog.find("form").on("submit", function(event) {
48 addTab(); 149 addTab();
49 dialog.dialog("close"); 150 dialog.dialog("close");
50 event.preventDefault(); 151 event.preventDefault();
51 }); 152 });
52 153
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 });
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() {
62 $.get("getConversations.php?t=" + Math.random(), function(data) { 169 $.get("getConversations.php?t=" + Math.random(), function(data) {
63 var json = $.parseJSON(data); 170 var json = $.parseJSON(data);
64 $.each(json, function(index, avatar) { 171 $.each(json, function(index, avatar) {
65 if (!conversationExists(avatar.firstname, avatar.lastname)) 172 if (!conversationExists(avatar.firstname, avatar.lastname))
66 addTab(avatar.firstname, avatar.lastname); 173 addTab(avatar.firstname, avatar.lastname);
67 }); 174 });
68 getConversationsTimeout = setTimeout( 175 getConversationsTimeout = setTimeout(
69 getConversations, 176 getConversations,
70 1000 177 1000
71 ); 178 );
72 }); 179 });
73 } 180 }
74   181  
75 // Function to send the message to an agent by passing it back through PHP. 182 // Function to send the message to an agent by passing it back through PHP.
76 function sendInstantMessage(e) { 183 function sendInstantMessage(e) {
77 var index = e.data.index; 184 var index = e.data.index;
78 // If the parameters are empty, then do not send anything to the PHP script. 185 // If the parameters are empty, then do not send anything to the PHP script.
79 if($.trim($("#firstname-" + index).val()) == '' || 186 if($.trim($("#firstname-" + index).val()) == '' ||
80 $.trim($("#lastname-" + index).val()) == '' || 187 $.trim($("#lastname-" + index).val()) == '' ||
81 $.trim($("#message-" + index).val()) == '') 188 $.trim($("#message-" + index).val()) == '')
82 return; 189 return;
83 $("#controls-" + index).animate({ 190 $("#controls-" + index).animate({
84 opacity: 'hide' 191 opacity: 'hide'
85 }, 'slow'); 192 }, 'slow');
86 $.ajax({ 193 $.ajax({
87 type: 'post', 194 type: 'post',
88 url: "sendInstantMessage.php", 195 url: "sendInstantMessage.php",
89 data: { 196 data: {
90 name: $("#name").val(), 197 name: $("#name").val(),
91 firstname: $("#firstname-" + index).val(), 198 firstname: $("#firstname-" + index).val(),
92 lastname: $("#lastname-" + index).val(), 199 lastname: $("#lastname-" + index).val(),
93 message: $("#message-" + index).val() 200 message: $("#message-" + index).val()
94 } 201 }
95 }).done(function(data) { 202 }).done(function(data) {
96 if(data) 203 if(data)
97 alert(data); 204 alert(data);
98 $("#message-" + index).val(""); 205 $("#message-" + index).val("");
99 $("#controls-" + index).animate({ 206 $("#controls-" + index).animate({
100 opacity: 'show' 207 opacity: 'show'
101 }, 'slow'); 208 }, 'slow');
102 }); 209 });
103 } 210 }
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) {
108 $("#chat-" + index).html(data); 215 $("#chat-" + index).html(data);
-   216 /*$("#chat-" + index).animate({
-   217 scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height()
-   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,
113 1000, 223 1000,
114 index 224 index
115 ); 225 );
116 }); 226 });
117 } 227 }
118   228  
119 // This function checks whether a conversation / tab already exists. 229 // This function checks whether a conversation / tab already exists.
120 function conversationExists(firstName, lastName) { 230 function conversationExists(firstName, lastName) {
121 var exists = false; 231 var exists = false;
122 for (var i = tabCounter; i >= 0; --i) { 232 for (var i = tabCounter; i >= 0; --i) {
123 if ($("#firstname-" + i).length && 233 if ($("#firstname-" + i).length &&
124 $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && 234 $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() &&
125 $("#lastname-" + i).length && 235 $("#lastname-" + i).length &&
126 $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { 236 $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) {
127 exists = true; 237 exists = true;
128 break; 238 break;
129 } 239 }
130 } 240 }
131 return exists; 241 return exists;
132 } 242 }
133   243  
134 // Adds a new tab in case a conversation with that agent does not exist. 244 // Adds a new tab in case a conversation with that agent does not exist.
135 function addTab(first, last) { 245 function addTab(first, last) {
136 var first = typeof first !== 'undefined' ? first : firstName.val(); 246 var first = typeof first !== 'undefined' ? first : firstName.val();
137 var last = typeof last !== 'undefined' ? last : lastName.val(); 247 var last = typeof last !== 'undefined' ? last : lastName.val();
138 248
139 // A conversation with that agent exists, so just do nothing. 249 // A conversation with that agent exists, so just do nothing.
140 if (conversationExists(first, last)) 250 if (conversationExists(first, last))
141 return; 251 return;
142 252
143 // Normalize avatar names by capitalizing the first letter of the firstname and the last name. 253 // Normalize avatar names by capitalizing the first letter of the firstname and the last name.
144 first = first.charAt(0).toUpperCase() + first.substr(1); 254 first = first.charAt(0).toUpperCase() + first.substr(1);
145 last = last.charAt(0).toUpperCase() + last.substr(1); 255 last = last.charAt(0).toUpperCase() + last.substr(1);
146 256
147 // Build the discussion form and add the tab. 257 // Build the discussion form and add the tab.
148 var label = first + " " + last, 258 var label = first + " " + last,
149 id = "tabs-" + tabCounter, 259 id = "tabs-" + tabCounter,
150 li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); 260 li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label));
151   261  
152 tabs.find(".ui-tabs-nav").append(li); 262 tabs.find(".ui-tabs-nav").append(li);
153 tabs.append("<div id='" + id + "'><p>" + " \ 263 tabs.append("<div id='" + id + "'><p>" + " \
154 <div id='container-" + tabCounter + "'> \ 264 <div id='container-" + tabCounter + "'> \
155 <textarea readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ 265 <textarea readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \
156 <div id='controls-" + tabCounter + "'> \ 266 <div id='controls-" + tabCounter + "'> \
157 Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \ 267 Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \
158 <button type='button' id='send-" + tabCounter + "'>Send</button> \ 268 <button type='button' id='send-" + tabCounter + "'>Send</button> \
159 <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \ 269 <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \
160 <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \ 270 <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \
161 </div> \ 271 </div> \
162 </div> \ 272 </div> \
163 " + "</p></div>"); 273 " + "</p></div>");
164 tabs.tabs("refresh"); 274 tabs.tabs("refresh");
165   275  
166 // Subscribe to click event to send the instant message. 276 // Subscribe to click event to send the instant message.
167 $("#send-" + tabCounter).on("click", { 277 $("#send-" + tabCounter).on("click", {
168 index: tabCounter 278 index: tabCounter
169 }, sendInstantMessage); 279 }, sendInstantMessage);
170   280  
171 // Subscribe to pressing enter with the message input box selected. 281 // Subscribe to pressing enter with the message input box selected.
172 $("#message-" + tabCounter).keypress({ 282 $("#message-" + tabCounter).keypress({
173 index: tabCounter 283 index: tabCounter
174 }, function(e) { 284 }, function(e) {
175 if (e.which == 13) { 285 if (e.which == 13) {
176 sendInstantMessage(e); 286 sendInstantMessage(e);
177 return false; 287 return false;
178 } 288 }
179 }); 289 });
180   290  
181 ++tabCounter; 291 ++tabCounter;
182 } 292 }
183   293  
184 // Close icon: removing the tab on click and delete the conversation. 294 // Close icon: removing the tab on click and delete the conversation.
185 tabs.on("click", "span.ui-icon-close", function() { 295 tabs.on("click", "span.ui-icon-close", function() {
186 var panelId = $(this).closest("li").remove().attr("aria-controls"); 296 var panelId = $(this).closest("li").remove().attr("aria-controls");
187 var selectedIndex = $(this).closest("li").remove().attr("id"); 297 var selectedIndex = $(this).closest("li").remove().attr("id");
188 // Pause the conversation retrieval timer. 298 // Pause the conversation retrieval timer.
189 clearTimeout(getConversationsTimeout); 299 clearTimeout(getConversationsTimeout);
190 $.ajax({ 300 $.ajax({
191 type: 'post', 301 type: 'post',
192 url: "deleteConversation.php", 302 url: "deleteConversation.php",
193 data: { 303 data: {
194 firstname: $("#firstname-" + selectedIndex).val(), 304 firstname: $("#firstname-" + selectedIndex).val(),
195 lastname: $("#lastname-" + selectedIndex).val() 305 lastname: $("#lastname-" + selectedIndex).val()
196 } 306 }
197 }).done(function(data) { 307 }).done(function(data) {
198 $("#" + panelId).remove(); 308 $("#" + panelId).remove();
199 tabs.tabs("refresh"); 309 tabs.tabs("refresh");
200 // Resume the conversation retrieval timer. 310 // Resume the conversation retrieval timer.
201 getConversationsTimeout = setTimeout( 311 getConversationsTimeout = setTimeout(
202 getConversations, 312 getConversations,
203 1000 313 1000
204 ); 314 );
205 }); 315 });
206 }); 316 });
207   317  
208 // Unbind the message retrieval interval from all other tabs except the active tab. 318 // Unbind the message retrieval interval from all other tabs except the active tab.
209 tabs.on('tabsactivate', function(event, ui) { 319 tabs.on('tabsactivate', function(event, ui) {
210 var selectedIndex = ui.newTab.closest("li").attr("id"); 320 var selectedIndex = ui.newTab.closest("li").attr("id");
211 $.each(messageIntervals, function(index, value) { 321 $.each(messageIntervals, function(index, value) {
212 if (index != selectedIndex) { 322 if (index != selectedIndex) {
213 clearInterval(value); 323 clearInterval(value);
214 } 324 }
215 }); 325 });
216   326  
217 messageIntervals[selectedIndex] = setTimeout( 327 messageIntervals[selectedIndex] = setTimeout(
218 loadInstantMessage, 328 loadInstantMessage,
219 1000, 329 1000,
220 selectedIndex 330 selectedIndex
221 ); 331 );
222 }); 332 });
223   333  
224 // Start a timer to load tabs of existing conversations. 334 // Start a timer to load tabs of existing conversations.
225 getConversationsTimeout = setTimeout( 335 getConversationsTimeout = setTimeout(
226 getConversations, 336 getConversations,
227 1000 337 1000
228 ); 338 );
229   339  
230 }); 340 });
231 </script> 341 </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   -  
262 </body> 342 </body>
263   343  
264 </html> 344 </html>
265   345  
266
Generated by GNU Enscript 1.6.5.90.
 346
Generated by GNU Enscript 1.6.5.90.
267   347  
268   348  
269   349