star vote

playlist/static/style.css

@@ -254,3 +254,28 @@ input[type="range"]::-moz-range-thumb {
 .clippy img {
 	width: 128px;
 }
+
+#vote-stars .star-wrapper {
+	height: 31px;
+	width:160px;
+}
+
+#vote-stars a {
+	cursor:pointer;
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	margin-right: -2px;
+	background-image: url(img/star-inactive.png);
+}
+#vote-stars .star-wrapper:hover a {
+	background-image: url(img/star.png);
+}
+
+#vote-stars a:hover {
+	background-image: url(img/star.png);
+}
+
+#vote-stars a:hover ~ a {
+	background-image: url(img/star-inactive.png) !important;
+}

playlist/templates/Vote.html

@@ -54,6 +54,37 @@ Stemmen
       >Helemaal niet mee eens</button>
     </fieldset>
   </div>
+  <div
+    id="vote-stars"
+    hx-vals='{"spotify_id": "{{ track.id }}"}'
+    style="margin-top:10px;"
+    >
+    <fieldset>
+      <legend>Hoe veel sterren geef jij dit nummer?</legend>
+      <div class="star-wrapper">
+        <a
+          hx-vals='{"vote": "-2"}'
+          hx-post="{% url 'vote' %}"
+        ></a>
+        <a
+          hx-vals='{"vote": "-1"}'
+          hx-post="{% url 'vote' %}"
+        ></a>
+        <a
+          hx-vals='{"vote": "0"}'
+          hx-post="{% url 'vote' %}"
+        ></a>
+        <a
+          hx-vals='{"vote": "1"}'
+          hx-post="{% url 'vote' %}"
+        ></a>
+        <a
+          hx-vals='{"vote": "2"}'
+          hx-post="{% url 'vote' %}"
+        ></a>
+      </div>
+    </fieldset>
+  </div>
 </div>
 <script>
   window.onSpotifyIframeApiReady = (IFrameAPI) => {