reworked code to empty/populate the modal form fields; moved (mostly) away from onclick(); switched to fetch() API when populating fields for existing entry
This commit is contained in:
parent
5533e26d47
commit
6a3f8d6d03
@ -1,49 +0,0 @@
|
||||
<script>
|
||||
function showCreateModal() {
|
||||
document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
|
||||
document.getElementById("form_Titel").value = "";
|
||||
document.getElementById("form_Untertitel").value = "";
|
||||
document.getElementById("form_Werksform").selectedIndex = "";
|
||||
document.getElementById("form_Verlag").selectedIndex = "";
|
||||
document.getElementById('form_Reihe').selectedIndex = "";
|
||||
document.getElementById('form_Reihennummer').value = "";
|
||||
document.getElementById('form_Erscheinungsdatum').value = "";
|
||||
document.getElementById('form_ISBN_13').value = "";
|
||||
document.getElementById('form_ISBN_10').value = "";
|
||||
document.getElementById('form_ISSN').value = "";
|
||||
document.getElementById('form_Preis').value = "";
|
||||
document.getElementById('form_Titelbild').value = "";
|
||||
document.getElementById('form_Klappentext').value = "";
|
||||
document.getElementById('form_Anmerkungen').value = "";
|
||||
document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
|
||||
document.getElementById("werkmodal").showModal();
|
||||
}
|
||||
|
||||
function showUpdateModal(t, u, wf, v, r, rn, ed, i13, i10, is, p, tb, k, a, fa) {
|
||||
document.getElementById("dialog-heading").textContent = "Werk bearbeiten";
|
||||
document.getElementById("form_Titel").value = t;
|
||||
document.getElementById("form_Untertitel").value = u;
|
||||
document.getElementById("form_Werksform").selectedIndex = wf;
|
||||
document.getElementById("form_Verlag").selectedIndex = v;
|
||||
document.getElementById('form_Reihe').selectedIndex = r;
|
||||
document.getElementById('form_Reihennummer').value = rn;
|
||||
document.getElementById('form_Erscheinungsdatum').value = ed;
|
||||
document.getElementById('form_ISBN_13').value = i13;
|
||||
document.getElementById('form_ISBN_10').value = i10;
|
||||
document.getElementById('form_ISSN').value = is;
|
||||
document.getElementById('form_Preis').value = p;
|
||||
document.getElementById('form_Titelbild').value = tb;
|
||||
document.getElementById('form_Klappentext').value = k;
|
||||
document.getElementById('form_Anmerkungen').value = a;
|
||||
document.getElementById("form_submit").formAction = fa;
|
||||
document.getElementById("werkmodal").showModal();
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
let table = new DataTable('#werk-table', {
|
||||
paging: false
|
||||
});
|
||||
|
||||
deRole("#werk-table");
|
||||
}
|
||||
</script>
|
||||
@ -2,50 +2,109 @@
|
||||
|
||||
{% block title %}Werke{% endblock title %}
|
||||
|
||||
{% 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)
|
||||
.then(response => response.json())
|
||||
.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(console.log("all is lost :-("));
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
// add event listeners
|
||||
document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
|
||||
for (const el of document.querySelectorAll('.action-update') ) {
|
||||
el.addEventListener("click", showUpdateModal, false);
|
||||
}
|
||||
|
||||
// initialise DataTable
|
||||
let table = new DataTable('#werk-table', {
|
||||
paging: false,
|
||||
order: []
|
||||
});
|
||||
deRole("#werk-table");
|
||||
}
|
||||
</script>{% endblock script %}
|
||||
|
||||
{% block heading %}Werke{% endblock heading %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% include "_icons.svg" %}
|
||||
|
||||
{% include "views/_werk.js" %}
|
||||
<section>
|
||||
<button id="create-button" href="#" title="Werk hinzufügen">
|
||||
<!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
|
||||
Neu …
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<button onclick="showCreateModal()" title="Werk hinzufügen">
|
||||
<!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
|
||||
Neu …
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<table id="werk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Titel</th>
|
||||
<th>Untertitel</th>
|
||||
<th>Reihe</th>
|
||||
<th>Verlag</th>
|
||||
<th>Werksform</th>
|
||||
<th colspan="2">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for werk in werke %}
|
||||
<tr id="werk-{{ werk['id'] }}">
|
||||
<td title="Titel">{{ werk["Titel"] }}</td>
|
||||
<td title="Untertitel">{{ werk["Untertitel"] }}</td>
|
||||
<td title="Reihe">{{ werk["Reihe"] }}</td>
|
||||
<td title="Verlag">{{ werk["Verlag"] }}</td>
|
||||
<td title="Werksform">{{ werk["Werksform"] }}</td>
|
||||
<td class="action"><a onclick="showUpdateModal('{{ werk["Titel"] }}', '{{ werk["Untertitel"] }}', '{{ werk["wf_id"] }}', '{{ werk["v_id"] }}', '{{ werk["r_id"] }}', '{{ werk["Reihennummer"] }}', '{{ werk["Erscheinungsdatum"] }}', '{{ werk["ISBN_13"] }}', '{{ werk["ISBN_10"] }}', '{{ werk["ISSN"] }}', '{{ werk["Preis"] }}', '', '{{ werk["Klappentext"] }}', '{{ werk["Anmerkungen"] }}', '{{ url_for("werk.update", id=werk["id"]) }}');" href="#" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
|
||||
<td 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 %}
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="werk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Titel</th>
|
||||
<th>Untertitel</th>
|
||||
<th>Reihe</th>
|
||||
<th>Verlag</th>
|
||||
<th>Werksform</th>
|
||||
<th colspan="2">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for werk in werke %}
|
||||
<tr id="werk-{{ werk['id'] }}">
|
||||
<td title="Titel">{{ werk["Titel"] }}</td>
|
||||
<td title="Untertitel">{{ werk["Untertitel"] }}</td>
|
||||
<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 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 %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dialog aria-labelledby="dialog-heading" id="werkmodal">
|
||||
<article>
|
||||
<form id="werk_detail_form" method="post" action="#" readonly>
|
||||
<form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#" readonly>
|
||||
<header>
|
||||
<button aria-label="close" rel="prev" onclick="werkmodal.close()"></button>
|
||||
<h1 id="dialog-heading">Detailansicht (Werk)</h1>
|
||||
|
||||
@ -20,23 +20,34 @@ def all():
|
||||
"Titel": row.Werk.Titel,
|
||||
"Untertitel": row.Werk.Untertitel or "",
|
||||
"Werksform": row.Werksform.Werksform if row.Werksform else "",
|
||||
"wf_id": row.Werksform.ID if row.Werksform else "",
|
||||
"wf_id": row.Werk.Werksform or "",
|
||||
"Verlag": row.Verlag.Verlag if row.Verlag else "",
|
||||
"v_id": row.Verlag.ID if row.Verlag else "",
|
||||
"v_id": row.Werk.Verlag or "",
|
||||
"Reihe": row.Reihe.Titel if row.Reihe else "",
|
||||
"r_id": row.Reihe.ID if row.Reihe else "",
|
||||
"Reihennummer": row.Werk.Reihennummer or "",
|
||||
"Erscheinungsdatum": row.Werk.Erscheinungsdatum or "",
|
||||
"ISBN_13": row.Werk.ISBN_13 or "",
|
||||
"ISBN_10": row.Werk.ISBN_10 or "",
|
||||
"ISSN": row.Werk.ISSN or "",
|
||||
"Preis": row.Werk.Preis or "",
|
||||
"Titelbild": row.Werk.Titelbild or "",
|
||||
"Klappentext": row.Werk.Klappentext or "",
|
||||
"Anmerkungen": row.Werk.Anmerkungen or ""
|
||||
"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)))
|
||||
|
||||
@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 "",
|
||||
"Titelbild": "",
|
||||
"Klappentext": werk.Klappentext or "",
|
||||
"Anmerkungen": werk.Anmerkungen or ""
|
||||
}
|
||||
|
||||
@bp.route("/werk/create", methods=["POST"])
|
||||
def create():
|
||||
db.session.add(Werk(
|
||||
@ -63,6 +74,7 @@ def create():
|
||||
def update(id):
|
||||
# get record
|
||||
werk = db.session.get(Werk, id)
|
||||
print(werk)
|
||||
# update values
|
||||
werk.Titel = request.form["form_Titel"]
|
||||
werk.Untertitel = request.form["form_Untertitel"] or None
|
||||
|
||||
Loading…
Reference in New Issue
Block a user