220 lines
8.3 KiB
HTML
220 lines
8.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% 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" %}
|
|
|
|
<section>
|
|
<button id="create-button" href="#" 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 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" enctype="multipart/form-data" action="#" readonly>
|
|
<header>
|
|
<button aria-label="close" rel="prev" onclick="werkmodal.close()"></button>
|
|
<h1 id="dialog-heading">Detailansicht (Werk)</h1>
|
|
</header>
|
|
|
|
<fieldset>
|
|
<article>
|
|
<label>
|
|
Titel (erforderlich)
|
|
<input id="form_Titel" name="form_Titel" aria-label="Titel" placeholder="Titel" required />
|
|
</label>
|
|
</article>
|
|
|
|
<article>
|
|
<details name="werk" open>
|
|
<summary>Untertitel und Werksform</summary>
|
|
<label>
|
|
Untertitel
|
|
<input id="form_Untertitel" name="form_Untertitel" aria-label="Untertitel" placeholder="Untertitel" />
|
|
</label>
|
|
<label>
|
|
Werksform (erforderlich)
|
|
<select id="form_Werksform" name="form_Werksform" aria-label="Werksform" required>
|
|
<option value="">keine Werksform</option>
|
|
{% for wf in werksformen %}<option value="{{ wf.ID }}">{{ wf.Werksform }}</option>{% endfor %}
|
|
</select>
|
|
</label>
|
|
</details>
|
|
</article>
|
|
|
|
<article>
|
|
<details name="werk">
|
|
<summary>Verlag und Reihe</summary>
|
|
<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 }}">{{ v.Verlag }}</option>{% endfor %}
|
|
</select>
|
|
</label>
|
|
<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 }}">{{ r.Titel }}</option>{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Reihennummer
|
|
<input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" />
|
|
</label>
|
|
</details>
|
|
</article>
|
|
|
|
<article>
|
|
<details name="werk">
|
|
<summary>Preis und Erscheinungsdatum</summary>
|
|
<label>
|
|
Preis
|
|
<input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" />
|
|
</label>
|
|
<label>
|
|
Erscheinungsdatum
|
|
<input type="date" id="form_Erscheinungsdatum" name="form_Erscheinungsdatum" aria-label="Erscheinungsdatum" placeholder="kein Datum" />
|
|
</label>
|
|
</details>
|
|
</article>
|
|
|
|
<article>
|
|
<details name="werk">
|
|
<summary>ISBNs</summary>
|
|
<label>
|
|
ISBN-13
|
|
<input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" />
|
|
</label>
|
|
<label>
|
|
ISBN-10
|
|
<input id="form_ISBN_10" name="form_ISBN_10" aria-label="ISBN-10" placeholder="keine ISBN-10" />
|
|
</label>
|
|
<label>
|
|
ISSN
|
|
<input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" />
|
|
</label>
|
|
</details>
|
|
</article>
|
|
|
|
<article>
|
|
<details name="werk">
|
|
<summary>Titelbild und Klappentext</summary>
|
|
<label>
|
|
Titelbild
|
|
<input type="file" id="form_Titelbild" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" />
|
|
</label>
|
|
<label>
|
|
Klappentext
|
|
<textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10"></textarea>
|
|
</label>
|
|
<label>
|
|
Anmerkungen
|
|
<textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10"></textarea>
|
|
</label>
|
|
</details>
|
|
</article>
|
|
</fieldset>
|
|
|
|
<footer class="grid">
|
|
<button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('werk.create') }}">OK</button>
|
|
<button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
|
|
</footer>
|
|
</form>
|
|
</article>
|
|
</dialog>
|
|
{% endblock content %} |