From ad49248132915a338dbc3128b36f8f343f890dc7 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Wed, 21 Feb 2024 22:40:51 +0100
Subject: [PATCH] star vote

---
 playlist/static/img/star-inactive.png | Bin 0 -> 524 bytes
 playlist/static/img/star.png          | Bin 0 -> 683 bytes
 playlist/static/style.css             |  25 +++++++++++++++++++++
 playlist/templates/Vote.html          |  31 ++++++++++++++++++++++++++
 4 files changed, 56 insertions(+)
 create mode 100644 playlist/static/img/star-inactive.png
 create mode 100644 playlist/static/img/star.png

diff --git a/playlist/static/img/star-inactive.png b/playlist/static/img/star-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f91916760af6657fd5516dfc378431cd8200d79
GIT binary patch
literal 524
zcmV+n0`vWeP)<h;3K|Lk000e1NJLTq001BW001Be1ONa4*>kdg0003YX+uL$Nkc;*
zaB^>EX>4Tx04R~2kiAO8P!NT`L{Sm9@(;u!h3%H6vT#)hf<lZd7_G9&E-of9Bv}^U
zz&Fu{*+LL}25SXt&y5xqrtya1d<-+^+#9f+G|sB|eaP~<^nzY^8D2SyZ`iEs+oTi4
zRnhbP6I##bE0)ohuJLN0`|~U$!zz}}RC!#KHCTIMcUl*QRjl3igG2Fy*h#WH5kHA{
zk}NT7c7rUP#6O<qHY>yY;@tFA+jtyvijTv931d=fy3$;oBV2Z+9wia?RK(Jhp?Xuz
z)ZB<FIe8q2`Xb$?C2y<A^OZ7?$5>t_;f_q6CJ*y}zt=v_noVnCRzzjgwB}UyXaw(%
z&<SDn8J4eGvX*|ot!2h-X8!rcFYs|tXlGW{PXGV_0%A)?L;(MXkIcUS000SaNLh0L
z01FcU01FcV0GgZ_00007bV*G`2j~J76&D-6&+B6V003}FL_t(Y$L*5A3IHJpL{<9i
zJ@((zZ4(wvHxPp6D&-qzh^`LM1Ai_B`+Wu}@$WH6(fw_P77MKt=?QP-P6(izpCItu
z;lN&nQ5)mjuSoER0Da+ImXUG#d@r^R4VDRUwzFy+XH&qZuADY<b&dwG1uMZFsg?Es
O0000<MNUMnLSTZI%i|CL

literal 0
HcmV?d00001

diff --git a/playlist/static/img/star.png b/playlist/static/img/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..12a1916030f00a3c105b18726b9c2617eef42da7
GIT binary patch
literal 683
zcmV;c0#yBpP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80004nX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKp2MKrivm}2P=p;WT;MdQ4ztVR-p(LLaorMgUO|T(4-+r
zad8w}3l9D)RvlcNb#-tR1i>E=X9p)m7b)?(q|hS9JC1vJ?|WbFz5|4MnQ2x>4A6Aj
zOeNxCCc7$jy+Xhs%|6V^%rfRADGA^4b&mkw@1i`*zwXb`tL7{Q1VrK(GfbO!gLrz=
zHaPDShgnfpiO-40O}ZfQBi9v=-#8as7I<dZOsD3F!^C2tjg>ZLMN=c5B95q<PWeK{
zW0mt3XRTai&3p0}hI0DKGS_L1Ab~|JL4pVcRg_SMjVSFpDHc+69{2GNyMBpW3b{&P
z<XAuj8f4cG{s+H%Yvm^=yrfVZ=zMXUk5Qm&7iiQR=lj@k8Ye*T8MxA0{z@H~`6Rv8
z(jrGd|2A-O-O`jj;Bp5TdNO2FcBLRKA)g1{&*+=7z`!lgv*z`!d5+TuAWgkW-T()O
zz*vE@*L~jI-QKr<YnuK00l~_0#%!9U%>V!Z24YJ`L;(K){{a7>y{D4^000SaNLh0L
z01FcU01FcV0GgZ_00007bV*G`2j~J76%`R|EMWft005^+L_t(o!|hZ-4#OY}bI|_P
z{;WJLKXVUlCpN7JCC~{emN<Yw#!eg{5C}MtGw6ArrdLmr9v9N|>Pb*l%`S9tU|H7x
zslS%hg;&pr<qQC~Z^Wtg8>p_r5q7csm+dw3lbFM6Um<_40X^hh2a)RfeEg2H0gc!4
zfuhmOWiXdO<TKybe%Mqj)mI|+E=#Km$*5dzCYy)=+cqc#a<EI=wLl;+33hBM5sCY&
RS`+{P002ovPDHLkV1g{3Ce{D|

literal 0
HcmV?d00001

diff --git a/playlist/static/style.css b/playlist/static/style.css
index 7421041..63ae710 100644
--- a/playlist/static/style.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/playlist/templates/Vote.html b/playlist/templates/Vote.html
index ce0e69b..8152141 100644
--- a/playlist/templates/Vote.html
+++ b/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) => {