Add JS to vote on reviews without form submit

Fixes #329

app/public/static/collection_editor.js

@@ -167,7 +167,7 @@ function onPackageQueryUpdate() {
 }
 
 
-window.onload = () => {
+window.addEventListener("load", () => {
 	document.querySelectorAll(".remove-package").forEach(button => {
 		const card = button.parentNode.parentNode;
 		const field = card.querySelector("input[name^=package_removed]");
@@ -189,4 +189,4 @@ window.onload = () => {
 	$(".sortable").sortable({
 		update: updateOrder,
 	});
-};
+});

app/public/static/quick_review_voting.js

@@ -0,0 +1,86 @@
+// @author rubenwardy
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
+"use strict";
+
+function getVoteCount(button) {
+	const badge = button.querySelector(".badge");
+	return badge ? parseInt(badge.textContent) : 0;
+}
+
+function setVoteCount(button, count) {
+	let badge = button.querySelector(".badge");
+	if (count == 0) {
+		if (badge) {
+			badge.remove();
+		}
+		return;
+	}
+	if (!badge) {
+		badge = document.createElement("span")
+		badge.classList.add("badge");
+		badge.classList.add("badge-light");
+		badge.classList.add("badge-ml-1");
+		button.appendChild(badge);
+	}
+
+	badge.textContent = count.toString();
+}
+
+
+async function submitForm(form, is_helpful) {
+	const data = new URLSearchParams();
+	for (const pair of new FormData(form)) {
+		data.append(pair[0], pair[1]);
+	}
+	data.set("is_positive", is_helpful ? "yes" : "no");
+
+	const res = await fetch(form.getAttribute("action"), {
+		method: "post",
+		body: data,
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded",
+		},
+	});
+
+	if (!res.ok) {
+		console.error(await res.text());
+	}
+}
+
+
+window.addEventListener("load", () => {
+	document.querySelectorAll(".review-helpful-vote").forEach((helpful_form) => {
+		const yes = helpful_form.querySelector("button[name='is_positive'][value='yes']");
+		const no = helpful_form.querySelector("button[name='is_positive'][value='no']");
+
+		function setVote(is_helpful) {
+			const selected = is_helpful ? yes : no;
+			const not_selected = is_helpful ? no : yes;
+
+			if (not_selected.classList.contains("btn-primary")) {
+				setVoteCount(not_selected, Math.max(getVoteCount(not_selected) - 1, 0));
+			}
+			if (selected.classList.contains("btn-secondary")) {
+				setVoteCount(selected, getVoteCount(selected) + 1);
+			}
+
+			selected.classList.add("btn-primary");
+			selected.classList.remove("btn-secondary");
+			not_selected.classList.add("btn-secondary");
+			not_selected.classList.remove("btn-primary");
+
+			submitForm(helpful_form, is_helpful).catch(console.error);
+		}
+
+		yes.addEventListener("click", (e) => {
+			setVote(true);
+			e.preventDefault();
+		});
+
+		no.addEventListener("click", (e) => {
+			setVote(false)
+			e.preventDefault();
+		});
+	});
+});

app/templates/collections/create_edit.html

@@ -10,7 +10,7 @@
 
 {% block scriptextra %}
 	<script src="/static/libs/jquery-ui.min.js"></script>
-	<script src="/static/collection_editor.js?v=5"></script>
+	<script src="/static/collection_editor.js?v=6"></script>
 {% endblock %}
 
 {% block content %}

app/templates/index.html

@@ -21,6 +21,7 @@
   }
 }
 </script>
+<script src="/static/quick_review_voting.js"></script>
 {% endblock %}
 
 {% block content %}

app/templates/macros/reviews.html

@@ -1,6 +1,6 @@
 {% macro render_review_vote(review, current_user, next_url) %}
 	{% set (positive, negative, is_positive) = review.get_totals(current_user) %}
-	<form class="-group" method="post" action="{{ review.get_vote_url(next_url) }}">
+	<form class="review-helpful-vote" method="post" action="{{ review.get_vote_url(next_url) }}">
 		<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 		<div class="btn-group">
 			<button class="btn {% if is_positive == true %}btn-primary{% else %}btn-secondary{% endif %}" name="is_positive" value="yes">

app/templates/packages/reviews_list.html

@@ -4,6 +4,10 @@
 	{{ _("Reviews") }}
 {% endblock %}
 
+{% block scriptextra %}
+	<script src="/static/quick_review_voting.js"></script>
+{% endblock %}
+
 {% block content %}
 	{% from "macros/pagination.html" import render_pagination with context %}
 	{% from "macros/reviews.html" import render_reviews with context %}

app/templates/packages/view.html

@@ -19,6 +19,7 @@
 
 {% block scriptextra %}
 	<script src="/static/video_embed.js"></script>
+	<script src="/static/quick_review_voting.js"></script>
 {% endblock %}
 
 {% macro render_license(license) %}

app/templates/threads/view.html

@@ -25,6 +25,10 @@
 	<meta name="og:image" content="{{ thread.author.get_profile_pic_url() }}"/>
 {% endblock %}
 
+{% block scriptextra %}
+	<script src="/static/quick_review_voting.js"></script>
+{% endblock %}
+
 {% block content %}
 	{% if current_user.is_authenticated %}
 		{% if current_user in thread.watchers %}

app/templates/users/profile.html

@@ -8,6 +8,10 @@
 	<meta name="og:image" content="{{ user.get_profile_pic_url() }}"/>
 {% endblock %}
 
+{% block scriptextra %}
+	<script src="/static/quick_review_voting.js"></script>
+{% endblock %}
+
 {% block content %}
 <article class="row mb-5">
 	<div class="col-auto image mx-0">