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