Template refactors

En iets met de playlist-maker. URLs opnieuw ingedeeld.

playlist/static/style.css

@@ -24,6 +24,10 @@ body {
 		left: 0;
 		width: calc(100% - 6px);
 	}
+
+	#main-window > .window-body {
+		min-height: calc(100vh - 42px);
+	}
 }
 
 input[type=submit] {
@@ -47,7 +51,7 @@ input#spotify-input + input[type=submit]{
 }
 
 .tree-view.overview {
-	height: 400px;
+	height: 384px;
 	overflow-y: scroll;
 }
 

playlist/templates/Base.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="window-body">
-        <menu role="tablist" hx-boost="true">
+        <menu role="tablist" hx-boost="true" class="multirows">
           <li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
             <a href="{% url 'vote' %}">Stemmen</a>
           </li>
@@ -33,8 +33,37 @@
             <a href="{% url 'settings' %}">Instellingen</a>
           </li>
         </menu>
+        {% block multi-row %}{% endblock %}
         <div class="window" role="tabpanel">
           <div class="window-body">
+            {% if message_type %}
+              <script>
+                function hidePopup() {
+                  document.getElementById("info-window").classList.add("hide");
+                }
+              </script>
+              <div class="window popup" id="info-window">
+                <div class="title-bar">
+                  <div class="title-bar-text">
+                    {% if message_title %}{{message_title}}{% else %}{{message_type | title}}{% endif %}
+                  </div>
+                  <div class="title-bar-controls">
+                      <button aria-label="Close" onclick="hidePopup()"></button>
+                  </div>
+                </div>
+                <div class="window-body">
+                  <div class="icon {{message_type}}"></div>
+                  <div class="text">
+                      <div>
+                        {{message}}
+                      </div>
+                      <section class="field-row" style="justify-content: flex-end">
+                          <button onclick="hidePopup()">Ok</button>
+                      </section>
+                  </div>
+                </div>
+              </div>
+            {% endif %}
             {% block main-content %}{% endblock %}
           </div>
         </div>

playlist/templates/Nominate.html

@@ -11,42 +11,6 @@ Nomineren
     <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
     <input type="submit" value="Insturen" {% if user.profile.quota < 1%}disabled{%endif%}>
 </form>
-{% if nominated or error or warning %}
-    <script>
-        function hidePopup() {
-            document.getElementById("info-window").classList.add("hide");
-        }
-    </script>
-    <div class="window popup" id="info-window">
-        <div class="title-bar">
-            <div class="title-bar-text">
-                {% if nominated %}
-                    {{nominated}}
-                {% elif error %}
-                    Error
-                {% else %}
-                    Let op!
-                {% endif %}
-            </div>
-            <div class="title-bar-controls">
-                <button aria-label="Close" onclick="hidePopup()"></button>
-            </div>
-        </div>
-        <div class="window-body">
-            <div class="icon {% if warning %}warning{% elif error %}error{% endif %}"></div>
-            <div class="text">
-                <div>
-                    {{warning}}
-                    {{error}}
-                    {% if not error %}Genomineerd!{% endif %}
-                </div>
-                <section class="field-row" style="justify-content: flex-end">
-                    <button onclick="hidePopup()">Ok</button>
-                </section>
-            </div>
-        </div>
-    </div>
-{% endif %}
 {% endblock %}
 
 {% block status-bar%}

playlist/templates/Overview.html

@@ -4,6 +4,17 @@
 Overzicht
 {% endblock %}
 
+{% block multi-row %}
+  <menu role="tablist" hx-boost="true" class="multirows">
+    <li role="tab" aria-selected="true">
+      <a href="{% url 'overview' %}">Tracks</a>
+    </li>
+    <li role="tab">
+      <a href="{% url 'playlist-list' %}">Playlists</a>
+    </li>
+  </menu>
+{% endblock %}
+
 {% block main-content %}
 <p>Onderstaand alle nummers waar je al op gestemd hebt.</p>
 <ul class="tree-view overview"> 

