Added lilypond edition

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

@@ -7,7 +7,8 @@
 </h3>
 <div class="mx-12 text-left">
 
-  {% if tema.score() is not none %}
+  {% if tema.main_score() is not none %}
+    {% set score = tema.main_score() %}
     {% include "fragments/tema/score.html" %}
   {% endif %}
 

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

@@ -0,0 +1,73 @@
+<div id="tema-score-{{ score.id }}">
+  <h4 class="mp-4 text-xl text-beige">
+    <i class="fa fa-code mr-2" aria-hidden="true"></i> Editor de partitura
+  </h4>
+  <h5 class="text-sm text-beige text-right">
+    <input name="title"
+           id="score-{{ score.id }}-editor-title"
+           placeholder="Nom de la partitura"
+           value="{{ score.title }}"
+           class="border border-beige focus:outline-none
+                  rounded
+                  bg-brown px-2"
+      />
+    <button title="Desa els canvis"
+            class="mx-1"
+            hx-put="/api/tema/{{ score.tema_id }}/score/{{ score.id }}"
+            hx-vals="js:{title: document.getElementById('score-{{ score.id }}-editor-title').value, source: editor_{{ score.id }}.getValue()}"
+            hx-target="#tema-score-{{ score.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-check" aria-hidden="true"></i>
+    </button>
+    <button title="Descarta els canvis"
+            class="mx-1"
+            hx-get="/api/tema/{{ score.tema_id }}/score/{{ score.id }}"
+            hx-target="#tema-score-{{ score.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </h5>
+  <h5 class="mp-4 text text-beige">
+    Codi Lilypond
+    <a href="https://lilypond.org/doc/v2.24/Documentation/learning/simple-notation"
+       target="_blank">
+      <i class="fa fa-info-circle" aria-hidden="true"></i>
+    </a>
+  </h5>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+
+  <div class="flex flex-col">
+    <form class="flex flex-col"
+          hx-post="/api/tema/{{ score.tema_id }}/editor/score/{{ score.id }}/render"
+          hx-target="#score-{{ score.id }}-render-target"
+          hx-swap="outerHTML"
+          onsubmit="document.getElementById('lilypond-editor-{{ score.id }}').value = editor_{{ score.id }}.getValue()"
+          >
+      {% if score.source %}
+      <textarea id="lilypond-editor-{{ score.id }}"
+                name="source">{{ score.source | safe }}</textarea>
+      {% else %}
+      <textarea id="lilypond-editor-{{ score.id }}"
+                name="source">{% include "lilypond/score_template.ly" %}</textarea>
+      {% endif %}
+      <script>
+        var editor_{{ score.id }} = CodeMirror.fromTextArea(
+          document.getElementById("lilypond-editor-{{ score.id }}"), {
+            mode: "lilypond",
+            lineNumbers: true,
+          }
+        );
+      </script>
+      <button title="Previsualitza els canvis"
+              type="submit"
+              class="flex flex-col items-center">
+         <div class="m-2 mt-3 p-1 text-beige
+                     border border-beige rounded">
+           Previsualitza els canvis
+         </div>
+       </button>
+    </form>
+    <div id="score-{{ score.id }}-render-target">
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<div id="score-{{ score_id }}-render-target">
+<h5 class="text text-beige"> Previsualització </h5>
+<hr class="h-px mt-1 mb-3 bg-beige border-0">
+  {% if score_render_url %}
+    <img class="my-2" src="{{ score_render_url }}" />
+  {% else %}
+    <ol class="text-red-400">
+      {% for error in errors %}
+        <li class="text-red-500">Línia {{ error.line }} posició {{ error.pos }}: {{ error.error }}</p>
+      {% endfor %}
+    </ol>
+  {% endif %}
+</div>

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

@@ -4,12 +4,13 @@
     {% include "fragments/tema/title.html" %}
   </div>
   <div class="p-12 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>
+      <!-- <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/scores.html" %}
       {% include "fragments/tema/lyrics.html" %}
       {% include "fragments/tema/links.html" %}
       {% include "fragments/tema/properties.html" %}

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

