sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +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
Show Stats 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, hideBefore=true,
hideAfter=false) { hideAfter=false) {
this.htmlId = htmlId; this.htmlId = htmlId;
this.element = (htmlId) => {this.element = document.getElementById(htmlId);}
this.checkStatus = checkStatus; this.checkStatus = checkStatus;
this.callbacks = {}; this.callbacks = {};
this.disabledBefore = disabledBefore; this.disabledBefore = disabledBefore;
this.disabledAfter = disabledAfter; this.disabledAfter = disabledAfter;
this.hideBefore = hideBefore; this.hideBefore = hideBefore;
this.hideAfter = hideAfter; this.hideAfter = hideAfter;
} this.element(this.htmlId);
getElement() {
this.interactionStatusElement = document.getElementById(this.htmlId);
return this.interactionStatusElement;
} }
setCallback(trigger, callback, bindThis, args=[]) { 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.getElementsByClassName("button-icon-spinner")[0].remove();
subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide"); subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide");
subResultsCreateElement.firstElementChild.classList.add("disabled"); 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) { function querySetup(payload) {

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

@ -86,11 +86,11 @@ RessourceList.options = {
</span> </span>
</td> </td>
<td class="right-align"> <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> <i class="material-icons">edit</i>
</a> </a>
<a class="btn-small analyse-link waves-effect waves-light"> <a class="btn-floating analyse-link waves-effect waves-light">
Analyse<i class="material-icons right">search</i> <i class="material-icons right">search</i>
</a> </a>
</td> </td>
</tr>`, </tr>`,
@ -113,8 +113,8 @@ RessourceList.options = {
<span class="badge new status" data-badge-caption=""></span> <span class="badge new status" data-badge-caption=""></span>
</td> </td>
<td class="right-align"> <td class="right-align">
<a class="btn-small link waves-effect waves-light"> <a class="btn-floating link waves-effect waves-light">
View<i class="material-icons right">send</i> <i class="material-icons right">send</i>
</a> </a>
</td> </td>
</tr>`, </tr>`,
@ -143,8 +143,7 @@ class ResultsList extends List {
// get elements to check thier status // get elements to check thier status
for (let interaction of interactionElements) { for (let interaction of interactionElements) {
if (interaction.checkStatus) { if (interaction.checkStatus) {
let element = interaction.getElement(); if (interaction.element.checked) {
if (element.checked) {
let f_on = interaction.bindThisToCallback("on"); let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args; let args_on = interaction.callbacks.on.args;
f_on(...args_on); f_on(...args_on);
@ -198,17 +197,31 @@ class ResultsList extends List {
addToSubResultsBtn.classList.add("hide"); 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 // add match id on click to a List of marked matches for SubSubcorpora
// remove match id on click from same list // remove match id on click from same list
addToSubResults(dataIndex) { addToSubResults(dataIndex, tableCall=true) {
console.log(event.target);
let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0] let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0]
if (!this.addToSubResultsStatus[dataIndex] if (!this.addToSubResultsStatus[dataIndex]
|| this.addToSubResultsStatus === undefined) { || this.addToSubResultsStatus === undefined) {
// add button is activated // add button is activated
nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`); nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`);
event.target.classList.remove("grey"); this.helperActivateBtn(event.target);
event.target.classList.add("green");
event.target.innerText = "check";
this.addToSubResultsStatus[dataIndex] = true; this.addToSubResultsStatus[dataIndex] = true;
this.addToSubResultsIdsToShow.add(dataIndex + 1); this.addToSubResultsIdsToShow.add(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); 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]) { } else if (this.addToSubResultsStatus[dataIndex]) {
// add button is deactivated // add button is deactivated
nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`); nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`);
event.target.classList.remove("green"); this.helperDeactivateBtn(event.target);
event.target.classList.add("grey");
event.target.innerText = "add";
this.addToSubResultsStatus[dataIndex] = false; this.addToSubResultsStatus[dataIndex] = false;
this.addToSubResultsIdsToShow.delete(dataIndex + 1); this.addToSubResultsIdsToShow.delete(dataIndex + 1);
textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); 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"); subResultsCreateElement.firstElementChild.classList.add("disabled");
} }
subResultsExportElement.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 // 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 contextResultsElement.innerHTML = ""; // clear it from old inspects
this.getMatchWithContext(dataIndex, type); this.getMatchWithContext(dataIndex, type);
contextModal.open(); contextModal.open();
let css = `margin-right: 10px;` // add a button to add this match to sub results
let classes = `btn-floating btn waves-effect` + let classes = `btn-floating btn waves-effect` +
`waves-light grey right` `waves-light grey right`
addToSubResultsFromInspectElement = document.createElement("a"); let addToSubResultsIdsBtn = document.createElement("a");
addToSubResultsFromInspectElement.setAttribute("class", classes + `add`); addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
addToSubResultsFromInspectElement.innerHTML = '<i class="material-icons">add</i>'; addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsFromInspectElement.onclick= (event) => {this.addToSubResults(dataIndex)}; 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 // create Element from HTML String helper function
@ -624,6 +658,7 @@ class ResultsList extends List {
} }
createResultRowElement(item, chunk) { createResultRowElement(item, chunk) {
let aCellElement;
let addToSubResultsBtn; let addToSubResultsBtn;
let c; let c;
let cCellElement; let cCellElement;
@ -665,8 +700,10 @@ class ResultsList extends List {
`<span class="token" data-cpos="${cpos}">${token.word} </span>`); `<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(); textTitles = new Set();
aCellElement = document.createElement("td");
aCellElement.classList.add("actions");
cCellElement = document.createElement("td"); cCellElement = document.createElement("td");
cCellElement.classList.add("match-hit"); cCellElement.classList.add("match-hit");
textTitlesCellElement = document.createElement("td"); textTitlesCellElement = document.createElement("td");
@ -674,6 +711,7 @@ class ResultsList extends List {
matchNrElement = document.createElement("td"); matchNrElement = document.createElement("td");
matchNrElement.classList.add("match-nr"); matchNrElement.classList.add("match-nr");
matchRowElement.appendChild(cCellElement); matchRowElement.appendChild(cCellElement);
matchRowElement.appendChild(aCellElement);
for (cpos of c) { for (cpos of c) {
token = chunk.cpos_lookup[cpos]; token = chunk.cpos_lookup[cpos];
cCellElement.insertAdjacentHTML("beforeend", cCellElement.insertAdjacentHTML("beforeend",
@ -683,25 +721,25 @@ class ResultsList extends List {
} }
// add some interaction buttons // add some interaction buttons
// # some btn css rules and classes // # 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` + let classes = `btn-floating btn waves-effect` +
`waves-light grey right` `waves-light grey`
// # add button to trigger more context to every match td // # add button to trigger more context to every match td
inspectBtn = document.createElement("a"); inspectBtn = document.createElement("a");
inspectBtn.setAttribute("style", css);
inspectBtn.setAttribute("class", classes + ` disabled inspect` inspectBtn.setAttribute("class", classes + ` disabled inspect`
); );
inspectBtn.setAttribute("style", css)
inspectBtn.innerHTML = '<i class="material-icons">search</i>'; inspectBtn.innerHTML = '<i class="material-icons">search</i>';
inspectBtn.onclick = () => {this.inspect([values.index], "inspect")}; inspectBtn.onclick = () => {this.inspect([values.index], "inspect")};
// # add btn to add matches to sub-results. hidden per default // # add btn to add matches to sub-results. hidden per default
addToSubResultsBtn = document.createElement("a"); addToSubResultsBtn = document.createElement("a");
addToSubResultsBtn.setAttribute("style", css);
addToSubResultsBtn.setAttribute("class", classes + ` hide add` addToSubResultsBtn.setAttribute("class", classes + ` hide add`
); );
addToSubResultsBtn.setAttribute("style", css)
addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>'; addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)} addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)}
cCellElement.appendChild(inspectBtn); aCellElement.appendChild(addToSubResultsBtn);
cCellElement.appendChild(addToSubResultsBtn); aCellElement.appendChild(inspectBtn);
// add text titles at front as first td of one row // add text titles at front as first td of one row
textTitlesCellElement.innerText = [...textTitles].join(", "); textTitlesCellElement.innerText = [...textTitles].join(", ");
matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML); 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> <h6 style="margin-top: 0px;">Export</h6>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col s12">
<button id="query-results-export" <button id="query-results-export"
class="waves-effect class="waves-effect
waves-light waves-light
btn-flat btn-flat
disabled" disabled"
type="submit">Export Results type="submit">Results
<i class="material-icons left">file_download</i> <i class="material-icons left">file_download</i>
</button> </button>
</div> </div>
<div class="col"> <div class="col s12">
<button id="sub-results-export" <button id="sub-results-export"
class="waves-effect class="waves-effect
waves-light waves-light
btn-flat btn-flat
disabled" disabled"
type="submit">Export Sub-Results type="submit">Sub-Results
<i class="material-icons left">file_download</i> <i class="material-icons left">file_download</i>
</button> </button>
</div> </div>
@ -104,7 +104,7 @@
<h6 style="margin-top: 0px;">Create</h6> <h6 style="margin-top: 0px;">Create</h6>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col s12">
<div class="switch"> <div class="switch">
Sub-Results creation: Sub-Results creation:
<label> <label>
@ -117,7 +117,7 @@
</label> </label>
</div> </div>
</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"> <div class="input-field">
<p>Marked matches for Sub-Results:</p> <p>Marked matches for Sub-Results:</p>
<textarea id="sub-results-match-ids" <textarea id="sub-results-match-ids"
@ -126,7 +126,7 @@
</textarea> </textarea>
</div> </div>
</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 <button class="waves-effect
waves-light waves-light
btn-flat btn-flat
@ -141,7 +141,7 @@
<h6 style="margin-top: 0px;">Display</h6> <h6 style="margin-top: 0px;">Display</h6>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col s12">
<form id="display-options-form"> <form id="display-options-form">
{{ M.render_field(display_options_form.results_per_page, {{ M.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }} material_icon='format_list_numbered') }}
@ -156,7 +156,7 @@
<h6 style="margin-top: 0px;">Analysis</h6> <h6 style="margin-top: 0px;">Analysis</h6>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col s12">
<button id="placeholder1" <button id="placeholder1"
class="waves-effect class="waves-effect
waves-light waves-light
@ -166,7 +166,7 @@
<i class="material-icons left">cloud</i> <i class="material-icons left">cloud</i>
</button> </button>
</div> </div>
<div class="col"> <div class="col s12">
<button id="placeholder2" <button id="placeholder2"
class="waves-effect class="waves-effect
waves-light waves-light
@ -190,7 +190,8 @@
<th style="width: 2%">Nr.</th> <th style="width: 2%">Nr.</th>
<th style="width: 3%">Title</th> <th style="width: 3%">Title</th>
<th style="width: 25%">Left context</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> <th style="width: 25%">Right Context</th>
</tr> </tr>
</thead> </thead>
@ -567,17 +568,18 @@
}); });
} }
// checks if a change for every interactionElement happens and executes // checks if a change for every interactionElement happens and executes
// the callbacks accordingly // the callbacks accordingly
for (let interaction of interactionElements) { for (let interaction of interactionElements) {
if (interaction.checkStatus) { if (interaction.checkStatus) {
let element = interaction.getElement() interaction.element.addEventListener("change", (event) => {
element.addEventListener("change", (event) => {
if (event.target.checked) { if (event.target.checked) {
let f_on = interaction.bindThisToCallback("on"); let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args; let args_on = interaction.callbacks.on.args;
f_on(...args_on); f_on(...args_on);
} else { } else if (!event.target.checked){
let f_off = interaction.bindThisToCallback("off"); let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args; let args_off = interaction.callbacks.off.args;
f_off(...args_off); f_off(...args_off);