the_works/the_works/templates/views/ausgabe_detail.html

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

{% block title %}
{% if create_mode %}
Neue Ausgabe erstellen
{% else %}
Ausgabe bearbeiten
{% endif %}
{% endblock title %}

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

{% block heading %}
{% if create_mode %}
Neue Ausgabe erstellen
{% else %}
Ausgabe bearbeiten
{% endif %}
{% endblock heading %}

{% block content %}

{% include "_icons.svg" %}

<form id="ausgabe_detail_form" method="post" enctype="multipart/form-data" action="#">
  <section>
    <label>
      <span class="required">Werk</span>
      <select id="form_Werk" name="form_Werk" aria-label="Werk" required>
        <option value="">bitte wählen …</option>
        {% for w in werke %}<option value="{{ w.ID }}"{% if w.ID == ausgabe['Werk'] %} selected{% endif %}>{{ w.Titel }}</option>{% endfor %}
      </select>
    </label>
  </section>
  <hr />
  <section class="grid">
    <div>
      <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 == ausgabe['Werksform'] %} selected{% endif %}>{{ wf.Werksform }}</option>{% endfor %}
        </select>
      </label>
      <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 == ausgabe['Verlag'] %} selected{% endif %}>{{ v.Verlag }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Preis
        <input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" type="number" min="0.01" max="99999.99" step="0.01" value="{{ ausgabe['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 ausgabe['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 ausgabe['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 id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ ausgabe['Erscheinungsdatum'][8:] if ausgabe['Erscheinungsdatum'] }}" type="number" min="1" max="31" />
          <input id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ ausgabe['Erscheinungsdatum'][5:7] if ausgabe['Erscheinungsdatum'] }}" type="number" min="1" max="12" />
          <input id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ ausgabe['Erscheinungsdatum'][:4] if ausgabe['Erscheinungsdatum'] }}" type="number" min="1980" max="2100" />
        </div>
      </label>
      <label>
        ISBN-13
        <input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ ausgabe['ISBN_13'] or '' }}" type="text" size="13" minlength="13" maxlength="13" />
      </label>
      <label>
        ISBN-10
        <input id="form_ISBN_10" name="form_ISBN_10" aria-label="ISBN-10" placeholder="keine ISBN-10" value="{{ ausgabe['ISBN_10'] or '' }}" type="text" size="10" minlength="10" maxlength="10" />
      </label>
      <label>
        ISSN
        <input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ ausgabe['ISSN'] or '' }}" type="text" size="8" maxlength="8" />
      </label>
    </div>
  </section>
  <hr />
  <section class="grid">
    <label>
      Klappentext
      <textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10">{{ ausgabe['Klappentext'] or '' }}</textarea>
    </label>
    <label>
      Anmerkungen
      <textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10">
          {{ ausgabe['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('ausgabe.create') }}{% else %}{{ url_for('ausgabe.update', id=ausgabe['ID']) }}{% endif %}">
      {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
    </button>
    <button type="reset" onclick="return confirm('Wirklich zurücksetzen? Alle geänderten Daten gehen dabei verloren.');" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
    <a role="button" class="contrast" href="{{ url_for('ausgabe.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/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 src="{{ url_for('static', filename='js/datalosswarning.js') }}"></script>
<script>
  window.onload = () => {
    initImageselect("form_Titelbild_dropdown");
    initImagepreview("imagepreview-modal");
    initDatalosswarning();
  }
</script>
{% endblock script %}