updated Javascript

the_works/templates/views/genre.html

@@ -2,55 +2,10 @@
 
 {% block title %}Genres{% endblock title %}
 
-{% block script %}
+{% block head %}
-<script>
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
+{% endblock head %}
 
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Genre hinzufügen";
-    // empty text input 
-    document.getElementById("form_Genre").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('genre.create') }}";
-    // show modal
-    document.getElementById("genremodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Genre bearbeiten";
-    // populate text input 
-    document.getElementById("form_Genre").value = this.dataset.genre;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/genre/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("genremodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#genretable', {
-      paging: false,
-      order: []
-    });
-    deRole("#genretable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Genre hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("genretable_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 %}Genres{% endblock heading %}
 
@@ -58,7 +13,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="genretable">
+<table id="genre-table">
   <thead>
     <tr>
       <th>Genre</th>
@@ -76,11 +31,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="genremodal">
+<dialog aria-labelledby="dialog-heading" id="genre-modal">
   <article>
     <form id="genre_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="genremodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="genre-modal.close()"></button>
         <h1 id="dialog-heading">#</h1>
       </header>
 
@@ -101,3 +56,42 @@
   </article>
 </dialog>
 {% endblock content %}
+
+{% block script %}
+<script src="{{ url_for('static', filename='datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script>
+  const create_url = "{{ url_for('genre.create') }}";
+  const update_url_dummy = "{{ url_for('genre.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#genre-table");
+    initCreateButton({
+      title: "Genre hinzufügen …",
+      table_id: "#genre-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neues Genre",
+        input_id: "form_Genre",
+        form_action: create_url,
+        modal_id: "genre-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Genre bearbeiten",
+          input_id: "form_Genre",
+          input_value: event.currentTarget.dataset.genre,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "genre-modal"
+        }) 
+      }); 
+    }
+  }
+</script>{% endblock script %}