|
1 {% extends "base.html" %} |
|
2 |
|
3 {% block title %}{{ application_name }} Development Console - XMPP{% endblock %} |
|
4 |
|
5 {% block breadcrumbs %} |
|
6 <span class="item"><a href="">XMPP</a></span> |
|
7 {% endblock %} |
|
8 |
|
9 {% block head %} |
|
10 <style type="text/css">{% include "css/xmpp.css" %}</style> |
|
11 <script type="text/javascript"> |
|
12 {% include "js/webhook.js" %} |
|
13 {% include "js/multipart_form_data.js" %} |
|
14 |
|
15 var xmppFeedbackEl; |
|
16 var xmppForm; |
|
17 var payloadEl; |
|
18 var fromEl; |
|
19 var toEl; |
|
20 var chatEl; |
|
21 var contentLengthEl; |
|
22 var contentTypeEl; |
|
23 |
|
24 var sendXmppWebhook = function() { |
|
25 |
|
26 if (!xmppFeedbackEl) { |
|
27 xmppFeedbackEl = document.getElementById('xmpp-feedback'); |
|
28 xmppForm = document.getElementById('xmpp-form'); |
|
29 fromEl = document.getElementById('from'); |
|
30 toEl = document.getElementById('to'); |
|
31 chatEl = document.getElementById('chat'); |
|
32 payloadEl = document.getElementById('payload'); |
|
33 contentTypeEl = document.getElementById('content-type'); |
|
34 } |
|
35 |
|
36 var to = toEl.value; |
|
37 var from = fromEl.value; |
|
38 var body = chatEl.value; |
|
39 |
|
40 if (!to || !from) { |
|
41 xmppFeedbackEl.className = 'ae-errorbox'; |
|
42 xmppFeedbackEl.innerHTML = 'From and To are required.'; |
|
43 return; |
|
44 } |
|
45 |
|
46 xmppFeedbackEl.className = 'ae-message'; |
|
47 xmppFeedbackEl.innerHTML = 'Sending XMPP message...'; |
|
48 |
|
49 var formData = new MultipartFormData(); |
|
50 formData.addPart('to', to, null, 'form-data'); |
|
51 formData.addPart('from', from, null, 'form-data'); |
|
52 formData.addPart('body', body, null, 'form-data'); |
|
53 formData.addPart('stanza', buildXmlStanza(from, to, body), 'text/xml', 'form-data'); |
|
54 |
|
55 payloadEl.value = formData.toString(); |
|
56 contentTypeEl.value = 'multipart/form-data; boundary=' + |
|
57 formData.boundary; |
|
58 |
|
59 (new Webhook('xmpp-form')).run(handleXmppResult); |
|
60 |
|
61 // Prevents actual form posts. |
|
62 return false; |
|
63 }; |
|
64 |
|
65 var handleXmppResult = function(hook, req, error) { |
|
66 if (error != null || req == null || req.status != 200) { |
|
67 xmppFeedbackEl.className = 'ae-errorbox'; |
|
68 xmppFeedbackEl.innerHTML = 'Message send failure<br>' + |
|
69 req.responseText; |
|
70 } else { |
|
71 var timestamp; |
|
72 var dateString = new Date().toString(); |
|
73 var match = dateString.match(/(\d\d:\d\d:\d\d).+\((.+)\)/); |
|
74 if (!match || !match[0] || !match[2]) { |
|
75 timestamp = dateString; |
|
76 } else { |
|
77 timestamp = match[1] + ' ' + match[2]; |
|
78 } |
|
79 |
|
80 xmppFeedbackEl.className = 'ae-message'; |
|
81 xmppFeedbackEl.innerHTML = 'Message has been sent at ' + timestamp; |
|
82 } |
|
83 }; |
|
84 |
|
85 var buildXmlStanza = function(from, to, body) { |
|
86 var xml = '<message from="' + from + '" '+ |
|
87 'to="' + to + '">' + |
|
88 '<body>' + body + '</body>' + |
|
89 '</message>'; |
|
90 return xml; |
|
91 }; |
|
92 </script> |
|
93 {% endblock %} |
|
94 |
|
95 {% block body %} |
|
96 <div id="xmpp"> |
|
97 <h3>XMPP</h3> |
|
98 {% if xmpp_configured %}{% else %} |
|
99 <div class="ae-errorbox"> |
|
100 XMPP is not yet configured properly in your app.yaml, in the services section. |
|
101 </div> |
|
102 {% endif %} |
|
103 <div id="xmpp-feedback"></div> |
|
104 <form id="xmpp-form" |
|
105 action="/_ah/xmpp/message/chat/" method="post" |
|
106 onsubmit="sendXmppWebhook(); return false"> |
|
107 |
|
108 <input type="hidden" name="payload" id="payload"> |
|
109 <input type="hidden" id="content-type" name="header:Content-Type"> |
|
110 |
|
111 <fieldset> |
|
112 <input type="hidden" name="message_type" id="message-type-chat" value="chat"> |
|
113 <!-- |
|
114 <legend>Message Type:</legend> |
|
115 <div class="radio"> |
|
116 <input type="radio" name="message_type" id="message-type-chat" value="chat"> |
|
117 <label for="message-type-chat">Chat message</label> |
|
118 </div> |
|
119 |
|
120 <div class="radio"> |
|
121 <input type="radio" name="message_type" id="message-type-xml" value="xml"> |
|
122 <label for="message-type-xml">XML stanza</label> |
|
123 </div> |
|
124 |
|
125 <div class="radio"> |
|
126 <input type="radio" name="message_type" id="message-type-presence" value="presence"> |
|
127 <label for="message-type-presence">Presence</label> |
|
128 </div> |
|
129 --> |
|
130 </fieldset> |
|
131 |
|
132 <div class="fieldset"> |
|
133 <label for="from">From:</label> |
|
134 <input type="text" id="from" name="from" size="40"> |
|
135 </div> |
|
136 |
|
137 |
|
138 <div class="fieldset"> |
|
139 <label for="to">To:</label> |
|
140 <input type="text" id="to" name="to" size="40"> |
|
141 </div> |
|
142 |
|
143 |
|
144 <div id="chat-c" class="fieldset"> |
|
145 <label for="chat">Chat (plain text):</label> |
|
146 <textarea id="chat" name="chat" rows="10" cols="50"></textarea> |
|
147 </div> |
|
148 |
|
149 <!-- |
|
150 <div id="xml-c" class="fieldset"> |
|
151 <label for="xml">XML Stanza:</label> |
|
152 <textarea id="xml" name="xml" rows="10" cols="50"></textarea> |
|
153 </div> |
|
154 |
|
155 |
|
156 <fieldset id="presence-c"> |
|
157 <legend>Presence:</legend> |
|
158 |
|
159 <div class="radio"> |
|
160 <input type="radio" id="presence-online" name="presence" value="online"> |
|
161 <label for="presence-online">Online</label> |
|
162 </div> |
|
163 |
|
164 <div class="radio"> |
|
165 <input type="radio" id="presence-offline" name="presence" value="offline"> |
|
166 <label for="presence-offline">Offline</label> |
|
167 </div> |
|
168 </div> |
|
169 --> |
|
170 |
|
171 <div id="xmpp-submit"> |
|
172 <input type="submit" value="Send Message"> |
|
173 </div> |
|
174 |
|
175 </form> |
|
176 </div> |
|
177 <!-- |
|
178 <script type="text/javascript"> |
|
179 var messageTypes = ['chat', 'xml', 'presence']; |
|
180 |
|
181 var messageTypeEls = []; |
|
182 for (var i = 0, messageType; messageType = messageTypes[i]; i++) { |
|
183 var messageTypeEl = document.getElementById('message-type-' + |
|
184 messageType); |
|
185 messageTypeEls.push(messageTypeEl); |
|
186 } |
|
187 |
|
188 // Initializes the chosen type to be the first radio. |
|
189 var chosenMessageTypeId = messageTypeEls[0].id; |
|
190 |
|
191 var messageTypeDict = {}; |
|
192 for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) { |
|
193 var type = messageTypeEl.id.replace('message-type-', ''); |
|
194 var formEl = document.getElementById(type + '-c'); |
|
195 messageTypeDict[messageTypeEl.id] = formEl; |
|
196 // Initially hides all of the conditional form elements. |
|
197 formEl.style.display = 'none'; |
|
198 } |
|
199 |
|
200 var setChosenMessageType = function(messageTypeId) { |
|
201 document.getElementById(messageTypeId).checked = true; |
|
202 |
|
203 // Hides previously chosen message type |
|
204 messageTypeDict[chosenMessageTypeId].style.display = 'none'; |
|
205 |
|
206 // Sets the new chosen type and shows its field. |
|
207 chosenMessageTypeId = messageTypeId; |
|
208 messageTypeDict[chosenMessageTypeId].style.display = ''; |
|
209 } |
|
210 |
|
211 var messageTypeClickHandler = function(e) { |
|
212 for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) { |
|
213 if (messageTypeEl.checked) { |
|
214 setChosenMessageType(messageTypeEl.id); |
|
215 break; |
|
216 } |
|
217 } |
|
218 }; |
|
219 |
|
220 // set up event listeners |
|
221 for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) { |
|
222 messageTypeEl.onclick = messageTypeClickHandler; |
|
223 } |
|
224 |
|
225 // Init |
|
226 setChosenMessageType(chosenMessageTypeId); |
|
227 |
|
228 </script> |
|
229 --> |
|
230 |
|
231 {% endblock %} |
|
232 |
|
233 {% block final %} |
|
234 {% endblock %} |