Add metadata view to nalysis interface and result viewer

web/app/templates/corpora/analyse_corpus.html.j2

@@ -248,14 +248,35 @@
 
 <!-- Metadata modal -->
 {% import "macros/query_result_macro.html.j2" as metadata %}
-<div id="metadata-modal" class="modal bottom-sheet">
-    <div class="modal-content">
-      {{ metadata.show_metadata("testasdasgs") }}
-    </div>
-    <div class="modal-footer">
+<div id="meta-data-modal" class="modal bottom-sheet">
+  <div class="section">
+    <div class="col s12 right-align">
       <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
     </div>
   </div>
+  {% if query_metadata is defined %}
+    <div class="modal-content">
+      {{ metadata.show_metadata(query_metadata) }}
+    </div>
+  {% else %}
+    <div class="modal-content" id="meta-data-modal-content">
+    </div>
+  {% endif %}
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+  </div>
+</div>
+
+<!-- Metadata text details modal -->
+<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>
 
 <!-- Analysis init modal -->
 <div class="modal no-autoinit" id="init-display">
@@ -433,7 +454,7 @@
   var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
   var textTitlesElement;  // matched text titles
   var nrMarkedMatches;  // count of matches marked for subresults
-  var showMetadataButton;  // Button to show corpus metadata
+  var showMetaDataButton;  // Button to show corpus metadata
   var activateInspectInteraction;  // global interaction element
   var expertModeInteraction;  // global interaction element
   var subResultsInteraction;  // global interaction element
@@ -455,6 +476,7 @@
   let paginationElements;
   let queryDisplayElement;  // Element for initialization using queryDisplay
   let xpath;  // xpath to grab first resultsList page pagination element
+  let metaDataModal;  // modal showing corpus meta data
 
   // ###### Initialize variables ######
   addToSubResultsElement = document.getElementById("add-to-sub-results");
@@ -487,7 +509,8 @@
   textLookupCountElement = document.getElementById("text-lookup-count");
   textTitlesElement = document.getElementById("text-titles");
   nrMarkedMatches = document.getElementById("nr-marked-matches");
-  showMetadataButton = document.getElementById("show-metadata");
+  showMetaDataButton = document.getElementById("show-metadata");
+  metaDataModal = document.getElementById("meta-data-modal");
 
   // ###### js list options and intialization ######
   displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -514,6 +537,14 @@
     contextModal = M.Modal.init(contextModal, defaultOptions);
     exportModal = M.Modal.init(exportModal, defaultOptions);
     initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
+    let deleteOverlay = () => {
+      let overlay = document.getElementsByClassName("modal-overlay")[0];
+      overlay.remove();
+    };
+    metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
+                                 "opacity": 0.0,
+                                 "dismissible": false,
+                                 "onOpenEnd": deleteOverlay});
     // Init corpus analysis components
     data = new Data();
     resultsList = new ResultsList("result-list", resultsListOptions);
@@ -636,19 +667,93 @@
     }
 
     // ### Show corpus Metadata
-    showMetadataButton.onclick = () => {
-      let deleteOverlay = () => {
-        let overlay = document.getElementsByClassName("modal-overlay")[0];
-        overlay.remove();
+    showMetaDataButton.onclick = () => {
+      let tmpObject = {};
+      Object.assign(tmpObject, results.metaData);
+      tmpObject["query"] = results.data.query;
+      tmpObject["text_lookup"] = results.data.text_lookup;
+      metaDataModalContent = document.getElementById("meta-data-modal-content");
+      let table = `<div class="col s12">
+                        <table class="responsive-table highlight">
+                          <thead>
+                            <tr>
+                              <th>Metadata Description</th>
+                              <th>Value</th>
+                            </tr>
+                          </thead>
+                          <tbody>`
+      for (let [outerKey, outerValue] of Object.entries(tmpObject)) {
+        table += `<tr>
+                    <td>${outerKey}</td>`
+        if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
+          table += `<td>
+                    <table>`
+          for (let [innerKey, innerValue] of Object.entries(outerValue)) {
+            table += `<tr style="border-bottom: none;">
+                        <td>
+                          <i>${innerValue.title}</i> written
+                          by <i>${innerValue.author}</i>
+                          in <i>${innerValue.publishing_year}</i>
+                          <a class="waves-effect
+                                    waves-light
+                                    btn
+                                    right
+                                    more-text-detials"
+                             data-metadata-key="${outerKey}"
+                             data-text-key="${innerKey}"
+                             href="#modal-text-details">More
+                              <i class="material-icons right"
+                                 data-metadata-key="${outerKey}"
+                                 data-text-key="${innerKey}">
+                                 info_outline
+                              </i>
+                          </a>
+                        </td>
+                      </tr>`
+          }
+          table += `</td>
+                    </table>`
+        } else {
+          table += `<td>${outerValue}</td>`
+        }
+        table += `</tr>`
+      }
+      table += `</tbody>
+                </table>`
+      metaDataModalContent.insertAdjacentHTML("afterbegin", table);
+      metaDataModal.open();
+      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 = tmpObject[metadataKey][textKey];
+          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);
+        }
       }
-      let modal = document.getElementById("metadata-modal");
-      console.log(modal);
-      modal = M.Modal.init(modal, {"preventScrolling": false,
-                                   "opacity": 0.0,
-                                   "dismissible": false,
-                                   "onOpenEnd": deleteOverlay});
-      console.log(modal);
-      modal.open();
     };
 
   });