From 1eac044e4b1b3c54022086e5adc90e34b4432ae7 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Mon, 28 Apr 2025 10:29:24 +0200
Subject: [PATCH] applied latest improvements (fetch API, dedicated "read"
 endpoint, DataTables) from werk.py|html to corresponding text.*

---
 the_works/templates/views/_text.js  |  23 ----
 the_works/templates/views/text.html | 194 +++++++++++++++++-----------
 the_works/views/text.py             |  32 +++--
 3 files changed, 141 insertions(+), 108 deletions(-)
 delete mode 100644 the_works/templates/views/_text.js

diff --git a/the_works/templates/views/_text.js b/the_works/templates/views/_text.js
deleted file mode 100644
index db0a41f..0000000
--- a/the_works/templates/views/_text.js
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  function showCreateModal() {
-    document.getElementById("dialog-heading").textContent = "Text hinzufügen";
-    document.getElementById("form_Titel").value = "";
-    document.getElementById("form_Untertitel").value = "";
-    document.getElementById('form_Reihe').selectedIndex = "";
-    document.getElementById("form_Textform").selectedIndex = "";
-    document.getElementById("form_Sprache").selectedIndex = "";
-    document.getElementById("form_submit").formAction = "{{ url_for('text.create') }}";
-    document.getElementById("textmodal").showModal();
-  }
-
-  function showUpdateModal(titel, untertitel, reihe, textform, sprache, formaction) {
-    document.getElementById("dialog-heading").textContent = "Text bearbeiten";
-    document.getElementById("form_Titel").value = titel;
-    document.getElementById("form_Untertitel").value = untertitel;
-    document.getElementById('form_Reihe').selectedIndex = reihe;
-    document.getElementById("form_Textform").selectedIndex = textform;
-    document.getElementById("form_Sprache").selectedIndex = sprache;
-    document.getElementById("form_submit").formAction = formaction;
-    document.getElementById("textmodal").showModal();
-  }
-</script>
\ No newline at end of file
diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html
index c912d3c..8e64e4c 100644
--- a/the_works/templates/views/text.html
+++ b/the_works/templates/views/text.html
@@ -2,53 +2,115 @@
 
 {% block title %}Texte{% endblock title %}
 
