Add more old functionality

This commit is contained in:
Stephan Porada 2020-08-28 15:54:48 +02:00
parent 73160c8210
commit 0eda40d0e7
8 changed files with 146 additions and 120 deletions

View File

@ -61,6 +61,9 @@ function saveResultsData(args) {
} else if (type === 'sub-results') {
console.info('Saving sub-results data.');
objectKey = 'subResultsData';
} else if (type = 'inspect-results') {
objectKey = 'inspectResultsData'
console.info('Saving inspect-results data');
}
results[objectKey].init();
results[objectKey].matches.push(...payload.matches);

View File

@ -10,14 +10,16 @@ class Results {
this.metaData = new MetaData();
this.fullResultsData = new Data();
this.subResultsData = new Data();
this.inspectResultsData = new Data();
console.info('Initialized the Results object.');
}
init() {
this.data.init();
this.metaData.init();
this.fullResultsData = new Data();
this.fullResultsData.init();
this.subResultsData.init();
this.inspectResultsData.init();
}
}
@ -55,31 +57,24 @@ class Data {
// function creates a unique and safe filename for the download
createDownloadFilename(suffix) {
let today;
let currentDate;
let currentTime;
let safeFilename;
let resultFilename;
// get and create metadata
today = new Date();
currentDate = `${today.getUTCFullYear()}` +
`-${(today.getUTCMonth() + 1)}` +
`-${today.getUTCDate()}`;
currentTime = `${today.getUTCHours()}h` +
`${today.getUTCMinutes()}m` +
`${today.getUTCSeconds()}s`;
safeFilename = this.query.replace(/[^a-z0-9_-]/gi, "_");
resultFilename = `UTC-${currentDate}_${currentTime}_${safeFilename}_${suffix}`;
let today = new Date();
let currentDate = `${today.getUTCFullYear()}` +
`-${(today.getUTCMonth() + 1)}` +
`-${today.getUTCDate()}`;
let currentTime = `${today.getUTCHours()}h` +
`${today.getUTCMinutes()}m` +
`${today.getUTCSeconds()}s`;
let safeFilename = this.query.replace(/[^a-z0-9_-]/gi, "_");
let resultFilename = `UTC-${currentDate}_${currentTime}_${safeFilename}_${suffix}`;
return resultFilename
}
// Function to download data as Blob created from string
// should be private but that is not yet a feature of javascript 08.04.2020
/**
* Function to download data as Blob created from string.
* Should be private but that is not yet a feature of javascript 08.04.2020
*/
download(downloadElement, dataStr, filename, type, filenameSlug) {
console.log('Start Download!');
let file;
filename += filenameSlug;
file = new Blob([dataStr], {type: type});
let file = new Blob([dataStr], {type: type});
var url = URL.createObjectURL(file);
downloadElement.href = url;
downloadElement.download = filename;
@ -87,11 +82,12 @@ class Data {
// function to download the results as JSON
downloadJSONRessource(resultFilename, downloadData, downloadElement) {
let dataStr;
// stringify JSON object for json download
// use tabs to save some space
dataStr = JSON.stringify(downloadData, undefined, "\t");
// start actual download
/**
* Stringify JSON object for json download.
* Use tabs to save some space.
*/
let dataStr = JSON.stringify(downloadData, undefined, "\t");
// Start actual download
this.download(downloadElement, dataStr, resultFilename, "text/json", ".json")
}

View File

@ -56,6 +56,22 @@ class ResultsList extends List {
this.clientIsBusy = false;
}
/**
* Init function that gets all needed HTML Elements. Implement this, or not?
* Or build a check into the get HTMLElements function if element already exists.
* Also think aobut saving alle elements in resultsList.es.nameOfElement
*/
/**
* Function to clear/reset some class field values. Usefull if a new query
* hase been issued by the user.
*/
resetFields() {
this.addToSubResultsIdsToShow = new Set();
this.addToSubResultsStatus = {};
}
/**
* Function that takes one or more query selector
* strings in an array as an input. The function then creates a
@ -65,7 +81,6 @@ class ResultsList extends List {
* The value will be the identifed element or elements fetched with the querySelector
* method.
*/
// TODO: multipleResults=false, atattchSomeCallback=false ?
getHTMLElements(arrayOfSelectors) {
for (let selector of arrayOfSelectors) {
let element;
@ -178,31 +193,9 @@ class ResultsList extends List {
return displayOptionsData
}
// ###### Functions to add one match to a sub-results ######
// activate the add buttons
activateAddToSubResults() {
subResultsIdListElement.classList.remove("hide");
if (subResultsExportElement.classList.contains("hide")) {
subResultsCreateElement.classList.remove("hide");
}
let addToSubResultsBtnElements = document.getElementsByClassName("add");
for (let addToSubResultsBtn of addToSubResultsBtnElements) {
addToSubResultsBtn.classList.remove("hide");
}
}
// deactivate the add buttons
deactivateAddToSubResults() {
subResultsIdListElement.classList.add("hide");
subResultsCreateElement.classList.add("hide");
let addToSubResultsBtnElements = document.getElementsByClassName("add");
for (let addToSubResultsBtn of addToSubResultsBtnElements) {
addToSubResultsBtn.classList.add("hide");
}
}
// Used in addToSubResults and inspect to toggle the design of the check
// buttons according to its checked unchecked status.
helperActivateBtn(btn) {
helperActivateAddBtn(btn) {
btn.classList.remove("grey");
btn.classList.add("green");
btn.textContent = "check";
@ -210,7 +203,7 @@ class ResultsList extends List {
// Used in addToSubResults and inspect to toggle the design of the check
// buttons according to its checked unchecked status.
helperDeactivateBtn(btn) {
helperDeactivateAddBtn(btn) {
btn.classList.remove("green");
btn.classList.add("grey");
btn.textContent = "add";
@ -222,48 +215,44 @@ class ResultsList extends List {
// true. Adds match to sub-results if status is false if status is true it
// removes it.
addToSubResults(dataIndex, tableCall=true) {
let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0];
if (!this.addToSubResultsStatus[dataIndex]
|| this.addToSubResultsStatus === undefined) {
// add button is activated because status is either false or undefined
this.helperActivateBtn(event.target);
this.helperActivateAddBtn(event.target);
this.addToSubResultsStatus[dataIndex] = true; // sets status to true
this.addToSubResultsIdsToShow.add(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
M.textareaAutoResize(this.subResultsMatchIds); // after an insert textarea has to be resized manually
this.nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
} else if (this.addToSubResultsStatus[dataIndex]) {
// add button is deactivated because status is true
this.helperDeactivateBtn(event.target);
this.helperDeactivateAddBtn(event.target);
this.addToSubResultsStatus[dataIndex] = false; // sets status to false
this.addToSubResultsIdsToShow.delete(dataIndex + 1); // + 1 because user does not see zero indexd data indexes
textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
this.subResultsMatchIds.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order
this.nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
M.textareaAutoResize(this.subResultsMatchIds); // after an insert textarea has to be resized manually
}
// Toggles the create button according to the number of ids in addToSubResultsIdsToShow
if ([...this.addToSubResultsIdsToShow].length > 0) {
subResultsCreateElement.classList.remove("disabled");
this.subResultsCreate.classList.toggle('disabled', false);
} else if ([...this.addToSubResultsIdsToShow].length === 0) {
subResultsCreateElement.classList.add("disabled");
}
if (resultCreationRunning) {
subResultsCreateElement.classList.add("disabled");
this.subResultsCreate.classList.toggle('disabled', true);
}
// After a match as been added or removed the export button will be
// hidden because the sub-results have been altered and have to be built
// again. Thus subResultsCreateElement has to be shown again.
subResultsExportElement.classList.add("hide");
subResultsCreateElement.classList.remove("hide");
this.subResultsExport.classList.add("hide");
this.subResultsCreate.classList.remove("hide");
// Also activate/deactivate buttons in the table/jsList results accordingly
//if button in inspect was activated/deactivated.
// This part only runs if tableCall is false.
if (!tableCall) {
let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild; // gets the add button from the list view
let tableAddBtn = document.getElementById('query-results').querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild; // gets the add button from the list view
if (this.addToSubResultsStatus[dataIndex]) {
this.helperActivateBtn(tableAddBtn);
this.helperActivateAddBtn(tableAddBtn);
} else {
this.helperDeactivateBtn(tableAddBtn);
this.helperDeactivateAddBtn(tableAddBtn);
}
}
}
@ -335,16 +324,19 @@ class ResultsList extends List {
// gets result cpos infos for one dataIndex (list of length 1) to send back to
// the server
inspect(dataIndex, type) {
let contextResultsElement;
// initialize context modal
this.getHTMLElements(['#context-modal',
'#context-results']);
this.contextModal = M.Modal.init(this.contextModal);
// get result infos from server and show them in context modal
this.contextId = dataIndex[0];
contextResultsElement = document.getElementById("context-results");
contextResultsElement.innerHTML = ""; // clear it from old inspects
this.getMatchWithContext(dataIndex, type);
this.contextResults.innerHTML = ""; // clear it from old inspects
this.notifyClient('get-results', {resultsType: 'inspect-results',
dataIndexes: [dataIndex]});
// match nr for user to display derived from data_index
let contextMatchNrElement = document.getElementById("context-match-nr");
contextMatchNrElement.textContent = this.contextId + 1;
contextModal.open();
this.contextModal.open();
// add a button to add this match to sub results with onclick event
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
@ -352,18 +344,18 @@ class ResultsList extends List {
addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
addToSubResultsIdsBtn.onclick= () => {this.addToSubResults(dataIndex[0], false)};
// checks if a button has already been added to the inspect modal and removes it
if (addToSubResultsFromInspectElement.children.length > 0) {
addToSubResultsFromInspectElement.firstElementChild.remove();
}
// Changes the design of the add button according to its checked status
// upon opening the inspect modal.
if (this.addToSubResultsStatus[dataIndex[0]]) {
this.helperActivateBtn(addToSubResultsIdsBtn.firstElementChild);
} else if (!this.addToSubResultsStatus[dataIndex[0]]) {
this.helperDeactivateBtn(addToSubResultsIdsBtn.firstElementChild);
}
addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn);
// // checks if a button has already been added to the inspect modal and removes it
// if (addToSubResultsFromInspectElement.children.length > 0) {
// addToSubResultsFromInspectElement.firstElementChild.remove();
// }
// // Changes the design of the add button according to its checked status
// // upon opening the inspect modal.
// if (this.addToSubResultsStatus[dataIndex[0]]) {
// this.helperActivateAddBtn(addToSubResultsIdsBtn.firstElementChild);
// } else if (!this.addToSubResultsStatus[dataIndex[0]]) {
// this.helperDeactivateAddBtn(addToSubResultsIdsBtn.firstElementChild);
// }
// addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn);
}
// create Element from HTML String helper function
@ -395,7 +387,6 @@ class ResultsList extends List {
let uniqueS;
this.contextData = response.payload;
console.log(this.contextData);
this.contextData["cpos_ranges"] = response.payload.cpos_ranges;
this.contextData["query"] = results.data.query;
this.contextData["context_id"] = this.contextId;

View File

@ -5,8 +5,16 @@
*/
function disableElementsGeneralCallback(resultsList, detail) {
resultsList.fullResultsCreate.classList.toggle('disabled', true);
resultsList.subResultsCreate.classList.toggle('disabled', true);
if (detail.type === 'full-results') {
resultsList.fullResultsCreate.classList.toggle('hide', false);
resultsList.fullResultsExport.classList.toggle('hide', true);
} else if (detail.type === 'sub-results') {
resultsList.subResultsCreate.classList.toggle('hide', false);
resultsList.subResultsExport.classList.toggle('hide', true);
} else {
resultsList.fullResultsCreate.classList.toggle('disabled', true);
resultsList.subResultsCreate.classList.toggle('disabled', true);
}
resultsList.deactivateInspect();
}
@ -14,7 +22,6 @@ function enableElementsGeneralCallback(resultsList, detail) {
resultsList.fullResultsCreate.classList.toggle('disabled');
resultsList.subResultsCreate.classList.toggle('disabled');
resultsList.activateInspect();
}
function connectingCallback(resultsList, detail) {
@ -53,17 +60,24 @@ function queryDataPreparingCallback(resultsList, detail) {
'#query-results-user-feedback',
'#query-progress-bar',
'#query-results-create',
'#add-to-sub-results'
'#sub-results-match-ids',
'#nr-marked-matches',
]);
// show or enable some things for the user
resultsList.interactionsMenu.classList.toggle('hide', false)
resultsList.queryResultsUserFeedback.classList.toggle('hide', false);
resultsList.queryProgressBar.classList.toggle('hide', false);
// set some initial values for the user feedback
// show or enable some things for the user
resultsList.interactionsMenu.classList.toggle('hide', false)
resultsList.queryResultsUserFeedback.classList.toggle('hide', false);
resultsList.queryProgressBar.classList.toggle('hide', false);
/**
* Set some initial values for the user feedback
* or reset values for new issued query
*/
resultsList.recievedMatchCount.textContent = 0;
resultsList.totalMatchCount.textContent = results.data.match_count;
resultsList.textLookupTitles.textContent = '';
resultsList.textLookupCount.textContent = 0;
resultsList.nrMarkedMatches.textContent = 0;
resultsList.subResultsMatchIds.textContent = '';
resultsList.resetFields();
}
function queryDataRecievingCallback(resultsList, detail) {

View File

@ -40,6 +40,11 @@ function recieveClientNotification(eventType, resultsList) {
break;
case 'query-data-prepareing':
console.info('View recieved notification:', caseIdentifier);
// some extra hiding and showing (this should be done less confusing)
resultsList.fullResultsExport.classList.toggle('hide', true);
resultsList.subResultsExport.classList.toggle('hide', true);
resultsList.fullResultsCreate.classList.toggle('hide', false);
resultsList.subResultsCreate.classList.toggle('hide', false);
// execute callbacks
disableElementsGeneralCallback(resultsList, event.detail);
queryDataPreparingCallback(resultsList, event.detail);
@ -54,6 +59,8 @@ function recieveClientNotification(eventType, resultsList) {
// execute callbacks
queryDataRecievedCallback(resultsList, event.detail);
enableElementsGeneralCallback(resultsList, event.detail);
// create sub-results is disabled per default until matches have been added
resultsList.subResultsCreate.classList.toggle('disabled', true);
break;
case 'results-data-recieving':
console.info('View recieved notification:', caseIdentifier);
@ -64,6 +71,7 @@ function recieveClientNotification(eventType, resultsList) {
case 'results-data-recieved':
console.info('View recieved notification:', caseIdentifier);
// execute callbacks
console.info(event.detail);
resultsDataRecievedCallback(resultsList, event.detail);
enableElementsGeneralCallback(resultsList, event.detail);
break;

View File

@ -217,8 +217,24 @@ document.addEventListener("DOMContentLoaded", () => {
'#sub-results-create',
'#full-results-export',
'#sub-results-export',
'#download-results-json'
'#download-results-json',
'#query-results-download-modal',
'#query-results-table'
]);
/**
* The following event Listener handles the add-btn and the inspect-btn
* onclick events via bubbleing.
*/
resultsList.queryResultsTable.addEventListener('click', (event) => {
let dataIndex;
if (event.target.classList.contains('inspect-btn')) {
dataIndex = parseInt(event.target.closest('tr').dataset.index);
resultsList.inspect([dataIndex], 'inspect');
} else if (event.target.classList.contains('add-btn')) {
dataIndex = parseInt(event.target.closest('tr').dataset.index);
resultsList.addToSubResults(dataIndex);
}
})
/**
* Display events: Following event listeners are handleing the
* live update of hits per page if hits per page value is changed and the
@ -234,15 +250,11 @@ document.addEventListener("DOMContentLoaded", () => {
* The following event listener handel the Show metadata button and its
* functionality. Before the needed modal is initialized.
*/
let deleteOverlay = () => {
let overlay = document.querySelector(".modal-overlay");
overlay.remove();
};
resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
'preventScrolling': false,
'opacity': 0.0,
'dismissible': false,
'onOpenEnd': deleteOverlay
'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
});
resultsList.showMetaData.onclick = () => {
resultsList.metaDataModalContent.textContent = '';
@ -287,27 +299,29 @@ document.addEventListener("DOMContentLoaded", () => {
resultsList.notifyClient('get-results', { resultsType: 'sub-results',
dataIndexes: dataIndexes});
}
/**
* Before the downland events are added the needed modal is initialized.
*/
resultsList.queryResultsDownloadModal = M.Modal.init(resultsList.queryResultsDownloadModal);
// Open download modal when full results export button is pressed
resultsList.fullResultsExport.onclick = () => {
exportModal.open();
resultsList.queryResultsDownloadModal.open();
// add onclick to download JSON button and download the file
let downloadResultsJSONElement = document.querySelector('#download-results-json')
downloadResultsJSONElement.onclick = () => {
let filename = results.fullResultsData.createDownloadFilename('matches-results');
resultsList.downloadResultsJson.onclick = () => {
let filename = results.fullResultsData.createDownloadFilename('full-results');
results.fullResultsData.addData(results.metaData);
results.fullResultsData.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement)};
results.fullResultsData.downloadJSONRessource(filename, results.fullResultsData,
resultsList.downloadResultsJson)};
}
// Open download modal when sub results export button is pressed
resultsList.fullResultsExport.onclick = () => {
exportModal.open();
resultsList.subResultsExport.onclick = () => {
resultsList.queryResultsDownloadModal.open();
// add onclick to download JSON button and download the file
let downloadResultsJSONElement = document.querySelector('#download-results-json')
downloadResultsJSONElement.onclick = () => {
let filename = results.subResultsData.createDownloadFilename('matches-results');
resultsList.downloadResultsJson.onclick = () => {
let filename = results.subResultsData.createDownloadFilename('sub-results');
results.subResultsData.addData(results.metaData);
results.subResultsData.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement)};
results.subResultsData.downloadJSONRessource(filename, results.subResultsData,
resultsList.downloadResultsJson)};
}
// enable scroll to Top

View File

@ -11,9 +11,9 @@ results.-->
button in the list or inspect view.
</p>
</div>
<div class="col s12" id="sub-results-match-ids-div">
<div class="col s12">
<div class="input-field">
<p><span id="nr-marked-matches"></span> Added matches:</p>
<p><span id="nr-marked-matches"></span> matches added for sub-results:</p>
<textarea id="sub-results-match-ids"
class="materialize-textarea"
disabled>

View File

@ -14,7 +14,7 @@ results. -->
<th style="width: 25%">Right Context</th>
</tr>
</thead>
<tbody class="list" id="query-results">
<tbody class="list" id="query-results-table">
</tbody>
</table>
<ul class="pagination paginationBottom"></ul>