Tune editor

folkugat_web/assets/templates/fragments/tema/editor/link.html

@@ -1,10 +1,10 @@
 <li id="tema-link-{{ link.id }}">
-  <form class="flex flex-row items-start">
+  <form class="flex flex-row items-start"
+        hx-encoding='multipart/form-data'>
   {% include "fragments/tema/link_icon.html" %}
-  <div class="grow my-2">
-    <p class="text-sm text-beige">
-      <select id="tema-link-{{ link.id }}-content-type"
-              name="content_type"
+  <div class="flex flex-col grow my-2">
+    <div class="text-sm text-beige">
+      <select name="content_type"
               value="{{ link.content_type.value.capitalize() }}"
               class="border border-yellow-50 focus:outline-none
                      rounded
@@ -21,8 +21,8 @@
         {% endif %}
         {% endfor %}
       </select>
-    </p>
-    <p>
+    </div>
+    <div>
     <input name="title"
            placeholder="Títol de l'enllaç"
            value="{{ link.title }}"
@@ -30,21 +30,8 @@
                   rounded w-full
                   bg-brown p-1 my-1"
       />
-    </p>
-    <p>
-    <input name="url"
-           placeholder="URL de l'enllaç"
-           value="{{ link.url }}"
-           class="border border-beige focus:outline-none
-                  rounded w-full
-                  bg-brown p-1 my-1"
-           hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
-           hx-trigger="keyup delay:500ms changed"
-           hx-target="#link-icon-{{ link.id }}"
-           hx-include="[name='content_type']"
-           hx-swap="outerHTML"
-      />
-    </p>
+    </div>
+    {% include "fragments/tema/editor/link_url.html" %}
   </div>
   <div class="m-2 text-sm text-beige">
     <button title="Desa els canvis"

folkugat_web/assets/templates/fragments/tema/editor/link_file.html

@@ -0,0 +1,16 @@
+<div id="link-editor-{{ link_id }}-file"
+     class="flex flex-row gap-2">
+    <input type='file'
+           class="border border-beige focus:outline-none
+                  rounded grow
+                  bg-brown p-1 my-1"
+            name='upload_file'>
+    <button title="Afegeix un enllaç"
+            class="border border-beige rounded px-2 py-1 my-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/url"
+            hx-target="#link-editor-{{ link_id }}-file"
+            hx-swap="outerHTML"
+            >
+      <i class="fa fa-link" aria-hidden="true"></i>
+    </button>
+</div>

folkugat_web/assets/templates/fragments/tema/editor/link_url.html

@@ -0,0 +1,23 @@
+<div id="link-editor-{{ link_id }}-url"
+     class="flex flex-row gap-2">
+    <input name="url"
+           placeholder="URL de l'enllaç"
+           value="{{ link.url }}"
+           class="border border-beige focus:outline-none
+                  rounded grow
+                  bg-brown p-1 my-1"
+           hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
+           hx-trigger="keyup delay:500ms changed"
+           hx-target="#link-icon-{{ link.id }}"
+           hx-include="[name='content_type']"
+           hx-swap="outerHTML"
+           />
+    <button title="Puja un fitxer"
+            class="border border-beige rounded py-1 px-2 my-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/file"
+            hx-target="#link-editor-{{ link_id }}-url"
+            hx-swap="outerHTML"
+            >
+    <i class="fa fa-upload" aria-hidden="true"></i>
+    </button>
+</div>

folkugat_web/assets/templates/fragments/tema/editor/property.html

@@ -0,0 +1,45 @@
+<form id="tema-property-{{ property.id }}"
+     class="flex flex-row items-center">
+  <div class="px-2">
+    <select name="field"
+            value="{{ property.field.value.capitalize() }}"
+            class="border border-yellow-50 focus:outline-none
+                   rounded
+                   text-yellow-50 text-center
+                   bg-brown p-1 m-0">
+      <option value="{{ property.field.value }}">
+        {{ property.field.value.capitalize() }}
+      </option>
+      {% for pf in PropertyField %}
+      {% if pf != property.field %}
+      <option value="{{ pf.value }}">
+        {{ pf.value.capitalize() }}
+      </option>
+      {% endif %}
+      {% endfor %}
+    </select>
+  </div>
+  <div class="grow mx-2">
+    <input name="value"
+           placeholder="Informació"
+           value="{{ property.value }}"
+           class="border border-beige focus:outline-none
+                  rounded w-full
+                  bg-brown px-2 py-1"
+      />
+  </div>
+  <button title="Desa els canvis"
+          class="text-sm text-beige mx-1"
+          hx-put="/api/tema/{{ tema.id }}/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-check" aria-hidden="true"></i>
+  </button>
+  <button title="Descarta els canvis"
+          class="text-sm text-beige mx-1"
+          hx-get="/api/tema/{{ tema.id }}/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-times" aria-hidden="true"></i>
+  </button>
+</form>

folkugat_web/assets/templates/fragments/tema/link.html

@@ -13,12 +13,14 @@
   <div class="grow"></div>
   <div class="m-2 text-sm text-beige">
       <button title="Modifica l'enllaç"
