Added lilypond edition

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>