corrade-http-templates – Blame information for rev 44

Subversion Repositories:
Rev:
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">&times;</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>