switched from modal to dedicated page for creating/editing Text entries
This commit is contained in:
parent
de6cffc0f1
commit
c7fd91d11c
@ -5,47 +5,6 @@
|
|||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<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 () {
|
window.onload = function () {
|
||||||
// initialise DataTable
|
// initialise DataTable
|
||||||
let table = new DataTable('#text-table', {
|
let table = new DataTable('#text-table', {
|
||||||
@ -55,18 +14,13 @@
|
|||||||
deRole("#text-table");
|
deRole("#text-table");
|
||||||
|
|
||||||
// create and append "New"-button to
|
// create and append "New"-button to
|
||||||
let button = document.createElement("button");
|
let a = document.createElement("a");
|
||||||
button.id = "create-button";
|
a.id = "create-button";
|
||||||
button.setAttribute("title", "Text hinzufügen");
|
a.setAttribute("title", "Text hinzufügen");
|
||||||
button.innerHTML = "Neu …";
|
a.setAttribute("role", "button");
|
||||||
button.addEventListener("click", showCreateModal, false);
|
a.setAttribute("href", "{{ url_for('text.read', id=0) }}"); // there's no DB entry with id = 0, therefore the backend knows to serve an empty form
|
||||||
document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
|
a.innerHTML = "Neu …";
|
||||||
|
document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
|
||||||
// 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 %}
|
</script>{% endblock script %}
|
||||||
|
|
||||||
@ -91,77 +45,16 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
{% for text in texte %}
|
{% for text in texte %}
|
||||||
<tr id="text-{{ text['id'] }}">
|
<tr id="text-{{ text['id'] }}">
|
||||||
<td data-Titel="{{ text['Titel'] }}" title="Titel">{{ text["Titel"] }}</td>
|
<td title="Titel">{{ text["Titel"] }}</td>
|
||||||
<td data-Untertitel="{{ text['Untertitel'] }}" title="Untertitel">{{ text["Untertitel"] }}</td>
|
<td title="Untertitel">{{ text["Untertitel"] }}</td>
|
||||||
<td data-Reihe="{{ text['r_id'] }}" title="Reihe">{{ text["Reihe"] }}</td>
|
<td title="Reihe">{{ text["Reihe"] }}</td>
|
||||||
<td data-Textform="{{ text['tf_id'] }}" title="Textform">{{ text["Textform"] }}</td>
|
<td title="Textform">{{ text["Textform"] }}</td>
|
||||||
<td data-Sprache="{{ text['s_id'] }}" title="Sprache">{{ text["Sprache"] }}</td>
|
<td 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 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 class="action action-update" data-id="{{ text['id'] }}"><a href="{{ url_for('text.read', id=text['id']) }}" 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>
|
<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>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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 %}
|
{% endblock content %}
|
||||||
83
the_works/templates/views/text_detail.html
Normal file
83
the_works/templates/views/text_detail.html
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
{% set create_mode = (text['ID'] == 0) %}
|
||||||
|
|
||||||
|
{% block title %}
|
||||||
|
{% if create_mode %}
|
||||||
|
Neuen Text erstellen
|
||||||
|
{% else %}
|
||||||
|
Text bearbeiten
|
||||||
|
{% endif %}
|
||||||
|
{% endblock title %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
{% endblock script %}
|
||||||
|
|
||||||
|
{% block heading %}
|
||||||
|
{% if create_mode %}
|
||||||
|
Neuen Text erstellen
|
||||||
|
{% else %}
|
||||||
|
Text bearbeiten
|
||||||
|
{% endif %}
|
||||||
|
{% endblock heading %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<form id="text_detail_form" method="post" action="#">
|
||||||
|
<div class="grid">
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
<span class="required">Titel</span>
|
||||||
|
<input class="required" id="form_Titel" name="form_Titel" aria-Label="Titel" placeholder="Titel" required value="{{ text['Titel'] }}" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Untertitel
|
||||||
|
<input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" value="{{ text['Untertitel'] }}" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Reihe
|
||||||
|
<select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
|
||||||
|
<option selected value=""{% if text['Reihe'] == '' %} selected{% endif %}>keine Reihe</option>
|
||||||
|
{% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == text['Reihe'] %} selected{% endif %}>{{ 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 }}"{% if tf.ID == text['Textform'] %} selected{% endif %}>{{ 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 }}"{% if s.ID == text['Sprache'] %} selected{% endif %}>{{ s.Sprache }}</option>{% endfor %}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Genre(s)</legend>
|
||||||
|
<div class="grid">
|
||||||
|
{% for g in genres %}
|
||||||
|
<div><label>
|
||||||
|
<input name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
|
||||||
|
{{ g.Genre }}
|
||||||
|
</label></div>
|
||||||
|
{{ loop.cycle('', '</div><div class="grid">' | safe) }}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="grid">
|
||||||
|
<button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['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('text.all') }}">Abbrechen (nicht speichern)</a>
|
||||||
|
</footer>
|
||||||
|
</form>
|
||||||
|
{% endblock content %}
|
||||||
@ -27,18 +27,25 @@ def all():
|
|||||||
"Genre_list": map(lambda tg: tg.genre.Genre, row.Text.text_genre) if row.Text.text_genre else [],
|
"Genre_list": map(lambda tg: tg.genre.Genre, row.Text.text_genre) if row.Text.text_genre else [],
|
||||||
"g_id_list": map(lambda tg: tg.Genre, row.Text.text_genre) if row.Text.text_genre else []
|
"g_id_list": map(lambda tg: tg.Genre, row.Text.text_genre) if row.Text.text_genre else []
|
||||||
})
|
})
|
||||||
return render_template("views/text.html", texte=texte, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
|
return render_template("views/text.html", texte=texte)
|
||||||
|
|
||||||
@bp.route("/text/read/<int:id>")
|
@bp.route("/text/read/<int:id>")
|
||||||
def read(id):
|
def read(id):
|
||||||
text = db.session.get(Text, id)
|
# id of zero -> create new entry
|
||||||
return {
|
if id == 0:
|
||||||
"Titel": text.Titel,
|
return render_template("views/text_detail.html", text={"ID": 0}, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
|
||||||
"Untertitel": text.Untertitel or "",
|
# all other ids -> update existing entry
|
||||||
"Reihe": text.Reihe or "",
|
t = db.session.get(Text, id)
|
||||||
"Textform": text.Textform,
|
text = {
|
||||||
"Sprache": text.Sprache
|
"ID": t.ID,
|
||||||
|
"Titel": t.Titel,
|
||||||
|
"Untertitel": t.Untertitel or "",
|
||||||
|
"Reihe": t.Reihe or "",
|
||||||
|
"Textform": t.Textform,
|
||||||
|
"Sprache": t.Sprache,
|
||||||
|
"Genres": t.genres or []
|
||||||
}
|
}
|
||||||
|
return render_template("views/text_detail.html", text=text, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
|
||||||
|
|
||||||
@bp.route("/text/create", methods=["POST"])
|
@bp.route("/text/create", methods=["POST"])
|
||||||
def create():
|
def create():
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user