corrade-http-templates – Diff between revs 47 and 50
?pathlinks?
Rev 47 | Rev 50 | |||
---|---|---|---|---|
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">×</button> |
31 | <button type="button" class="close" data-dismiss="modal">×</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 | var firstName = $("#firstname"), |
102 | var firstName = $("#firstname"), |
|
102 | lastName = $("#lastname"), |
103 | lastName = $("#lastname"), |
|
103 | tabTemplate = "<li id='#{id}'> \ |
104 | tabTemplate = "<li id='#{id}'> \ |
|
104 | <a href='#{href}'>#{label}</a> \ |
105 | <a href='#{href}'>#{label}</a> \ |
|
105 | <span class='ui-icon ui-icon-close'></span> \ |
106 | <span class='ui-icon ui-icon-close'></span> \ |
|
106 | </li>", |
107 | </li>", |
|
107 | tabCounter = 0, |
108 | tabCounter = 0, |
|
108 | messageIntervals = {}, |
109 | messageIntervals = {}, |
|
109 | getConversationsTimeout, |
110 | getConversationsTimeout, |
|
110 | tabs = $("#tabs").tabs(); |
111 | tabs = $("#tabs").tabs(); |
|
111 | |
112 | |
|
112 | $("#startConversation") |
113 | $("#startConversation") |
|
113 | .on("click", function() { |
114 | .on("click", function() { |
|
114 | addTab(); |
115 | addTab(); |
|
115 | $("#dialog").modal('hide'); |
116 | $("#dialog").modal('hide'); |
|
116 | }); |
117 | }); |
|
117 | |
118 | |
|
118 | // Request the active conversations from the backend script and create tabs. |
119 | // Request the active conversations from the backend script and create tabs. |
|
119 | function getConversations() { |
120 | function getConversations() { |
|
120 | $.get("getConversations.php?t=" + Math.random(), function(data) { |
121 | $.get("getConversations.php?t=" + Math.random(), function(data) { |
|
121 | var json = $.parseJSON(data); |
122 | var json = $.parseJSON(data); |
|
122 | $.each(json, function(index, avatar) { |
123 | $.each(json, function(index, avatar) { |
|
123 | if (!conversationExists(avatar.firstname, avatar.lastname)) |
124 | if (!conversationExists(avatar.firstname, avatar.lastname)) |
|
124 | addTab(avatar.firstname, avatar.lastname); |
125 | addTab(avatar.firstname, avatar.lastname); |
|
125 | }); |
126 | }); |
|
126 | getConversationsTimeout = setTimeout( |
127 | getConversationsTimeout = setTimeout( |
|
127 | getConversations, |
128 | getConversations, |
|
128 | 1000 |
129 | 1000 |
|
129 | ); |
130 | ); |
|
130 | }); |
131 | }); |
|
131 | } |
132 | } |
|
132 | |
133 | |
|
133 | // 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. |
|
134 | function sendInstantMessage(e) { |
135 | function sendInstantMessage(e) { |
|
135 | var index = e.data.index; |
136 | var index = e.data.index; |
|
136 | // 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. |
|
137 | if($.trim($("#firstname-" + index).val()) == '' || |
138 | if($.trim($("#firstname-" + index).val()) == '' || |
|
138 | $.trim($("#lastname-" + index).val()) == '' || |
139 | $.trim($("#lastname-" + index).val()) == '' || |
|
139 | $.trim($("#message-" + index).val()) == '') |
- | ||
140 | return; |
- | ||
141 | $("#controls-" + index).animate( |
- | ||
142 | { |
- | ||
143 | opacity: 0 |
- | ||
144 | }, |
- | ||
145 | { |
- | ||
146 | duration: 1000, |
- | ||
147 | easing: "linear" |
- | ||
148 | } |
- | ||
149 | ); |
- | ||
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); |
140 | $.trim($("#message-" + index).val()) == '') |
|
162 | $("#message-" + index).val(""); |
141 | return; |
|
163 | $("#controls-" + index).animate( |
142 | $("#controls-" + index).animate( |
|
164 | { |
143 | { |
|
165 | opacity: 1 |
144 | opacity: 0 |
|
166 | }, |
145 | }, |
|
167 | { |
146 | { |
|
168 | duration: 1000, |
147 | duration: 1000, |
|
169 | easing: "linear" |
148 | easing: "linear" |
|
170 | } |
149 | } |
|
171 | ); |
150 | ); |
|
- | 151 | $.ajax({ |
||
- | 152 | type: 'post', |
||
- | 153 | url: "sendInstantMessage.php", |
||
- | 154 | data: { |
||
- | 155 | name: $("#name").val(), |
||
- | 156 | firstname: $("#firstname-" + index).val(), |
||
- | 157 | lastname: $("#lastname-" + index).val(), |
||
- | 158 | message: $("#message-" + index).val() |
||
- | 159 | } |
||
- | 160 | }).done(function(data) { |
||
- | 161 | if(data) |
||
- | 162 | alert(data); |
||
- | 163 | $("#message-" + index).val(""); |
||
- | 164 | $("#controls-" + index).animate( |
||
- | 165 | { |
||
- | 166 | opacity: 1 |
||
- | 167 | }, |
||
- | 168 | { |
||
- | 169 | duration: 1000, |
||
- | 170 | easing: "linear" |
||
- | 171 | } |
||
- | 172 | ); |
||
172 | }); |
173 | }); |
|
173 | } |
174 | } |
|
174 | |
175 | |
|
175 | // Loads all the stored instant messages from the log file named after the avatar. |
176 | // Loads all the stored instant messages from the log file named after the avatar. |
|
176 | function loadInstantMessage(index) { |
177 | function loadInstantMessage(index) { |
|
177 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
178 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
|
178 | $("#chat-" + index).html(data); |
179 | $("#chat-" + index).html(data); |
|
179 | // Scroll to the bottom of the conversation. |
180 | // Scroll to the bottom of the conversation. |
|
180 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
181 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
|
181 | messageIntervals[index] = setTimeout( |
182 | messageIntervals[index] = setTimeout( |
|
182 | loadInstantMessage, |
183 | loadInstantMessage, |
|
183 | 1000, |
184 | 1000, |
|
184 | index |
185 | index |
|
185 | ); |
186 | ); |
|
186 | }); |
187 | }); |
|
187 | } |
188 | } |
|
188 | |
189 | |
|
189 | // This function checks whether a conversation / tab already exists. |
190 | // This function checks whether a conversation / tab already exists. |
|
190 | function conversationExists(firstName, lastName) { |
191 | function conversationExists(firstName, lastName) { |
|
191 | var exists = false; |
192 | var exists = false; |
|
192 | for (var i = tabCounter; i >= 0; --i) { |
193 | for (var i = tabCounter; i >= 0; --i) { |
|
193 | if ($("#firstname-" + i).length && |
194 | if ($("#firstname-" + i).length && |
|
194 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
195 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
|
195 | $("#lastname-" + i).length && |
196 | $("#lastname-" + i).length && |
|
196 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
197 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
|
- | 198 | exists = true; |
||
197 | exists = true; |
199 | break; |
|
- | 200 | } |
||
198 | break; |
201 | } |
|
199 | } |
- | ||
200 | } |
- | ||
201 | return exists; |
202 | return exists; |
|
202 | } |
203 | } |
|
203 | |
204 | |
|
204 | // Adds a new tab in case a conversation with that agent does not exist. |
205 | // Adds a new tab in case a conversation with that agent does not exist. |
|
205 | function addTab(first, last) { |
206 | function addTab(first, last) { |
|
206 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
207 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
|
207 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
208 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
|
208 | |
209 | |
|
209 | // A conversation with that agent exists, so just do nothing. |
210 | // A conversation with that agent exists, so just do nothing. |
|
210 | if (conversationExists(first, last)) |
211 | if (conversationExists(first, last)) |
|
211 | return; |
212 | return; |
|
212 | |
213 | |
|
213 | // Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
214 | // 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 | first = first.charAt(0).toUpperCase() + first.substr(1); |
|
215 | last = last.charAt(0).toUpperCase() + last.substr(1); |
216 | last = last.charAt(0).toUpperCase() + last.substr(1); |
|
216 | |
217 | |
|
217 | // Build the discussion form and add the tab. |
218 | // Build the discussion form and add the tab. |
|
218 | var label = first + " " + last, |
219 | var label = first + " " + last, |
|
219 | id = "tabs-" + tabCounter, |
220 | id = "tabs-" + tabCounter, |
|
220 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
221 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
|
221 | |
222 | |
|
222 | tabs.find(".ui-tabs-nav").append(li); |
223 | tabs.find(".ui-tabs-nav").append(li); |
|
223 | tabs.append("<div id='" + id + "'>"+ " \ |
224 | tabs.append("<div id='" + id + "'>"+ " \ |
|
224 | <div id='container-" + tabCounter + "'> \ |
225 | <div id='container-" + tabCounter + "'> \ |
|
225 | <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
226 | <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
|
226 | <div class='form-group row'> \ |
227 | <div class='form-group row'> \ |
|
227 | <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
228 | <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
|
228 | </div> \ |
229 | </div> \ |
|
229 | <div id='controls-" + tabCounter + "' class='form-group row'> \ |
230 | <div id='controls-" + tabCounter + "' class='form-group row'> \ |
|
230 | <div class='col-lg-1'> \ |
231 | <div class='col-lg-1'> \ |
|
231 | <div class='input-group'> \ |
232 | <div class='input-group'> \ |
|
232 | <span class='input-group-addon'> \ |
233 | <span class='input-group-addon'> \ |
|
- | 234 | <label for='message-" + tabCounter + "'>Message</label> \ |
||
233 | <label for='message-" + tabCounter + "'>Message</label> \ |
235 | </span> \ |
|
234 | </span> \ |
236 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
|
235 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
- | ||
236 | <span class='input-group-btn' style='font-size: inherit;'> \ |
237 | <span class='input-group-btn' style='font-size: inherit;'> \ |
|
237 | <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
238 | <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
|
238 | </span> \ |
239 | </span> \ |
|
239 | </div> \ |
240 | </div> \ |
|
240 | </div> \ |
241 | </div> \ |
|
241 | </div> \ |
242 | </div> \ |
|
242 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
243 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
|
243 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
- | ||
244 | </form> \ |
- | ||
245 | </div> \ |
- | ||
246 | </div>"); |
- | ||
247 | tabs.tabs("refresh"); |
- | ||
248 | $("#form-" + tabCounter).validator(); |
- | ||
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 |
- | ||
- | 244 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
||
- | 245 | </form> \ |
||
258 | }, function(e) { |
246 | </div> \ |
|
- | 247 | </div>"); |
||
- | 248 | tabs.tabs("refresh"); |
||
- | 249 | $("#form-" + tabCounter).validator(); |
||
- | 250 | |
||
- | 251 | // Subscribe to click event to send the instant message. |
||
- | 252 | $("#send-" + tabCounter).on("click", { |
||
- | 253 | index: tabCounter |
||
- | 254 | }, sendInstantMessage); |
||
- | 255 | |
||
- | 256 | // Subscribe to pressing enter with the message input box selected. |
||
259 | if (e.which == 13) { |
257 | $("#message-" + tabCounter).keypress({ |
|
- | 258 | index: tabCounter |
||
- | 259 | }, function(e) { |
||
- | 260 | if (e.which == 13) { |
||
260 | sendInstantMessage(e); |
261 | sendInstantMessage(e); |
|
261 | return false; |
262 | return false; |
|
262 | } |
263 | } |
|
263 | }); |
264 | }); |
|
264 | |
265 | |
|
265 | ++tabCounter; |
266 | ++tabCounter; |
|
266 | } |
267 | } |
|
267 | |
268 | |
|
268 | // Close icon: removing the tab on click and delete the conversation. |
269 | // Close icon: removing the tab on click and delete the conversation. |
|
269 | tabs.on("click", "span.ui-icon-close", function() { |
270 | tabs.on("click", "span.ui-icon-close", function() { |
|
270 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
271 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
|
271 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
272 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
|
272 | // Pause the conversation retrieval timer. |
273 | // Pause the conversation retrieval timer. |
|
273 | clearTimeout(getConversationsTimeout); |
274 | clearTimeout(getConversationsTimeout); |
|
274 | $.ajax({ |
275 | $.ajax({ |
|
275 | type: 'post', |
276 | type: 'post', |
|
276 | url: "deleteConversation.php", |
277 | url: "deleteConversation.php", |
|
277 | data: { |
278 | data: { |
|
278 | firstname: $("#firstname-" + selectedIndex).val(), |
279 | firstname: $("#firstname-" + selectedIndex).val(), |
|
279 | lastname: $("#lastname-" + selectedIndex).val() |
280 | lastname: $("#lastname-" + selectedIndex).val() |
|
- | 281 | } |
||
280 | } |
282 | }).done(function(data) { |
|
281 | }).done(function(data) { |
283 | $("#" + panelId).remove(); |
|
282 | $("#" + panelId).remove(); |
- | ||
283 | tabs.tabs("refresh"); |
284 | tabs.tabs("refresh"); |
|
284 | // Resume the conversation retrieval timer. |
285 | // Resume the conversation retrieval timer. |
|
285 | getConversationsTimeout = setTimeout( |
286 | getConversationsTimeout = setTimeout( |
|
286 | getConversations, |
287 | getConversations, |
|
287 | 1000 |
288 | 1000 |
|
288 | ); |
289 | ); |
|
- | 290 | }); |
||
289 | }); |
291 | }); |
|
- | 292 | |
||
- | 293 | // Unbind the message retrieval interval from all other tabs except the active tab. |
||
- | 294 | tabs.on('tabsactivate', function(event, ui) { |
||
- | 295 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
||
- | 296 | $.each(messageIntervals, function(index, value) { |
||
- | 297 | if (index != selectedIndex) { |
||
290 | }); |
298 | clearInterval(value); |
|
291 | |
299 | } |
|
292 | // Unbind the message retrieval interval from all other tabs except the active tab. |
300 | }); |
|
293 | tabs.on('tabsactivate', function(event, ui) { |
301 | |
|
294 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
302 | messageIntervals[selectedIndex] = setTimeout( |
|
295 | $.each(messageIntervals, function(index, value) { |
303 | loadInstantMessage, |
|
296 | if (index != selectedIndex) { |
304 | 1000, |
|
297 | clearInterval(value); |
- | ||
298 | } |
- | ||
299 | }); |
- | ||
300 | |
- | ||
301 | messageIntervals[selectedIndex] = setTimeout( |
- | ||
302 | loadInstantMessage, |
- | ||
303 | 1000, |
- | ||
304 | selectedIndex |
305 | selectedIndex |
|
305 | ); |
306 | ); |
|
306 | }); |
307 | }); |
|
307 | |
308 | |
|
308 | // Start a timer to load tabs of existing conversations. |
309 | // Start a timer to load tabs of existing conversations. |
|
309 | getConversationsTimeout = setTimeout( |
310 | getConversationsTimeout = setTimeout( |
|
310 | getConversations, |
311 | getConversations, |
|
311 | 1000 |
312 | 1000 |
|
312 | ); |
313 | ); |
|
313 | |
314 | }); |
|
314 | }); |
315 | }); |
|
315 | </script> |
316 | </script> |
|
316 | </body> |
317 | </body> |
|
317 | |
318 | |
|
318 | </html> |
319 | </html> |
|
319 | |
320 | |
|
320 |
|
321 |
|
|
321 | |
322 | |
|
322 | |
323 | |
|
323 | |
324 | |