moved large portions ofJavascript code from template to static JS file

the_works/templates/views/genre.html

@@ -60,38 +60,10 @@
 <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");
+    initDataTable("genre-table");
-    initCreateButton({
+    initCreateButton("genre-table", "Genre hinzufügen …");
-      title: "Genre hinzufügen …",
+    initModal("genre-modal", "form_Genre", ["Neues Genre", "Genre bearbeiten"], ["{{ url_for('genre.create') }}", "{{ url_for('genre.update', id=-1) }}"]);
-      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 %}

the_works/templates/views/herausgeber.html

@@ -60,38 +60,10 @@
 <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('herausgeber.create') }}";
-  const update_url_dummy = "{{ url_for('herausgeber.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#herausgeber-table");
+    initDataTable("herausgeber-table");
-    initCreateButton({
+    initCreateButton("herausgeber-table", "Herausgeber:in hinzufügen …");
-      title: "Genre hinzufügen …",
+    initModal("herausgeber-modal", "form_Name", ["Neue:r Herausgeber:in", "Herausgeber:in bearbeiten"], ["{{ url_for('herausgeber.create') }}", "{{ url_for('herausgeber.update', id=-1) }}"]);
-      table_id: "#herausgeber-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neue:r Herausgeber:in",
-        input_id: "form_Name",
-        form_action: create_url,
-        modal_id: "herausgeber-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Herausgeber:in bearbeiten",
-          input_id: "form_Name",
-          input_value: event.currentTarget.dataset.name,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "herausgeber-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/pseudonym.html

@@ -12,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="pseudonym table">
+<table id="pseudonym-table">
   <thead>
     <tr>
       <th>Pseudonym</th>
@@ -60,38 +60,10 @@
 <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('pseudonym.create') }}";
-  const update_url_dummy = "{{ url_for('pseudonym.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#pseudonym-table");
+    initDataTable("pseudonym-table");
-    initCreateButton({
+    initCreateButton("pseudonym-table", "Pseudonym hinzufügen …");
-      title: "Pseudonym hinzufügen …",
+    initModal("pseudonym-modal", "form_Pseudonym", ["Neues Pseudonym", "Pseudonym bearbeiten"], ["{{ url_for('pseudonym.create') }}", "{{ url_for('pseudonym.update', id=-1) }}"]);
-      table_id: "#pseudonym-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neues Pseudonym",
-        input_id: "form_Pseudonym",
-        form_action: create_url,
-        modal_id: "pseudonym-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Pseudonym bearbeiten",
-          input_id: "form_Pseudonym",
-          input_value: event.currentTarget.dataset.pseudonym,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "pseudonym-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/reihe.html

@@ -69,38 +69,10 @@
 <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('reihe.create') }}";
-  const update_url_dummy = "{{ url_for('reihe.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#reihe-table");
+    initDataTable("reihe-table");
-    initCreateButton({
+    initCreateButton("reihe-table", "Reihe hinzufügen …");
-      title: "Reihe hinzufügen …",
+    initModal("reihe-modal", ["form_Titel", "form_Verlag"], ["Neue Reihe", "Reihe bearbeiten"], ["{{ url_for('reihe.create') }}", "{{ url_for('reihe.update', id=-1) }}"]);
-      table_id: "#reihe-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neue Reihe",
-        input_id: ["form_Titel", "form_Verlag"],
-        form_action: create_url,
-        modal_id: "reihe-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Reihe bearbeiten",
-          input_id: ["form_Titel", "form_Verlag"],
-          input_value: [event.currentTarget.dataset.titel, event.currentTarget.dataset.verlag],
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "reihe-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/sprache.html

@@ -60,38 +60,10 @@
 <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('sprache.create') }}";
-  const update_url_dummy = "{{ url_for('sprache.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#sprache-table");
+    initDataTable("sprache-table");
-    initCreateButton({
+    initCreateButton("sprache-table", "Sprache hinzufügen …");
-      title: "Sprache hinzufügen …",
+    initModal("sprache-modal", "form_Sprache", ["Neue Sprache", "Sprache bearbeiten"], ["{{ url_for('sprache.create') }}", "{{ url_for('sprache.update', id=-1) }}"]);
-      table_id: "#sprache-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neue Sprache",
-        input_id: "form_Sprache",
-        form_action: create_url,
-        modal_id: "sprache-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Sprache bearbeiten",
-          input_id: "form_Sprache",
-          input_value: event.currentTarget.dataset.sprache,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "sprache-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/textform.html

@@ -60,38 +60,10 @@
 <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('textform.create') }}";
-  const update_url_dummy = "{{ url_for('textform.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#textform-table");
+    initDataTable("textform-table");
-    initCreateButton({
+    initCreateButton("textform-table", "Textform hinzufügen …");
-      title: "Testform hinzufügen …",
+    initModal("textform-modal", "form_Textform", ["Neue Textform", "Textform bearbeiten"], ["{{ url_for('textform.create') }}", "{{ url_for('textform.update', id=-1) }}"]);
-      table_id: "#textform-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neue Textform",
-        input_id: "form_Textform",
-        form_action: create_url,
-        modal_id: "textform-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Textform bearbeiten",
-          input_id: "form_Textform",
-          input_value: event.currentTarget.dataset.textform,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "textform-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/verlag.html

@@ -60,38 +60,10 @@
 <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('verlag.create') }}";
-  const update_url_dummy = "{{ url_for('verlag.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#verlag-table");
+    initDataTable("verlag-table");
-    initCreateButton({
+    initCreateButton("verlag-table", "Verlag hinzufügen …");
-      title: "Genre hinzufügen …",
+    initModal("verlag-modal", "form_Verlag", ["Neuer Verlag", "Verlag bearbeiten"], ["{{ url_for('verlag.create') }}", "{{ url_for('verlag.update', id=-1) }}"]);
-      table_id: "#verlag-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neuer Verlag",
-        input_id: "form_Verlag",
-        form_action: create_url,
-        modal_id: "verlag-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Verlag bearbeiten",
-          input_id: "form_Verlag",
-          input_value: event.currentTarget.dataset.verlag,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "verlag-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}

the_works/templates/views/werksform.html

@@ -60,38 +60,10 @@
 <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('werksform.create') }}";
-  const update_url_dummy = "{{ url_for('werksform.update', id=-1) }}";
   window.onload = function () {
-    initDataTable("#werksform-table");
+    initDataTable("werksform-table");
-    initCreateButton({
+    initCreateButton("werksform-table", "Werksform hinzufügen …");
-      title: "Werksform hinzufügen …",
+    initModal("werksform-modal", "form_Werksform", ["Neue Werksform", "Werksform bearbeiten"], ["{{ url_for('werksform.create') }}", "{{ url_for('werksform.update', id=-1) }}"]);
-      table_id: "#werksform-table"
-    });
-
-    // add event listener to "New" element
-    document.getElementById ("create-button").addEventListener("click", () => {
-      showDialog({
-        heading: "Neue Werksform",
-        input_id: "form_Werksform",
-        form_action: create_url,
-        modal_id: "werksform-modal"
-      })
-    });
-
-    // add event listeners for "update" elements
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", (event) => { 
-        showDialog({
-          heading: "Werksform bearbeiten",
-          input_id: "form_Werksform",
-          input_value: event.currentTarget.dataset.werksform,
-          form_action: update_url_dummy,
-          url_id: event.currentTarget.dataset.id,
-          modal_id: "werksform-modal"
-        }) 
-      }); 
-    }
   }
 </script>
 {% endblock script %}