corrade-http-templates – Diff between revs 50 and 51

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 50 Rev 51
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3   3  
4 <head> 4 <head>
5 <title>Corrade Instant Message Template</title> 5 <title>Corrade Instant Message Template</title>
6 6
7 <meta charset="utf-8"> 7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta name="description" content="Group Chat Relay using Corrade"> 10 <meta name="description" content="Group Chat Relay using Corrade">
11 <meta name="author" content="Wizardry and Steamworks"> 11 <meta name="author" content="Wizardry and Steamworks">
12 <link rel="icon" href="favicon.ico"> 12 <link rel="icon" href="favicon.ico">
13   13  
14 <!-- Bootstrap core CSS --> 14 <!-- Bootstrap core CSS -->
15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <!-- jQuery UI CSS --> 16 <!-- jQuery UI CSS -->
17 <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> 17 <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet">
18 <!-- Custom Styles --> 18 <!-- Custom Styles -->
19 <link rel="stylesheet" href="css/style.css?v=1.3"> 19 <link rel="stylesheet" href="css/style.css?v=1.3">
20 </head> 20 </head>
21   21  
22 <body> 22 <body>
23 23
24 <!-- Modal --> 24 <!-- Modal -->
25 <div id="dialog" class="modal fade" role="dialog"> 25 <div id="dialog" class="modal fade" role="dialog">
26 <div class="modal-dialog"> 26 <div class="modal-dialog">
27   27  
28 <!-- Modal content--> 28 <!-- Modal content-->
29 <div class="modal-content"> 29 <div class="modal-content">
30 <div class="modal-header"> 30 <div class="modal-header">
31 <button type="button" class="close" data-dismiss="modal">&times;</button> 31 <button type="button" class="close" data-dismiss="modal">&times;</button>
32 <h2 class="modal-title">Enter Agent Name</h2> 32 <h2 class="modal-title">Enter Agent Name</h2>
33 </div> 33 </div>
34 <form role="form" data-toggle="validator" class="form-inline"> 34 <form role="form" data-toggle="validator" class="form-inline">
35 <div class="modal-body"> 35 <div class="modal-body">
36 36
37 <div class="form-group"> 37 <div class="form-group">
38 <div class="input-group"> 38 <div class="input-group">
39 <label for="firstname">First Name</label> 39 <label for="firstname">First Name</label>
40 <input class="form-control" maxlength="63" type="text" id="firstname" placeholder="Corrade" required> 40 <input class="form-control" maxlength="63" type="text" id="firstname" placeholder="Corrade" required>
41 </div> 41 </div>
42 <div class="input-group"> 42 <div class="input-group">
43 <label for="lastname">Last Name</label> 43 <label for="lastname">Last Name</label>
44 <input class="form-control" maxlength="63" type="text" id="lastname" placeholder="Resident" required> 44 <input class="form-control" maxlength="63" type="text" id="lastname" placeholder="Resident" required>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 48
49 </div> 49 </div>
50 <div class="modal-footer"> 50 <div class="modal-footer">
51 <button type="button" id="startConversation" class="btn btn-primary btn-lg"> 51 <button type="button" id="startConversation" class="btn btn-primary btn-lg">
52 <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start 52 <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start
53 </button> 53 </button>
54 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 54 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
55 </div> 55 </div>
56 </form> 56 </form>
57 </div> 57 </div>
58   58  
59 </div> 59 </div>
60 </div> 60 </div>
61   61  
62 <div class="container"> 62 <div class="container">
63 <form role="form" data-toggle="validator" action="javascript:return;"> 63 <form role="form" data-toggle="validator" action="javascript:return;">
64 <div class="form-group row"> 64 <div class="form-group row">
65 <div class="input-group"> 65 <div class="input-group">
66 <span class="input-group-addon"> 66 <span class="input-group-addon">
67 <label for="name">Your Name</label> 67 <label for="name">Your Name</label>
68 </span> 68 </span>
69 <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> 69 <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required>
70 <span class="input-group-btn"> 70 <span class="input-group-btn">
71 <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button> 71 <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button>
72 </span> 72 </span>
73 </div> 73 </div>
74 </div> 74 </div>
75 </form> 75 </form>
76 76
77 <!-- This div holds the tabs that will be created. This structure should not be deleted. --> 77 <!-- This div holds the tabs that will be created. This structure should not be deleted. -->
78 <div id="tabs"> 78 <div id="tabs">
79 <ul> 79 <ul>
80   80  
81 </ul> 81 </ul>
82 <div> 82 <div>
83   83  
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 87
88 <!-- Include jQuery --> 88 <!-- Include jQuery -->
89 <script src="bower_components/jquery/dist/jquery.min.js"></script> 89 <script src="bower_components/jquery/dist/jquery.min.js"></script>
90 <!-- Include jQuery UI --> 90 <!-- Include jQuery UI -->
91 <script src="bower_components/jquery-ui/jquery-ui.min.js"></script> 91 <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
92 <!-- Include Bootstrap --> 92 <!-- Include Bootstrap -->
93 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 93 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
94 <!-- Include Bootstrap Validator --> 94 <!-- Include Bootstrap Validator -->
95 <script src="bower_components/bootstrap-validator/js/validator.js"></script> 95 <script src="bower_components/bootstrap-validator/js/validator.js"></script>
96 <!-- Include Velocity --> 96 <!-- Include Velocity -->
97 <script src="bower_components/velocity/velocity.min.js"></script> 97 <script src="bower_components/velocity/velocity.min.js"></script>
98 98
99 <script> 99 <script>
100 $(function() { 100 $(function() {
101 $.get('session.php').then((token) => { 101 $.get('session.php').then((token) => {
102 var firstName = $("#firstname"), 102 var firstName = $("#firstname"),
103 lastName = $("#lastname"), 103 lastName = $("#lastname"),
104 tabTemplate = "<li id='#{id}'> \ 104 tabTemplate = "<li id='#{id}'> \
105 <a href='#{href}'>#{label}</a> \ 105 <a href='#{href}'>#{label}</a> \
106 <span class='ui-icon ui-icon-close'></span> \ 106 <span class='ui-icon ui-icon-close'></span> \
107 </li>", 107 </li>",
108 tabCounter = 0, 108 tabCounter = 0,
109 messageIntervals = {}, 109 messageIntervals = {},
110 getConversationsTimeout, 110 getConversationsTimeout,
111 tabs = $("#tabs").tabs(); 111 tabs = $("#tabs").tabs();
112   112  
113 $("#startConversation") 113 $("#startConversation")
114 .on("click", function() { 114 .on("click", function() {
115 addTab(); 115 addTab();
116 $("#dialog").modal('hide'); 116 $("#dialog").modal('hide');
117 }); 117 });
118   118  
119 // Request the active conversations from the backend script and create tabs. 119 // Request the active conversations from the backend script and create tabs.
120 function getConversations() { 120 function getConversations() {
121 $.get("getConversations.php?t=" + Math.random(), function(data) { 121 $.get("getConversations.php?t=" + Math.random(), function(data) {
122 var json = $.parseJSON(data); 122 var json = $.parseJSON(data);
123 $.each(json, function(index, avatar) { 123 $.each(json, function(index, avatar) {
124 if (!conversationExists(avatar.firstname, avatar.lastname)) 124 if (!conversationExists(avatar.firstname, avatar.lastname))
125 addTab(avatar.firstname, avatar.lastname); 125 addTab(avatar.firstname, avatar.lastname);
126 }); 126 });
127 getConversationsTimeout = setTimeout( 127 getConversationsTimeout = setTimeout(
128 getConversations, 128 getConversations,
129 1000 129 1000
130 ); 130 );
131 }); 131 });
132 } 132 }
133   133  
134 // Function to send the message to an agent by passing it back through PHP. 134 // Function to send the message to an agent by passing it back through PHP.
135 function sendInstantMessage(e) { 135 function sendInstantMessage(e) {
136 var index = e.data.index; 136 var index = e.data.index;
137 // If the parameters are empty, then do not send anything to the PHP script. 137 // If the parameters are empty, then do not send anything to the PHP script.
138 if($.trim($("#firstname-" + index).val()) == '' || 138 if($.trim($("#firstname-" + index).val()) == '' ||
139 $.trim($("#lastname-" + index).val()) == '' || 139 $.trim($("#lastname-" + index).val()) == '' ||
140 $.trim($("#message-" + index).val()) == '') 140 $.trim($("#message-" + index).val()) == '')
141 return; 141 return;
142 $("#controls-" + index).animate( 142 $("#controls-" + index).animate(
143 { 143 {
144 opacity: 0 144 opacity: 0
145 }, 145 },
146 { 146 {
147 duration: 1000, 147 duration: 1000,
148 easing: "linear" 148 easing: "linear"
149 } 149 }
150 ); 150 );
151 $.ajax({ 151 $.ajax({
152 type: 'post', 152 type: 'post',
153 url: "sendInstantMessage.php", 153 url: "sendInstantMessage.php",
154 data: { 154 data: {
155 name: $("#name").val(), 155 name: $("#name").val(),
156 firstname: $("#firstname-" + index).val(), 156 firstname: $("#firstname-" + index).val(),
157 lastname: $("#lastname-" + index).val(), 157 lastname: $("#lastname-" + index).val(),
158 message: $("#message-" + index).val() 158 message: $("#message-" + index).val(),
-   159 token: token
159 } 160 }
160 }).done(function(data) { 161 }).done(function(data) {
161 if(data) 162 if(data)
162 alert(data); 163 alert(data);
163 $("#message-" + index).val(""); 164 $("#message-" + index).val("");
164 $("#controls-" + index).animate( 165 $("#controls-" + index).animate(
165 { 166 {
166 opacity: 1 167 opacity: 1
167 }, 168 },
168 { 169 {
169 duration: 1000, 170 duration: 1000,
170 easing: "linear" 171 easing: "linear"
171 } 172 }
172 ); 173 );
173 }); 174 });
174 } 175 }
175   176  
176 // Loads all the stored instant messages from the log file named after the avatar. 177 // Loads all the stored instant messages from the log file named after the avatar.
177 function loadInstantMessage(index) { 178 function loadInstantMessage(index) {
178 $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { 179 $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) {
179 $("#chat-" + index).html(data); 180 $("#chat-" + index).html(data);
180 // Scroll to the bottom of the conversation. 181 // Scroll to the bottom of the conversation.
181 $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); 182 $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight);
182 messageIntervals[index] = setTimeout( 183 messageIntervals[index] = setTimeout(
183 loadInstantMessage, 184 loadInstantMessage,
184 1000, 185 1000,
185 index 186 index
186 ); 187 );
187 }); 188 });
188 } 189 }
189   190  
190 // This function checks whether a conversation / tab already exists. 191 // This function checks whether a conversation / tab already exists.
191 function conversationExists(firstName, lastName) { 192 function conversationExists(firstName, lastName) {
192 var exists = false; 193 var exists = false;
193 for (var i = tabCounter; i >= 0; --i) { 194 for (var i = tabCounter; i >= 0; --i) {
194 if ($("#firstname-" + i).length && 195 if ($("#firstname-" + i).length &&
195 $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && 196 $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() &&
196 $("#lastname-" + i).length && 197 $("#lastname-" + i).length &&
197 $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { 198 $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) {
198 exists = true; 199 exists = true;
199 break; 200 break;
200 } 201 }
201 } 202 }
202 return exists; 203 return exists;
203 } 204 }
204   205  
205 // Adds a new tab in case a conversation with that agent does not exist. 206 // Adds a new tab in case a conversation with that agent does not exist.
206 function addTab(first, last) { 207 function addTab(first, last) {
207 var first = typeof first !== 'undefined' ? first : firstName.val(); 208 var first = typeof first !== 'undefined' ? first : firstName.val();
208 var last = typeof last !== 'undefined' ? last : lastName.val(); 209 var last = typeof last !== 'undefined' ? last : lastName.val();
209 210
210 // A conversation with that agent exists, so just do nothing. 211 // A conversation with that agent exists, so just do nothing.
211 if (conversationExists(first, last)) 212 if (conversationExists(first, last))
212 return; 213 return;
213 214
214 // Normalize avatar names by capitalizing the first letter of the firstname and the last name. 215 // Normalize avatar names by capitalizing the first letter of the firstname and the last name.
215 first = first.charAt(0).toUpperCase() + first.substr(1); 216 first = first.charAt(0).toUpperCase() + first.substr(1);
216 last = last.charAt(0).toUpperCase() + last.substr(1); 217 last = last.charAt(0).toUpperCase() + last.substr(1);
217 218
218 // Build the discussion form and add the tab. 219 // Build the discussion form and add the tab.
219 var label = first + " " + last, 220 var label = first + " " + last,
220 id = "tabs-" + tabCounter, 221 id = "tabs-" + tabCounter,
221 li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); 222 li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label));
222   223  
223 tabs.find(".ui-tabs-nav").append(li); 224 tabs.find(".ui-tabs-nav").append(li);
224 tabs.append("<div id='" + id + "'>"+ " \ 225 tabs.append("<div id='" + id + "'>"+ " \
225 <div id='container-" + tabCounter + "'> \ 226 <div id='container-" + tabCounter + "'> \
226 <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ 227 <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \
227 <div class='form-group row'> \ 228 <div class='form-group row'> \
228 <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ 229 <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \
229 </div> \ 230 </div> \
230 <div id='controls-" + tabCounter + "' class='form-group row'> \ 231 <div id='controls-" + tabCounter + "' class='form-group row'> \
231 <div class='col-lg-1'> \ 232 <div class='col-lg-1'> \
232 <div class='input-group'> \ 233 <div class='input-group'> \
233 <span class='input-group-addon'> \ 234 <span class='input-group-addon'> \
234 <label for='message-" + tabCounter + "'>Message</label> \ 235 <label for='message-" + tabCounter + "'>Message</label> \
235 </span> \ 236 </span> \
236 <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ 237 <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \
237 <span class='input-group-btn' style='font-size: inherit;'> \ 238 <span class='input-group-btn' style='font-size: inherit;'> \
238 <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ 239 <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \
239 </span> \ 240 </span> \
240 </div> \ 241 </div> \
241 </div> \ 242 </div> \
242 </div> \ 243 </div> \
243 <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ 244 <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \
244 <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ 245 <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \
245 </form> \ 246 </form> \
246 </div> \ 247 </div> \
247 </div>"); 248 </div>");
248 tabs.tabs("refresh"); 249 tabs.tabs("refresh");
249 $("#form-" + tabCounter).validator(); 250 $("#form-" + tabCounter).validator();
250   251  
251 // Subscribe to click event to send the instant message. 252 // Subscribe to click event to send the instant message.
252 $("#send-" + tabCounter).on("click", { 253 $("#send-" + tabCounter).on("click", {
253 index: tabCounter 254 index: tabCounter
254 }, sendInstantMessage); 255 }, sendInstantMessage);
255   256  
256 // Subscribe to pressing enter with the message input box selected. 257 // Subscribe to pressing enter with the message input box selected.
257 $("#message-" + tabCounter).keypress({ 258 $("#message-" + tabCounter).keypress({
258 index: tabCounter 259 index: tabCounter
259 }, function(e) { 260 }, function(e) {
260 if (e.which == 13) { 261 if (e.which == 13) {
261 sendInstantMessage(e); 262 sendInstantMessage(e);
262 return false; 263 return false;
263 } 264 }
264 }); 265 });
265   266  
266 ++tabCounter; 267 ++tabCounter;
267 } 268 }
268   269  
269 // Close icon: removing the tab on click and delete the conversation. 270 // Close icon: removing the tab on click and delete the conversation.
270 tabs.on("click", "span.ui-icon-close", function() { 271 tabs.on("click", "span.ui-icon-close", function() {
271 var panelId = $(this).closest("li").remove().attr("aria-controls"); 272 var panelId = $(this).closest("li").remove().attr("aria-controls");
272 var selectedIndex = $(this).closest("li").remove().attr("id"); 273 var selectedIndex = $(this).closest("li").remove().attr("id");
273 // Pause the conversation retrieval timer. 274 // Pause the conversation retrieval timer.
274 clearTimeout(getConversationsTimeout); 275 clearTimeout(getConversationsTimeout);
275 $.ajax({ 276 $.ajax({
276 type: 'post', 277 type: 'post',
277 url: "deleteConversation.php", 278 url: "deleteConversation.php",
278 data: { 279 data: {
279 firstname: $("#firstname-" + selectedIndex).val(), 280 firstname: $("#firstname-" + selectedIndex).val(),
280 lastname: $("#lastname-" + selectedIndex).val() 281 lastname: $("#lastname-" + selectedIndex).val(),
-   282 token: token
281 } 283 }
282 }).done(function(data) { 284 }).done(function(data) {
283 $("#" + panelId).remove(); 285 $("#" + panelId).remove();
284 tabs.tabs("refresh"); 286 tabs.tabs("refresh");
285 // Resume the conversation retrieval timer. 287 // Resume the conversation retrieval timer.
286 getConversationsTimeout = setTimeout( 288 getConversationsTimeout = setTimeout(
287 getConversations, 289 getConversations,
288 1000 290 1000
289 ); 291 );
290 }); 292 });
291 }); 293 });
292   294  
293 // Unbind the message retrieval interval from all other tabs except the active tab. 295 // Unbind the message retrieval interval from all other tabs except the active tab.
294 tabs.on('tabsactivate', function(event, ui) { 296 tabs.on('tabsactivate', function(event, ui) {
295 var selectedIndex = ui.newTab.closest("li").attr("id"); 297 var selectedIndex = ui.newTab.closest("li").attr("id");
296 $.each(messageIntervals, function(index, value) { 298 $.each(messageIntervals, function(index, value) {
297 if (index != selectedIndex) { 299 if (index != selectedIndex) {
298 clearInterval(value); 300 clearInterval(value);
299 } 301 }
300 }); 302 });
301   303  
302 messageIntervals[selectedIndex] = setTimeout( 304 messageIntervals[selectedIndex] = setTimeout(
303 loadInstantMessage, 305 loadInstantMessage,
304 1000, 306 1000,
305 selectedIndex 307 selectedIndex
306 ); 308 );
307 }); 309 });
308   310  
309 // Start a timer to load tabs of existing conversations. 311 // Start a timer to load tabs of existing conversations.
310 getConversationsTimeout = setTimeout( 312 getConversationsTimeout = setTimeout(
311 getConversations, 313 getConversations,
312 1000 314 1000
313 ); 315 );
314 }); 316 });
315 }); 317 });
316 </script> 318 </script>
317 </body> 319 </body>
318   320  
319 </html> 321 </html>
320   322  
321
Generated by GNU Enscript 1.6.5.90.
 323
Generated by GNU Enscript 1.6.5.90.
322   324  
323   325  
324   326