add to poll table, custom checkboxes

anonkun.py

@@ -96,6 +96,16 @@ def get_dice_challenge(post_id):
 	return db.get_dice_call(post_id)[3]
 
 
+@app.template_filter("num_ips")
+def num_ips(ips_voted):
+	"""
+	Returns the number of IPs who voted for this option.
+	"""
+	if not ips_voted:
+		return 0
+	return len(ips_voted.split(","))
+
+
 @app.after_request
 def minify(res):
 	"""

anonkun.sql

@@ -47,14 +47,17 @@ CREATE TABLE `polls` (
 	`post_id` MEDIUMINT UNSIGNED NOT NULL,
 	`multi_choice` BOOLEAN DEFAULT FALSE,
 	`allow_writein` BOOLEAN DEFAULT FALSE,
+	`total_ips` TEXT DEFAULT NULL,
 	PRIMARY KEY (`post_id`)
 ) ENGINE=InnoDB CHARSET utf8mb4;
 
 CREATE TABLE `poll_options` (
+	`option_id` MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT,
 	`post_id` MEDIUMINT UNSIGNED NOT NULL,
 	`quest_id` SMALLINT UNSIGNED NOT NULL,
 	`option_text` VARCHAR(200) NOT NULL,
-	`ips_voted` TEXT DEFAULT NULL
+	`ips_voted` TEXT DEFAULT NULL,
+	PRIMARY KEY (`option_id`)
 ) ENGINE=InnoDB CHARSET utf8mb4;
 
 CREATE TABLE `chat_messages` (

static/anonkun.css

@@ -37,8 +37,8 @@ h3 {
 }
 
 #questPane {
-	padding-left: 10px;
-	padding-right: 32%;
+	padding-left: 5%;
+	padding-right: 35%;
 	min-width: 0;
 }
 
@@ -54,6 +54,7 @@ h3 {
 .questPostData {
 	word-wrap: break-word;
 	min-width: 0;
+	width: 100%;
 }
 
 #QMPostPane {
@@ -110,6 +111,58 @@ h3 {
 	margin: 0.1em;
 }
 
+.pollPost {
+	width: 100%;
+}
+
+.poll {
+	border-collapse: collapse;
+	width: 100%;
+	table-layout: fixed;
+	border: 1px solid #ddd;
+}
+
+.optionVotes {
+	width: 10%;
+	text-align: center;
+}
+
+.poll td {
+	padding: 0.5em;
+	word-wrap: break-word;
+	border-bottom: 1px solid #ddd;
+}
+
+.pollCheckBox input {
+	display: none;
+}
+
+.pollCheckBox {
+	width: 1.5em;
+}
+
+.pollCheckBox label {
+	cursor: pointer;
+	background: #eee;
+	border: 1px solid #ddd;
+	padding: 0.2em;
+}
+
+.pollCheckBox label:after {
+	content: "\2713";
+	color: #bfbfbf;
+	opacity: 0.3;
+}
+
+.pollCheckBox label:hover::after {
+	opacity: 0.5;
+}
+
+.pollCheckBox input[type=checkbox]:checked + label:after {
+	opacity: 1;
+	color: black;
+}
+
 #chatPane {
 	height: 100%;
 	width: 30%;

templates/quest.html

@@ -104,6 +104,8 @@
 			date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
 			return date_str;
 		}
+		function pollVote() {
+		}
 	</script>
 	{% if session.get("user_id") == owner_id %}
 	<script>
@@ -158,7 +160,7 @@
 			let opts = document.getElementById('pollOptions');
 			let num = opts.children.length+1;
 			let temp = document.createElement('template');
-			temp.innerHTML = '<div><input type="text" name="pollOption-' + num + '" class="pollOption" placeholder="Option ' + num + '" /></div>';
+			temp.innerHTML = '<div><input type="text" name="pollOption-' + num + '" class="pollOption" placeholder="Option ' + num + '" maxlength="200" /></div>';
 			opts.appendChild(temp.content);
 		}
 		function removePollOption() {
@@ -238,11 +240,16 @@
 						{% endfor %}
 						{% elif quest_post[2] == "poll" %}
 						<h3>{{ quest_post[3] }} - {% if quest_post[0] == open_post_id %}Open{% else %}Closed{% endif %}</h3>
-						<table id="poll-{{ quest_post[0] }}">
+						<table class="poll" id="poll-{{ quest_post[0] }}">
 							{% for option in poll_options %}
-							{% if option[0] == quest_post[0] %}
+							{% if option[1] == quest_post[0] %}
 							<tr>
-								<td>{{ option[2] }}</td>
+								<td class="pollCheckBox">
+									<input type="checkbox" id="pollInput-{{ option[0] }}" onchange="pollVote()"/>
+									<label for="pollInput-{{ option[0] }}"></label>
+								</td>
+								<td class="option_text">{{ option[3] }}</td>
+								<td class="optionVotes">{{ option[4]|num_ips }}</td>
 							</tr>
 							{% endif %}
 							{% endfor %}
@@ -288,8 +295,8 @@
 						<a href="javascript:void(0);" id="pollInsertNewOption" onclick="insertPollOption()">[+]</a>
 						<a href="javascript:void(0);" onclick="removePollOption()">[-]</a>
 						<div id="pollOptions">
-							<div><input type="text" name="pollOption-1" class="pollOption" placeholder="Option 1" /></div>
-							<div><input type="text" name="pollOption-2" class="pollOption" placeholder="Option 2" /></div>
+							<div><input type="text" name="pollOption-1" class="pollOption" placeholder="Option 1" maxlength="200" /></div>
+							<div><input type="text" name="pollOption-2" class="pollOption" placeholder="Option 2" maxlength="200" /></div>
 						</div>
 						<hr>
 						<input type="checkbox" name="pollAllowMultipleChoices" />Allow multiple choices<br />