playlist/templates/Popup.html

@@ -1,31 +1,17 @@
 {% load static %}
-<div class="window popup">
+<script>
+  function hidePopup() {
+    document.getElementById("info-window").classList.add("hide");
+  }
+</script>
+<div class="window popup" id="info-window">
   <div class="title-bar">
-    <div class="title-bar-text">{{title}}</div>
+    <div class="title-bar-text">
+      {{title}}
+      <button aria-label="Close" onclick="hidePopup()"></button>
+    </div>
   </div>
   <div class="window-body">
-    {{ body }}
+    {{body}}
-    {% if img %}
-    <br /><img src="{% static img %}" />
-    {% endif %}
   </div>
-  <div class="status-bar">
+</div>
-    <p class="status-bar-field">{{title}}</p>
-    <p class="status-bar-field">CPU Usage: 14%</p>
-  </div>
-</div>
-<script>
-  position = { x: 0, y: 0 }
-
-  interact('.popup .title-bar').draggable({
-    listeners: {
-      move (event) {
-        position.x += event.dx
-        position.y += event.dy
-
-        event.target.parentElement.style.transform =
-          `translate(${position.x}px, ${position.y}px)`
-      },
-    }
-  })
-</script>

playlist/templates/Settings.html

@@ -24,7 +24,7 @@ Instellingen
     </div>
   </form>
   {% else %}
-  <form action="{% url 'spotify' %}">
+  <form action="{% url 'spotify-callback' %}">
     <div class="field-row settings">
       <label>Link je spotify:</label>
       <input type="submit" value="" class="icon spotify" />

playlist/urls.py

@@ -8,9 +8,9 @@ urlpatterns = [
     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('settings/make-playlist', views.PlaylistMake.as_view(), name="playlist"),
     path('overview/', views.OverView.as_view(), name="overview"),
-    path('spotify/', views.SpotifyView.as_view(), name="spotify"),
+    path('overview/playlist', views.PlaylistListView.as_view(), name="playlist-list"),
+    path('overview/playlist/<int:id>', views.PlaylistDetailView.as_view(), name="playlist-detail"),
     path('spotify/callback', views.SpotifyCallbackView.as_view(), name="spotify-callback"),
     path('', views.AuthView.as_view()),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

playlist/views.py

@@ -53,7 +53,7 @@ class NominateView(LoginRequiredMixin, View):
     def post(self, request):
         (profile,_) = Profile.objects.get_or_create(user=request.user)
         if profile.quota < 1:
-            return TemplateResponse(request, "Nominate.html", {"error": "Nee nee nee, dat gaan we dus even niet doen."})
+            return TemplateResponse(request, "Nominate.html", {"message_type": "error", "message": "Nee nee nee, dat gaan we dus even niet doen."})
         try:
             spotify_link = self.request.POST['spotify_link']
 
@@ -64,7 +64,7 @@ class NominateView(LoginRequiredMixin, View):
             m = re.match(r"^https:\/\/open.spotify.com\/track\/([a-zA-Z0-9]+)\??", spotify_link)
             spotify_id = m.group(1)
         except:
-            return TemplateResponse(request, "Nominate.html", {"error": "Geef een geldige spotify link op!"})
+            return TemplateResponse(request, "Nominate.html", {"message_type": "error", "message": "Geef een geldige spotify link op!"})
         try:
             track = Track.all_tracks.get(pk=spotify_id)
 
@@ -72,19 +72,21 @@ class NominateView(LoginRequiredMixin, View):
                 track.old = False
                 track.save()
                 return TemplateResponse(request, "Nominate.html", {
-                    "warning": "Hey een klassieker.",
+                    "message_type": "warning",
-                    "nominated": track
+                    "message": "Hey een klassieker.", 
+                    "message_title": str(track)
                 })
             return TemplateResponse(request, "Nominate.html", {
-                "error": "Deze is al genomineerd dit jaar, probeer eens iets anders.",
+                "message_type": "error",
-                "nominated": track
+                "message_title": str(track),
+                "message": "Deze is al genomineerd dit jaar, probeer eens iets anders.",
             })
         except Track.DoesNotExist:
             try:
                 json = spt.get_song_info(spotify_id)
             except Exception as e:
                 print(e)
-                return TemplateResponse(request, "Nominate.html", {"error": "Fout bij het ophalen van het liedje."})
+                return TemplateResponse(request, "Nominate.html", {"message_type": "error", "message": "Fout bij het ophalen van het liedje."})
 
             # Album artists
             album_artists = []
@@ -115,8 +117,9 @@ class NominateView(LoginRequiredMixin, View):
             if dup:
                 track.delete()
                 return TemplateResponse(request, "Nominate.html", {
-                    "error": f"Die hadden we al knul.",
+                    "message_type": "error",
-                    "nominated": dup
+                    "message": "Die hadden we al knul.",
+                    "message_title": str(dup)
                 })
             track.album = album
             track.save()
@@ -124,7 +127,7 @@ class NominateView(LoginRequiredMixin, View):
             profile.quota -= 1
             profile.save()
             
-            return TemplateResponse(request, "Nominate.html", {"nominated": track})
+            return TemplateResponse(request, "Nominate.html", {"message_type": "nominated", "message_title": str(track), "message": "Genomineerd!"})
 
 class SettingsView(LoginRequiredMixin, View):
     def get(self, request):
@@ -196,14 +199,25 @@ class OverView(LoginRequiredMixin, View):
         }
         return TemplateResponse(request, "Overview.html", context)
 
