moved creating/updating a Werk entry from modal to dedicated page
This commit is contained in:
parent
5064c1ff73
commit
b7baad340a
@ -5,55 +5,6 @@
|
||||
{% block script %}
|
||||
<script>
|
||||
const SCRIPT_ROOT = {{ request.script_root | tojson }};
|
||||
const textValues = ["Titel", "Untertitel", "Reihennummer", "Erscheinungsdatum", "ISBN_13", "ISBN_10", "ISSN", "Preis", "Klappentext", "Anmerkungen"];
|
||||
const selectValues = ["Werksform", "Verlag", "Reihe"];
|
||||
const blobValues = ["Titelbild"];
|
||||
|
||||
function showCreateModal() {
|
||||
// set modal heading
|
||||
document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
|
||||
// empty text inputs
|
||||
for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
|
||||
// empty select inputs
|
||||
for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
|
||||
// empty file inputs
|
||||
for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = "";
|
||||
// set form action
|
||||
document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
|
||||
// show modal
|
||||
document.getElementById("werkmodal").showModal();
|
||||
}
|
||||
|
||||
function showUpdateModal() {
|
||||
let id = this.dataset.id;
|
||||
let url = `${SCRIPT_ROOT}/werk/read/${id}`;
|
||||
fetch(url)
|
||||
// throw error if network error occurred, get JSON data otherwise
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
throw new Error ("There was an error while fetching data for the text with ID " + id);
|
||||
})
|
||||
// populate modal with response data and raise modal
|
||||
.then(
|
||||
function (response) {
|
||||
// set modal heading
|
||||
document.getElementById("dialog-heading").textContent = "Werk ansehen / bearbeiten";
|
||||
// populate text inputs
|
||||
for (const v of textValues) { document.getElementById(`form_${v}`).value = response[v]; }
|
||||
// populate select imputs
|
||||
for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = response[v]; }
|
||||
// populate file inputs
|
||||
for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = response[v];
|
||||
// set form action
|
||||
document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/werk/update/${id}`;
|
||||
// show modal
|
||||
document.getElementById("werkmodal").showModal();
|
||||
}
|
||||
)
|
||||
.catch((error) => console.log(error));
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
// initialise DataTable
|
||||
@ -64,17 +15,13 @@
|
||||
deRole("#werk-table");
|
||||
|
||||
// create and append "New"-button to
|
||||
let button = document.createElement("button");
|
||||
button.id = "create-button";
|
||||
button.setAttribute("title", "Werk hinzufügen");
|
||||
button.innerHTML = "Neu …";
|
||||
button.addEventListener("click", showCreateModal, false);
|
||||
document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
|
||||
|
||||
// add event listeners
|
||||
for (const el of document.querySelectorAll('.action-update') ) {
|
||||
el.addEventListener("click", showUpdateModal, false);
|
||||
}
|
||||
let a = document.createElement("a");
|
||||
a.id = "create-button";
|
||||
a.setAttribute("title", "Werk hinzufügen");
|
||||
a.setAttribute("role", "button");
|
||||
a.setAttribute("href", `${SCRIPT_ROOT}/werk/read/0`);
|
||||
a.innerHTML = "Neu …";
|
||||
document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
|
||||
}
|
||||
</script>
|
||||
{% endblock script %}
|
||||
@ -104,7 +51,7 @@
|
||||
<td title="Reihe">{{ werk["Reihe"] }}</td>
|
||||
<td title="Verlag">{{ werk["Verlag"] }}</td>
|
||||
<td title="Werksform">{{ werk["Werksform"] }}</td>
|
||||
<td class="action action-update" data-id="{{ werk['id'] }}"><a href="#" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
|
||||
<td class="action action-update" data-id="{{ werk['id'] }}"><a href="{{ url_for('werk.read', id=werk['id']) }}" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
|
||||
<td id="delete-{{ werk['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('werk.delete', id=werk['id']) }}" title="Werk löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
111
the_works/templates/views/werk_full.html
Normal file
111
the_works/templates/views/werk_full.html
Normal file
@ -0,0 +1,111 @@
|
||||
{% extends 'base.html' %}
|
||||
{% set create_mode = (werk['ID'] == 0) %}
|
||||
{% block title %}
|
||||
{% if create_mode %}
|
||||
Neues Werk erstellen
|
||||
{% else %}
|
||||
Werk bearbeiten
|
||||
{% endif %}
|
||||
{% endblock title %}
|
||||
|
||||
{% block script %}
|
||||
{% endblock script %}
|
||||
|
||||
{% block heading %}
|
||||
{% if create_mode %}
|
||||
Neues Werk erstellen
|
||||
{% else %}
|
||||
Werk bearbeiten
|
||||
{% endif %}
|
||||
{% endblock heading %}
|
||||
|
||||
{% block content %}
|
||||
<form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#" readonly>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label>
|
||||
<span class="required">Titel</span>
|
||||
<input id="form_Titel" name="form_Titel" aria-label="Titel" placeholder="Titel" required value="{{ werk['Titel'] }}" />
|
||||
</label>
|
||||
<label>
|
||||
Untertitel
|
||||
<input id="form_Untertitel" name="form_Untertitel" aria-label="Untertitel" placeholder="Untertitel" value="{{ werk['Untertitel'] }}" />
|
||||
</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'] }}" />
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
Preis
|
||||
<input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] }}" />
|
||||
</label>
|
||||
<label>
|
||||
Erscheinungsdatum
|
||||
<input type="date" id="form_Erscheinungsdatum" name="form_Erscheinungsdatum" aria-label="Erscheinungsdatum" placeholder="kein Datum" value="{{ werk['Datum'] }}" />
|
||||
</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'] }}" />
|
||||
</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'] }}" />
|
||||
</label>
|
||||
<label>
|
||||
ISSN
|
||||
<input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] }}" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<label>
|
||||
Klappentext
|
||||
<textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10">{{ werk['Klappentext'] }}</textarea>
|
||||
</label>
|
||||
<label>
|
||||
Anmerkungen
|
||||
<textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10">
|
||||
{{ werk['Anmerkungen'] }}</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
Titelbild
|
||||
<input type="file" id="form_Titelbild" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" />
|
||||
</label>
|
||||
</div>
|
||||
<footer class="grid">
|
||||
<button id="form_submit" type="submit" 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>
|
||||
|
||||
{% endblock content %}
|
||||
@ -24,27 +24,33 @@ def all():
|
||||
"Reihe": row.Reihe.Titel if row.Reihe else "",
|
||||
"r_id": row.Werk.Reihe or ""
|
||||
})
|
||||
return render_template("views/werk.html", werke=werke, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
|
||||
return render_template("views/werk.html", werke=werke)
|
||||
|
||||
@bp.route("/werk/read/<int:id>")
|
||||
def read(id):
|
||||
werk = db.session.get(Werk, id)
|
||||
return {
|
||||
"Titel": werk.Titel,
|
||||
"Untertitel": werk.Untertitel or "",
|
||||
"Werksform": werk.Werksform or "",
|
||||
"Verlag": werk.Verlag or "",
|
||||
"Reihe": werk.Reihe or "",
|
||||
"Reihennummer": werk.Reihennummer or "",
|
||||
"Erscheinungsdatum": werk.Erscheinungsdatum or "",
|
||||
"ISBN_13": werk.ISBN_13 or "",
|
||||
"ISBN_10": werk.ISBN_10 or "",
|
||||
"ISSN": werk.ISSN or "",
|
||||
"Preis": werk.Preis or "",
|
||||
# id of zero -> create new entry
|
||||
if id == 0:
|
||||
return render_template("views/werk_full.html", werk={"ID": 0}, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
|
||||
# all other ids -> update existing entry
|
||||
w = db.session.get(Werk, id)
|
||||
werk = {
|
||||
"ID": w.ID,
|
||||
"Titel": w.Titel,
|
||||
"Untertitel": w.Untertitel or "",
|
||||
"Werksform": w.Werksform or "",
|
||||
"Verlag": w.Verlag or "",
|
||||
"Reihe": w.Reihe or "",
|
||||
"Reihennummer": w.Reihennummer or "",
|
||||
"Erscheinungsdatum": w.Erscheinungsdatum or "",
|
||||
"ISBN_13": w.ISBN_13 or "",
|
||||
"ISBN_10": w.ISBN_10 or "",
|
||||
"ISSN": w.ISSN or "",
|
||||
"Preis": w.Preis or "",
|
||||
"Titelbild": "",
|
||||
"Klappentext": werk.Klappentext or "",
|
||||
"Anmerkungen": werk.Anmerkungen or ""
|
||||
"Klappentext": w.Klappentext or "",
|
||||
"Anmerkungen": w.Anmerkungen or ""
|
||||
}
|
||||
return render_template("views/werk_full.html", werk=werk, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
|
||||
|
||||
@bp.route("/werk/create", methods=["POST"])
|
||||
def create():
|
||||
|
||||
Loading…
Reference in New Issue
Block a user