Add tmp List.js implemetation

app/templates/admin/index.html.j2

@@ -11,15 +11,22 @@
           <input id="search-user" class="search" type="text"></input>
           <label for="search-user">Search user</label>
         </div>
+        <ul class="pagination paginationTop"></ul>
         {{ table }}
-        <ul class="pagination"></ul>
+        <ul class="pagination paginationBottom"></ul>
       </div>
     </div>
   </div>
 </div>
 
 <script>
-  var options = {page: 10, pagination: true,
+  var options = {page: 10,
+                 pagination: [{
+                               name: "paginationTop",
+                               paginationClass: "paginationTop",
+                             }, {
+                               paginationClass: "paginationBottom",
+                             }],
                  valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
   var userList = new List('user-list', options);
 </script>

app/templates/corpora/analyse_corpus.html.j2

@@ -129,19 +129,22 @@
 
 <div class="col s12 m9" id="recieved-query-results">
   <div class="card">
-    <div class="card-content">
+    <div class="card-content" id="result-list">
       <span class="card-title">Query Results</span>
-        <table class="responsive-table highlight">
-          <thead>
-            <tr>
-              <th style="width: 5%">Title</th>
-              <th style="width: 25%">Left context</th>
-              <th style="width: 45%">Match</th>
-              <th style="width: 25%">Right Context</th>
-            </tr>
-          </thead>
-          <tbody id="query-results"></tbody>
-        </table>
+      <p id="query-results-metadata"></p>
+      <ul class="pagination paginationTop"></ul>
+      <table class="responsive-table highlight">
+        <thead>
+          <tr>
+            <th style="width: 5%">Title</th>
+            <th style="width: 25%">Left context</th>
+            <th style="width: 45%">Match</th>
+            <th style="width: 25%">Right Context</th>
+          </tr>
+        </thead>
+        <tbody class="list" id="query-results"></tbody>
+      </table>
+      <ul class="pagination paginationBottom"></ul>
     </div>
   </div>
 </div>
@@ -215,15 +218,18 @@
 
   var queryFormElement = document.getElementById("query-form");
   var queryResultsElement = document.getElementById("query-results");
+  var queryResultsMetadataElement = document.getElementById("query-results-metadata")
   var contextResultsElement = document.getElementById("context-results");
   var queryLoadingElement = document.getElementById("getting-query-results");
   var queryResultsTableElement = document.getElementById("recieved-query-results");
+  var hitsPerPage;
   queryFormElement.addEventListener("submit", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
     let queryData = {"context": formData.get("context"),
                      "hits_per_page": formData.get("hits_per_page"),
                      "query": formData.get("query")};
+    hitsPerPage = formData.get("hits_per_page");
     socket.emit("corpus_analysis", queryData);
     queryLoadingElement.classList.remove("hide");
     queryResultsTableElement.classList.add("hide");
@@ -268,95 +274,118 @@
           });
         }
         return;
