sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-10-31 10:42:43 +00:00
Code Issues Projects Releases Wiki Activity

Add cosmetics

Browse Source
This commit is contained in:
Stephan Porada
2020-06-25 17:44:55 +02:00
parent afd5201c05
commit b29f2ca5ee
4 changed files with 101 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/app/static/js/nopaque.InteractionElement.js
View File

@@ -6,17 +6,14 @@ class InteractionElement {
hideBefore=true,
hideAfter=false) {
this.htmlId = htmlId;
this.element = (htmlId) => {this.element = document.getElementById(htmlId);}
this.checkStatus = checkStatus;
this.callbacks = {};
this.disabledBefore = disabledBefore;
this.disabledAfter = disabledAfter;
this.hideBefore = hideBefore;
this.hideAfter = hideAfter;
}
getElement() {
this.interactionStatusElement = document.getElementById(this.htmlId);
return this.interactionStatusElement;
this.element(this.htmlId);
}
setCallback(trigger, callback, bindThis, args=[]) {

9
web/app/static/js/nopaque.callbacks.js
View File

@@ -18,7 +18,14 @@ function saveSubResultsChoices(response) {
subResultsCreateElement.getElementsByClassName("button-icon-spinner")[0].remove();
subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide");
subResultsCreateElement.firstElementChild.classList.add("disabled");
subResultsExportElement.classList.remove("disabled");
subResultsExportElement.classList.remove("disabled", "btn-flat");
subResultsExportElement.classList.add("pulse", "btn-small");
setTimeout(() => {
subResultsExportElement.classList.remove("pulse", "btn-small");
subResultsExportElement.classList.add("btn-flat");
clearTimeout();
}, 3000)
}
function querySetup(payload) {

90
web/app/static/js/nopaque.lists.js
View File

@@ -86,11 +86,11 @@ RessourceList.options = {
</span>
</td>
<td class="right-align">
<a class="btn-small edit-link waves-effect waves-light">
<a class="btn-floating edit-link waves-effect waves-light">
<i class="material-icons">edit</i>
</a>
<a class="btn-small analyse-link waves-effect waves-light">
Analyse<i class="material-icons right">search</i>
<a class="btn-floating analyse-link waves-effect waves-light">
<i class="material-icons right">search</i>
</a>
</td>
</tr>`,
@@ -113,8 +113,8 @@ RessourceList.options = {
<span class="badge new status" data-badge-caption=""></span>
</td>
<td class="right-align">
<a class="btn-small link waves-effect waves-light">
View<i class="material-icons right">send</i>
<a class="btn-floating link waves-effect waves-light">
<i class="material-icons right">send</i>
</a>
</td>
</tr>`,
@@ -143,8 +143,7 @@ class ResultsList extends List {
// get elements to check thier status
for (let interaction of interactionElements) {
if (interaction.checkStatus) {
let element = interaction.getElement();
if (element.checked) {
if (interaction.element.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
@@ -198,17 +197,31 @@ class ResultsList extends List {
addToSubResultsBtn.classList.add("hide");
}
}
helperActivateBtn(btn) {
console.log(btn);
btn.classList.remove("grey");
btn.classList.add("green");
btn.innerText = "check";
}
helperDeactivateBtn(btn) {
console.log(btn);
btn.classList.remove("green");
btn.classList.add("grey");
btn.innerText = "add";
}
// add match id on click to a List of marked matches for SubSubcorpora
// remove match id on click from same list
addToSubResults(dataIndex) {
addToSubResults(dataIndex, tableCall=true) {
console.log(event.target);
let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0]
if (!this.addToSubResultsStatus[dataIndex]
|| this.addToSubResultsStatus === undefined) {
// add button is activated
nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`);
event.target.classList.remove("grey");
event.target.classList.add("green");
event.target.innerText = "check";
this.helperActivateBtn(event.target);
this.addToSubResultsStatus[dataIndex] = true;
this.addToSubResultsIdsToShow.add(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
@@ -216,9 +229,7 @@ class ResultsList extends List {
} else if (this.addToSubResultsStatus[dataIndex]) {
// add button is deactivated
nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`);
event.target.classList.remove("green");
event.target.classList.add("grey");
event.target.innerText = "add";
this.helperDeactivateBtn(event.target);
this.addToSubResultsStatus[dataIndex] = false;
this.addToSubResultsIdsToShow.delete(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
@@ -230,6 +241,16 @@ class ResultsList extends List {
subResultsCreateElement.firstElementChild.classList.add("disabled");
}
subResultsExportElement.classList.add("disabled");
// also activate/deactivate buttons in the table accordingly if btn in inspect was activated/deactivated
if (!tableCall) {
let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild;
console.log("TABLECALL", tableAddBtn);
if (this.addToSubResultsStatus[dataIndex]) {
this.helperActivateBtn(tableAddBtn);
} else {
this.helperDeactivateBtn(tableAddBtn);
}
}
}
// triggers emit to get full match context from server for a number of
@@ -274,13 +295,26 @@ class ResultsList extends List {
contextResultsElement.innerHTML = ""; // clear it from old inspects
this.getMatchWithContext(dataIndex, type);
contextModal.open();
let css = `margin-right: 10px;`
// add a button to add this match to sub results
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
addToSubResultsFromInspectElement = document.createElement("a");
addToSubResultsFromInspectElement.setAttribute("class", classes + `add`);
addToSubResultsFromInspectElement.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsFromInspectElement.onclick= (event) => {this.addToSubResults(dataIndex)};
let addToSubResultsIdsBtn = document.createElement("a");
addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsIdsBtn.onclick= (event) => {this.addToSubResults(dataIndex[0], false)};
if (addToSubResultsFromInspectElement.children.length > 0) {
addToSubResultsFromInspectElement.firstElementChild.remove();
}
if (this.addToSubResultsStatus[dataIndex[0]]) {
addToSubResultsIdsBtn.classList.remove("grey");
addToSubResultsIdsBtn.classList.add("green");
addToSubResultsIdsBtn.firstElementChild.innerText = "check";
} else if (!this.addToSubResultsStatus[dataIndex[0]]) {
addToSubResultsIdsBtn.classList.remove("green");
addToSubResultsIdsBtn.classList.add("grey");
addToSubResultsIdsBtn.firstElementChild.innerText = "add";
}
addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn);
}
// create Element from HTML String helper function
@@ -624,6 +658,7 @@ class ResultsList extends List {
}
createResultRowElement(item, chunk) {
let aCellElement;
let addToSubResultsBtn;
let c;
let cCellElement;
@@ -665,8 +700,10 @@ class ResultsList extends List {
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
}
// get infos for hit of match
// get infos for hit of match and set actions
textTitles = new Set();
aCellElement = document.createElement("td");
aCellElement.classList.add("actions");
cCellElement = document.createElement("td");
cCellElement.classList.add("match-hit");
textTitlesCellElement = document.createElement("td");
@@ -674,6 +711,7 @@ class ResultsList extends List {
matchNrElement = document.createElement("td");
matchNrElement.classList.add("match-nr");
matchRowElement.appendChild(cCellElement);
matchRowElement.appendChild(aCellElement);
for (cpos of c) {
token = chunk.cpos_lookup[cpos];
cCellElement.insertAdjacentHTML("beforeend",
@@ -683,25 +721,25 @@ class ResultsList extends List {
}
// add some interaction buttons
// # some btn css rules and classes
let css = `margin-right: 10px;`
let css = `margin-right: 5px; margin-bottom: 5px;`
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
`waves-light grey`
// # add button to trigger more context to every match td
inspectBtn = document.createElement("a");
inspectBtn.setAttribute("style", css);
inspectBtn.setAttribute("class", classes + ` disabled inspect`
);
inspectBtn.setAttribute("style", css)
inspectBtn.innerHTML = '<i class="material-icons">search</i>';
inspectBtn.onclick = () => {this.inspect([values.index], "inspect")};
// # add btn to add matches to sub-results. hidden per default
addToSubResultsBtn = document.createElement("a");
addToSubResultsBtn.setAttribute("style", css);
addToSubResultsBtn.setAttribute("class", classes + ` hide add`
);
addToSubResultsBtn.setAttribute("style", css)
addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)}
cCellElement.appendChild(inspectBtn);
cCellElement.appendChild(addToSubResultsBtn);
aCellElement.appendChild(addToSubResultsBtn);
aCellElement.appendChild(inspectBtn);
// add text titles at front as first td of one row
textTitlesCellElement.innerText = [...textTitles].join(", ");
matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);

30
web/app/templates/corpora/analyse_corpus.html.j2
View File

@@ -78,23 +78,23 @@
<h6 style="margin-top: 0px;">Export</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col">
<div class="col s12">
<button id="query-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
type="submit">Export Results
type="submit">Results
<i class="material-icons left">file_download</i>
</button>
</div>
<div class="col">
<div class="col s12">
<button id="sub-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
type="submit">Export Sub-Results
type="submit">Sub-Results
<i class="material-icons left">file_download</i>
</button>
</div>
@@ -104,7 +104,7 @@
<h6 style="margin-top: 0px;">Create</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col">
<div class="col s12">
<div class="switch">
Sub-Results creation:
<label>
@@ -117,7 +117,7 @@
</label>
</div>
</div>
<div class="col hide" id="sub-results-match-ids-div">
<div class="col s12 hide" id="sub-results-match-ids-div">
<div class="input-field">
<p>Marked matches for Sub-Results:</p>
<textarea id="sub-results-match-ids"
@@ -126,7 +126,7 @@
</textarea>
</div>
</div>
<div class="col hide" id="sub-results-create-div">
<div class="col s12 hide" id="sub-results-create-div">
<button class="waves-effect
waves-light
btn-flat
@@ -141,7 +141,7 @@
<h6 style="margin-top: 0px;">Display</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col">
<div class="col s12">
<form id="display-options-form">
{{ M.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }}
@@ -156,7 +156,7 @@
<h6 style="margin-top: 0px;">Analysis</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col">
<div class="col s12">
<button id="placeholder1"
class="waves-effect
waves-light
@@ -166,7 +166,7 @@
<i class="material-icons left">cloud</i>
</button>
</div>
<div class="col">
<div class="col s12">
<button id="placeholder2"
class="waves-effect
waves-light
@@ -190,7 +190,8 @@
<th style="width: 2%">Nr.</th>
<th style="width: 3%">Title</th>
<th style="width: 25%">Left context</th>
<th style="width: 45%">Match</th>
<th style="width: 35%">Match</th>
<th style="width: 10%">Actions</th>
<th style="width: 25%">Right Context</th>
</tr>
</thead>
@@ -567,17 +568,18 @@
});
}
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
for (let interaction of interactionElements) {
if (interaction.checkStatus) {
let element = interaction.getElement()
element.addEventListener("change", (event) => {
interaction.element.addEventListener("change", (event) => {
if (event.target.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
} else {
} else if (!event.target.checked){
let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);