vote undo

todo: only accept undo endpoint when allowed

playlist/static/style.css

@@ -12,7 +12,7 @@ body {
 	min-height: 520px;
 	width:560px;
 	overflow-y:scroll;
-	overflow-x:visible;
+	overflow-x:hidden;
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
@@ -22,6 +22,8 @@ body {
 	#main-window {
 		margin: 0;
 		transform: none !important;
+		left: 0;
+		width: calc(100% - 6px);
 	}
 }
 
@@ -71,7 +73,6 @@ input[type=submit] {
 	height: 32px;
 	padding: 16px;
 	background-position: center center;
-	background-attachment: fixed;
 	background-repeat: no-repeat;
 	background-image: url('img/check.png');
 }
@@ -89,12 +90,6 @@ input[type=submit] {
 	background-image: url('img/warning.png');
 }
 
-@media (max-width: 600px) {
-	.window:not([role="tabpanel"]) {
-		left: 0;
-		width: calc(100% - 6px);
-	}
-}
 
 .window {
 	flex-grow: 1;
@@ -255,6 +250,13 @@ input[type="range"]::-moz-range-thumb {
 	width: 128px;
 }
 
+#vote-stars {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+}
+
 #vote-stars .star-wrapper {
 	height: 31px;
 	width:160px;
@@ -279,3 +281,25 @@ input[type="range"]::-moz-range-thumb {
 #vote-stars a:hover ~ a {
 	background-image: url(img/star-inactive.png) !important;
 }
+
+.undo-wrapper {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+	text-align: center;
+	flex-grow: 1;
+	align-items: center;
+}
+
+.undo-wrapper p {
+	flex-grow: 1;
+	padding: 0 5px;
+}
+
+.undo {
+	background-image: url(img/undo.png);
+	background-repeat: no-repeat;
+	background-position: 50% 0;
+	padding: 32px 0 4px 0;
+	height: 50px;
+}

playlist/templates/Vote.html

@@ -25,42 +25,13 @@ Stemmen
     <button id="playpause">⏵️</button>
   </div>
 
-  <div
-    id="vote-buttons"
-    hx-vals='{"spotify_id": "{{ track.id }}"}'
-    style="margin-top:10px;"
-    >
-    <fieldset>
-      <legend>Dit vind ik een leuk nummer!</legend>
-      <button
-        hx-vals='{"vote": "2"}'
-        hx-post="{% url 'vote' %}"
-      >Helemaal mee eens</button>
-      <button
-        hx-vals='{"vote": "1"}'
-        hx-post="{% url 'vote' %}"
-      >Mee eens</button>
-      <button
-        hx-vals='{"vote": "0"}'
-        hx-post="{% url 'vote' %}"
-      >Neutraal</button>
-      <button
-        hx-vals='{"vote": "-1"}'
-        hx-post="{% url 'vote' %}"
-      >Niet mee eens</button>
-      <button
-        hx-vals='{"vote": "-2"}'
-        hx-post="{% url 'vote' %}"
-      >Helemaal niet mee eens</button>
-    </fieldset>
-  </div>
   <div
     id="vote-stars"
     hx-vals='{"spotify_id": "{{ track.id }}"}'
     style="margin-top:10px;"
     >
     <fieldset>
-      <legend>Hoeveel sterren geef jij dit nummer?</legend>
+      <legend>Hoeveel sterren geef jij dit?</legend>
       <div class="star-wrapper">
         <a
           hx-vals='{"vote": "-2"}'
@@ -84,6 +55,14 @@ Stemmen
         ></a>
       </div>
     </fieldset>
+    {% if undo %}
+      <!--<form class="undo-wrapper" method="post" action="{% url 'undo' %}" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >-->
+      <div class="undo-wrapper"  hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
+        {% csrf_token %}
+        <p>Je hebt {{undo.track}} een score van {{undo.points | add:3}} sterren gegeven!</p>
+        <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
+      </div>
+    {% endif %}
   </div>
 </div>
 <script>

playlist/templates/head.html

@@ -7,7 +7,6 @@
 <style>
 	{% include 'background.css' with background=user.profile.background %}
 </style>
-<link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
 
 <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
 <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">

playlist/urls.py

@@ -6,6 +6,7 @@ from django.conf.urls.static import static
 urlpatterns = [
     path('track/', views.NominateView.as_view(), name="nominate"),
     path('vote/', views.VoteView.as_view(), name="vote"),
+    path('vote/undo', views.UndoView.as_view(), name="undo"),
     path('settings/', views.SettingsView.as_view(), name="settings"),
     path('', views.AuthView.as_view()),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

playlist/views.py

@@ -14,17 +14,16 @@ spt = spotify.Spotify()
 class AuthView(View):
     def get(self, request):
         if request.user.is_authenticated:
-            #return TemplateResponse(request, "Nominate.html", {})
-            return HttpResponseRedirect('/vote')
+            return HttpResponseRedirect('/vote/')
         else:
             return TemplateResponse(request, "Login.html", {})
 
 class VoteView(LoginRequiredMixin, View):
-    def get(self, request, error=None):
+    def get(self, request, undo=None):
         track = get_unvoted(request.user)
         if track and not track.album.image:
             get_and_dither_image(track.album.image_url, track.album, "image")
-        return TemplateResponse(request, "Vote.html", {"track": track, "error": error})
+        return TemplateResponse(request, "Vote.html", {"track": track, "undo": undo})
     def post(self, request):
         try:
             spotify_id = self.request.POST['spotify_id']
@@ -37,13 +36,10 @@ class VoteView(LoginRequiredMixin, View):
                 pass
             else:
                 raise Exception(f"{request.user} already voted for {track}")
-            Vote.objects.create(track=track, user=request.user, points=score)
-            print(track)
+            vote = Vote.objects.create(track=track, user=request.user, points=score)
+            return self.get(request, undo=vote)
         except Exception as e:
             print(e)
-            return self.get(request, str(e))
-        else:
-            return self.get(request)
 
 class NominateView(LoginRequiredMixin, View):
     def get(self, request):
@@ -128,3 +124,17 @@ class SettingsView(LoginRequiredMixin, View):
             pass
         finally:
             return self.get(request)
+    
+class UndoView(LoginRequiredMixin, View):
+    def get(self, request):
+        return HttpResponseRedirect('/vote/')
+    def post(self, request):
+        spotify_id = self.request.POST['spotify_id']
+        track = Track.objects.get(pk=spotify_id)
+        vote = None
+        try:
+            vote = Vote.objects.get(user=request.user, track=track)
+        except Vote.DoesNotExist:
+            raise Exception(f"{request.user} did not vote for {track}")
+        vote.delete()
+        return HttpResponseRedirect('/vote/')