tobias/the_works
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aligned "Neu" button with datatables search field

Browse Source
This commit is contained in:
eclipse 2025-04-28 17:14:42 +02:00
parent 75984984dd
commit ad6af25a48
2 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
the_works/templates/views/text.html
View File

@ -2,7 +2,8 @@
{% block title %}Texte{% endblock title %}
{% block script %}<script>
{% block script %}
<script>
const SCRIPT_ROOT = {{ request.script_root | tojson }};
const textValues = ["Titel", "Untertitel"];
const selectValues = ["Reihe", "Textform", "Sprache"];
@ -51,18 +52,26 @@
}
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('#text-table', {
paging: false,
order: []
});
deRole("#text-table");
// create and append "New"-button to
let button = document.createElement("button");
button.id = "create-button";
button.setAttribute("title", "Text hinzufügen");
button.innerHTML = "Neu …";
button.addEventListener("click", showCreateModal, false);
document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
// 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 %}
@ -72,13 +81,6 @@
{% include "_icons.svg" %}
<section>
<button id="create-button" onclick="showCreateModal()" title="Text hinzufügen">
<!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
Neu …
</button>
</section>
<table id="text-table">
<thead>
<tr>

50
the_works/templates/views/werk.html
View File

@ -2,7 +2,8 @@
{% block title %}Werke{% endblock title %}
{% block script %}<script>
{% 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"];
@ -11,18 +12,18 @@
function showCreateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
// empty text inputs
// empty text inputs
for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
// empty select inputs
// 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 = "";
// 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}`;
@ -39,12 +40,12 @@
function (response) {
// set modal heading
document.getElementById("dialog-heading").textContent = "Werk ansehen / bearbeiten";
// populate text inputs
// 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];
// 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
@ -53,22 +54,30 @@
)
.catch((error) => console.log(error));
}
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);
}
window.onload = function () {
// initialise DataTable
let table = new DataTable('#werk-table', {
paging: false,
order: []
});
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);
}
}
</script>{% endblock script %}
</script>
{% endblock script %}
{% block heading %}Werke{% endblock heading %}
@ -76,13 +85,6 @@
{% 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>