thirdparty/google_appengine/google/appengine/ext/admin/templates/xmpp.html
changeset 2864 2e0b0af889be
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/thirdparty/google_appengine/google/appengine/ext/admin/templates/xmpp.html	Sun Sep 06 23:31:53 2009 +0200
@@ -0,0 +1,234 @@
+{% 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 %}