From 6a3f8d6d034ba5e0769499f2adafdb2e64dee531 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Sat, 26 Apr 2025 13:06:08 +0200
Subject: [PATCH] reworked code to empty/populate the modal form fields; moved
 (mostly) away from onclick(); switched to fetch() API when populating fields
 for existing entry

---
 the_works/templates/views/_werk.js  |  49 -----------
 the_works/templates/views/werk.html | 127 ++++++++++++++++++++--------
 the_works/views/werk.py             |  36 +++++---
 3 files changed, 117 insertions(+), 95 deletions(-)
 delete mode 100644 the_works/templates/views/_werk.js

diff --git a/the_works/templates/views/_werk.js b/the_works/templates/views/_werk.js
deleted file mode 100644
index 064dc28..0000000
--- a/the_works/templates/views/_werk.js
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  function showCreateModal() {
-    document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
-    document.getElementById("form_Titel").value = "";
-    document.getElementById("form_Untertitel").value = "";
-    document.getElementById("form_Werksform").selectedIndex = "";
-    document.getElementById("form_Verlag").selectedIndex = "";
-    document.getElementById('form_Reihe').selectedIndex = "";
-    document.getElementById('form_Reihennummer').value = "";
-    document.getElementById('form_Erscheinungsdatum').value = "";
-    document.getElementById('form_ISBN_13').value = "";
-    document.getElementById('form_ISBN_10').value = "";
-    document.getElementById('form_ISSN').value = "";
-    document.getElementById('form_Preis').value = "";
-    document.getElementById('form_Titelbild').value = "";
-    document.getElementById('form_Klappentext').value = "";
-    document.getElementById('form_Anmerkungen').value = "";
-    document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
-    document.getElementById("werkmodal").showModal();
-  }
-  
-  function showUpdateModal(t, u, wf, v, r, rn, ed, i13, i10, is, p, tb, k, a, fa) {
-    document.getElementById("dialog-heading").textContent = "Werk bearbeiten";
-    document.getElementById("form_Titel").value = t;
-    document.getElementById("form_Untertitel").value = u;
-    document.getElementById("form_Werksform").selectedIndex = wf;
-    document.getElementById("form_Verlag").selectedIndex = v;
-    document.getElementById('form_Reihe').selectedIndex = r;
-    document.getElementById('form_Reihennummer').value = rn;
-    document.getElementById('form_Erscheinungsdatum').value = ed;
-    document.getElementById('form_ISBN_13').value = i13;
-    document.getElementById('form_ISBN_10').value = i10;
-    document.getElementById('form_ISSN').value = is;
-    document.getElementById('form_Preis').value = p;
-    document.getElementById('form_Titelbild').value = tb;
-    document.getElementById('form_Klappentext').value = k;
-    document.getElementById('form_Anmerkungen').value = a;
-    document.getElementById("form_submit").formAction = fa;
-    document.getElementById("werkmodal").showModal();
-  }
-
-  window.onload = function () {
-    let table = new DataTable('#werk-table', {
-      paging: false
-    });
-
-    deRole("#werk-table");
-  }
-</script> 
\ No newline at end of file
diff --git a/the_works/templates/views/werk.html b/the_works/templates/views/werk.html
index 97e1473..f2e6bbf 100644
--- a/the_works/templates/views/werk.html
+++ b/the_works/templates/views/werk.html
@@ -2,50 +2,109 @@
 
 {% block title %}Werke{% endblock title %}
 