+              class="mx-1"
               hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link.id }}"
               hx-target="#tema-link-{{ link.id }}"
               hx-swap="outerHTML">
         <i class="fa fa-pencil" aria-hidden="true"></i>
       </button>
       <button title="Esborra l'enllaç"
+              class="mx-1"
               hx-delete="/api/tema/{{ tema.id }}/link/{{ link.id }}"
               hx-target="#tema-link-{{ link.id }}"
               hx-swap="outerHTML">

folkugat_web/assets/templates/fragments/tema/links.html

@@ -1,9 +1,6 @@
 {% if logged_in or tema.links %}
-<h4 class="text-xl text-beige">Enllaços</h4>
-<hr class="h-px mt-1 mb-3 bg-beige border-0">
-{% endif %}
-
-{% if tema.links %}
+  <h4 class="text-xl text-beige">Enllaços</h4>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
   <ul class="flex flex-col justify-center"
       id="new-link-target">
     {% for link in tema.links %}

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

@@ -4,19 +4,17 @@
     {% include "fragments/tema/title.html" %}
     <div class="text-left">
 
+      <div id="tema-{{ tema.id }}-score"
+           hx-get="/api/tema/{{ tema.id }}/score"
+           hx-trigger="load, reload-tema-{{ tema.id }}-score from:body"
+           hx-swap="innerHTML"
+           >
+      </div>
+
       {% include "fragments/tema/lyrics.html" %}
       {% include "fragments/tema/links.html" %}
+      {% include "fragments/tema/properties.html" %}
 
-      <!-- PROPERTIES -->
-      {% if tema.properties %}
-      <h4 class="text-xl mt-3 text-beige">Informació</h4>
-      <hr class="h-px mt-1 mb-3 bg-beige border-0">
-      {% for property in tema.properties %}
-        <p>
-          <i>{{ property.field.value.capitalize() }}</i>: {{ property.value }}
-        </p>
-      {% endfor %}
-      {% endif %}
     </div>
   </div>
 </div>

folkugat_web/assets/templates/fragments/tema/properties.html

@@ -0,0 +1,24 @@
+{% if logged_in or tema.properties %}
+  <h4 class="text-xl mt-3 text-beige">Informació</h4>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+
+  <ul class="flex flex-col"
+      id="new-property-target">
+    {% for property in tema.properties %}
+      {% include "fragments/tema/property.html" %}
+    {% endfor %}
+  </ul>
+{% endif %}
+
+{% if logged_in %}
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix informació"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/property"
+          hx-target="#new-property-target"
+          hx-swap="beforeend transition:true">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix informació
+  </button>
+</div>
+{% endif %}

folkugat_web/assets/templates/fragments/tema/property.html

@@ -0,0 +1,27 @@
+<div id="tema-property-{{ property.id }}"
+     class="flex flex-row">
+  <div class="px-2">
+    <i>{{ property.field.value.capitalize() }}:</i>
+  </div>
+  <div>
+    {{ property.value }}
+  </div>
+
+  {% if logged_in %}
+  <div class="grow"></div>
+  <button title="Modifica la informació"
+          class="text-sm text-beige mx-1"
+          hx-get="/api/tema/{{ tema.id }}/editor/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-pencil" aria-hidden="true"></i>
+  </button>
+  <button title="Esborra la informació"
+          class="text-sm text-beige mx-1"
+          hx-delete="/api/tema/{{ tema.id }}/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-times" aria-hidden="true"></i>
+  </button>
+  {% endif %}
+</div>

folkugat_web/assets/templates/fragments/tema/score.html

@@ -0,0 +1,15 @@
+{% set score = tema.score() %}
+{% if score %}
+<h4 class="text-xl text-beige">Partitura</h4>
+<hr class="h-px mt-1 mb-3 bg-beige border-0">
+  {% if score.link_type == LinkType.PDF %}
+    {% set pdf_url = score.url %}
+    {% include "fragments/pdf_viewer.html" %}
+  {% elif score.link_type == LinkType.IMAGE %}
+  <div class="flex justify-center">
+    <img class="m-2"
+         src="{{ score.url }}"
+         />
+  </div>
+  {% endif %}
+{% endif %}

folkugat_web/assets/templates/fragments/tema/title.html

@@ -3,11 +3,18 @@
   <h3 class="text-3xl p-4">{{ tema.title }}</h3>
   {% if logged_in %}
   <button title="Canvia el títol"
-          class="text-beige text-2xl"
+          class="text-beige text-2xl mx-2"
           hx-get="/api/tema/{{ tema.id }}/editor/title"
           hx-target="#tema-title"
           hx-swap="outerHTML">
     <i class="fa fa-pencil" aria-hidden="true"></i>
   </button>
+  {% include "fragments/tema/visibility.html" %}
+  <button title="Canvia el títol"
+          class="text-beige text-2xl mx-2"
+          hx-delete="/api/tema/{{ tema.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-times" aria-hidden="true"></i>
+  </button>
   {% endif %}
 </div>

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

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

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

