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

improved import of stylesheets and javascript in templates to eliminate unnecessary requests

Browse Source
This commit is contained in:
eclipse 2025-05-08 22:04:18 +02:00
parent d7d66a14c4
commit ac0c00c33d
5 changed files with 69 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
the_works/static/switchColorMode.js → the_works/static/SwitchColorMode.js
View File

12
the_works/templates/base.html
View File

@ -8,15 +8,10 @@
<meta name="description" content="Frontend für die Verwaltung von Texten und Veröffentlichungen" />
<meta name="author" content="Tobias Radloff" />
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='pico.azure.css') }}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='the_works.css') }}">
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
{% block script %}{% endblock script %}
{% block head %}{% endblock head %}
<!--<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png">
@ -49,6 +44,9 @@
<footer class="container">
<p>trololol</p>
</footer>
<script src="{{ url_for('static', filename='switchColorMode.js') }}"></script>
<script src="{{ url_for('static', filename='SwitchColorMode.js') }}"></script>
{% block script %}
{% endblock script %}
</body>
</html>

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

@ -2,27 +2,9 @@
{% block title %}Texte{% endblock title %}
{% block script %}
<script>
window.onload = function () {
// initialise DataTable
let table = new DataTable('#text-table', {
paging: false,
order: []
});
deRole("#text-table");
// create "New"-element and append it to the <div> containing the DataTables search field
let a = document.createElement("a");
a.id = "create-button";
a.setAttribute("title", "Text hinzufügen");
a.setAttribute("role", "button");
a.setAttribute("href", "{{ url_for('text.read', id=0) }}"); // there's no DB entry with id = 0, therefore the backend knows to serve an empty form
a.innerHTML = "Neu …";
document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
}
</script>
{% endblock script %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}
{% block heading %}Texte{% endblock heading %}
@ -58,3 +40,15 @@
</tbody>
</table>
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
window.onload = function () {
initDataTable("#text-table");
initCreateButton("Text hinzufügen", "{{ url_for('text.read', id=0) }}", "#text-table");
}
</script>
{% endblock script %}

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

@ -2,27 +2,9 @@
{% block title %}Werke{% endblock title %}
{% block script %}
<script>
window.onload = function () {
// initialise DataTable
let table = new DataTable('#werk-table', {
paging: false,
order: []
});
deRole("#werk-table");
// create "New"-element and append it to the <div> containing the DataTables search field
let a = document.createElement("a");
a.id = "create-button";
a.setAttribute("title", "Werk hinzufügen");
a.setAttribute("role", "button");
a.setAttribute("href", "{{ url_for('werk.read', id=0) }}"); // there's no DB entry with id = 0, therefore the backend knows to serve an empty form
a.innerHTML = "Neu …";
document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
}
</script>
{% endblock script %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}
{% block heading %}Werke{% endblock heading %}
@ -58,3 +40,19 @@
</tbody>
</table>
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
window.onload = function () {
initDataTable("#werk-table");
initCreateButton({
title: "Werk hinzufügen",
href: "{{ url_for('werk.read', id=0) }}",
table_id: "#werk-table"
});
}
</script>
{% endblock script %}

58
the_works/templates/views/werk_detail.html
View File

@ -9,33 +9,8 @@ Werk bearbeiten
{% endif %}
{% endblock title %}
{% block script %}
<script>
function validate_date() {
let t = document.getElementById("form_Erscheinungstag");
let m = document.getElementById("form_Erscheinungsmonat");
let j = document.getElementById("form_Erscheinungsjahr");
t.setCustomValidity("");
t.setAttribute("aria-invalid", "false");
m.setCustomValidity("");
m.setAttribute("aria-invalid", "false");
console.log("This is function validate_date(): tag/monat/jahr is " + t.value + "/" + m.value + "/" + j.value); //DEBUG
if ( t.value != "" ) {
if ( j.value == "" || m.value == "" ) {
t.setCustomValidity("wenn der Tag angegeben ist, müssen Monat und Jahr ebenfalls angegeben sein");
t.setAttribute("aria-invalid", "true");
t.reportValidity();
}
} else if ( m.value != "" ) {
if ( j.value == "") {
m.setCustomValidity("wenn der Monat angegeben ist, muss das Jahr ebenfalls angegeben sein");
m.setAttribute("aria-invalid", "true");
m.reportValidity();
}
}
}
</script>
{% endblock script %}
{% block head %}
{% endblock head %}
{% block heading %}
{% if create_mode %}
@ -177,5 +152,32 @@ Werk bearbeiten
<a role="button" class="contrast" href="{{ url_for('werk.all') }}">Abbrechen (nicht speichern)</a>
</footer>
</form>
{% endblock content %}
{% endblock content %}
{% block script %}
<script>
function validate_date() {
let t = document.getElementById("form_Erscheinungstag");
let m = document.getElementById("form_Erscheinungsmonat");
let j = document.getElementById("form_Erscheinungsjahr");
t.setCustomValidity("");
t.setAttribute("aria-invalid", "false");
m.setCustomValidity("");
m.setAttribute("aria-invalid", "false");
console.log("This is function validate_date(): tag/monat/jahr is " + t.value + "/" + m.value + "/" + j.value); //DEBUG
if ( t.value != "" ) {
if ( j.value == "" || m.value == "" ) {
t.setCustomValidity("wenn der Tag angegeben ist, müssen Monat und Jahr ebenfalls angegeben sein");
t.setAttribute("aria-invalid", "true");
t.reportValidity();
}
} else if ( m.value != "" ) {
if ( j.value == "") {
m.setCustomValidity("wenn der Monat angegeben ist, muss das Jahr ebenfalls angegeben sein");
m.setAttribute("aria-invalid", "true");
m.reportValidity();
}
}
}
</script>
{% endblock script %}