corrade-http-templates – Diff between revs 47 and 50
?pathlinks?
Rev 47 | Rev 50 | |||
---|---|---|---|---|
Line 96... | Line 96... | |||
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> |
|
Line 98... | Line 98... | |||
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'); |
|
Line 116... | Line 117... | |||
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 | ); |
|
Line 130... | Line 131... | |||
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($("#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) |
139 | $.trim($("#lastname-" + index).val()) == '' || |
|
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, |
|
- | 148 | easing: "linear" |
||
- | 149 | } |
||
- | 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, |
||
169 | easing: "linear" |
170 | easing: "linear" |
|
170 | } |
171 | } |
|
Line 171... | Line 172... | |||
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, |
|
Line 184... | Line 185... | |||
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 && |
|
- | 195 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
||
194 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
196 | $("#lastname-" + i).length && |
|
- | 197 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
||
195 | $("#lastname-" + i).length && |
198 | exists = true; |
|
196 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
- | ||
197 | exists = true; |
- | ||
Line 198... | Line 199... | |||
198 | break; |
199 | break; |
|
199 | } |
200 | } |
|
200 | } |
201 | } |
|
201 | return exists; |
202 | return exists; |
|
Line 202... | Line 203... | |||
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. |
|
Line 205... | Line 206... | |||
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(); |
|
Line 208... | Line 209... | |||
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'> \ |
|
- | 231 | <div class='col-lg-1'> \ |
||
230 | <div class='col-lg-1'> \ |
232 | <div class='input-group'> \ |
|
231 | <div class='input-group'> \ |
233 | <span class='input-group-addon'> \ |
|
232 | <span class='input-group-addon'> \ |
- | ||
233 | <label for='message-" + tabCounter + "'>Message</label> \ |
234 | <label for='message-" + tabCounter + "'>Message</label> \ |
|
234 | </span> \ |
235 | </span> \ |
|
235 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
236 | <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> \ |
- | ||
242 | <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 | |
- | ||
Line -... | Line 241... | |||
- | 241 | </div> \ |
||
- | 242 | </div> \ |
||
255 | // Subscribe to pressing enter with the message input box selected. |
243 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
|
- | 244 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
||
- | 245 | </form> \ |
||
- | 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 |
||
256 | $("#message-" + tabCounter).keypress({ |
254 | }, sendInstantMessage); |
|
Line -... | Line 255... | |||
- | 255 | |
||
- | 256 | // Subscribe to pressing enter with the message input box selected. |
||
- | 257 | $("#message-" + tabCounter).keypress({ |
||
257 | index: tabCounter |
258 | index: tabCounter |
|
258 | }, function(e) { |
259 | }, function(e) { |
|
259 | if (e.which == 13) { |
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", |
|
- | 278 | data: { |
||
277 | data: { |
279 | firstname: $("#firstname-" + selectedIndex).val(), |
|
278 | firstname: $("#firstname-" + selectedIndex).val(), |
280 | lastname: $("#lastname-" + selectedIndex).val() |
|
279 | lastname: $("#lastname-" + selectedIndex).val() |
- | ||
Line 280... | Line 281... | |||
280 | } |
281 | } |
|
281 | }).done(function(data) { |
282 | }).done(function(data) { |
|
282 | $("#" + panelId).remove(); |
283 | $("#" + 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( |
|
- | 287 | getConversations, |
||
286 | getConversations, |
288 | 1000 |
|
- | 289 | ); |
||
- | 290 | }); |
||
- | 291 | }); |
||
- | 292 | |
||
- | 293 | // Unbind the message retrieval interval from all other tabs except the active tab. |
||
- | 294 | tabs.on('tabsactivate', function(event, ui) { |
||
287 | 1000 |
295 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
|
Line 288... | Line 296... | |||
288 | ); |
296 | $.each(messageIntervals, function(index, value) { |
|
289 | }); |
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"); |
- | ||
295 | $.each(messageIntervals, function(index, value) { |
- | ||
296 | if (index != selectedIndex) { |
- | ||
297 | clearInterval(value); |
- | ||
298 | } |
- | ||
299 | }); |
- | ||
300 | |
- | ||
301 | messageIntervals[selectedIndex] = setTimeout( |
302 | messageIntervals[selectedIndex] = setTimeout( |
|
302 | loadInstantMessage, |
303 | loadInstantMessage, |
|
303 | 1000, |
304 | 1000, |
|
Line 304... | Line 305... | |||
304 | selectedIndex |
305 | selectedIndex |
|
305 | ); |
306 | ); |