104 lines
3.4 KiB
HTML
104 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ quest_title }}{% endblock %}
|
|
{% block head %}
|
|
<script type="text/javascript" src="/static/socket.io.slim.js"></script>
|
|
<script>
|
|
var socket;
|
|
var tid = setInterval( function () {
|
|
if ( document.readyState !== 'complete' ) return;
|
|
clearInterval( tid );
|
|
|
|
socket = io.connect('https://' + document.domain + ':' + location.port);
|
|
socket.on('connect', function() {
|
|
socket.emit('joined', {room: {{ room_id }}});
|
|
});
|
|
socket.on('message', function(data) {
|
|
date = new Date(data.date * 1000);
|
|
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
|
|
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
|
|
|
|
msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
|
|
msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
|
|
msg_str += '<div class="message">' + data.message + '</div>\n';
|
|
|
|
mbox = document.getElementById('chatWindow');
|
|
mbox.innerHTML = mbox.innerHTML + msg_str;
|
|
mbox.scrollTop = mbox.scrollHeight;
|
|
});
|
|
socket.on('new_post', function(data) {
|
|
qposts = document.getElementById('questPosts');
|
|
qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>';
|
|
});
|
|
mtarea = document.getElementById('messageTextArea');
|
|
mtarea.addEventListener('keypress', function(event) {
|
|
if (event.key == 'Enter' && !event.shiftKey) {
|
|
text = mtarea.value.trim();
|
|
mtarea.value = '';
|
|
if (text == '') { return; }
|
|
socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}});
|
|
}
|
|
});
|
|
}, 100 );
|
|
</script>
|
|
<script>
|
|
function padToTwo(number) {
|
|
if (number<=99) { number = ("0"+number).slice(-2); }
|
|
return number;
|
|
}
|
|
</script>
|
|
{% if session.get("user_id") == owner_id %}
|
|
<script>
|
|
function makePost() {
|
|
qparea = document.getElementById('postTextArea');
|
|
text = qparea.value.trim();
|
|
qparea.value = '';
|
|
if (text == '') { return; }
|
|
socket.emit('new_post', {post: text, room: {{ room_id }}});
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block header %}
|
|
{% if session.get("user_id") == owner_id %}
|
|
<li><a href="{{ url_for('views.edit_quest') }}">Edit Quest</a></li>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="questContainer">
|
|
<div id="questBody">
|
|
<h1>{{ quest_title }}</h1>
|
|
<div id="questPosts">
|
|
{% for quest_post in quest_posts %}
|
|
{% autoescape false %}
|
|
<div class="questPost">
|
|
{{ quest_post[1] }}
|
|
</div>
|
|
{% endautoescape %}
|
|
{% endfor %}
|
|
</div>
|
|
{% if session.get("user_id") == owner_id %}
|
|
<div id="postTextDiv">
|
|
<textarea id="postTextArea"></textarea><br />
|
|
<input type="submit" name="newPost" value="Post" onclick="makePost();"/>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div id="chatPane">
|
|
<h1>Chat</h1>
|
|
<div id="chatWindow">
|
|
{% autoescape false %}
|
|
{% for message in messages %}
|
|
<div class="message">
|
|
<div class="messageHeader">
|
|
<span class="messageName">{{ message[1] }}</span> <span class="messageDate">{{ message[3] | strftime }}</span>
|
|
</div>
|
|
<div class="messageMessage">{{ message[4] }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endautoescape %}
|
|
</div>
|
|
<div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|