From ac0c00c33d221c2adf618be7b4191cb57bf13ea8 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Thu, 8 May 2025 22:04:18 +0200
Subject: [PATCH] improved import of stylesheets and javascript in templates to
 eliminate unnecessary requests

---
 ...{switchColorMode.js => SwitchColorMode.js} |  0
 the_works/templates/base.html                 | 12 ++--
 the_works/templates/views/text.html           | 36 +++++-------
 the_works/templates/views/werk.html           | 40 ++++++-------
 the_works/templates/views/werk_detail.html    | 58 ++++++++++---------
 5 files changed, 69 insertions(+), 77 deletions(-)
 rename the_works/static/{switchColorMode.js => SwitchColorMode.js} (100%)

diff --git a/the_works/static/switchColorMode.js b/the_works/static/SwitchColorMode.js
similarity index 100%
rename from the_works/static/switchColorMode.js
rename to the_works/static/SwitchColorMode.js
diff --git a/the_works/templates/base.html b/the_works/templates/base.html
index 638b733..e792e96 100644
--- a/the_works/templates/base.html
+++ b/the_works/templates/base.html
@@ -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>
diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html
index 67061e6..863f4a4 100644
--- a/the_works/templates/views/text.html
+++ b/the_works/templates/views/text.html
@@ -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 %}
+
diff --git a/the_works/templates/views/werk.html b/the_works/templates/views/werk.html
index b04f51d..e36ed71 100644
--- a/the_works/templates/views/werk.html
+++ b/the_works/templates/views/werk.html
@@ -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 %}
+
diff --git a/the_works/templates/views/werk_detail.html b/the_works/templates/views/werk_detail.html
index b31a259..8436757 100644
--- a/the_works/templates/views/werk_detail.html
+++ b/the_works/templates/views/werk_detail.html
@@ -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 %}
\ No newline at end of file
+{% 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 %}