anonkun/templates/quest.html

129 lines
4.7 KiB
HTML
Raw Normal View History

{% extends "base.html" %}
{% block title %}{{ quest_title }}{% endblock %}
{% block head %}
<script type="text/javascript" src="/static/socket.io.slim.js"></script>
<script>
2018-06-20 22:21:22 -04:00
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) {
2018-06-21 20:44:43 -04:00
var date = new Date(data.date * 1000);
var date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
2018-06-20 22:21:22 -04:00
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
2018-06-21 20:44:43 -04:00
var msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
2018-06-20 22:21:22 -04:00
msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
msg_str += '<div class="message">' + data.message + '</div>\n';
2018-06-21 20:44:43 -04:00
var mbox = document.getElementById('chatWindow');
2018-06-20 22:21:22 -04:00
mbox.innerHTML = mbox.innerHTML + msg_str;
mbox.scrollTop = mbox.scrollHeight;
});
socket.on('new_post', function(data) {
2018-06-21 20:44:43 -04:00
var qposts = document.getElementById('questPosts');
2018-06-20 22:21:22 -04:00
qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>';
});
2018-06-21 20:44:43 -04:00
socket.on('update_post', function(data) {
var post_id = data.post_id;
document.getElementById('questPostData-' + post_id).innerHTML = data.post;
});
var mtarea = document.getElementById('messageTextArea');
2018-06-20 22:21:22 -04:00
mtarea.addEventListener('keypress', function(event) {
if (event.key == 'Enter' && !event.shiftKey) {
2018-06-21 20:44:43 -04:00
var text = mtarea.value.trim();
2018-06-20 22:21:22 -04:00
mtarea.value = '';
if (text == '') { return; }
socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}});
}
});
}, 100 );
2018-06-19 11:54:51 -04:00
</script>
<script>
2018-06-20 22:21:22 -04:00
function padToTwo(number) {
if (number<=99) { number = ("0"+number).slice(-2); }
return number;
}
</script>
{% if session.get("user_id") == owner_id %}
<script>
function makePost() {
2018-06-21 20:44:43 -04:00
var qparea = document.getElementById('postTextArea');
var text = qparea.value.trim();
qparea.value = '';
if (text == '') { return; }
2018-06-20 22:21:22 -04:00
socket.emit('new_post', {post: text, room: {{ room_id }}});
}
2018-06-21 20:44:43 -04:00
function edit_post(post_id) {
document.getElementById('questPostData-' + post_id).contentEditable = 'true';
document.getElementById('questPostData-' + post_id).style.border = '1px solid #ccc'
document.getElementById('savePost-' + post_id).style.display = 'initial';
}
function save_post(post_id) {
document.getElementById('questPostData-' + post_id).contentEditable = 'false';
document.getElementById('questPostData-' + post_id).style.border = null;
var text = document.getElementById('questPostData-' + post_id).innerHTML;
socket.emit('update_post', {post_id: post_id, post: text, room: {{ room_id }}});
document.getElementById('savePost-' + post_id).style.display = 'none';
}
</script>
{% endif %}
{% endblock %}
{% block header %}
{% if session.get("user_id") == owner_id %}
<li><a href="{{ url_for('.edit_quest') }}">Edit Quest</a></li>
{% endif %}
{% endblock %}
{% block content %}
<div id="questContainer">
<div id="questBody">
<h1>{{ quest_title }}</h1>
2018-06-21 15:40:38 -04:00
<table id="questPosts">
{% for quest_post in quest_posts %}
2018-06-21 15:40:38 -04:00
<tr>
2018-06-21 20:44:43 -04:00
<td class="questPostTime">
{{ quest_post[3] | strftime }}
{% if session.get("user_id") == owner_id %}
<br /><a href="javascript:void(0);" onclick="edit_post('{{ quest_post[0] }}')">Edit</a>
<a href="javascript:void(0);" id="savePost-{{ quest_post[0] }}" onclick="save_post('{{ quest_post[0] }}')" style="display:none;">Save</a>
{% endif %}
</td>
<td class="questPostData" id="questPostData-{{ quest_post[0] }}">
2018-06-21 15:40:38 -04:00
{% autoescape false %}
2018-06-21 20:44:43 -04:00
{{ quest_post[2] }}
2018-06-21 15:40:38 -04:00
{% endautoescape %}
</td>
</tr>
{% endfor %}
2018-06-21 15:40:38 -04:00
</table>
{% 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 %}