GMaps related JS changed to use new google namespace.
Google is going to change permanently in the future the way to
load its services, so better stay safe.
Also this commit shows uses of the new melange.js module.
Fixes Issue 634.
{% extends "base.html" %}
{% block title %}{{ application_name }} Development Console - XMPP{% endblock %}
{% block breadcrumbs %}
<span class="item"><a href="">XMPP</a></span>
{% endblock %}
{% block head %}
<style type="text/css">{% include "css/xmpp.css" %}</style>
<script type="text/javascript">
{% include "js/webhook.js" %}
{% include "js/multipart_form_data.js" %}
var xmppFeedbackEl;
var xmppForm;
var payloadEl;
var fromEl;
var toEl;
var chatEl;
var contentLengthEl;
var contentTypeEl;
var sendXmppWebhook = function() {
if (!xmppFeedbackEl) {
xmppFeedbackEl = document.getElementById('xmpp-feedback');
xmppForm = document.getElementById('xmpp-form');
fromEl = document.getElementById('from');
toEl = document.getElementById('to');
chatEl = document.getElementById('chat');
payloadEl = document.getElementById('payload');
contentTypeEl = document.getElementById('content-type');
}
var to = toEl.value;
var from = fromEl.value;
var body = chatEl.value;
if (!to || !from) {
xmppFeedbackEl.className = 'ae-errorbox';
xmppFeedbackEl.innerHTML = 'From and To are required.';
return;
}
xmppFeedbackEl.className = 'ae-message';
xmppFeedbackEl.innerHTML = 'Sending XMPP message...';
var formData = new MultipartFormData();
formData.addPart('to', to, null, 'form-data');
formData.addPart('from', from, null, 'form-data');
formData.addPart('body', body, null, 'form-data');
formData.addPart('stanza', buildXmlStanza(from, to, body), 'text/xml', 'form-data');
payloadEl.value = formData.toString();
contentTypeEl.value = 'multipart/form-data; boundary=' +
formData.boundary;
(new Webhook('xmpp-form')).run(handleXmppResult);
// Prevents actual form posts.
return false;
};
var handleXmppResult = function(hook, req, error) {
if (error != null || req == null || req.status != 200) {
xmppFeedbackEl.className = 'ae-errorbox';
xmppFeedbackEl.innerHTML = 'Message send failure<br>' +
req.responseText;
} else {
var timestamp;
var dateString = new Date().toString();
var match = dateString.match(/(\d\d:\d\d:\d\d).+\((.+)\)/);
if (!match || !match[0] || !match[2]) {
timestamp = dateString;
} else {
timestamp = match[1] + ' ' + match[2];
}
xmppFeedbackEl.className = 'ae-message';
xmppFeedbackEl.innerHTML = 'Message has been sent at ' + timestamp;
}
};
var buildXmlStanza = function(from, to, body) {
var xml = '<message from="' + from + '" '+
'to="' + to + '">' +
'<body>' + body + '</body>' +
'</message>';
return xml;
};
</script>
{% endblock %}
{% block body %}
<div id="xmpp">
<h3>XMPP</h3>
{% if xmpp_configured %}{% else %}
<div class="ae-errorbox">
XMPP is not yet configured properly in your app.yaml, in the services section.
</div>
{% endif %}
<div id="xmpp-feedback"></div>
<form id="xmpp-form"
action="/_ah/xmpp/message/chat/" method="post"
onsubmit="sendXmppWebhook(); return false">
<input type="hidden" name="payload" id="payload">
<input type="hidden" id="content-type" name="header:Content-Type">
<fieldset>
<input type="hidden" name="message_type" id="message-type-chat" value="chat">
<!--
<legend>Message Type:</legend>
<div class="radio">
<input type="radio" name="message_type" id="message-type-chat" value="chat">
<label for="message-type-chat">Chat message</label>
</div>
<div class="radio">
<input type="radio" name="message_type" id="message-type-xml" value="xml">
<label for="message-type-xml">XML stanza</label>
</div>
<div class="radio">
<input type="radio" name="message_type" id="message-type-presence" value="presence">
<label for="message-type-presence">Presence</label>
</div>
-->
</fieldset>
<div class="fieldset">
<label for="from">From:</label>
<input type="text" id="from" name="from" size="40">
</div>
<div class="fieldset">
<label for="to">To:</label>
<input type="text" id="to" name="to" size="40">
</div>
<div id="chat-c" class="fieldset">
<label for="chat">Chat (plain text):</label>
<textarea id="chat" name="chat" rows="10" cols="50"></textarea>
</div>
<!--
<div id="xml-c" class="fieldset">
<label for="xml">XML Stanza:</label>
<textarea id="xml" name="xml" rows="10" cols="50"></textarea>
</div>
<fieldset id="presence-c">
<legend>Presence:</legend>
<div class="radio">
<input type="radio" id="presence-online" name="presence" value="online">
<label for="presence-online">Online</label>
</div>
<div class="radio">
<input type="radio" id="presence-offline" name="presence" value="offline">
<label for="presence-offline">Offline</label>
</div>
</div>
-->
<div id="xmpp-submit">
<input type="submit" value="Send Message">
</div>
</form>
</div>
<!--
<script type="text/javascript">
var messageTypes = ['chat', 'xml', 'presence'];
var messageTypeEls = [];
for (var i = 0, messageType; messageType = messageTypes[i]; i++) {
var messageTypeEl = document.getElementById('message-type-' +
messageType);
messageTypeEls.push(messageTypeEl);
}
// Initializes the chosen type to be the first radio.
var chosenMessageTypeId = messageTypeEls[0].id;
var messageTypeDict = {};
for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) {
var type = messageTypeEl.id.replace('message-type-', '');
var formEl = document.getElementById(type + '-c');
messageTypeDict[messageTypeEl.id] = formEl;
// Initially hides all of the conditional form elements.
formEl.style.display = 'none';
}
var setChosenMessageType = function(messageTypeId) {
document.getElementById(messageTypeId).checked = true;
// Hides previously chosen message type
messageTypeDict[chosenMessageTypeId].style.display = 'none';
// Sets the new chosen type and shows its field.
chosenMessageTypeId = messageTypeId;
messageTypeDict[chosenMessageTypeId].style.display = '';
}
var messageTypeClickHandler = function(e) {
for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) {
if (messageTypeEl.checked) {
setChosenMessageType(messageTypeEl.id);
break;
}
}
};
// set up event listeners
for (var i = 0, messageTypeEl; messageTypeEl = messageTypeEls[i]; i++) {
messageTypeEl.onclick = messageTypeClickHandler;
}
// Init
setChosenMessageType(chosenMessageTypeId);
</script>
-->
{% endblock %}
{% block final %}
{% endblock %}