103 lines
3.7 KiB
HTML
103 lines
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% 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 heading %}Pseudonyme{% endblock heading %}
|
|
|
|
{% block content %}
|
|
|
|
{% include "_icons.svg" %}
|
|
|
|
<table id="pseudonymtable">
|
|
<thead>
|
|
<tr>
|
|
<th>Pseudonym</th>
|
|
<th colspan="2">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for pseudonym in pseudonyme %}
|
|
<tr id="pseudonym-{{ pseudonym['ID'] }}">
|
|
<td title="Pseudonym">{{ pseudonym["Pseudonym"] }}</td>
|
|
<td class="action action-update" data-id="{{ pseudonym['ID'] }}" data-pseudonym="{{pseudonym['Pseudonym'] }}"><a href="#" title="Pseudonym bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
|
|
<td id="delete-{{ pseudonym['ID'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('pseudonym.delete', id=pseudonym['ID']) }}" title="Pseudonym löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<dialog aria-labelledby="dialog-heading" id="pseudonymmodal">
|
|
<article>
|
|
<form id="pseudonym_detail_form" method="post" >
|
|
<header>
|
|
<button aria-label="close" rel="prev" onclick="pseudonymmodal.close()"></button>
|
|
<h1 id="dialog-heading">#</h1>
|
|
</header>
|
|
|
|
<fieldset>
|
|
<article>
|
|
<label>
|
|
<span class="required">Pseudonym</span>
|
|
<input id="form_Pseudonym" name="form_Pseudonym" aria-Label="Pseudonym" placeholder="Pseudonym" required autofocus />
|
|
</label>
|
|
</article>
|
|
</fieldset>
|
|
|
|
<footer class="grid">
|
|
<button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('pseudonym.create') }}">OK</button>
|
|
<button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
|
|
</footer>
|
|
</form>
|
|
</article>
|
|
</dialog>
|
|
{% endblock content %} |