From 6ae8adebad0cb038f8f0195021220c88afc098e6 Mon Sep 17 00:00:00 2001 From: iou1name Date: Fri, 20 Jul 2018 16:37:55 -0400 Subject: [PATCH] write-in box added and split javascript into seperate files --- anonkun.py | 13 +++ database.py | 6 ++ events.py | 7 +- static/anonkun.css | 4 + static/anonkunQM.js | 212 ++++++++++++++++++++++++++++++++++++++++++ static/anonkunUser.js | 137 +++++++++++++++++++++++++++ templates/quest.html | 211 ++--------------------------------------- 7 files changed, 386 insertions(+), 204 deletions(-) create mode 100644 static/anonkunQM.js create mode 100644 static/anonkunUser.js diff --git a/anonkun.py b/anonkun.py index ab78cc1..e60eeb5 100644 --- a/anonkun.py +++ b/anonkun.py @@ -99,6 +99,19 @@ def get_dice_challenge(post_id): return db.get_dice_call(post_id)[3] +@app.template_filter("is_write_in") +def is_write_in(post_id): + """ + Returns true if the provided post_id is a poll write-in's are + allowed in it. + """ + poll = db.get_poll(post_id) + if poll and poll[3]: + return True + else: + return False + + @app.after_request def minify(res): """ diff --git a/database.py b/database.py index b2bb914..0c3a27f 100644 --- a/database.py +++ b/database.py @@ -295,6 +295,12 @@ def insert_poll_option(post_id, option_text): + "(`post_id`, `option_text`) VALUES (%s, %s)", (post_id, option_text)) + option_id = _DB.execute( + "SELECT `option_id` FROM `poll_options` WHERE `post_id` = %s " \ + + "ORDER BY `option_id` DESC", + (post_id,)).fetchone()[0] + return option_id + def get_poll_options(quest_id): """Gets all relevent poll options for a given quest or post.""" diff --git a/events.py b/events.py index 2591f90..f80dcbe 100644 --- a/events.py +++ b/events.py @@ -296,8 +296,10 @@ def poll_post(data): post_id = db.insert_quest_post(room, "poll", post, date) db.insert_poll(post_id, room, multi_choice, allow_writein) + new_options = [] for option in options: - db.insert_poll_option(post_id, option) + option_id = db.insert_poll_option(post_id, option) + new_options.append((option_id, option)) db.set_post_open(post_id, room) data = {} @@ -305,7 +307,7 @@ def poll_post(data): data["post_id"] = post_id data["post_type"] = "poll" data["date"] = int(time.time()) - data["options"] = options + data["options"] = new_options emit("new_post", data, room=room) @@ -336,6 +338,7 @@ def vote(data): data["option_id"] = vote[0] data["polarity"] = False emit("vote", data, room=room) + emit("toggle_option_box", data, room=request.sid) db.insert_poll_vote(option_id, ip_address) diff --git a/static/anonkun.css b/static/anonkun.css index 1437e3e..f1a4620 100644 --- a/static/anonkun.css +++ b/static/anonkun.css @@ -163,6 +163,10 @@ h3 { color: black; } +#writeinInput { + width: 100%; +} + #chatPane { height: 100%; width: 30%; diff --git a/static/anonkunQM.js b/static/anonkunQM.js new file mode 100644 index 0000000..231c720 --- /dev/null +++ b/static/anonkunQM.js @@ -0,0 +1,212 @@ +document.execCommand("defaultParagraphSeparator", false, "br"); +var socket; +var tid = setInterval( function () { + if ( document.readyState !== 'complete' ) return; + clearInterval( tid ); + + document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight; + socket = io.connect('https://' + document.domain + ':' + location.port); + socket.on('connect', function() { + socket.emit('joined', {room: room_id}); + }); + socket.on('message', function(data) { + let msg_str = '
' + data.name + ' '; + msg_str += '' + strftime(data.date) + '
'; + msg_str += '
' + data.message + '
'; + + let mbox = document.getElementById('chatWindow'); + mbox.innerHTML = mbox.innerHTML + msg_str; + mbox.scrollTop = mbox.scrollHeight; + }); + socket.on('new_post', function(data) { + deactivate_post(); + let qposts = document.getElementById('questPosts'); + let post_str = '
'; + } else if (data.post_type == 'dice') { + post_str += 'dicePost active_post">'; + } else if (data.post_type == 'poll') { + post_str += 'pollPost active_post">'; + } + post_str += '
' + strftime(data.date); + if (data.post_type == 'text') { + post_str += '
Edit'; + post_str += ''; + } else if (data.post_type == 'dice' || data.post_type == 'poll') { + post_str += '
Close'; + post_str += '' + } + post_str += '
'; + if (data.post_type == 'text') { + post_str += data.post; + } else if (data.post_type == 'dice') { + post_str += '

' + data.post + ' - Open

'; + } else if (data.post_type == 'poll') { + post_str += '

' + data.post + ' - Open

'; + post_str += ''; + post_str += ''; + for (i = 0; i < data.options.length; i++) { + post_str += ''; + post_str += ''; + post_str += ''; + post_str += ''; + } + post_str += '
'; + post_str += '' + data.options[i][1] + '0
'; + } + post_str += '

'; + qposts.innerHTML = qposts.innerHTML + post_str; + }); + socket.on('update_post', function(data) { + let post_id = data.post_id; + let post = document.getElementById('questPostData-' + post_id); + if (data.post_type == 'text') { + post.innerHTML = data.post; + } + else if (data.post_type == 'dice') { + post.innerHTML += '' + data.post + '
'; + } + }); + socket.on('close_post', function(data) { + let post = document.getElementById('questPostData-' + data.post_id); + post.children[0].textContent = post.children[0].textContent.replace('Open', 'Closed'); + document.getElementById('close_post_id-' + data.post_id).style.display = 'none'; + document.getElementById('open_post_id-' + data.post_id).style.display = 'initial'; + if (post.parentElement.classList.contains('pollPost')) { + let table = document.getElementById('poll-' + data.post_id); + table.getElementsByTagName("col")[0].style.visibility = 'collapse'; + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.style.display = 'none'; + } + } + }); + socket.on('open_post', function(data) { + let post = document.getElementById('questPostData-' + data.post_id); + post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Closed', 'Open'); + document.getElementById('close_post_id-' + data.post_id).style.display = 'initial'; + document.getElementById('open_post_id-' + data.post_id).style.display = 'none'; + if (post.parentElement.classList.contains('pollPost')) { + table = document.getElementById('poll-' + data.post_id); + table.getElementsByTagName("col")[0].style.visibility = ''; + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.style.display = 'initial'; + } + } + }); + socket.on('vote', function(data) { + let row = document.getElementById('optionRow-' + data.option_id); + if (data.polarity) { + row.cells[2].textContent = Number(row.cells[2].textContent) + 1; + } else { + row.cells[2].textContent = Number(row.cells[2].textContent) - 1; + } + }); + socket.on('toggle_option_box', function(data) { + document.getElementById('pollInput-' + data.option_id).checked = data.polarity; + }); + 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; } + socket.emit('message', {message: text, name: 'Anonymous', room: room_id}); + } + }); +}, 100 ); +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 pollVote(post_id, option_id) { + let polarity = document.getElementById('pollInput-' + option_id).checked; + socket.emit('vote', {post_id: post_id, option_id: option_id, polarity: polarity, room: room_id}); +} +function makePost() { + let qparea = document.getElementById('postTextArea'); + let text = qparea.value.trim(); + qparea.value = ''; + if (text == '') { return; } + socket.emit('new_post', {post: text, room: room_id}); +} +function edit_post(post_id) { + document.getElementById('questPostData-' + post_id).contentEditable = 'true'; + document.execCommand("defaultParagraphSeparator", false, "br"); + document.getElementById('questPostData-' + post_id).style.border = '1px solid #ccc'; + document.getElementById('savePost-' + post_id).style.display = 'initial'; + document.getElementById('editPost-' + post_id).style.display = 'none'; +} +function save_post(post_id) { + document.getElementById('questPostData-' + post_id).contentEditable = 'false'; + document.getElementById('questPostData-' + post_id).style.border = null; + let 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'; + document.getElementById('editPost-' + post_id).style.display = 'initial'; +} +function form_post(form_id, emit_msg) { + let formData = new FormData(document.getElementById(form_id)); + let obj = {}; + formData.forEach(function(value, key) { + obj[key] = value; + }); + obj.room = room_id; + socket.emit(emit_msg, obj); + document.getElementById(form_id).reset(); +} +function close_post(post_id) { + socket.emit('close_post', {post_id: post_id, room: room_id}); +} +function open_post(post_id) { + socket.emit('open_post', {post_id: post_id, room: room_id}); +} +function deactivate_post() { + let post = document.getElementsByClassName('active_post'); + if (post.length == 0) { return; } + post = post[0]; + post.children[1].children[0].textContent = post.children[1].children[0].textContent.replace('Open', 'Closed'); + post.classList.remove("active_post"); + post.children[0].children[2].outerHTML = ""; + post.children[0].children[1].outerHTML = ""; + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.outerHTML = ''; + } +} +function insertPollOption() { + let opts = document.getElementById('pollOptions'); + let num = opts.children.length+1; + let temp = document.createElement('template'); + temp.innerHTML = '
'; + opts.appendChild(temp.content); +} +function removePollOption() { + let opts = document.getElementById('pollOptions'); + if (opts.children.length == 0) { return; } + opts.children[opts.children.length-1].outerHTML = ''; +} +function openPostTab(event, modeName) { + let i, QMPostTabContent, QMPostTab; + + QMPostTabContent = document.getElementsByClassName("QMPostTabContent"); + for (i = 0; i < QMPostTabContent.length; i++) { + QMPostTabContent[i].style.display = "none"; + } + + QMPostTab = document.getElementsByClassName("QMPostTab"); + for (i = 0; i < QMPostTab.length; i++) { + QMPostTab[i].className = QMPostTab[i].className.replace(" active", ""); + } + + document.getElementById(modeName).style.display = "block"; + event.currentTarget.className += " active"; +} diff --git a/static/anonkunUser.js b/static/anonkunUser.js new file mode 100644 index 0000000..e7a33fe --- /dev/null +++ b/static/anonkunUser.js @@ -0,0 +1,137 @@ +document.execCommand("defaultParagraphSeparator", false, "br"); +var socket; +var tid = setInterval( function () { + if ( document.readyState !== 'complete' ) return; + clearInterval( tid ); + + document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight; + socket = io.connect('https://' + document.domain + ':' + location.port); + socket.on('connect', function() { + socket.emit('joined', {room: room_id}); + }); + socket.on('message', function(data) { + let msg_str = '
' + data.name + ' '; + msg_str += '' + strftime(data.date) + '
'; + msg_str += '
' + data.message + '
'; + + let mbox = document.getElementById('chatWindow'); + mbox.innerHTML = mbox.innerHTML + msg_str; + mbox.scrollTop = mbox.scrollHeight; + }); + socket.on('new_post', function(data) { + deactivate_post(); + let qposts = document.getElementById('questPosts'); + let post_str = '
'; + } else if (data.post_type == 'dice') { + post_str += 'dicePost active_post">'; + } else if (data.post_type == 'poll') { + post_str += 'pollPost active_post">'; + } + post_str += '
' + strftime(data.date); + post_str += '
'; + if (data.post_type == 'text') { + post_str += data.post; + } else if (data.post_type == 'dice') { + post_str += '

' + data.post + ' - Open

'; + } else if (data.post_type == 'poll') { + post_str += '

' + data.post + ' - Open

'; + post_str += ''; + post_str += ''; + for (i = 0; i < data.options.length; i++) { + post_str += ''; + post_str += ''; + post_str += ''; + post_str += ''; + } + post_str += '
'; + post_str += '' + data.options[i][1] + '0
'; + } + post_str += '

'; + qposts.innerHTML = qposts.innerHTML + post_str; + }); + socket.on('update_post', function(data) { + let post_id = data.post_id; + let post = document.getElementById('questPostData-' + post_id); + if (data.post_type == 'text') { + post.innerHTML = data.post; + } + else if (data.post_type == 'dice') { + post.innerHTML += '' + data.post + '
'; + } + }); + socket.on('close_post', function(data) { + let post = document.getElementById('questPostData-' + data.post_id); + post.children[0].textContent = post.children[0].textContent.replace('Open', 'Closed'); + document.getElementById('close_post_id-' + data.post_id).style.display = 'none'; + document.getElementById('open_post_id-' + data.post_id).style.display = 'initial'; + if (post.parentElement.classList.contains('pollPost')) { + let table = document.getElementById('poll-' + data.post_id); + table.getElementsByTagName("col")[0].style.visibility = 'collapse'; + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.style.display = 'none'; + } + } + }); + socket.on('open_post', function(data) { + let post = document.getElementById('questPostData-' + data.post_id); + post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Closed', 'Open'); + document.getElementById('close_post_id-' + data.post_id).style.display = 'initial'; + document.getElementById('open_post_id-' + data.post_id).style.display = 'none'; + if (post.parentElement.classList.contains('pollPost')) { + table = document.getElementById('poll-' + data.post_id); + table.getElementsByTagName("col")[0].style.visibility = ''; + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.style.display = 'initial'; + } + } + }); + socket.on('vote', function(data) { + let row = document.getElementById('optionRow-' + data.option_id); + if (data.polarity) { + row.cells[2].textContent = Number(row.cells[2].textContent) + 1; + } else { + row.cells[2].textContent = Number(row.cells[2].textContent) - 1; + } + }); + socket.on('toggle_option_box', function(data) { + document.getElementById('pollInput-' + data.option_id).checked = data.polarity; + }); + 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; } + socket.emit('message', {message: text, name: 'Anonymous', room: room_id}); + } + }); +}, 100 ); +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 pollVote(post_id, option_id) { + let polarity = document.getElementById('pollInput-' + option_id).checked; + socket.emit('vote', {post_id: post_id, option_id: option_id, polarity: polarity, room: room_id}); +} +function deactivate_post() { + let post = document.getElementsByClassName('active_post'); + if (post.length == 0) { return; } + post = post[0]; + post.children[1].children[0].textContent = post.children[1].children[0].textContent.replace('Open', 'Closed'); + post.classList.remove("active_post"); + let writein = document.getElementById('writeinContainer'); + if (writein) { + writein.outerHTML = ''; + } +} diff --git a/templates/quest.html b/templates/quest.html index ebc7465..84b44f1 100644 --- a/templates/quest.html +++ b/templates/quest.html @@ -2,209 +2,11 @@ {% block title %}{{ quest_title }}{% endblock %} {% block head %} - - + {% if session.get("user_id") == owner_id %} - - + + {% else %} + {% endif %} {% endblock %} {% block header %} @@ -271,6 +73,11 @@ {% endfor %} + {% if quest_post[0] == open_post_id and quest_post[0]|is_write_in %} +
+ Write-in: +
+ {% endif %} {% endif %}