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