-class PlaylistMake(LoginRequiredMixin, View):
+class PlaylistListView(LoginRequiredMixin, View):
+    def get(self, request, count=None):
+        return TemplateResponse(request, "PlaylistList.html", context)
+    def post(self, request):
+        name = self.request.POST.get('name', None)
+        if name:
+            new_playlist = Playlist(name=name)
+            return TemplateResponse(request, "PlaylistList.html", context)
+            return self.get(request, count=count)
+
+
+class PlaylistDetailView(LoginRequiredMixin, View):
     def get(self, request, count=None):
         context = {}
         if count:
             #tracks = Track.objects.order_by('score')[count]
             tracks = Track.objects.annotate(average_points=Avg('vote__points')).order_by('-average_points')[:count]
             context["tracks"] = tracks
-        return TemplateResponse(request, "PlaylistMaker.html", context)
+        return TemplateResponse(request, "PlaylistDetail.html", context)
     def post(self, request):
         try:
             count = int(self.request.POST['count'])
@@ -222,18 +236,11 @@ class SpotifyCallbackView(LoginRequiredMixin, View):
         error = self.request.GET.get('error')
         code = self.request.GET.get('code')
         if error:
-            return TemplateResponse(request, "Nominate.html", {"error": "Je moet wel accepteren, pannenkoek."})
+            return TemplateResponse(request, "Settings.html", {"message": "Je moet wel accepteren"})
         elif code:
             (profile,_) = Profile.objects.get_or_create(user=request.user)
             profile.init_spt(code)
-            # data = spt.get_user_token(code)
-            # access = data.get('access_token', None)
-            # refresh = data.get('refresh_token', None)
-            # expires = data.get('expires_in', 3600)
-
-            # if access and refresh:
-            # profile.set_spotify(access, refresh, expires)
-            # else:
-            #     return TemplateResponse(request, "Nominate.html", {"error": "No."})
             return HttpResponseRedirect(reverse('settings'))
-            #return TemplateResponse(request, "Nominate.html", {"warning": code})
+        else:
+            url = spt.get_oauth_redirect()
+            return HttpResponseRedirect(url)