Add chat form that sends messages to Flask server

chat/minecraft-chat.ini

@@ -0,0 +1,11 @@
+[uwsgi]
+module = wsgi:application
+
+master = true
+processes = 2
+
+socket = minecraft-chat.sock
+chmod-socket = 664
+vacuum = true
+
+die-on-term = true

chat/server.py

@@ -0,0 +1,34 @@
+import logging
+import subprocess
+
+from flask import Flask, request
+
+app = Flask(__name__)
+
+
+@app.before_first_request
+def setup_logging():
+    app.logger.addHandler(logging.StreamHandler())
+    app.logger.setLevel(logging.INFO)
+
+
+@app.route('/chat/', methods=['GET', 'POST'])
+def send_chat():
+    if request.method == 'POST':
+        if request.form.get('email', None):
+            return 'Text was entered into honeypot!', 200
+        if not request.form.get('say-text', None):
+            return 'No message to send!', 422
+        if request.form.get('say-username', None):
+            subprocess.call(['/usr/bin/screen', '-S', 'mc-panic-shack', '-p', '0', '-X', 'stuff',
+                             '/say [{}]: {}\015'.format(request.form['say-username'], request.form['say-text'])])
+        else:
+            subprocess.call(['/usr/bin/screen', '-S', 'mc-panic-shack', '-p', '0', '-X', 'stuff',
+                             '/say {}\015'.format(request.form['say-text'])])
+        return 'Sending chat: ' + request.form.get('say-username', '') + ': ' + request.form['say-text']
+    else:
+        app.logger.info('Hello, world!')
+        return 'Hello, world!'
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port="8888")

css/styles.css

@@ -81,3 +81,52 @@ ol li code {
   max-height: 600px;
   overflow: scroll;
 }
+
+#say-header {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+#say-form {
+  border: 1px dashed darkgray;
+  padding: 10px;
+}
+
+#say-form label {
+  width: 100%;
+}
+
+#say-form, #say-send {
+  margin-top: 5px;
+}
+
+#say-username, #say-text {
+  margin-bottom: 5px;
+  margin-right: 5px;
+}
+
+#say-text {
+  width: 100%;
+}
+
+#say-dnf {
+  position: absolute;
+  left: -2000px;
+}
+
+#say-sending {
+  display: none;
+}
+
+#say-error {
+  color: darkred;
+}
+
+#say-success {
+  display: none;
+}
+
+#say-notice {
+  margin-top: 5px;
+  margin-bottom: 0;
+}

index.html

@@ -85,10 +85,30 @@
 
         <div class="width-limit">
             <label>
-              <input type="checkbox" id="auto-scroll" checked>
-              Automatically scroll to bottom on log refresh
+                <input type="checkbox" id="auto-scroll" checked>
+                Automatically scroll to bottom on log refresh
             </label>
             <p class="small-text">Updated every 10 seconds.</p>
+            <h3 id="say-header">Send Chat to Server</h3>
+            <form id="say-form">
+              <label class="inline">
+                  Name:
+                  <br>
+                  <input type="text" name="say-username" id="say-username">
+              </label>
+              <label class="inline">
+                  Say:
+                  <br>
+                  <input type="text" name="say-text" id="say-text">
+              </label>
+              <br>
+              <input type="text" name="email" id="say-dnf">
+              <input type="submit" name="say-send" id="say-send" class="inline" value="Send Chat">
+              <span id="say-sending" class="inline">Sending...</span>
+              <span id="say-success" class="inline">Sent!</span>
+              <span id="say-error" class="inline"></span>
+              <p id="say-notice" class="small-text">It may take a minute or two before the message appears in the above server log.</p>
+            </form>
         </div>
 
         <script src="https://mcapi.us/scripts/minecraft.js"></script>
@@ -96,5 +116,6 @@
         <script src="js/getStatus.js"></script>
         <script src="js/getLog.js"></script>
         <script src="js/getMapUpdate.js"></script>
+        <script src="js/sendChat.js"></script>
     </body>
 </html>

js/sendChat.js

@@ -0,0 +1,34 @@
+var form = document.getElementById('say-form');
+var username = document.getElementById('say-username');
+var text = document.getElementById('say-text');
+var send = document.getElementById('say-send');
+var sending = document.getElementById('say-sending');
+var success = document.getElementById('say-success');
+var error = document.getElementById('say-error');
+
+function sendChat(e) {
+  e.preventDefault();
+
+  var xhr = new XMLHttpRequest();
+  var formData = new FormData(form);
+  xhr.addEventListener('load', function (event) {
+    console.log(event.target.responseText);
+    if (event.target.status === 200) {
+      error.textContent = '';
+      text.value = '';
+      success.style.display = 'inline-block';
+    } else if (event.target.status === 422) {
+      error.textContent = 'You must give a message to send! (' + event.target.status + ')';
+      success.style.display = 'none';
+    } else {
+      error.textContent = 'Error Sending! (' + event.target.status + ')';
+      success.style.display = 'none';
+    }
+    sending.style.display = 'none';
+  });
+  xhr.open('POST', '/chat/');
+  xhr.send(formData);
+  sending.style.display = 'inline-block';
+}
+
+form.addEventListener('submit', sendChat);