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

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>

the_works/templates/views/text.html

@@ -2,27 +2,9 @@
 
 {% block title %}Texte{% endblock title %}
 
-{% block script %}
+{% block head %}
-<script>
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
-  window.onload = function () {
+{% endblock head %}
-    // 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 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 %}
+

the_works/templates/views/werk.html

@@ -2,27 +2,9 @@
 
 {% block title %}Werke{% endblock title %}
 
-{% block script %}
+{% block head %}
-<script>
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
-  window.onload = function () {
+{% endblock head %}
-    // 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 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 %}
+

the_works/templates/views/werk_detail.html

@@ -9,33 +9,8 @@ Werk bearbeiten
 {% endif %}
 {% endblock title %}
 
-{% block script %}
+{% block head %}
-<script>
+{% endblock head %}
-  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 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 %}
+
+{% 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 %}