corrade-http-templates – Diff between revs 43 and 44
?pathlinks?
| Rev 43 | Rev 44 | |||
|---|---|---|---|---|
| Line 9... | Line 9... | |||
| 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"> |
|
| Line 13... | Line -... | |||
| 13 | |
- | ||
| 14 | <link rel="stylesheet" href="css/style.css?v=2.0"> |
- | ||
| 15 | |
13 | |
|
| 16 | <!-- Bootstrap core CSS --> |
14 | <!-- Bootstrap core CSS --> |
|
| 17 | <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"> |
|
| 18 | <!-- jQuery UI CSS --> |
16 | <!-- jQuery UI CSS --> |
|
| 19 | <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> |
- | ||
| 20 | <!-- <link rel="stylesheet" href="css/style.css?v=1.3"> --> |
17 | <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> |
|
| Line 21... | Line 18... | |||
| 21 | </head> |
18 | </head> |
|
| Line 22... | Line 19... | |||
| 22 | |
19 | |
|
| Line 28... | Line 25... | |||
| 28 | |
25 | |
|
| 29 | <!-- Modal content--> |
26 | <!-- Modal content--> |
|
| 30 | <div class="modal-content"> |
27 | <div class="modal-content"> |
|
| 31 | <div class="modal-header"> |
28 | <div class="modal-header"> |
|
| 32 | <button type="button" class="close" data-dismiss="modal">×</button> |
29 | <button type="button" class="close" data-dismiss="modal">×</button> |
|
| 33 | <h4 class="modal-title">Enter Agent Name</h4> |
30 | <h2 class="modal-title">Enter Agent Name</h2> |
|
| 34 | </div> |
31 | </div> |
|
| 35 | <form role="form" data-toggle="validator" class="form-inline"> |
32 | <form role="form" data-toggle="validator" class="form-inline"> |
|
| Line 36... | Line 33... | |||
| 36 | <div class="modal-body"> |
33 | <div class="modal-body"> |
|
| Line 57... | Line 54... | |||
| 57 | </form> |
54 | </form> |
|
| 58 | </div> |
55 | </div> |
|
| Line 59... | Line 56... | |||
| 59 | |
56 | |
|
| 60 | </div> |
57 | </div> |
|
| 61 | </div> |
58 | </div> |
|
| 62 | |
- | ||
| 63 | <!-- <div id="dialog" title="Agent Name"> |
- | ||
| 64 | <form> |
- | ||
| 65 | <fieldset class="ui-helper-reset"> |
- | ||
| 66 | <label for="firstname">Firstname</label> |
- | ||
| 67 | <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"> |
- | ||
| 68 | <label for="lastname">Lastname</label> |
- | ||
| 69 | <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"> |
- | ||
| 70 | </fieldset> |
- | ||
| 71 | </form> |
- | ||
| 72 | </div> --> |
- | ||
| 73 | |
- | ||
| 74 | <!-- <p> |
- | ||
| 75 | Your name: <input type="text" size="8" value="Someone" id="name"></input> |
- | ||
| 76 | <button id="add_tab">New Conversation</button> |
- | ||
| 77 | </p> --> |
- | ||
| 78 | |
59 | |
|
| 79 | <div class="container"> |
60 | <div class="container"> |
|
| 80 | <form role="form" data-toggle="validator"> |
61 | <form role="form" data-toggle="validator" action="javascript:return;"> |
|
| 81 | <div class="form-group row"> |
62 | <div class="form-group row"> |
|
| 82 | <div class="input-group"> |
63 | <div class="input-group"> |
|
| 83 | <span class="input-group-addon"> |
64 | <span class="input-group-addon"> |
|
| 84 | <label for="name">Your Name</label> |
65 | <label for="name">Your Name</label> |
|
| 85 | </span> |
66 | </span> |
|
| 86 | <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
67 | <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
|
| 87 | <span class="input-group-btn"> |
68 | <span class="input-group-btn"> |
|
| 88 | <button type="button" id="add_tab" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Tab</button> |
69 | <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button> |
|
| 89 | </span> |
70 | </span> |
|
| 90 | </div> |
71 | </div> |
|
| 91 | </div> |
72 | </div> |
|
| Line 92... | Line 73... | |||
| 92 | </form> |
73 | </form> |
|
| 93 | |
- | ||
| 94 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
- | ||
| 95 | <!-- <ul class="nav nav-tabs" role="tablist" id="tabs"> |
74 | |
|
| 96 | </ul> --> |
75 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
|
| Line 97... | Line 76... | |||
| 97 | <div id="tabs"> |
76 | <div id="tabs"> |
|
| 98 | <ul> |
77 | <ul> |
|
| Line 117... | Line 96... | |||
| 117 | |
96 | |
|
| 118 | <script> |
97 | <script> |
|
| 119 | $(function() { |
98 | $(function() { |
|
| 120 | var firstName = $("#firstname"), |
99 | var firstName = $("#firstname"), |
|
| - | 100 | lastName = $("#lastname"), |
||
| - | 101 | tabTemplate = "<li id='#{id}'> \ |
||
| 121 | lastName = $("#lastname"), |
102 | <a href='#{href}'>#{label}</a> \ |
|
| - | 103 | <span class='ui-icon ui-icon-close'></span> \ |
||
| 122 | tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", |
104 | </li>", |
|
| 123 | tabCounter = 0, |
105 | tabCounter = 0, |
|
| 124 | messageIntervals = {}, |
106 | messageIntervals = {}, |
|
| 125 | getConversationsTimeout; |
- | ||
| 126 | |
107 | getConversationsTimeout, |
|
| 127 | var tabs = $("#tabs").tabs() |
- | ||
| 128 | |
- | ||
| 129 | // Custom buttons and a "close" callback resetting the form inside. |
- | ||
| 130 | /*var dialog = $("#dialog").dialog({ |
- | ||
| 131 | autoOpen: false, |
- | ||
| 132 | modal: true, |
- | ||
| 133 | buttons: { |
- | ||
| 134 | Add: function() { |
- | ||
| 135 | addTab(); |
- | ||
| 136 | $(this).dialog("close"); |
- | ||
| 137 | }, |
- | ||
| 138 | Cancel: function() { |
- | ||
| 139 | $(this).dialog("close"); |
- | ||
| 140 | } |
- | ||
| 141 | }, |
- | ||
| 142 | close: function() { |
- | ||
| 143 | form[0].reset(); |
- | ||
| 144 | } |
- | ||
| 145 | }); |
- | ||
| 146 | |
- | ||
| 147 | // Calls addTab function on submit and closes the dialog. |
- | ||
| 148 | var form = dialog.find("form").on("submit", function(event) { |
- | ||
| 149 | addTab(); |
- | ||
| 150 | dialog.dialog("close"); |
- | ||
| 151 | event.preventDefault(); |
- | ||
| 152 | }); |
- | ||
| 153 | |
- | ||
| 154 | // The add tab button just opens the dialog and prompts for the avatar name. |
- | ||
| 155 | $("#add_tab") |
- | ||
| 156 | .button() |
- | ||
| 157 | .on("click", function() { |
- | ||
| 158 | dialog.dialog("open"); |
- | ||
| Line 159... | Line 108... | |||
| 159 | });*/ |
108 | tabs = $("#tabs").tabs(); |
|
| 160 | |
109 | |
|
| 161 | $("#startConversation") |
110 | $("#startConversation") |
|
| 162 | .on("click", function() { |
111 | .on("click", function() { |
|
| Line 185... | Line 134... | |||
| 185 | // If the parameters are empty, then do not send anything to the PHP script. |
134 | // If the parameters are empty, then do not send anything to the PHP script. |
|
| 186 | if($.trim($("#firstname-" + index).val()) == '' || |
135 | if($.trim($("#firstname-" + index).val()) == '' || |
|
| 187 | $.trim($("#lastname-" + index).val()) == '' || |
136 | $.trim($("#lastname-" + index).val()) == '' || |
|
| 188 | $.trim($("#message-" + index).val()) == '') |
137 | $.trim($("#message-" + index).val()) == '') |
|
| 189 | return; |
138 | return; |
|
| 190 | $("#controls-" + index).animate({ |
139 | $("#controls-" + index).animate( |
|
| - | 140 | { |
||
| 191 | opacity: 'hide' |
141 | opacity: 0 |
|
| - | 142 | }, |
||
| - | 143 | { |
||
| - | 144 | duration: 1000, |
||
| - | 145 | easing: "linear" |
||
| - | 146 | } |
||
| 192 | }, 'slow'); |
147 | ); |
|
| 193 | $.ajax({ |
148 | $.ajax({ |
|
| 194 | type: 'post', |
149 | type: 'post', |
|
| 195 | url: "sendInstantMessage.php", |
150 | url: "sendInstantMessage.php", |
|
| 196 | data: { |
151 | data: { |
|
| 197 | name: $("#name").val(), |
152 | name: $("#name").val(), |
|
| Line 201... | Line 156... | |||
| 201 | } |
156 | } |
|
| 202 | }).done(function(data) { |
157 | }).done(function(data) { |
|
| 203 | if(data) |
158 | if(data) |
|
| 204 | alert(data); |
159 | alert(data); |
|
| 205 | $("#message-" + index).val(""); |
160 | $("#message-" + index).val(""); |
|
| 206 | $("#controls-" + index).animate({ |
161 | $("#controls-" + index).animate( |
|
| - | 162 | { |
||
| 207 | opacity: 'show' |
163 | opacity: 1 |
|
| - | 164 | }, |
||
| - | 165 | { |
||
| - | 166 | duration: 1000, |
||
| - | 167 | easing: "linear" |
||
| - | 168 | } |
||
| 208 | }, 'slow'); |
169 | ); |
|
| 209 | }); |
170 | }); |
|
| 210 | } |
171 | } |
|
| Line 211... | Line 172... | |||
| 211 | |
172 | |
|
| 212 | // Loads all the stored instant messages from the log file named after the avatar. |
173 | // Loads all the stored instant messages from the log file named after the avatar. |
|
| 213 | function loadInstantMessage(index) { |
174 | function loadInstantMessage(index) { |
|
| 214 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
175 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
|
| 215 | $("#chat-" + index).html(data); |
- | ||
| 216 | /*$("#chat-" + index).animate({ |
- | ||
| 217 | scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height() |
- | ||
| 218 | }, 1000);*/ |
176 | $("#chat-" + index).html(data); |
|
| 219 | // Scroll to the bottom of the conversation. |
177 | // Scroll to the bottom of the conversation. |
|
| 220 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
178 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
|
| 221 | messageIntervals[index] = setTimeout( |
179 | messageIntervals[index] = setTimeout( |
|
| 222 | loadInstantMessage, |
180 | loadInstantMessage, |
|
| Line 258... | Line 216... | |||
| 258 | var label = first + " " + last, |
216 | var label = first + " " + last, |
|
| 259 | id = "tabs-" + tabCounter, |
217 | id = "tabs-" + tabCounter, |
|
| 260 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
218 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
|
| Line 261... | Line 219... | |||
| 261 | |
219 | |
|
| 262 | tabs.find(".ui-tabs-nav").append(li); |
220 | tabs.find(".ui-tabs-nav").append(li); |
|
| 263 | tabs.append("<div id='" + id + "'><p>" + " \ |
221 | tabs.append("<div id='" + id + "'>"+ " \ |
|
| - | 222 | <div id='container-" + tabCounter + "'> \ |
||
| - | 223 | <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
||
| 264 | <div id='container-" + tabCounter + "'> \ |
224 | <div class='form-group row'> \ |
|
| - | 225 | <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
||
| 265 | <textarea 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> \ |
||
| 266 | <div id='controls-" + tabCounter + "'> \ |
232 | </span> \ |
|
| - | 233 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
||
| 267 | Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \ |
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> \ |
||
| 268 | <button type='button' id='send-" + tabCounter + "'>Send</button> \ |
239 | </div> \ |
|
| 269 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \ |
240 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
|
| 270 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \ |
241 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
|
| 271 | </div> \ |
242 | </form> \ |
|
| 272 | </div> \ |
243 | </div> \ |
|
| 273 | " + "</p></div>"); |
244 | </div>"); |
|
| - | 245 | tabs.tabs("refresh"); |
||
| Line 274... | Line 246... | |||
| 274 | tabs.tabs("refresh"); |
246 | $("#form-" + tabCounter).validator(); |
|
| 275 | |
247 | |
|
| 276 | // Subscribe to click event to send the instant message. |
248 | // Subscribe to click event to send the instant message. |
|
| 277 | $("#send-" + tabCounter).on("click", { |
249 | $("#send-" + tabCounter).on("click", { |
|