the_works/the_works/templates/views/text.html

{% extends 'base.html' %}
{% set SPLIT_CHARACTER = "|" %}

{% block title %}Texte{% endblock title %}

{% block script %}
<script>
  const SCRIPT_ROOT = {{ request.script_root | tojson }};
  const textValues = ["Titel", "Untertitel"];
  const selectValues = ["Reihe", "Textform", "Sprache"];
  const multiSelectValues = ["Genres"];
  
  function showCreateModal() {
    // set modal heading
    document.getElementById("dialog-heading").textContent = "Text hinzufügen";
    // empty inputs 
    for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
    for (const v of multiSelectValues) { 
      document.getElementById(`form_${v}`).querySelectorAll("input[type=checkbox]").forEach( cb => { cb.checked = false; }) 
    }
    // set form action
    document.getElementById("form_submit").formAction = "{{ url_for('text.create') }}";
    // show modal
    document.getElementById("textmodal").showModal();
  }
  
  function showUpdateModal() {
    let tr = document.getElementById(`text-${this.dataset.id}`);
    // set modal heading
    document.getElementById("dialog-heading").textContent = "Text ansehen / bearbeiten";
    // populate inputs
    for (const v of textValues) { document.getElementById(`form_${v}`).value = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; }
    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; }
    for (const v of multiSelectValues) {
      let data = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()];
      if ( data ) {
        for (const i of data.split("{{ SPLIT_CHARACTER }}")) {
          document.getElementById(`form_${v}_${i}`).checked = true; 
        }
      }
    }
    // set form action
    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/text/update/${this.dataset.id}`;
    // show modal
    document.getElementById("textmodal").showModal();
  }
  
  window.onload = function () {
    // initialise DataTable
    let table = new DataTable('#text-table', {
      paging: false,
      order: []
    });
    deRole("#text-table");

    // create and append "New"-button to
    let button = document.createElement("button");
    button.id = "create-button";
    button.setAttribute("title", "Text hinzufügen");
    button.innerHTML = "Neu …";
    button.addEventListener("click", showCreateModal, false);
    document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(button);

    // add event listeners
    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
    for (const el of document.querySelectorAll('.action-update') ) { 
      el.addEventListener("click", showUpdateModal, false); 
    }
  }
</script>{% endblock script %}

{% block heading %}Texte{% endblock heading %}

{% block content %}

{% include "_icons.svg" %}

<table id="text-table">
  <thead>
    <tr>
      <th>Titel</th>
      <th>Untertitel</th>
      <th>Reihe</th>
      <th>Textform</th>
      <th>Sprache</th>
      <th>Genres</th>
      <th colspan="2">Aktionen</th>
    </tr>  
  </thead>
  <tbody>
    {% for text in texte %}
    <tr id="text-{{ text['id'] }}">
      <td data-Titel="{{ text['Titel'] }}" title="Titel">{{ text["Titel"] }}</td>
      <td data-Untertitel="{{ text['Untertitel'] }}" title="Untertitel">{{ text["Untertitel"] }}</td>
      <td data-Reihe="{{ text['r_id'] }}" title="Reihe">{{ text["Reihe"] }}</td>
      <td data-Textform="{{ text['tf_id'] }}" title="Textform">{{ text["Textform"] }}</td>
      <td data-Sprache="{{ text['s_id'] }}" title="Sprache">{{ text["Sprache"] }}</td>
      <td data-Genres="{{ text['g_id_list'] | join(SPLIT_CHARACTER) }}" title="Genres">{{ text["Genre_list"] | join(SPLIT_CHARACTER) }}</td>
      <td class="action action-update" data-id="{{ text['id'] }}"><a href="#" title="Text ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
      <td id="delete-{{ text['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('text.delete', id=text['id']) }}" title="Text löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
    </tr>  
    {% endfor %}
  </tbody>
</table>

<dialog aria-labelledby="dialog-heading" id="textmodal">
  <article>
    <form id="text_detail_form" method="post" >
      <header>
        <button aria-label="close" rel="prev" onclick="textmodal.close()"></button>
        <h1 id="dialog-heading">#</h1>
      </header>

      <fieldset>
        <article>
          <label>
            <span class="required">Titel</span>
            <input class="required" id="form_Titel" name="form_Titel" aria-Label="Titel" placeholder="Titel" required autofocus />
          </label>
          <label>
            Untertitel
            <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" />
          </label>
          <label>
            Reihe
            <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
              <option selected value="">keine Reihe</option>
              {% for r in reihen %}<option value="{{ r.ID }}">{{ r.Titel }}</option>{% endfor %}
            </select>
          </label>
          <label>
            <span class="required">Textform</span>
            <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
              <option selected disabled value="">Textform auswählen …</option>
              {% for tf in textformen %}<option value="{{ tf.ID }}">{{ tf.Textform }}</option>{% endfor %}
            </select>
          </label>
          <label>
            <span class="required">Sprache</span>
            <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
              <option selected disabled value="">Sprache auswählen …</option>
              {% for s in sprachen %}<option value="{{ s.ID }}">{{ s.Sprache }}</option>{% endfor %}
            </select>
          </label>
          <label>
            Genre(s)
            <details id="form_Genres" class="dropdown">
              <summary>Genre(s) auswählen …</summary>
              <ul>
                {% for g in genres %}
                <li><label><input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" />{{ g.Genre }}</label></li>
                {% endfor %}
              </ul>
            </details>
          </label>
        </article>
      </fieldset>

      <footer class="grid">
        <button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('text.create') }}">OK</button>
        <button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
      </footer>
    </form>
  </article>
</dialog>
{% endblock content %}