Initial commit

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

@@ -0,0 +1,35 @@
+<form id="tema-lyric-{{ lyric_idx }}">
+  <h5 class="text-sm text-beige text-right">
+    <input name="title"
+           placeholder="Nom de la lletra"
+           value="{{ lyric.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/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            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/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </h5>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+  <textarea name="lyric"
+      placeholder="Lletra"
+      rows="{{ lyric.content.count('\n') + 1 }}"
+      class="border border-beige focus:outline-none
+             w-full text-center
+             rounded
+             bg-brown p-2 m-0">
+{{ lyric.content }}
+  </textarea>
+</form>

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

@@ -0,0 +1,26 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="tema-title">
+  <form>
+    <input name="title"
+           placeholder="Nom del tema"
+           value="{{ tema.title }}"
+           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/tema/{{ tema.id }}/title"
+            hx-target="#tema-title"
+            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/tema/{{ tema.id }}/title"
+            hx-target="#tema-title"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </form>
+</div>

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

@@ -0,0 +1,21 @@
+<li class="flex flex-row items-start">
+  <div class="p-2 m-2 text-beige border border-beige rounded-md">
+    <a href="{{ link.url }}" target="_blank">
+    {% if link.subtype == LinkSubtype.SPOTIFY %}
+      {% include "icons/spotify.svg" %}
+    {% elif link.subtype == LinkSubtype.YOUTUBE %}
+      {% include "icons/youtube.svg" %}
+    {% elif link.subtype == LinkSubtype.PDF %}
+      {% include "icons/pdf.svg" %}
+    {% elif link.type == LinkType.AUDIO %}
+      {% include "icons/notes.svg" %}
+    {% else %}
+      {% include "icons/link.svg" %}
+    {% endif %}
+    </a>
+  </div>
+  <div class="my-2">
+    <p class="text-sm text-beige">Partitura</p>
+    <p>Hola</p>
+  </div>
+</li>

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

@@ -0,0 +1,27 @@
+{% 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 %}
+{% for link in tema.links %}
+  <ul class="flex flex-col justify-center"
+      id="new-link-target">
+  {% set link_idx = loop.index0 %}
+  {% include "fragments/tema/link.html" %}
+  </ul>
+{% endfor %}
+{% endif %}
+
+{% if logged_in %}
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix una lletra"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/link"
+          hx-target="#new-link-target"
+          hx-swap="beforebegin">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix un enllaç
+  </button>
+</div>
+{% endif %}

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

@@ -0,0 +1,25 @@
+<div id="tema-lyric-{{ lyric_idx }}">
+  <h5 class="text-sm text-beige text-right">
+    {{ lyric.title }}
+    {% if logged_in %}
+    <button title="Modifica la lletra"
+            class="mx-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+    </button>
+    <button title="Esborra la lletra"
+            class="mx-1"
+            hx-delete="/api/tema/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            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 class="text-center">
+  {{ lyric.content.replace('\n', '<br>') | safe }}
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+{% if logged_in or tema.lyrics %}
+<h4 class="text-xl text-beige">Lletra</h4>
+{% endif %}
+
+{% if tema.lyrics %}
+{% for lyric in tema.lyrics %}
+  {% set lyric_idx = loop.index0 %}
+  {% include "fragments/tema/lyric.html" %}
+{% endfor %}
+{% endif %}
+
+{% if logged_in %}
+<div id="new-lyric-target"></div>
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix una lletra"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/lyric"
+          hx-target="#new-lyric-target"
+          hx-swap="beforebegin">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix una lletra
+  </button>
+</div>
+{% endif %}

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

@@ -0,0 +1,34 @@
+{% include "fragments/menu.html" %}
+<div class="flex justify-center">
+  <div class="m-12 grow max-w-4xl text-center">
+    {% include "fragments/tema/title.html" %}
+    <div class="text-left">
+
+      <!-- {% if tema.scores() %} -->
+      <!-- temes -->
+      <!-- <h4 class="text-xl text-beige">Tema</h4> -->
+      <!-- <hr class="h-px mt-1 mb-3 bg-beige border-0"> -->
+      <!-- {% for file in tema.files %} -->
+      <!--   {% if file.type == FileType.PDF %} -->
+      <!--     {% set pdf_url = file.path %} -->
+      <!--     {% include "fragments/pdf_viewer.html" %} -->
+      <!--   {% endif %} -->
+      <!-- {% endfor %} -->
+      <!-- {% endif %} -->
+
+      {% include "fragments/tema/lyrics.html" %}
+      {% include "fragments/tema/links.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/title.html

@@ -0,0 +1,13 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="tema-title">
+  <h3 class="text-3xl p-4">{{ tema.title }}</h3>
+  {% if logged_in %}
+  <button title="Canvia el títol"
+          class="text-beige text-2xl"
+          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>
+  {% endif %}
+</div>