+{% block script %}<script>
+  const SCRIPT_ROOT = {{ request.script_root | tojson }};
+  const textValues = ["Titel", "Untertitel", "Reihennummer", "Erscheinungsdatum", "ISBN_13", "ISBN_10", "ISSN", "Preis", "Klappentext", "Anmerkungen"];
+  const selectValues = ["Werksform", "Verlag", "Reihe"];
+  const blobValues = ["Titelbild"];
+
+  function showCreateModal() {
+    // set modal heading
+    document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
+    // empty text inputs 
+    for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
+    // empty select inputs 
+    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
+    // empty file inputs 
+    for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = ""; 
+    // set form action
+    document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
+    // show modal
+    document.getElementById("werkmodal").showModal();
+  }
+  
+  function showUpdateModal() {
+    let id = this.dataset.id;
+    let url = `${SCRIPT_ROOT}/werk/read/${id}`;
+    fetch(url)
+      .then(response => response.json())
+      .then(
+        function (response) {
+          // set modal heading
+          document.getElementById("dialog-heading").textContent = "Werk ansehen / bearbeiten";
+          // populate text inputs 
+          for (const v of textValues) { document.getElementById(`form_${v}`).value = response[v]; }
+          // populate select imputs
+          for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = response[v]; }
+          // populate file inputs  
+          for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = response[v]; 
+          // set form action
+          document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/werk/update/${id}`;
+          // show modal
+          document.getElementById("werkmodal").showModal();
+        }
+      )
+      .catch(console.log("all is lost :-("));
+  }
+  
+  window.onload = function () {
+    // add event listeners 
+    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", showUpdateModal, false); 
+    }
+
+    // initialise DataTable
+    let table = new DataTable('#werk-table', {
+      paging: false,
+      order: []
+    });
+    deRole("#werk-table");
+  }
+</script>{% endblock script %}
+
 {% block heading %}Werke{% endblock heading %}
 
 {% block content %}
 
 {% include "_icons.svg" %}
 
-{% include "views/_werk.js" %}
+<section>
+  <button id="create-button" href="#" title="Werk hinzufügen">
+    <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
+    Neu …
+  </button>
+</section>
 
-  <section>
-    <button onclick="showCreateModal()" title="Werk hinzufügen">
-      <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
-      Neu …
-    </button>
-  </section>
-
-  <table id="werk-table">
-    <thead>
-      <tr>
-        <th>Titel</th>
-        <th>Untertitel</th>
-        <th>Reihe</th>
-        <th>Verlag</th>
-        <th>Werksform</th>
-        <th colspan="2">Aktionen</th>
-      </tr>  
-    </thead>
-    <tbody>
-      {% for werk in werke %}
-      <tr id="werk-{{ werk['id'] }}">
-        <td title="Titel">{{ werk["Titel"] }}</td>
-        <td title="Untertitel">{{ werk["Untertitel"] }}</td>
-        <td title="Reihe">{{ werk["Reihe"] }}</td>
-        <td title="Verlag">{{ werk["Verlag"] }}</td>
-        <td title="Werksform">{{ werk["Werksform"] }}</td>
-        <td class="action"><a onclick="showUpdateModal('{{ werk["Titel"] }}', '{{ werk["Untertitel"] }}', '{{ werk["wf_id"] }}', '{{ werk["v_id"] }}', '{{ werk["r_id"] }}', '{{ werk["Reihennummer"] }}', '{{ werk["Erscheinungsdatum"] }}', '{{ werk["ISBN_13"] }}', '{{ werk["ISBN_10"] }}', '{{ werk["ISSN"] }}', '{{ werk["Preis"] }}', '', '{{ werk["Klappentext"] }}', '{{ werk["Anmerkungen"] }}', '{{ url_for("werk.update", id=werk["id"]) }}');" href="#" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
-        <td class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('werk.delete', id=werk['id']) }}" title="Werk löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
-      </tr>  
-      {% endfor %}
-    </tbody>
-  </table>
+<table id="werk-table">
+  <thead>
+    <tr>
+      <th>Titel</th>
+      <th>Untertitel</th>
+      <th>Reihe</th>
+      <th>Verlag</th>
+      <th>Werksform</th>
+      <th colspan="2">Aktionen</th>
+    </tr>  
+  </thead>
+  <tbody>
+    {% for werk in werke %}
+    <tr id="werk-{{ werk['id'] }}">
+      <td title="Titel">{{ werk["Titel"] }}</td>
+      <td title="Untertitel">{{ werk["Untertitel"] }}</td>
+      <td title="Reihe">{{ werk["Reihe"] }}</td>
+      <td title="Verlag">{{ werk["Verlag"] }}</td>
+      <td title="Werksform">{{ werk["Werksform"] }}</td>
+      <td class="action action-update" data-id="{{ werk['id'] }}"><a href="#" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
+      <td id="delete-{{ werk['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('werk.delete', id=werk['id']) }}" title="Werk löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
+    </tr>  
+    {% endfor %}
+  </tbody>
+</table>
 
 <dialog aria-labelledby="dialog-heading" id="werkmodal">
   <article>
-    <form id="werk_detail_form" method="post" action="#" readonly>
+    <form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#" readonly>
       <header>
         <button aria-label="close" rel="prev" onclick="werkmodal.close()"></button>
         <h1 id="dialog-heading">Detailansicht (Werk)</h1>
diff --git a/the_works/views/werk.py b/the_works/views/werk.py
index e2c0368..b039b9c 100644
--- a/the_works/views/werk.py
+++ b/the_works/views/werk.py
@@ -20,23 +20,34 @@ def all():
       "Titel": row.Werk.Titel,
       "Untertitel": row.Werk.Untertitel or "",
       "Werksform": row.Werksform.Werksform if row.Werksform else "",
-      "wf_id": row.Werksform.ID if row.Werksform else "",
+      "wf_id": row.Werk.Werksform or "",
       "Verlag": row.Verlag.Verlag if row.Verlag else "",
-      "v_id": row.Verlag.ID if row.Verlag else "",
+      "v_id": row.Werk.Verlag or "",
       "Reihe": row.Reihe.Titel if row.Reihe else "",
-      "r_id": row.Reihe.ID if row.Reihe else "",
-      "Reihennummer": row.Werk.Reihennummer or "",
-      "Erscheinungsdatum": row.Werk.Erscheinungsdatum or "",
-      "ISBN_13": row.Werk.ISBN_13 or "",
-      "ISBN_10": row.Werk.ISBN_10 or "",
-      "ISSN": row.Werk.ISSN or "",
-      "Preis": row.Werk.Preis or "",
-      "Titelbild": row.Werk.Titelbild or "",
-      "Klappentext": row.Werk.Klappentext or "",
-      "Anmerkungen": row.Werk.Anmerkungen or ""
+      "r_id": row.Werk.Reihe or ""
     })
   return render_template("views/werk.html", werke=werke, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
 
+@bp.route("/werk/read/<int:id>")
+def read(id):
+  werk = db.session.get(Werk, id)
+  return {
+    "Titel": werk.Titel,
+    "Untertitel": werk.Untertitel or "",
+    "Werksform": werk.Werksform or "",
+    "Verlag": werk.Verlag or "",
+    "Reihe": werk.Reihe or "",
+    "Reihennummer": werk.Reihennummer or "",
+    "Erscheinungsdatum": werk.Erscheinungsdatum or "",
+    "ISBN_13": werk.ISBN_13 or "",
+    "ISBN_10": werk.ISBN_10 or "",
+    "ISSN": werk.ISSN or "",
+    "Preis": werk.Preis or "",
+    "Titelbild": "",
+    "Klappentext": werk.Klappentext or "",
+    "Anmerkungen": werk.Anmerkungen or ""
+  }
+
 @bp.route("/werk/create", methods=["POST"])
 def create():
   db.session.add(Werk(
@@ -63,6 +74,7 @@ def create():
 def update(id):
   # get record
   werk = db.session.get(Werk, id)
+  print(werk)
   # update values
   werk.Titel = request.form["form_Titel"]
   werk.Untertitel = request.form["form_Untertitel"] or None