basic messaging added

jinja2/base.html

@@ -36,7 +36,7 @@
 	<ul id="headerHidden" class="header" style="{% if request.session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}">
 		<li><a onclick="toggleHeader();" href="javascript:void(0);">⤓</a></li>
 	</ul>
-	<br /> <!-- TODO: make this more exact. -->
+	{#<br /> <!-- TODO: make this more exact. -->#}
 	<div id="messages">
 		<ul class="messages">
 			{% for message in get_messages(request) %}

quest/events.py

@@ -3,17 +3,31 @@
 Individual functions for handling WebSocket events. Gets called by the
 QuestConsumer object in consumers.py.
 """
+import time
 import types
 
+import bleach
+
 def message(socket, data):
 	"""
 	Gets called when the server receives a 'message' event.
 	"""
 	message = data.get('message')
-	print(message)
+
+	message = message.strip()
+	if not message:
+		return
+	tags = ["b", "code", "i", "s"]
+	message = bleach.clean(message, tags=tags)
+	message_id = 1
+	date = int(time.time())
+	name = "Anonymous"
 
 	data = {}
-	data['message'] = message.upper()
+	data['message_id'] = message_id
+	data['message'] = message
+	data['date'] = date
+	data['name'] = name
 	socket.send('message', data)
 
 

quest/jinja2/quest/quest.html

@@ -11,7 +11,7 @@
 	{% if request.user == quest.owner %}
 	{#<script type="text/javascript" src="{{ static('questQM.js') }}"></script>#}
 	{% endif %}
-	{#<script>window.onload = load;</script>#}
+	<script>window.onload = load;</script>
 {% endblock %}
 {% block header %}
 {% if request.user == quest.owner %}

quest/static/quest.js

@@ -14,6 +14,40 @@ socket.onmessage = function(e) {
 }
 
 socket.events['message'] = function(data) {
-	let message = data.message;
+	let msg_str = '<div id="message-' + data.message_id + '" class="message">';
-	console.log(message);
+	msg_str = '<div class="messageHeader"><span class="messageName">' + data.name + '</span> ';
+	msg_str += '<span class="messageDate">' + strftime(data.date) + '</span> ';
+	msg_str += '<span class="messageID">No.<a href="javascript:quote(' + data.message_id + ')">' + data.message_id + '</a></span></div>';
+	msg_str += '<div class="messageContent">' + data.message + '</div></div><hr>';
+
+	let mbox = document.getElementById('chatWindow');
+	mbox.innerHTML = mbox.innerHTML + msg_str;
+	if ((mbox.scrollTop + mbox.offsetHeight) >= (mbox.scrollHeight - mbox.clientHeight / 2)) {
+		mbox.scrollTop = mbox.scrollHeight;
+	}
+}
+
+function padToTwo(number) {
+	if (number<=99) { number = ("0"+number).slice(-2); }
+	return number;
+}
+function strftime(date) {
+	date = new Date(date * 1000);
+	let date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
+	date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
+	return date_str;
+}
+
+function load() {
+	document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
+	let mtarea = document.getElementById('messageTextArea');
+	mtarea.addEventListener('keypress', function(event) {
+		if (event.key == 'Enter' && !event.shiftKey) {
+			let text = mtarea.value.trim();
+			mtarea.value = '';
+			if (text == '') { return; }
+			document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
+			socket.send('message', {message: text});
+		}
+	});
 }