@@ -1,15 +1,63 @@
-{% set score = tema.score() %}
-{% if score %}
-<h4 class="mp-4 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">
-    <a href="{{ score.url }}" target="_blank">
-      <img class="m-2" src="{{ score.url }}" />
-    </a>
+{% if logged_in or not score.hidden %}
+<div id="tema-score-{{ score.id }}">
+  <h5 class="text-sm text-beige text-right">
+    {{ score.title }}
+    {% if logged_in and score.id is not none %}
+      {% if score.source == "" %}
+        <i>(Partitura buida)</i>
+      {% elif score.errors %}
+        <i>(Partitura amb errors)</i>
+      {% endif %}
+      {% if score.hidden %}
+        <i>(Privada)</i>
+      {% endif %}
+    {% endif %}
+    {% if logged_in and score.id is not none %}
+    {% if score.hidden %}
+      <button title="Mostra la partitura"
+              class="mx-1"
+              hx-put="/api/tema/{{ score.tema_id }}/score/{{ score.id }}/show"
+              hx-target="#tema-score-{{ score.id }}"
+              hx-swap="outerHTML">
+        <i class="fa fa-eye-slash" aria-hidden="true"></i>
+      </button>
+    {% else %}
+      <button title="Amaga la partitura"
+              class="mx-1"
+              hx-put="/api/tema/{{ score.tema_id }}/score/{{ score.id }}/hide"
+              hx-target="#tema-score-{{ score.id }}"
+              hx-swap="outerHTML">
+        <i class="fa fa-eye" aria-hidden="true"></i>
+      </button>
+    {% endif %}
+    <button title="Modifica la partitura"
+            class="mx-1"
+            hx-get="/api/tema/{{ score.tema_id }}/editor/score/{{ score.id }}"
+            hx-target="#tema-score-{{ score.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+    </button>
+    <button title="Esborra la partitura"
+            class="mx-1"
+            hx-delete="/api/tema/{{ score.tema_id }}/score/{{ score.id }}"
+            hx-target="#tema-score-{{ score.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+    {% endif %}
+  </h5>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+  <div>
+    {% if score.img_url is not none %}
+      <div class="flex justify-center">
+        <a href="{{ score.pdf_url or score.img_url }}" target="_blank">
+          <img class="m-2" src="{{ score.img_url }}" />
+        </a>
+      </div>
+    {% elif score.pdf_url is not none %}
+      {% set pdf_url = score.pdf_url %}
+      {% include "fragments/pdf_viewer.html" %}
+    {% endif %}
   </div>
-  {% endif %}
+</div>
 {% endif %}

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

@@ -0,0 +1,31 @@
+{% set main_score = tema.main_score() %}
+{% if logged_in or tema.scores or main_score %}
+<h4 class="pt-4 text-xl text-beige">Partitures</h4>
+{% endif %}
+
+{% if main_score is not none %}
+  {% set score = main_score %}
+  {% include "fragments/tema/score.html" %}
+{% endif %}
+
+{% if tema.scores %}
+{% for score in tema.scores %}
+  {% if score.id != main_score.id %}
+    {% include "fragments/tema/score.html" %}
+  {% endif %}
+{% endfor %}
+{% endif %}
+
+{% if logged_in %}
+<div id="new-score-target"></div>
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix una partitura"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/score"
+          hx-target="#new-score-target"
+          hx-swap="beforebegin">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix una partitura
+  </button>
+</div>
+{% endif %}

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

@@ -12,16 +12,5 @@
          hx-trigger="revealed, keyup delay:500ms changed"
          hx-target="#search-results"
          hx-swap="outerHTML">
-  {% 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/results.html

@@ -1,5 +1,17 @@
 <div id="search-results"
      class="min-w-full w-full">
+  {% if logged_in and query %}
+    <button title="Afegeix un tema"
+            class="border border-beige text-beige rounded
+                   m-1 px-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>
+      <i>{{ query }}</i>
+    </button>
+  {% endif %}
   <table class="text-left min-w-full w-full">
     <tr class="border-b border-beige">
       <td class="font-bold py-2 px-4">Nom</td>