+{% block script %}<script>
+  const SCRIPT_ROOT = {{ request.script_root | tojson }};
+  const textValues = ["Titel", "Untertitel"];
+  const selectValues = ["Reihe", "Textform", "Sprache"];
+  
+  function showCreateModal() {
+    // set modal heading
+    document.getElementById("dialog-heading").textContent = "Text 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 = ""; }
+    // set form action
+    document.getElementById("form_submit").formAction = "{{ url_for('text.create') }}";
+    // show modal
+    document.getElementById("textmodal").showModal();
+  }
+  
+  function showUpdateModal() {
+    let id = this.dataset.id;
+    let url = `${SCRIPT_ROOT}/text/read/${id}`;
+    fetch(url)
+      // throw error if network error occurred, get JSON data otherwise
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw new Error ("There was an error while fetching data for the text with ID " + id);
+      })
+      // populate modal with response data and raise modal
+      .then(
+        function (response) {
+          console.log(response);
+          // set modal heading
+          document.getElementById("dialog-heading").textContent = "Text 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]; }
+          // set form action
+          document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/text/update/${id}`;
+          // show modal
+          document.getElementById("textmodal").showModal();
+        }
+      )
+      .catch((error) => console.log(error));
+  }
+  
+  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('#text-table', {
+      paging: false,
+      order: []
+    });
+    deRole("#text-table");
+  }
+</script>{% endblock script %}
+
 {% block heading %}Texte{% endblock heading %}
 
 {% block content %}
 
 {% include "_icons.svg" %}
 
-{% include "views/_text.js" %}
+<section>
+  <button id="create-button" onclick="showCreateModal()" title="Text hinzufügen">
+    <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
+    Neu …
+  </button>
+</section>
 
-  <section>
-    <button onclick="showCreateModal()" title="Text hinzufügen">
-      <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
-      Neu …
-    </button>
-  </section>
-
-  <table>
-    <thead>
-      <tr>
-        <th>Titel</th>
-        <th>Untertitel</th>
-        <th>Reihe</th>
-        <th>Textform</th>
-        <th>Sprache</th>
-        <th colspan="2">Aktionen</th>
-      </tr>  
-    </thead>
-    <tbody>
-      {% for text in texte %}
-      <tr id="text-{{ text['id'] }}">
-        <td title="Titel">{{ text["Titel"] }}</td>
-        <td title="Untertitel">{{ text["Untertitel"] }}</td>
-        <td title="Reihe">{{ text["Reihe"] }}</td>
-        <td title="Textform">{{ text["Textform"] }}</td>
-        <td title="Sprache">{{ text["Sprache"] }}</td>
-        <td><a onclick="showUpdateModal('{{ text["Titel"] }}', '{{ text["Untertitel"] }}', '{{ text["r_id"] }}', '{{ text["tf_id"] }}', '{{ text["s_id"] }}', '{{ url_for("text.update", id=text["id"]) }}');" href="#" title="Text bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
-        <td><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('text.delete', id=text['id']) }}" title="Text löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
-      </tr>  
-      {% endfor %}
-    </tbody>
-  </table>
+<table id="text-table">
+  <thead>
+    <tr>
+      <th>Titel</th>
+      <th>Untertitel</th>
+      <th>Reihe</th>
+      <th>Textform</th>
+      <th>Sprache</th>
+      <th colspan="2">Aktionen</th>
+    </tr>  
+  </thead>
+  <tbody>
+    {% for text in texte %}
+    <tr id="text-{{ text['id'] }}">
+      <td title="Titel">{{ text["Titel"] }}</td>
+      <td title="Untertitel">{{ text["Untertitel"] }}</td>
+      <td title="Reihe">{{ text["Reihe"] }}</td>
+      <td title="Textform">{{ text["Textform"] }}</td>
+      <td title="Sprache">{{ text["Sprache"] }}</td>
+      <td class="action action-update" data-id="{{ text['id'] }}"><a href="#" title="Text ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
+      <td id="delete-{{ text['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('text.delete', id=text['id']) }}" title="Text löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
+    </tr>  
+    {% endfor %}
+  </tbody>
+</table>
 
 <dialog aria-labelledby="dialog-heading" id="textmodal">
   <article>
-    <form>
+    <form id="text_detail_form" method="post" >
       <header>
         <button aria-label="close" rel="prev" onclick="textmodal.close()"></button>
-        <h1 id="dialog-heading">Neuer Text</h1>
+        <h1 id="dialog-heading">#</h1>
       </header>
 
       <fieldset>
@@ -57,43 +119,31 @@
             Titel (erforderlich)
             <input id="form_Titel" name="form_Titel" aria-Label="Titel" placeholder="Titel" required />
           </label>
-        </article>
-
-        <article>
-          <details name="text" open>
-            <summary>Untertitel und Reihe</summary>
-            <label>
-              Untertitel
-              <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" />
-            </label>
-            <label>
-              Reihe
-              <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
-                <option selected value="">keine Reihe</option>
-                {% for r in reihen %}<option value="{{ r.ID }}">{{ r.Titel }}</option>{% endfor %}
-              </select>
-            </label>
-          </details>
-        </article>
-        
-        <article>
-          <details name="text">
-            <summary>Textform und Sprache</summary>
-            <label>
-              Textform (erforderlich)
-              <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
-                <option selected disabled value="">Textform auswählen …</option>
-                {% for tf in textformen %}<option value="{{ tf.ID }}">{{ tf.Textform }}</option>{% endfor %}
-              </select>
-            </label>
-            <label>
-              Sprache (erforderlich)
-              <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
-                <option selected disabled value="">Sprache auswählen …</option>
-                {% for s in sprachen %}<option value="{{ s.ID }}">{{ s.Sprache }}</option>{% endfor %}
-              </select>
-            </label>
-          </details>
+          <label>
+            Untertitel
+            <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" />
+          </label>
+          <label>
+            Reihe
+            <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
+              <option selected value="">keine Reihe</option>
+              {% for r in reihen %}<option value="{{ r.ID }}">{{ r.Titel }}</option>{% endfor %}
+            </select>
+          </label>
+          <label>
+            Textform (erforderlich)
+            <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
+              <option selected disabled value="">Textform auswählen …</option>
+              {% for tf in textformen %}<option value="{{ tf.ID }}">{{ tf.Textform }}</option>{% endfor %}
+            </select>
+          </label>
+          <label>
+            Sprache (erforderlich)
+            <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
+              <option selected disabled value="">Sprache auswählen …</option>
+              {% for s in sprachen %}<option value="{{ s.ID }}">{{ s.Sprache }}</option>{% endfor %}
+            </select>
+          </label>
         </article>
       </fieldset>
 
diff --git a/the_works/views/text.py b/the_works/views/text.py
index 91d8da7..370d2e8 100644
--- a/the_works/views/text.py
+++ b/the_works/views/text.py
@@ -8,30 +8,36 @@ bp = Blueprint("text", __name__)
 @bp.route("/text")
 @bp.route("/text/all")
 def all():
-  # build ORM equivalent of SELECT statement
-  stmt = (
-    select(Text, Reihe, Textform, Sprache)
-    .join(Text.reihe, isouter=True)
-    .join(Text.textform, isouter=True)
-    .join(Text.sprache, isouter=True)
-  )
+  # select all rows from table "Text", ORM style
+  rows = db.session.execute(select(Text, Reihe, Textform, Sprache).join(Text.reihe, isouter=True).join(Text.textform, isouter=True).join(Text.sprache, isouter=True))
   # condense result into list of dicts
   texte = []
-  for row in db.session.execute(stmt):  
+  for row in rows:  
     texte.append({ 
       "id": row.Text.ID,
       "Titel": row.Text.Titel,
       "Untertitel": row.Text.Untertitel or "",
       "Reihe": row.Reihe.Titel if row.Reihe else "",
-      "r_id": str(row.Reihe.ID) if row.Reihe else "",
-      "Textform": row.Textform.Textform if row.Textform else "",
-      "tf_id": str(row.Textform.ID) if row.Textform else "",
+      "r_id": row.Text.Reihe or "",
+      "Textform": row.Textform.Textform,
+      "tf_id": row.Text.Textform,
       "Sprache": row.Sprache.Sprache, 
-      "s_id": str(row.Sprache.ID) if row.Sprache else ""
+      "s_id": row.Text.Sprache
     })
   return render_template("views/text.html", texte=texte, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)))
 
-@bp.route("/text", methods=["POST"])
+@bp.route("/text/read/<int:id>")
+def read(id):
+  text = db.session.get(Text, id)
+  return {
+    "Titel": text.Titel,
+    "Untertitel": text.Untertitel or "",
+    "Reihe": text.Reihe or "",
+    "Textform": text.Textform,
+    "Sprache": text.Sprache
+  }
+
+@bp.route("/text/create", methods=["POST"])
 def create():
   db.session.add(Text(
     Titel = request.form["form_Titel"],