diff --git a/the_works/static/the_works.css b/the_works/static/the_works.css index 36a121c..4a126ce 100644 --- a/the_works/static/the_works.css +++ b/the_works/static/the_works.css @@ -58,7 +58,6 @@ nav { border-color: var(--pico-primary-border); } - table.dataTable span.dt-column-order::before, table.dataTable span.dt-column-order::after { @@ -81,3 +80,7 @@ svg { content: " *"; color: #cf0000; } + +label:has([type="checkbox"]) { + width: 100%; +} \ No newline at end of file diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html index db16c84..9c0fb15 100644 --- a/the_works/templates/views/text.html +++ b/the_works/templates/views/text.html @@ -1,4 +1,5 @@ {% extends 'base.html' %} +{% set SPLIT_CHARACTER = "|" %} {% block title %}Texte{% endblock title %} @@ -7,14 +8,17 @@ const SCRIPT_ROOT = {{ request.script_root | tojson }}; const textValues = ["Titel", "Untertitel"]; const selectValues = ["Reihe", "Textform", "Sprache"]; + const multiSelectValues = ["Genres"]; function showCreateModal() { // set modal heading document.getElementById("dialog-heading").textContent = "Text hinzufügen"; - // empty text inputs + // empty inputs for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; } - // empty select inputs for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; } + for (const v of multiSelectValues) { + document.getElementById(`form_${v}`).querySelectorAll("input[type=checkbox]").forEach( cb => { cb.checked = false; }) + } // set form action document.getElementById("form_submit").formAction = "{{ url_for('text.create') }}"; // show modal @@ -22,33 +26,24 @@ } function showUpdateModal() { - let id = this.dataset.id; - let url = `${SCRIPT_ROOT}/text/read/${id}`; - fetch(url) - // throw error if network error occurred, get JSON data otherwise - .then((response) => { - if (response.ok) { - return response.json(); + let tr = document.getElementById(`text-${this.dataset.id}`); + // set modal heading + document.getElementById("dialog-heading").textContent = "Text ansehen / bearbeiten"; + // populate inputs + for (const v of textValues) { document.getElementById(`form_${v}`).value = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; } + for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; } + for (const v of multiSelectValues) { + let data = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; + if ( data ) { + for (const i of data.split("{{ SPLIT_CHARACTER }}")) { + document.getElementById(`form_${v}_${i}`).checked = true; } - throw new Error ("There was an error while fetching data for the text with ID " + id); - }) - // populate modal with response data and raise modal - .then( - function (response) { - console.log(response); - // set modal heading - document.getElementById("dialog-heading").textContent = "Text 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]; } - // set form action - document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/text/update/${id}`; - // show modal - document.getElementById("textmodal").showModal(); - } - ) - .catch((error) => console.log(error)); + } + } + // set form action + document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/text/update/${this.dataset.id}`; + // show modal + document.getElementById("textmodal").showModal(); } window.onload = function () { @@ -89,17 +84,19 @@