mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-13 09:30:40 +00:00
Add tmp List.js implemetation
This commit is contained in:
Stephan Porada
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user