Nova pàgina de llistes

folkugat_web/assets/static/css/main.css

@@ -899,6 +899,10 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1019,6 +1023,11 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1085,6 +1094,10 @@ video {
   color: rgb(178 124 9 / var(--tw-text-opacity, 1));
 }
 
+.text-beige\/70 {
+  color: rgb(178 124 9 / 0.7);
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@@ -1134,6 +1147,10 @@ video {
   transition-duration: 200ms;
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

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

@@ -15,5 +15,6 @@
           hx-swap="outerHTML">
     <i class="fa fa-pencil" aria-hidden="true"></i>
   </button>
+  {% include "fragments/llista/visibility.html" %}
   {% endif %}
 </div>

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

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

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

@@ -1,8 +1,7 @@
 <ul id="llista-{{ playlist_id }}" class="">
   {% for set_entry in playlist.sets %}
     {% set set_id = set_entry.id %}
-    {% include "fragments/playlist/set_entry.html" %}
-  {% endfor %}
+    {% include "fragments/llista/set_entry.html" %}   {% endfor %}
 </ul>
 {% if logged_in %}
   <div class="flex flex-col items-center">

folkugat_web/assets/templates/fragments/llista/set/pagina.html

@@ -0,0 +1,2 @@
+{% include "fragments/menu.html" %}
+{% include "fragments/llista/set/set_page.html" %}

folkugat_web/assets/templates/fragments/llista/set/set_page.html

@@ -13,14 +13,14 @@
   {% for tema_in_set in set.temes %}
     {% if tema_in_set.tema is not none %}
       {% set tema = tema_in_set.tema %}
-      {% include "fragments/playlist/set/tema_title.html" %}
+      {% include "fragments/llista/set/tema_title.html" %}
     {% else %}
       <h3 class="text-center text-3xl p-4"> <i>Desconegut</i> </h3>
     {% endif %}
   {% endfor %}
   <div class="mx-12">
     <hr class="h-px mt-1 mb-3 bg-beige border-0">
-    {% include "fragments/playlist/set/set_score.html"%}
+    {% include "fragments/llista/set/set_score.html"%}
   </div>
 {% else %}
 {% for tema_in_set in set.temes %}
@@ -31,7 +31,7 @@
   {% endif %}
   {% if tema_in_set.tema is not none %}
     {% set tema = tema_in_set.tema %}
-    {% include "fragments/playlist/set/tema.html"%}
+    {% include "fragments/llista/set/tema.html"%}
   {% else %}
     <h3 class="text-center text-3xl p-4">
       <i>Desconegut</i>

folkugat_web/assets/templates/fragments/llista/set/tema.html

@@ -1,4 +1,4 @@
-{% include "fragments/playlist/set/tema_title.html" %}
+{% include "fragments/llista/set/tema_title.html" %}
 <div class="mx-12 text-left">
 
   {% if tema.main_score() is not none %}

folkugat_web/assets/templates/fragments/llista/set_entry.html

@@ -36,9 +36,9 @@ hx-get="/api/llista/{{ playlist_id }}/set/{{ set_id }}"
           class="flex flex-col items-start w-full">
       {% for tema_entry in set_entry.temes %}
         {% if new_entry %}
-          {% include "fragments/playlist/tema_editor.html" %}
+          {% include "fragments/llista/tema_editor.html" %}
         {% else %}
-          {% include "fragments/playlist/tema_entry.html" %}
+          {% include "fragments/llista/tema_entry.html" %}
         {% endif %}
       {% endfor %}
       </ol>

folkugat_web/assets/templates/fragments/llista/visibility.html

@@ -0,0 +1,15 @@
+{% if not playlist.hidden %}
+<button title="Llista visible (amaga-la)"
+        class="text-beige text-2xl mx-2"
+        hx-put="/api/llista/{{ playlist.id }}/invisible"
+        hx-swap="outerHTML">
+    <i class="fa fa-eye" aria-hidden="true"></i>
+</button>
+{% else %}
+<button title="Llista invisible (mostra-la)"
+        class="text-beige text-2xl mx-2"
+        hx-put="/api/llista/{{ playlist.id }}/visible"
+        hx-swap="outerHTML">
+    <i class="fa fa-eye-slash" aria-hidden="true"></i>
+</button>
+{% endif %}

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

@@ -0,0 +1,16 @@
+{% include "fragments/menu.html" %}
+<div class="p-12 text-center">
+  <h3 class="text-3xl text-beige p-4">Llistes de Repertori</h3>
+
+  {% if playlists %}
+    <div class="flex flex-col items-center">
+      {% for playlist in playlists %}
+        {% include "fragments/llistes/playlist_entry.html" %}
+      {% endfor %}
+    </div>
+  {% else %}
+    <div class="text-center py-8">
+      <p class="text-beige/70">No hi ha llistes disponibles.</p>
+    </div>
+  {% endif %}
+</div>

folkugat_web/assets/templates/fragments/llistes/playlist_entry.html

@@ -0,0 +1,24 @@
+<div class="
+            border rounded border-beige
+            p-2 m-2 w-full max-w-xl
+            ">
+    <div class="flex justify-between items-start">
+    <div class="flex-1">
+        <p class="text-xl text-white">
+        <a href="/llista/{{ playlist.id }}">
+            {% if playlist.name %}
+            {{ playlist.name }}
+            {% else %}
+            Llista de temes #{{ playlist.id }}
+            {% endif %}
+        </a>
+        </p>
+    </div>
+
+    {% if logged_in %}
+        <div class="ml-2">
+        {% include "fragments/llista/visibility.html" %}
+        </div>
+    {% endif %}
+    </div>
+</div>

folkugat_web/assets/templates/fragments/menu.html

@@ -27,6 +27,19 @@
     </button>
   </li>
 
+  {% if menu_selected_id == Pages.Llistes %}
+  <li class="p-2 text-beige">
+    <button>
+  {% else %}
+  <li class="p-2">
+    <button hx-get="/api/content/llistes"
+            hx-replace-url="/llistes"
+            hx-target="#content">
+  {% endif %}
+      Llistes
+    </button>
+  </li>
+
 </ul>
 <hr class="h-px bg-beige border-0">
 <div hx-get="/api/sessions/live"

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

@@ -1,2 +0,0 @@
-{% include "fragments/menu.html" %}
-{% include "fragments/playlist/set/set_page.html" %}

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

@@ -46,7 +46,7 @@
     </h4>
       {% set playlist_id = session.slowjam.id %}
       {% set playlist = session.slowjam %}
-      {% include "fragments/playlist/playlist.html" %}
+      {% include "fragments/llista/playlist.html" %}
     </div>
     {% endif %}
     {% if logged_in or (session.setlist and session.setlist.sets) %}
@@ -58,7 +58,7 @@
     </h4>
       {% set playlist_id = session.setlist.id %}
       {% set playlist = session.setlist %}
-      {% include "fragments/playlist/playlist.html" %}
+      {% include "fragments/llista/playlist.html" %}
     </div>
     {% endif %}
   </div>