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

Subversion Repositories:
Rev:
Show entire file – Ignore whitespace
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 );