Re-add rating points for visualization

musicrate/core/static/style.css

@@ -201,7 +201,9 @@ svg {
 	display: none;
 }
 
-.rating-container > .rating > input[type=radio]:checked ~ .rating-point {
+.rating-container > .rating > input[type=radio]:checked ~ .rating-point,
+.rating-container > .rating > .rating-point.fill,
+.rating-container > .rating > .rating-point.fill ~ .rating-point {
 	background-image: url(point-fill.svg);
 }
 
@@ -223,3 +225,14 @@ svg {
 .row > :not(:first-child) {
 	margin-left: 0.5em !important;
 }
+
+.row > .rating-container {
+	justify-content: center;
+	margin: 0;
+	padding: 0;
+}
+
+.row > .rating-container > .rating > .rating-point {
+	height: 1em;
+	width: 1em;
+}

musicrate/vote/templates/vote/insert.html

@@ -13,6 +13,21 @@
 {% for field in form %}
 		{{ field }}
 {% endfor %}
+
+		<div class="rating-container">
+			<div class="rating" style="--num-choices: 10">
+				<div class="rating-10 rating-point"></div>
+				<div class="rating-09 rating-point"></div>
+				<div class="rating-08 rating-point"></div>
+				<div class="rating-07 rating-point"></div>
+				<div class="rating-06 rating-point"></div>
+				<div class="rating-05 rating-point"></div>
+				<div class="rating-04 rating-point"></div>
+				<div class="rating-03 rating-point"></div>
+				<div class="rating-02 rating-point"></div>
+				<div class="rating-01 rating-point"></div>
+			</div>
+		</div>
 	</div>
 {% endfor %}
 
@@ -67,7 +82,12 @@ const registerEvents = row => {
 		}
 	});
 
-	row.querySelector('input[name$=rating]').addEventListener('keydown', event => {
+	const rating = row.querySelector('input[name$=rating]');
+	rating.addEventListener('change', event => {
+		rating.parentElement.querySelectorAll('.fill').forEach(el => el.classList.remove('fill'));
+		rating.parentElement.querySelector(`.rating-${rating.value.padStart(2, '0')}`).classList.add('fill');
+	});
+	rating.addEventListener('keydown', event => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
 		}
@@ -102,6 +122,7 @@ addBtn.addEventListener('click', () => {
 	input.dataset.value = '';
 
 	row.querySelector('input[name$=rating]').value = undefined;
+	row.querySelectorAll('.fill').forEach(el => el.classList.remove('fill'));
 
 	registerEvents(row);