moved parts of code here that were being reused in templates

the_works/static/the_works.js

@@ -1,7 +1,38 @@
-function deRole(table_id) {
+function initDataTable(table_id) {
+  // initialize table
+  let table = new DataTable(table_id, {
+    paging: false,
+    order: []
+  });
+  // remove role from inside th elements to avoid clashing with PicoCSS
   spans = document.querySelectorAll(table_id + " th span.dt-column-order")
     .forEach( function(el) {
       el.removeAttribute("role");
     }
   );
 }
+
+// create "New"-element and append it to the <div> containing the DataTables search field 
+function initCreateButton(opts) {
+console.log(`initCreateButton: opts are ${JSON.stringify(opts)}`);
+  let a = document.createElement("a");
+  a.id = "create-button";
+  a.setAttribute("title", opts.title);
+  a.setAttribute("role", "button");
+  a.setAttribute("href", opts.href || "#");
+  a.innerHTML = "Neu …";
+  document.getElementById(`${opts.table_id.slice(0, 1) == "#" ? opts.table_id.slice(1) : opts.table_id}_wrapper`).firstElementChild.firstElementChild.appendChild(a);
+}
+
+function showDialog(opts) {
+  console.log(`showDialog: opts are ${JSON.stringify(opts)}`);
+  // if form action includes the string "update", the id at the end of the URL is a dummy and must be replaced with the correct id
+  if ( opts.url_id && opts.form_action.includes("update") ) { 
+    opts.form_action = opts.form_action.slice(0, opts.form_action.lastIndexOf("/") + 1) + opts.url_id;
+  }
+  console.log(`showDialog: opts.form_action is ${opts.form_action}`);
+  document.getElementById("dialog-heading").textContent = opts.heading;
+  document.getElementById(opts.input_id).value = opts.input_value || "";
+  document.getElementById("form_submit").formAction = opts.form_action;
+  document.getElementById(opts.modal_id).showModal();
+}