updated templates

This commit is contained in:
eclipse 2025-05-08 22:49:17 +02:00
parent fa68627a27
commit 2aa5359ef7
3 changed files with 142 additions and 162 deletions

View File

@ -2,55 +2,9 @@
{% block title %}Herausgeber:innen{% endblock title %}
{% block script %}
<script>
const SCRIPT_ROOT = {{ request.script_root | tojson }};
function showCreateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Herausgeber:in hinzufügen";
// empty text input
document.getElementById("form_Name").value = "";
// set form action
document.getElementById("form_submit").formAction = "{{ url_for('herausgeber.create') }}";
// show modal
document.getElementById("herausgebermodal").showModal();
}
function showUpdateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Herausgeber:in bearbeiten";
// populate text input
document.getElementById("form_Name").value = this.dataset.name;
// set form action
document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/herausgeber/update/${this.dataset.id}`;
// show modal
document.getElementById("herausgebermodal").showModal();
}
window.onload = function () {
// initialise DataTable
let table = new DataTable('#herausgebertable', {
paging: false,
order: []
});
deRole("#herausgebertable");
// create and append "New"-button to
let button = document.createElement("button");
button.id = "create-button";
button.setAttribute("title", "herausgeber:in hinzufügen");
button.innerHTML = "Neu …";
button.addEventListener("click", showCreateModal, false);
document.getElementById("herausgebertable_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 %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}
{% block heading %}Herausgeber:innen{% endblock heading %}
@ -58,7 +12,7 @@
{% include "_icons.svg" %}
<table id="herausgebertable">
<table id="herausgeber-table">
<thead>
<tr>
<th>Name</th>
@ -76,11 +30,11 @@
</tbody>
</table>
<dialog aria-labelledby="dialog-heading" id="herausgebermodal">
<dialog aria-labelledby="dialog-heading" id="herausgeber-modal">
<article>
<form id="herausgeber_detail_form" method="post" >
<header>
<button aria-label="close" rel="prev" onclick="herausgebermodal.close()"></button>
<button aria-label="close" rel="prev" onclick="herausgeber-modal.close()"></button>
<h1 id="dialog-heading">#</h1>
</header>
@ -100,4 +54,44 @@
</form>
</article>
</dialog>
{% endblock content %}
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
const create_url = "{{ url_for('herausgeber.create') }}";
const update_url_dummy = "{{ url_for('herausgeber.update', id=-1) }}";
window.onload = function () {
initDataTable("#herausgeber-table");
initCreateButton({
title: "Genre hinzufügen …",
table_id: "#herausgeber-table"
});
// add event listener to "New" element
document.getElementById ("create-button").addEventListener("click", () => {
showDialog({
heading: "Neue:r Herausgeber:in",
input_id: "form_Name",
form_action: create_url,
modal_id: "herausgeber-modal"
})
});
// add event listeners for "update" elements
for (const el of document.querySelectorAll('.action-update') ) {
el.addEventListener("click", (event) => {
showDialog({
heading: "Herausgeber:in bearbeiten",
input_id: "form_Name",
input_value: event.currentTarget.dataset.name,
form_action: update_url_dummy,
url_id: event.currentTarget.dataset.id,
modal_id: "herausgeber-modal"
})
});
}
}
</script>
{% endblock script %}

View File

@ -2,55 +2,9 @@
{% block title %}Pseudonyme{% endblock title %}
{% block script %}
<script>
const SCRIPT_ROOT = {{ request.script_root | tojson }};
function showCreateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Pseudonym hinzufügen";
// empty text input
document.getElementById("form_Pseudonym").value = "";
// set form action
document.getElementById("form_submit").formAction = "{{ url_for('pseudonym.create') }}";
// show modal
document.getElementById("pseudonymmodal").showModal();
}
function showUpdateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Pseudonym bearbeiten";
// populate text input
document.getElementById("form_Pseudonym").value = this.dataset.pseudonym;
// set form action
document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/pseudonym/update/${this.dataset.id}`;
// show modal
document.getElementById("pseudonymmodal").showModal();
}
window.onload = function () {
// initialise DataTable
let table = new DataTable('#pseudonymtable', {
paging: false,
order: []
});
deRole("#pseudonymtable");
// create and append "New"-button to
let button = document.createElement("button");
button.id = "create-button";
button.setAttribute("title", "Pseudonym hinzufügen");
button.innerHTML = "Neu …";
button.addEventListener("click", showCreateModal, false);
document.getElementById("pseudonymtable_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 %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}
{% block heading %}Pseudonyme{% endblock heading %}
@ -58,7 +12,7 @@
{% include "_icons.svg" %}
<table id="pseudonymtable">
<table id="pseudonym table">
<thead>
<tr>
<th>Pseudonym</th>
@ -76,11 +30,11 @@
</tbody>
</table>
<dialog aria-labelledby="dialog-heading" id="pseudonymmodal">
<dialog aria-labelledby="dialog-heading" id="pseudonym-modal">
<article>
<form id="pseudonym_detail_form" method="post" >
<header>
<button aria-label="close" rel="prev" onclick="pseudonymmodal.close()"></button>
<button aria-label="close" rel="prev" onclick="pseudonym-modal.close()"></button>
<h1 id="dialog-heading">#</h1>
</header>
@ -100,4 +54,44 @@
</form>
</article>
</dialog>
{% endblock content %}
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
const create_url = "{{ url_for('pseudonym.create') }}";
const update_url_dummy = "{{ url_for('pseudonym.update', id=-1) }}";
window.onload = function () {
initDataTable("#pseudonym-table");
initCreateButton({
title: "Pseudonym hinzufügen …",
table_id: "#pseudonym-table"
});
// add event listener to "New" element
document.getElementById ("create-button").addEventListener("click", () => {
showDialog({
heading: "Neues Pseudonym",
input_id: "form_Pseudonym",
form_action: create_url,
modal_id: "pseudonym-modal"
})
});
// add event listeners for "update" elements
for (const el of document.querySelectorAll('.action-update') ) {
el.addEventListener("click", (event) => {
showDialog({
heading: "Pseudonym bearbeiten",
input_id: "form_Pseudonym",
input_value: event.currentTarget.dataset.pseudonym,
form_action: update_url_dummy,
url_id: event.currentTarget.dataset.id,
modal_id: "pseudonym-modal"
})
});
}
}
</script>
{% endblock script %}

View File

@ -2,57 +2,9 @@
{% block title %}Reihen{% endblock title %}
{% block script %}
<script>
const SCRIPT_ROOT = {{ request.script_root | tojson }};
function showCreateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Reihe hinzufügen";
// empty inputs
document.getElementById("form_Titel").value = "";
document.getElementById("form_Verlag").selectedIndex = "";
// set form action
document.getElementById("form_submit").formAction = "{{ url_for('reihe.create') }}";
// show modal
document.getElementById("reihenmodal").showModal();
}
function showUpdateModal() {
// set modal heading
document.getElementById("dialog-heading").textContent = "Reihe bearbeiten";
// populate text input
document.getElementById("form_Titel").value = this.dataset.reihe;
document.getElementById("form_Verlag").selectedIndex = this.dataset.verlag;
// set form action
document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/reihe/update/${this.dataset.id}`;
// show modal
document.getElementById("reihenmodal").showModal();
}
window.onload = function () {
// initialise DataTable
let table = new DataTable('#reihentable', {
paging: false,
order: []
});
deRole("#reihentable");
// create and append "New"-button to
let button = document.createElement("button");
button.id = "create-button";
button.setAttribute("title", "Reihe hinzufügen");
button.innerHTML = "Neu …";
button.addEventListener("click", showCreateModal, false);
document.getElementById("reihentable_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 %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}
{% block heading %}Reihen{% endblock heading %}
@ -60,7 +12,7 @@
{% include "_icons.svg" %}
<table id="reihentable">
<table id="reihe-table">
<thead>
<tr>
<th>Reihe</th>
@ -73,18 +25,18 @@
<tr id="reihe-{{ reihe['id'] }}">
<td title="Reihe">{{ reihe["Titel"] }}</td>
<td title="Verlag">{{ reihe["Verlag"] }}</td>
<td class="action action-update" data-id="{{ reihe['id'] }}" data-reihe="{{reihe['Titel'] }}" data-verlag="{{reihe['v_id'] }}"><a href="#" title="Reihe bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
<td class="action action-update" data-id="{{ reihe['id'] }}" data-titel="{{reihe['Titel'] }}" data-verlag="{{reihe['v_id'] }}"><a href="#" title="Reihe bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
<td id="delete-{{ reihe['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('reihe.delete', id=reihe['id']) }}" title="Reihe löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
</tr>
{% endfor %}
</tbody>
</table>
<dialog aria-labelledby="dialog-heading" id="reihenmodal">
<dialog aria-labelledby="dialog-heading" id="reihe-modal">
<article>
<form id="reihe_detail_form" method="post" >
<header>
<button aria-label="close" rel="prev" onclick="reihenmodal.close()"></button>
<button aria-label="close" rel="prev" onclick="reihe-modal.close()"></button>
<h1 id="dialog-heading">#</h1>
</header>
@ -111,4 +63,44 @@
</form>
</article>
</dialog>
{% endblock content %}
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
const create_url = "{{ url_for('reihe.create') }}";
const update_url_dummy = "{{ url_for('reihe.update', id=-1) }}";
window.onload = function () {
initDataTable("#reihe-table");
initCreateButton({
title: "Reihe hinzufügen …",
table_id: "#reihe-table"
});
// add event listener to "New" element
document.getElementById ("create-button").addEventListener("click", () => {
showDialog({
heading: "Neue Reihe",
input_id: ["form_Titel", "form_Verlag"],
form_action: create_url,
modal_id: "reihe-modal"
})
});
// add event listeners for "update" elements
for (const el of document.querySelectorAll('.action-update') ) {
el.addEventListener("click", (event) => {
showDialog({
heading: "Reihe bearbeiten",
input_id: ["form_Titel", "form_Verlag"],
input_value: [event.currentTarget.dataset.titel, event.currentTarget.dataset.verlag],
form_action: update_url_dummy,
url_id: event.currentTarget.dataset.id,
modal_id: "reihe-modal"
})
});
}
}
</script>
{% endblock script %}