Pàgines llista de reproducció

folkugat_web/assets/templates/fragments/playlist/editor/name.html

@@ -0,0 +1,26 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="playlist-name">
+  <form>
+    <input name="name"
+           placeholder="Nom de la playlist"
+           value="{{ playlist.name if playlist.name else '' }}"
+           class="border border-beige focus:outline-none
+                  rounded text-3xl
+                  bg-brown p-2 m-0"
+      />
+    <button title="Desa"
+            class="text-beige text-3xl mx-1"
+            hx-put="/api/playlist/{{ playlist.id }}/name"
+            hx-target="#playlist-name"
+            hx-swap="outerHTML">
+      <i class="fa fa-check" aria-hidden="true"></i>
+    </button>
+    <button title="Descarta"
+            class="text-beige text-3xl mx-1"
+            hx-get="/api/playlist/{{ playlist.id }}/name"
+            hx-target="#playlist-name"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </form>
+</div>

folkugat_web/assets/templates/fragments/playlist/name.html

@@ -0,0 +1,19 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="playlist-name">
+  <h3 class="text-3xl text-center p-4">
+    {% if playlist.name %}
+        {{ playlist.name }}
+    {% else %}
+        Llista de temes
+    {% endif %}
+  </h3>
+  {% if logged_in %}
+  <button title="Canvia el nom"
+          class="text-beige text-2xl mx-2"
+          hx-get="/api/playlist/{{ playlist.id }}/editor/name"
+          hx-target="#playlist-name"
+          hx-swap="outerHTML">
+    <i class="fa fa-pencil" aria-hidden="true"></i>
+  </button>
+  {% endif %}
+</div>

folkugat_web/assets/templates/fragments/playlist/pagina.html

@@ -0,0 +1,13 @@
+{% include "fragments/menu.html" %}
+<div class="flex justify-center">
+  <div class="m-12 grow max-w-4xl">
+    <div id="playlist-name">
+      {% include "fragments/playlist/name.html" %}
+    </div>
+    <div class="text-left">
+      {% set playlist_id = playlist.id %}
+      {% set playlist = playlist %}
+      {% include "fragments/playlist/playlist.html" %}
+    </div>
+  </div>
+</div>

folkugat_web/assets/templates/fragments/sessio/pagina.html

@@ -39,7 +39,11 @@
     {% endif %}
     {% if logged_in or (session.slowjam and session.slowjam.sets) %}
     <div class="text-left">
-      <h4 class="py-4 text-xl text-beige mt-2">Slow Jam</h4>
+      <h4 class="py-4 text-xl text-beige mt-2">
+        <a href="/playlist/{{ session.slowjam.id }}" class="text-beige">
+            Slow Jam
+        </a>
+    </h4>
       {% set playlist_id = session.slowjam.id %}
       {% set playlist = session.slowjam %}
       {% include "fragments/playlist/playlist.html" %}
@@ -47,7 +51,11 @@
     {% endif %}
     {% if logged_in or (session.setlist and session.setlist.sets) %}
     <div class="text-left">
-      <h4 class="py-4 text-xl text-beige mt-2">Temes tocats</h4>
+      <h4 class="py-4 text-xl text-beige mt-2">
+        <a href="/playlist/{{ session.setlist.id }}" class="text-beige">
+            Temes tocats
+        </a>
+    </h4>
       {% set playlist_id = session.setlist.id %}
       {% set playlist = session.setlist %}
       {% include "fragments/playlist/playlist.html" %}