@@ -1,12 +1,8 @@
 {% include "fragments/menu.html" %}
 <div class="p-12 text-center flex flex-col items-center justify-center">
   <h3 class="text-3xl text-beige p-4">Temes</h3>
-  <button title="Afegeix un tema"
-          class="text-beige m-2">
-    <i class="fa fa-plus" aria-hidden="true"></i>
-    Afegeix un tema
-  </button>
-  <input type="text" name="query" value=""
+  <input id="query-input"
+         type="text" name="query" value="{{ query }}"
          placeholder="Busca una tema..."
          class="rounded
                 text-yellow-50 bg-brown
@@ -15,10 +11,16 @@
          hx-get="/api/temes/busca"
          hx-trigger="revealed, keyup delay:500ms changed"
          hx-target="#search-results">
-  <div class="flex justify-center">
-    <div id="search-results"
-         class="m-4 max-w-5xl
-                flex flex-wrap items-center justify-center">
-    </div>
-  </div>
+  {% if logged_in %}
+    <button title="Afegeix un tema"
+            class="text-beige m-2"
+            hx-post="/api/tema"
+            hx-include="[name=query]"
+            hx-vals="js:{title: document.getElementById('query-input').value}"
+            >
+      <i class="fa fa-plus" aria-hidden="true"></i>
+      Afegeix un tema
+    </button>
+  {% endif %}
+  <div id="search-results" class="flex-col"></div>
 </div>

folkugat_web/assets/templates/fragments/temes/result.html

@@ -1,44 +0,0 @@
-<div class="flex-none px-4 py-2 w-80 h-80 m-2 border-solid border rounded-md bg-yellow-50 text-brown">
-  <div class="flex flex-col h-full">
-    <div class="text-xl text-beige">
-      <a href="/tema/{{ tema.id }}">
-        {{ tema.title }}
-      </a>
-    </div>
-    <div class="grow"></div>
-    <div class="flex flex-row">
-    </div>
-      <ul class="flex flex-row items-center justify-center">
-        {% if tema.links %}
-          {% for link in tema.links %}
-            <li class="p-2 m-2 text-beige border border-beige rounded-md">
-              <a href="{{ link.url }}" target="_blank">
-              {% if link.content_type == ContentType.AUDIO %}
-                {% if link.link_type == LinkType.SPOTIFY %}
-                  {% include "icons/spotify.svg" %}
-                {% elif link.link_type == LinkType.YOUTUBE %}
-                  {% include "icons/youtube.svg" %}
-                {% else %}
-                  {% include "icons/notes.svg" %}
-                {% endif %}
-              {% elif link.content_type == ContentType.PARTITURA %}
-                {% if link.link_type == LinkType.PDF %}
-                  {% include "icons/pdf.svg" %}
-                {% else %}
-                  {% include "icons/link.svg" %}
-                {% endif %}
-              {% else %}
-                {% include "icons/link.svg" %}
-              {% endif %}
-              </a>
-            </li>
-          {% endfor %}
-        {% endif %}
-      </ul>
-    <!-- {% if logged_in %} -->
-    <!--   <div> -->
-    <!--     Edita -->
-    <!--   </div> -->
-    <!-- {% endif %} -->
-  </div>
-</div>

folkugat_web/assets/templates/fragments/temes/result_links.html

@@ -0,0 +1,27 @@
+<ul class="flex flex-row items-center">
+  {% if tema.links %}
+    {% for link in tema.links %}
+      <li class="px-2 text-beige">
+        <a href="{{ link.url }}" target="_blank">
+        {% if link.content_type == ContentType.AUDIO %}
+          {% if link.link_type == LinkType.SPOTIFY %}
+            <i class="fa fa-music" aria-hidden="true"></i>
+          {% elif link.link_type == LinkType.YOUTUBE %}
+            <i class="fa fa-play" aria-hidden="true"></i>
+          {% else %}
+            <i class="fa fa-music" aria-hidden="true"></i>
+          {% endif %}
+        {% elif link.content_type == ContentType.PARTITURA %}
+          {% if link.link_type == LinkType.PDF %}
+            <i class="fa fa-file" aria-hidden="true"></i>
+          {% else %}
+            <i class="fa fa-link" aria-hidden="true"></i>
+          {% endif %}
+        {% else %}
+          <i class="fa fa-link" aria-hidden="true"></i>
+        {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  {% endif %}
+</ul>

folkugat_web/assets/templates/fragments/temes/results.html

@@ -0,0 +1,19 @@
+<table id="search-results"
+       class="text-left min-w-full w-full">
+  <tr class="border-b border-beige">
+    <td class="font-bold py-2 px-4">Nom</td>
+    <td class="font-bold py-2 px-4">Enllaços</td>
+  </tr>
+  {% for tema in temes %}
+  <tr class="border-b border-beige">
+    <td class="py-2 px-4">
+      <a href="/tema/{{ tema.id }}">
+        {{ tema.title }}
+      </a>
+    </td>
+    <td class="py-2 px-4">
+      {% include "fragments/temes/result_links.html" %}
+    </td>
+  </tr>
+  {% endfor %}
+</table>