Session editor and live sessions!

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

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

folkugat_web/assets/templates/fragments/sessio/live/set_page.html

@@ -0,0 +1,5 @@
+<div hx-get="/api/content/live/set"
+     hx-trigger="every 20s"
+     hx-swap="outerHTML">
+  {% include "fragments/sessio/set/set_page.html" %}
+</div>"

folkugat_web/assets/templates/fragments/sessio/live/start.html

@@ -0,0 +1,6 @@
+<button title="Inicia una sessió"
+        class="text-beige m-2"
+        hx-put="/api/sessio/{{ session.id }}/live"
+        hx-swap="outerHTML">
+    <i class="fa fa-play" aria-hidden="true"></i>
+</button>

folkugat_web/assets/templates/fragments/sessio/live/stop.html

@@ -0,0 +1,6 @@
+<button title="Atura una sessió"
+        class="text-beige m-2"
+        hx-delete="/api/sessio/{{ session.id }}/live"
+        hx-swap="outerHTML">
+    <i class="fa fa-stop" aria-hidden="true"></i>
+</button>

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

@@ -0,0 +1,39 @@
+{% include "fragments/menu.html" %}
+<div class="flex justify-center">
+  <div class="m-12 grow max-w-4xl">
+    <h3 class="text-center text-3xl p-4">
+        {% set dn = date_names(session.date) %}
+        {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
+        {% if logged_in %}
+          {% if session.is_live %}
+            {% include "fragments/sessio/live/stop.html" %}
+          {% else %}
+            {% include "fragments/sessio/live/start.html" %}
+          {% endif %}
+        {% endif %}
+    </h3>
+    <div class="text-left">
+      <h4 class="pt-4 text-xl text-beige">Horari i lloc</h4>
+        De {{ session.start_time.strftime("%H:%M") }}
+        a {{ session.end_time.strftime("%H:%M") }}
+        {% if session.venue.name %}
+          a
+          {% if session.venue.url %}
+          <a href="{{ session.venue.url }}"
+            class="text-beige"
+            target="_blank">
+            {{ session.venue.name }}
+          </a>
+          {% else %}
+            {{ session.venue.name }}
+          {% endif %}
+        {% endif %}
+    </div>
+    {% if logged_in or playlist.sets %}
+    <div class="text-left">
+      <h4 class="pt-4 text-xl text-beige mt-2">Temes tocats</h4>
+      {% include "fragments/sessio/playlist.html" %}
+    </div>
+    {% endif %}
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<ul id="playlist-{{ session.id }}" class="">
+  {% for set_entry in playlist.sets %}
+    {% set set_id = set_entry.id %}
+    {% include "fragments/sessio/set_entry.html" %}
+  {% endfor %}
+</ul>
+{% if logged_in %}
+  <div class="flex flex-col items-center">
+    <button class="text-beige mt-2"
+            hx-post="/api/sessio/{{ session.id }}/set"
+            hx-target="#playlist-{{ session.id }}"
+            hx-swap="beforeend transition:true">
+        <i class="fa fa-plus" aria-hidden="true"></i>
+        Afegeix set
+    </button>
+  </div>
+{% endif %}

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

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

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

@@ -0,0 +1,30 @@
+{% if session is not none %}
+<div class="text-beige m-3">
+  {% set dn = date_names(session.date) %}
+  <a href="/sessio/{{ session.id }}">
+    <i class="fa fa-chevron-left px-2" aria-hidden="true"></i>
+    <i>
+    Tocat el {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
+    </i>
+  </a>
+</div>
+{% endif %}
+{% for tema_in_set in set.temes %}
+  {% if loop.index != 1 %}
+  <div class="mx-12">
+    <hr class="h-px mt-1 mb-3 bg-beige border-0">
+  </div>
+  {% endif %}
+  {% if tema_in_set.tema is not none %}
+    {% set tema = tema_in_set.tema %}
+    {% include "fragments/sessio/set/tema.html"%}
+  {% else %}
+    <h3 class="text-center text-3xl p-4">
+      <i>Desconegut</i>
+    </h3>
+    <div class="text-center">
+      <i>No sabem quin tema és aquest</i>
+    </div>
+  {% endif %}
+  <div class="m-8"> </div>
+{% endfor %}

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

@@ -0,0 +1,25 @@
+<h3 class="text-center text-3xl p-4">
+    {{ tema.title }}
+  <a class="text-beige"
+    º href="/tema/{{ tema.id }}">
+    <i class="fa fa-chevron-right px-2" aria-hidden="true"></i>
+  </a>
+</h3>
+<div class="mx-12 text-left">
+
+  {% if tema.score() is not none %}
+    {% include "fragments/tema/score.html" %}
+  {% endif %}
+
+  {% if tema.lyrics %}
+    {% set lyric = tema.lyrics[0] %}
+    <div>
+      <h4 class="mt-4 text-xl text-beige">Lletra</h4>
+      <hr class="h-px mt-1 mb-3 bg-beige border-0">
+      <div class="text-center">
+      {{ lyric.content.replace('\n', '<br>') | safe }}
+      </div>
+    </div>
+  {% endif %}
+
+</div>

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

@@ -0,0 +1,46 @@
+<li class="flex flex-row grow items-center
+           border border-beige rounded
+           px-2 py-1 my-1"
+    id="set-entry-{{ set_id }}"
+    hx-get="/api/sessio/{{ session_id }}/set/{{ set_id }}"
+    hx-target="#set-entry-{{ set_id }}"
+    hx-swap="outerHTML"
+    hx-trigger="reload-set-{{ set_id }}">
+  <div class="flex-1 flex flex-col items-center">
+  {% if logged_in %}
+    <button class="text-beige mt-2"
+            hx-delete="/api/sessio/{{ session_id }}/set/{{ set_id }}"
+            hx-target="#set-entry-{{ set_id }}"
+            hx-swap="outerHTML">
+        <i class="fa fa-times" aria-hidden="true"></i>
+        Esborra el set
+    </button>
+    {% endif %}
+    <ol id="set-entry-{{ set_id }}-list"
+        class="flex flex-col items-center">
+    {% for tema_entry in set_entry.temes %}
+      {% if new_entry %}
+        {% include "fragments/sessio/tema_editor.html" %}
+      {% else %}
+        {% include "fragments/sessio/tema_entry.html" %}
+      {% endif %}
+    {% endfor %}
+    </ol>
+    {% if logged_in %}
+    <button class="text-beige mt-2"
+            hx-post="/api/sessio/{{ session_id }}/set/{{ set_id }}"
+            hx-target="#set-entry-{{ set_id }}-list"
+            hx-swap="beforeend transition:true">
+        <i class="fa fa-plus" aria-hidden="true"></i>
+        Afegeix un tema
+    </button>
+    {% endif %}
+  </div>
+  <div class="ml-auto">
+    <a title="Mostra els temes"
+       class="text-beige"
+       href="/sessio/{{ session_id }}/set/{{ set_id }}">
+        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+    </a>
+  </div>
+</li>

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

@@ -0,0 +1,30 @@
+<li id="tune-entry-{{ tema_entry.id }}"
+    class="flex flex-col items-center my-1">
+  <div class="flex flex-row">
+  <input
+    name="query"
+    {% if tema_entry.tema %}
+    value="{{ tema_entry.tema.title }}"
+    {% else %}
+    value=""
+    {% endif %}
+    placeholder="Busca un tema..."
+    class="border border-beige focus:outline-none
+           rounded text-center
+           bg-brown p-1 m-1"
+    hx-get="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ tema_entry.id }}/busca"
+    hx-trigger="revealed, keyup delay:500ms changed"
+    hx-target="#tune-entry-{{ tema_entry.id }}-search-results"
+    hx-swap="outerHTML"/>
+    <button title="Descarta els canvis"
+            class="text-beige mx-1"
+            hx-get="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ tema_entry.id }}"
+            hx-target="#tune-entry-{{ tema_entry.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul id="tune-entry-{{ tema_entry.id }}-search-results"
+      class="flex flex-wrap">
+  </ul>
+</li>

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

@@ -0,0 +1,29 @@
+<li id="tune-entry-{{ tema_entry.id }}"
+    class="flex flex-row my-1">
+  <div class="mx-1 text-center">
+    {% if tema_entry.tema is none %}
+      <i class="fa fa-question" aria-hidden="true"></i>
+      <i>(Desconegut)</i>
+    {% else %}
+      <a href="/sessio/{{ session_id }}/set/{{ set_id }}">
+       {{ tema_entry.tema.title }}
+      </a>
+    {% endif %}
+  </div>
+  {% if logged_in %}
+    <button title="Edita el tema"
+            class="text-beige mx-1"
+            hx-get="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ tema_entry.id }}/editor"
+            hx-target="#tune-entry-{{ tema_entry.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+    </button>
+    <button title="Esborra el tema"
+            class="text-beige mx-1"
+            hx-delete="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ tema_entry.id }}"
+            hx-target="#tune-entry-{{ tema_entry.id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  {% endif %}
+</li>

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

@@ -0,0 +1,36 @@
+<ul id="tune-entry-{{ entry_id }}-search-results"
+    class="flex flex-wrap items-center justify-center">
+  {% for tema in results %}
+  <li>
+    <button class="bg-beige text-brown rounded
+                   m-1 px-2"
+            hx-put="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ entry_id }}"
+            hx-vals='{"tema_id": "{{ tema.id }}"}'
+            hx-target="#tune-entry-{{ entry_id }}"
+            hx-swap="outerHTML">
+      {{ tema.title }}
+    </button>
+  </li>
+  {% endfor %}
+  <li>
+    <button class="border border-beige text-beige rounded
+                   m-1 px-2"
+            hx-put="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ entry_id }}/unknown"
+            hx-target="#tune-entry-{{ entry_id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-question" aria-hidden="true"></i>
+      <i>(Desconegut)</i>
+    </button>
+  </li>
+  <li>
+    <button class="border border-beige text-beige rounded
+                   m-1 px-2"
+            hx-post="/api/sessio/{{ session_id }}/set/{{ set_id }}/tema/{{ entry_id }}"
+            hx-vals='{"title": "{{ query }}"}'
+            hx-target="#tune-entry-{{ entry_id }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-plus" aria-hidden="true"></i>
+      <i>{{ query }}</i>
+    </button>
+  </li>
+</ul>