Preperations vor metadata modal in analysis and import

web/app/templates/macros/query_result_macro.html.j2

@@ -0,0 +1,109 @@
+{% macro show_metadata(query_metadata) %}
+<div class="col s12">
+  <p>Below the metadata for the results from the Corpus
+    <i>{{ query_metadata.corpus_name }}</i> generated with the query
+    <i>{{ query_metadata.query }}</i> are shown.
+  </p>
+
+</div>
+
+<div class="col s12">
+  <div class="card">
+    <div class="card-content" id="results">
+      <table class="responsive-table highlight">
+        <thead>
+          <tr>
+            <th>Metadata Description</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for pair in query_metadata|dictsort %}
+          <tr>
+            <td>{{ pair[0] }}</td>
+            {% if pair[0] == 'corpus_all_texts'
+               or pair[0] == 'text_lookup'  %}
+              <td>
+              <table>
+              {% for key, value  in pair[1].items()  %}
+                  <tr style="border-bottom: none;">
+                    <td>
+                      <i>{{ value['title'] }}</i> written
+                      by <i>{{ value['author'] }}</i>
+                      in <i>{{ value['publishing_year'] }}</i>
+                      <a class="waves-effect
+                                waves-light
+                                btn
+                                right
+                                more-text-detials"
+                         data-metadata-key="{{ pair[0] }}"
+                         data-text-key="{{ key }}"
+                         href="#modal-text-details">More
+                          <i class="material-icons right"
+                             data-metadata-key="{{ pair[0] }}"
+                             data-text-key="{{ key }}">
+                             info_outline
+                          </i>
+                      </a>
+                    </td>
+                  </tr>
+              {% endfor %}
+              </table>
+              </td>
+            {% else %}
+              <td>{{ pair[1] }}</td>
+            {% endif %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Structure -->
+<div id="modal-text-details" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <h4>Bibliographic data</h4>
+    <p id="bibliographic-data"></p>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
+  </div>
+</div>
+
+<script>
+var moreTextDetailsButtons;
+moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
+for (var btn of moreTextDetailsButtons) {
+  btn.onclick = () => {
+    let modal = document.getElementById("modal-text-details");
+    modal = M.Modal.init(modal, {"dismissible": true});
+    modal.open();
+    let metadataKey = event.target.dataset.metadataKey;
+    let textKey = event.target.dataset.textKey;
+    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
+    console.log(textData);
+    let bibliographicData = document.getElementById("bibliographic-data");
+    bibliographicData.innerHTML = "";
+    let table = document.createElement("table");
+    for (let [key, value] of Object.entries(textData)) {
+      table.insertAdjacentHTML("afterbegin",
+      `
+        <tr>
+          <td>${key}</td>
+          <td>${value}</td>
+        </tr>
+      `);
+    }
+    table.insertAdjacentHTML("afterbegin",
+      `
+        <thead>
+          <th>Description</th>
+          <th>Value</th>
+        </thead>
+      `)
+    bibliographicData.appendChild(table);
+  }
+}
+</script>