-      }
+      } else {
+        total_nr_matches = message["total_nr_matches"];
+        let count_corpus_files = Object.keys(message["text_lookup"]).length;
+        queryResultsMetadataElement.innerText = message["total_nr_matches"] + " matches in " + count_corpus_files + " corpus files.";
 
-    var matchElement;
-    var matchTextTitlesElement;
-    var matchLeftContextElement;
-    var matchHitElement;
-    var matchRightContextElement;
-    var textTitles;
-    var token;
-    var tokenElement;
+        var matchElement;
+        var matchTextTitlesElement;
+        var matchLeftContextElement;
+        var matchHitElement;
+        var matchRightContextElement;
+        var textTitles;
+        var token;
+        var tokenElement;
 
-    // Set related global values
-    lookup["cpos"] = message["cpos_lookup"];
-    lookup["text"] = message["text_lookup"];
-    matches = message["matches"];
-    tokenElements = new Set();
+        // Set related global values
+        lookup["cpos"] = message["cpos_lookup"];
+        lookup["text"] = message["text_lookup"];
+        matches = message["matches"];
+        tokenElements = new Set();
 
-    for (let [index, match] of matches.entries()) {
-      matchElement = document.createElement("tr");
-      matchElement.classList.add("match");
-      matchElement.dataset.index = index;
-      matchTextTitlesElement = document.createElement("td");
-      matchTextTitlesElement.classList.add("text-titles");
-      matchElement.append(matchTextTitlesElement);
-      matchLeftContextElement = document.createElement("td");
-      matchLeftContextElement.classList.add("left-context");
-      for (cpos of match["lc"]) {
-        token = lookup["cpos"][cpos];
-        tokenElement = document.createElement("span");
-        tokenElement.classList.add("token");
-        tokenElement.dataset.cpos = cpos;
-        tokenElement.innerText = token["word"];
-        if (expertModeSwitchElement.checked) {
-          tokenElement.classList.add("chip");
-          addToolTipToTokenElement(tokenElement, token);
+        for (let [index, match] of matches.entries()) {
+          matchElement = document.createElement("tr");
+          matchElement.classList.add("match");
+          matchElement.dataset.index = index;
+          matchTextTitlesElement = document.createElement("td");
+          matchTextTitlesElement.classList.add("text-titles");
+          matchElement.append(matchTextTitlesElement);
+          matchLeftContextElement = document.createElement("td");
+          matchLeftContextElement.classList.add("left-context");
+          for (cpos of match["lc"]) {
+            token = lookup["cpos"][cpos];
+            tokenElement = document.createElement("span");
+            tokenElement.classList.add("token");
+            tokenElement.dataset.cpos = cpos;
+            tokenElement.innerText = token["word"];
+            if (expertModeSwitchElement.checked) {
+              tokenElement.classList.add("chip");
+              addToolTipToTokenElement(tokenElement, token);
+            }
+            matchLeftContextElement.append(tokenElement);
+            matchLeftContextElement.append(document.createTextNode(" "));
+            tokenElements.add(tokenElement);
+          }
+          matchElement.append(matchLeftContextElement);
+          matchHitElement = document.createElement("td");
+          matchHitElement.classList.add("hit");
+          textTitles = new Set();
+          for (cpos of match["hit"]) {
+            token = lookup["cpos"][cpos];
+            tokenElement = document.createElement("span");
+            tokenElement.classList.add("token");
+            tokenElement.dataset.cpos = cpos;
+            tokenElement.innerText = token["word"];
+            if (expertModeSwitchElement.checked) {
+              tokenElement.classList.add("chip");
+              addToolTipToTokenElement(tokenElement, token);
+            }
+            matchHitElement.append(tokenElement);
+            matchHitElement.append(document.createTextNode(" "));
+            tokenElements.add(tokenElement);
+            textTitles.add(lookup["text"][token["text"]]["title"]);
+          }
+          var moreContextBtn = document.createElement("a");
+          moreContextBtn.setAttribute("class", "btn-floating btn waves-effect waves-light teal right inspect");
+          moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
+          matchHitElement.append(document.createElement("br"), document.createElement("br"));
+          matchHitElement.append(moreContextBtn);
+
+          matchTextTitlesElement.innerText = [...textTitles].join(",");
+          matchElement.append(matchHitElement);
+          matchRightContextElement = document.createElement("td");
+          matchRightContextElement.classList.add("right-context");
+          for (cpos of match["rc"]) {
+            token = lookup["cpos"][cpos];
+            tokenElement = document.createElement("span");
+            tokenElement.classList.add("token");
+            tokenElement.dataset.cpos = cpos;
+            tokenElement.innerText = token["word"];
+            if (expertModeSwitchElement.checked) {
+              tokenElement.classList.add("chip");
+              addToolTipToTokenElement(tokenElement, token);
+            }
+            matchRightContextElement.append(tokenElement);
+            matchRightContextElement.append(document.createTextNode(" "));
+            tokenElements.add(tokenElement);
+          }
+          matchElement.append(matchRightContextElement);
+          queryResultsElement.append(matchElement);
         }
-        matchLeftContextElement.append(tokenElement);
-        matchLeftContextElement.append(document.createTextNode(" "));
-        tokenElements.add(tokenElement);
       }
-      matchElement.append(matchLeftContextElement);
-      matchHitElement = document.createElement("td");
-      matchHitElement.classList.add("hit");
-      textTitles = new Set();
-      for (cpos of match["hit"]) {
-        token = lookup["cpos"][cpos];
-        tokenElement = document.createElement("span");
-        tokenElement.classList.add("token");
-        tokenElement.dataset.cpos = cpos;
-        tokenElement.innerText = token["word"];
-        if (expertModeSwitchElement.checked) {
-          tokenElement.classList.add("chip");
-          addToolTipToTokenElement(tokenElement, token);
-        }
-        matchHitElement.append(tokenElement);
-        matchHitElement.append(document.createTextNode(" "));
-        tokenElements.add(tokenElement);
-        textTitles.add(lookup["text"][token["text"]]["title"]);
+      var options = {page: hitsPerPage,
+                     pagination: [{
+                                   name: "paginationTop",
+                                   paginationClass: "paginationTop",
+                                   innerWindow: 8,
+                                   outerWindow: 1
+                                 }, {
+                                   paginationClass: "paginationBottom",
+                                   innerWindow: 8,
+                                   outerWindow: 1
+                                 }],
+                     valueNames: ["text-titles", "left-context", "hit", "right-context"]};
+      var userList = new List('result-list', options);
+      var inspectBtns = document.getElementsByClassName("inspect");
+      for(var i = 0; i < inspectBtns.length; i++) {
+        var inspectBtn = inspectBtns[i];
+        var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
+        inspectBtn.onclick = function() {
+          contextModal.open();
+          socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
+        };
       }
-      var moreContextBtn = document.createElement("a");
-      moreContextBtn.setAttribute("class", "btn-floating btn waves-effect waves-light teal right");
-      moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
-      matchHitElement.append(document.createElement("br"), document.createElement("br"));
-      matchHitElement.append(moreContextBtn);
-      moreContextBtn.onclick = function() {
-        contextModal.open();
-        socket.emit("inspect_match", {"cpos": match["hit"]});
-      };
-      matchTextTitlesElement.innerText = [...textTitles].join(",");
-      matchElement.append(matchHitElement);
-      matchRightContextElement = document.createElement("td");
-      matchRightContextElement.classList.add("right-context");
-      for (cpos of match["rc"]) {
-        token = lookup["cpos"][cpos];
-        tokenElement = document.createElement("span");
-        tokenElement.classList.add("token");
-        tokenElement.dataset.cpos = cpos;
-        tokenElement.innerText = token["word"];
-        if (expertModeSwitchElement.checked) {
-          tokenElement.classList.add("chip");
-          addToolTipToTokenElement(tokenElement, token);
-        }
-        matchRightContextElement.append(tokenElement);
-        matchRightContextElement.append(document.createTextNode(" "));
-        tokenElements.add(tokenElement);
-      }
-      matchElement.append(matchRightContextElement);
-      queryResultsElement.append(matchElement);
-    }
   });
 
   function addToolTipToTokenElement(tokenElement, token) {
@@ -425,5 +454,6 @@
       contextResultsElement.append(sentenceElement);
     }
   });
+
 </script>
 {% endblock %}