the_works/the_works/templates/views/werk_detail.html

{% extends 'base.html' %}
{% set create_mode = (werk['ID'] == 0) %}

{% block title %}
{% if create_mode %}
Neues Werk erstellen
{% else %}
Werk bearbeiten
{% endif %}
{% endblock title %}

{% block head %}
{% endblock head %}

{% block heading %}
{% if create_mode %}
Neues Werk erstellen
{% else %}
Werk bearbeiten
{% endif %}
{% endblock heading %}

{% block content %}

{% include "_icons.svg" %}

<form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#">
  <section>
    <label>
      <span class="required">Titel</span>
      <input type="text" id="form_Titel" name="form_Titel" aria-label="Titel" required value="{{ werk['Titel'] }}" />
    </label>
  </section>
  <hr />
  <section class="grid">
    <div>
      <label>
        Untertitel
        <input id="form_Untertitel" name="form_Untertitel" aria-label="Untertitel" placeholder="kein Untertitel" value="{{ werk['Untertitel'] or '' }}" />
      </label>
      <label>
        <span class="required">Werksform</span>
        <select id="form_Werksform" name="form_Werksform" aria-label="Werksform" required>
          <option value="">bitte wählen …</option>
          {% for wf in werksformen %}<option value="{{ wf.ID }}"{% if wf.ID == werk['Werksform'] %} selected{% endif %}>{{ wf.Werksform }}</option>{% endfor %}
        </select>
      </label>
      <div class="grid">
        <label>
          Reihe
          <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
            <option value="" >keine Reihe</option>
            {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == werk['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
          </select>
        </label>
        <label>
          Reihennummer
          <input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" value="{{ werk['Reihennummer'] or '' }}" />
        </label>
      </div>
      <label>
        Verlag
        <select id="form_Verlag" name="form_Verlag" aria-label="Verlag">
          <option selected value="">kein Verlag</option>
          {% for v in verlage %}<option value="{{ v.ID }}"{% if v.ID == werk['Verlag'] %} selected{% endif %}>{{ v.Verlag }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Preis
        <input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] or '' }}" />
      </label>
      <label>
        Titelbild
        <details id="form_Titelbild_dropdown" class="dropdown imageselect">
          <summary id="form_Titelbild_summary" class="imageselect-summary">
          </summary>
          <ul>
            <li class="imageselect-entry" data-bild='<svg width="900" height="1280" viewbox="0 0 90 128"><use class="imageselect-svg" href="#placeholder" /></svg>'>
              <div class="imageselect-input">
                <input id="imageselect-radio-0" type="radio" name="form_Titelbild" value="" {% if not werk['Titelbild'] %}checked{% endif %}/>
              </div>
              <div class="imageselect-div">
                <svg viewbox="0 0 90 128">
                  <use class="imageselect-svg" href="#placeholder" />
                </svg>
              </div>
              <div class="imageselect-title">
                <label class="imageselect-label" for="imageselect-radio-0">kein Titelbild</label>
              </div>
            </li>
            {% for t in titelbilder %}
            <li class="imageselect-entry" data-bild="{{ t.Bild }}">
              <div class="imageselect-input">
                <input id="imageselect-radio-{{ t.ID }}" type="radio" name="form_Titelbild" value="{{ t.ID }}" {% if werk['Titelbild'] == t.ID %}checked{% endif %}/>
              </div>
              <div class="imageselect-div">
                <img class="imageselect-img" src="{{ t.Thumbnail }}" />
              </div>
              <div class="imageselect-title">
                <label class="imageselect-label" for="imageselect-radio-{{ t.ID }}">{{ t.Dateiname }} ({{ t.Breite }} x {{ t.Hoehe }}, {{ t.Dateigroesse }} Bytes)</label>
              </div>
            </li> 
            {% endfor %}
          </ul>
        </details>
      </label>      
    </div>
    <div>
      <label>
        Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
        <div class="grid">
          <input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] if werk['Erscheinungsdatum'] }}" />
          <input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] if werk['Erscheinungsdatum'] }}" />
          <input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] if werk['Erscheinungsdatum'] }}" />
        </div>
      </label>
      <label>
        ISBN-13
        <input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ werk['ISBN_13'] or '' }}" />
      </label>
      <label>
        ISBN-10
        <input id="form_ISBN_10" name="form_ISBN_10" aria-label="ISBN-10" placeholder="keine ISBN-10" value="{{ werk['ISBN_10'] or '' }}" />
      </label>
      <label>
        ISSN
        <input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] or '' }}" />
      </label>
      <label>
        Genre(s)
        <details id="form_Genre_dropdown" class="dropdown multiselect">
          <summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
          <ul>
            <li>
              <input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
            </li>
            {% for g in genres %}
            <li>
              <label>
                <input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in werk["Genres"] %} checked {% endif %}/>
                {{ g.Genre }}
              </label>
            </li> 
            {% endfor %}
            </ul>
        </details>
      </label>
      <label>
        Herausgeber:in(nen)
        <details id="form_Herausgeber_dropdown" class="dropdown multiselect">
          <summary id="form_Herausgeber_summary" data-default="kein(e) Herausgeber:in(nen) ausgewählt"></summary>
          <ul>
            <li>
              <input type="search" id="form_Herausgeber_search" aria-label="search" placeholder="Herausgeber:innen filtern …" value="" />
            </li>
            {% for h in hrsg %}
            <li>
              <label>
                <input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" data-content="{{ h.Name }}" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
                {{ h.Name }}
              </label>
            </li> 
            {% endfor %}
            </ul>
        </details>
      </label>
    </div>
  </section>
  <hr />
  <section class="grid">
    <label>
      Klappentext
      <textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10">{{ werk['Klappentext'] or '' }}</textarea>
    </label>
    <label>
      Anmerkungen
      <textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10">
          {{ werk['Anmerkungen'] or '' }}</textarea>
    </label>
  </section>    

  <footer class="grid">
    <button id="form_submit" type="submit" onclick="return validate_date()" formmethod="post" formaction="{% if create_mode %}{{ url_for('werk.create') }}{% else %}{{ url_for('werk.update', id=werk['ID']) }}{% endif %}">
      {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
    </button>
    <button type="reset" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
    <a role="button" class="contrast" href="{{ url_for('werk.all') }}">Abbrechen (nicht speichern)</a>
  </footer>
</form>

<dialog id="imagepreview-modal" closedby="any">
  <article>
    <header>
      <button class="modal-close" aria-label="close" rel="prev"></button>
      <div class="imagepreview-details"></div>
    </header>
    <div class="imagepreview-div" />
  </article>
</dialog>

{% endblock content %}

{% block script %}
<script src="{{ url_for('static', filename='js/multiselect.js') }}"></script>
<script src="{{ url_for('static', filename='js/imageselect.js') }}"></script>
<script src="{{ url_for('static', filename='js/imagepreview.js') }}"></script>
<script src="{{ url_for('static', filename='js/validate_date.js') }}"></script>
<script>
  window.onload = () => {
    initAllMultiselects();
    initImageselect("form_Titelbild_dropdown");
    initImagepreview("imagepreview-modal");
  }
</script>
{% endblock script %}