mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-07-07 21:23:17 +00:00
Change directory structure (move ./nopaque/* to ./)
This commit is contained in:
Patrick Jentsch
103
app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js
Normal file
103
app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js
Normal file
@ -0,0 +1,103 @@
|
||||
class CorpusDisplay extends RessourceDisplay {
|
||||
constructor(displayElement) {
|
||||
super(displayElement);
|
||||
this.corpusId = displayElement.dataset.corpusId;
|
||||
this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.corpusId);
|
||||
}
|
||||
|
||||
init() {
|
||||
for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.addEventListener('click', () => this.requestCorpusExport());}
|
||||
nopaque.appClient.socket.on(`export_corpus_${this.user.data.corpora[this.corpusId].id}`, () => this.downloadCorpus());
|
||||
this.setCreationDate(this.user.data.corpora[this.corpusId].creation_date);
|
||||
this.setDescription(this.user.data.corpora[this.corpusId].description);
|
||||
this.setLastEditedDate(this.user.data.corpora[this.corpusId].last_edited_date);
|
||||
this.setStatus(this.user.data.corpora[this.corpusId].status);
|
||||
this.setTitle(this.user.data.corpora[this.corpusId].title);
|
||||
this.setTokenRatio(this.user.data.corpora[this.corpusId].current_nr_of_tokens, this.user.data.corpora[this.corpusId].max_nr_of_tokens);
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let re;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'replace':
|
||||
// Matches: /jobs/{this.job.id}/status
|
||||
re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/last_edited_date');
|
||||
if (re.test(operation.path)) {this.setLastEditedDate(operation.value); break;}
|
||||
// Matches: /jobs/{this.job.id}/status
|
||||
re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/status$');
|
||||
if (re.test(operation.path)) {this.setStatus(operation.value); break;}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestCorpusExport() {
|
||||
nopaque.appClient.socket.emit('export_corpus', this.user.data.corpora[this.corpusId].id);
|
||||
nopaque.appClient.flash('Preparing your corpus export...', 'corpus');
|
||||
for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', true);}
|
||||
}
|
||||
|
||||
downloadCorpus() {
|
||||
nopaque.appClient.flash('Corpus export is done. Your corpus download is ready!', 'corpus');
|
||||
for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', false);}
|
||||
// Little trick to call the download view after ziping has finished
|
||||
let fakeBtn = document.createElement('a');
|
||||
fakeBtn.href = `/corpora/${this.user.data.corpora[this.corpusId].id}/download`;
|
||||
fakeBtn.click();
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-title')) {this.setElement(element, title);}
|
||||
}
|
||||
|
||||
setTokenRatio(currentNrOfTokens, maxNrOfTokens) {
|
||||
let tokenRatio = `${currentNrOfTokens}/${maxNrOfTokens}`;
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-token-ratio')) {this.setElement(element, tokenRatio);}
|
||||
}
|
||||
|
||||
setDescription(description) {
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-description')) {this.setElement(element, description);}
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
for (let element of this.displayElement.querySelectorAll('.analyse-corpus-trigger')) {
|
||||
if (['analysing', 'prepared', 'start analysis'].includes(status)) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
for (let element of this.displayElement.querySelectorAll('.build-corpus-trigger')) {
|
||||
if (status === 'unprepared' && Object.values(this.user.data.corpora[this.corpusId].files).length > 0) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-status')) {this.setElement(element, status);}
|
||||
for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {
|
||||
exportCorpusTriggerElement.classList.toggle('disabled', !['prepared', 'start analysis', 'stop analysis'].includes(status));
|
||||
}
|
||||
for (let element of this.displayElement.querySelectorAll('.status')) {element.dataset.status = status;}
|
||||
for (let element of this.displayElement.querySelectorAll('.status-spinner')) {
|
||||
if (['submitted', 'queued', 'running', 'canceling', 'start analysis', 'stop analysis'].includes(status)) {
|
||||
element.classList.remove('hide');
|
||||
} else {
|
||||
element.classList.add('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCreationDate(creationDateTimestamp) {
|
||||
let creationDate = new Date(creationDateTimestamp * 1000).toLocaleString("en-US");
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-creation-date')) {this.setElement(element, creationDate);}
|
||||
}
|
||||
|
||||
setLastEditedDate(endDateTimestamp) {
|
||||
let endDate = new Date(endDateTimestamp * 1000).toLocaleString("en-US");
|
||||
for (let element of this.displayElement.querySelectorAll('.corpus-end-date')) {this.setElement(element, endDate);}
|
||||
}
|
||||
}
|
||||
87
app/static/js/nopaque/RessourceDisplays/JobDisplay.js
Normal file
87
app/static/js/nopaque/RessourceDisplays/JobDisplay.js
Normal file
@ -0,0 +1,87 @@
|
||||
class JobDisplay extends RessourceDisplay {
|
||||
constructor(displayElement) {
|
||||
super(displayElement);
|
||||
this.jobId = displayElement.dataset.jobId;
|
||||
this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId);
|
||||
}
|
||||
|
||||
init(job) {
|
||||
this.setCreationDate(this.user.data.jobs[this.jobId].creation_date);
|
||||
this.setEndDate(this.user.data.jobs[this.jobId].creation_date);
|
||||
this.setDescription(this.user.data.jobs[this.jobId].description);
|
||||
this.setService(this.user.data.jobs[this.jobId].service);
|
||||
this.setServiceArgs(this.user.data.jobs[this.jobId].service_args);
|
||||
this.setServiceVersion(this.user.data.jobs[this.jobId].service_version);
|
||||
this.setStatus(this.user.data.jobs[this.jobId].status);
|
||||
this.setTitle(this.user.data.jobs[this.jobId].title);
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let re;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'replace':
|
||||
// Matches: /jobs/{this.user.data.jobs[this.jobId].id}/status
|
||||
re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/end_date');
|
||||
if (re.test(operation.path)) {this.setEndDate(operation.value); break;}
|
||||
// Matches: /jobs/{this.user.data.jobs[this.jobId].id}/status
|
||||
re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/status$');
|
||||
if (re.test(operation.path)) {this.setStatus(operation.value); break;}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-title')) {this.setElement(element, title);}
|
||||
}
|
||||
|
||||
setDescription(description) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-description')) {this.setElement(element, description);}
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-status')) {
|
||||
this.setElement(element, status);
|
||||
}
|
||||
for (let element of this.displayElement.querySelectorAll('.status')) {element.dataset.status = status;}
|
||||
for (let element of this.displayElement.querySelectorAll('.status-spinner')) {
|
||||
if (['complete', 'failed'].includes(status)) {
|
||||
element.classList.add('hide');
|
||||
} else {
|
||||
element.classList.remove('hide');
|
||||
}
|
||||
}
|
||||
for (let element of this.displayElement.querySelectorAll('.restart-job-trigger')) {
|
||||
if (['complete', 'failed'].includes(status)) {
|
||||
element.classList.remove('hide');
|
||||
} else {
|
||||
element.classList.add('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCreationDate(creationDateTimestamp) {
|
||||
let creationDate = new Date(creationDateTimestamp * 1000).toLocaleString("en-US");
|
||||
for (let element of this.displayElement.querySelectorAll('.job-creation-date')) {this.setElement(element, creationDate);}
|
||||
}
|
||||
|
||||
setEndDate(endDateTimestamp) {
|
||||
let endDate = new Date(endDateTimestamp * 1000).toLocaleString("en-US");
|
||||
for (let element of this.displayElement.querySelectorAll('.job-end-date')) {this.setElement(element, endDate);}
|
||||
}
|
||||
|
||||
setService(service) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-service')) {this.setElement(element, service);}
|
||||
}
|
||||
|
||||
setServiceArgs(serviceArgs) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-service-args')) {this.setElement(element, serviceArgs);}
|
||||
}
|
||||
|
||||
setServiceVersion(serviceVersion) {
|
||||
for (let element of this.displayElement.querySelectorAll('.job-service-version')) {this.setElement(element, serviceVersion);}
|
||||
}
|
||||
}
|
||||
45
app/static/js/nopaque/RessourceDisplays/RessourceDisplay.js
Normal file
45
app/static/js/nopaque/RessourceDisplays/RessourceDisplay.js
Normal file
@ -0,0 +1,45 @@
|
||||
class RessourceDisplay {
|
||||
constructor(displayElement) {
|
||||
if (displayElement.dataset.userId) {
|
||||
if (displayElement.dataset.userId in nopaque.appClient.users) {
|
||||
this.user = nopaque.appClient.users[displayElement.dataset.userId];
|
||||
} else {
|
||||
console.error(`User not found: ${displayElement.dataset.userId}`);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.user = nopaque.appClient.users.self;
|
||||
}
|
||||
this.displayElement = displayElement;
|
||||
}
|
||||
|
||||
eventHandler(eventType, payload) {
|
||||
switch (eventType) {
|
||||
case 'init':
|
||||
this.init(payload);
|
||||
break;
|
||||
case 'patch':
|
||||
this.patch(payload);
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown event type: ${eventType}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
init() {console.error('init method not implemented!');}
|
||||
|
||||
patch() {console.error('patch method not implemented!');}
|
||||
|
||||
setElement(element, value) {
|
||||
switch (element.tagName) {
|
||||
case 'INPUT':
|
||||
element.value = value;
|
||||
M.updateTextFields();
|
||||
break;
|
||||
default:
|
||||
element.innerText = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
97
app/static/js/nopaque/RessourceLists/CorpusFileList.js
Normal file
97
app/static/js/nopaque/RessourceLists/CorpusFileList.js
Normal file
@ -0,0 +1,97 @@
|
||||
class CorpusFileList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...CorpusFileList.options, ...options});
|
||||
this.corpusId = listElement.dataset.corpusId;
|
||||
this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.corpusId);
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.corpora[this.corpusId].files);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let corpusFileId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
if (actionButtonElement === null) {return;}
|
||||
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
let deleteModalHTML = `<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm corpus deletion</h4>
|
||||
<p>Do you really want to delete the corpus file <b>${this.user.data.corpora[this.corpusId].files[corpusFileId].filename}</b>? It will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="${this.user.data.corpora[this.corpusId].files[corpusFileId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
let deleteModalParentElement = document.querySelector('#modals');
|
||||
deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
|
||||
let deleteModalElement = deleteModalParentElement.lastChild;
|
||||
let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
|
||||
deleteModal.open();
|
||||
break;
|
||||
case 'download':
|
||||
window.location.href = this.user.data.corpora[this.corpusId].files[corpusFileId].download_url;
|
||||
break;
|
||||
case 'view':
|
||||
if (corpusFileId !== '-1') {window.location.href = this.user.data.corpora[this.corpusId].files[corpusFileId].url;}
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: "${action}"`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let id, match, re, valueName;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'add':
|
||||
// Matches the only paths that should be handled here: /corpora/{this.user.data.corpora[this.corpusId].id}/files/{corpusFileId}
|
||||
re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)$');
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
case 'remove':
|
||||
// See case add ;)
|
||||
re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)$');
|
||||
if (re.test(operation.path)) {
|
||||
[match, id] = operation.path.match(re);
|
||||
this.remove(id);
|
||||
}
|
||||
break;
|
||||
case 'replace':
|
||||
// Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title}
|
||||
re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)/(author|filename|publishing_year|title)$');
|
||||
if (re.test(operation.path)) {
|
||||
[match, id, valueName] = operation.path.match(re);
|
||||
this.replace(id, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(corpusFile) {
|
||||
return {id: corpusFile.id, author: corpusFile.author, filename: corpusFile.filename, publishing_year: corpusFile.publishing_year, title: corpusFile.title};
|
||||
}
|
||||
}
|
||||
CorpusFileList.options = {
|
||||
item: `<tr>
|
||||
<td><span class="filename"></span></td>
|
||||
<td><span class="author"></span></td>
|
||||
<td><span class="title"></span></td>
|
||||
<td><span class="publishing_year"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="download" data-position="top" data-tooltip="View"><i class="material-icons">file_download</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, 'author', 'filename', 'publishing_year', 'title']
|
||||
};
|
||||
93
app/static/js/nopaque/RessourceLists/CorpusList.js
Normal file
93
app/static/js/nopaque/RessourceLists/CorpusList.js
Normal file
@ -0,0 +1,93 @@
|
||||
class CorpusList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...CorpusList.options, ...options});
|
||||
this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.corpora);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let corpusId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
let action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
let deleteModalHTML = `<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm corpus deletion</h4>
|
||||
<p>Do you really want to delete the corpus <b>${this.user.data.corpora[corpusId].title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="${this.user.data.corpora[corpusId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
let deleteModalParentElement = document.querySelector('#modals');
|
||||
deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
|
||||
let deleteModalElement = deleteModalParentElement.lastChild;
|
||||
let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
|
||||
deleteModal.open();
|
||||
break;
|
||||
case 'view':
|
||||
if (corpusId !== '-1') {window.location.href = this.user.data.corpora[corpusId].url;}
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: ${action}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let id, match, re, valueName;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'add':
|
||||
// Matches the only paths that should be handled here: /corpora/{corpusId}
|
||||
re = /^\/corpora\/(\d+)$/;
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
case 'remove':
|
||||
// See case 'add' ;)
|
||||
re = /^\/corpora\/(\d+)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id] = operation.path.match(re);
|
||||
this.remove(id);
|
||||
}
|
||||
break;
|
||||
case 'replace':
|
||||
// Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title}
|
||||
re = /^\/corpora\/(\d+)\/(status|description|title)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id, valueName] = operation.path.match(re);
|
||||
this.replace(id, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(corpus) {
|
||||
return {id: corpus.id,
|
||||
status: corpus.status,
|
||||
description: corpus.description,
|
||||
title: corpus.title};
|
||||
}
|
||||
}
|
||||
CorpusList.options = {
|
||||
item: `<tr>
|
||||
<td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, {name: 'status', attr: 'data-status'}, 'description', 'title']
|
||||
};
|
||||
41
app/static/js/nopaque/RessourceLists/JobInputList.js
Normal file
41
app/static/js/nopaque/RessourceLists/JobInputList.js
Normal file
@ -0,0 +1,41 @@
|
||||
class JobInputList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...JobInputList.options, ...options});
|
||||
this.jobId = listElement.dataset.jobId;
|
||||
this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId);
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.jobs[this.jobId].inputs);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let jobInputId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
if (actionButtonElement === null) {return;}
|
||||
let action = actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'download':
|
||||
window.location.href = this.user.data.jobs[this.jobId].inputs[jobInputId].download_url;
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: "${action}"`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(jobInput) {
|
||||
return {id: jobInput.id, filename: jobInput.filename};
|
||||
}
|
||||
}
|
||||
JobInputList.options = {
|
||||
item: `<tr>
|
||||
<td><span class="filename"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="download" data-position="top" data-tooltip="View"><i class="material-icons">file_download</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, 'filename']
|
||||
};
|
||||
94
app/static/js/nopaque/RessourceLists/JobList.js
Normal file
94
app/static/js/nopaque/RessourceLists/JobList.js
Normal file
@ -0,0 +1,94 @@
|
||||
class JobList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...JobList.options, ...options});
|
||||
this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.jobs);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let jobId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
let deleteModalHTML = `<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm job deletion</h4>
|
||||
<p>Do you really want to delete the job <b>${this.user.data.jobs[jobId].title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="${this.user.data.jobs[jobId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
let deleteModalParentElement = document.querySelector('#modals');
|
||||
deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
|
||||
let deleteModalElement = deleteModalParentElement.lastChild;
|
||||
let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
|
||||
deleteModal.open();
|
||||
break;
|
||||
case 'view':
|
||||
if (jobId !== '-1') {window.location.href = this.user.data.jobs[jobId].url;}
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: "${action}"`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let id, match, re, valueName;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'add':
|
||||
// Matches the only paths that should be handled here: /jobs/{jobId}
|
||||
re = /^\/jobs\/(\d+)$/;
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
case 'remove':
|
||||
// See case add ;)
|
||||
re = /^\/jobs\/(\d+)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id] = operation.path.match(re);
|
||||
this.remove(id);
|
||||
}
|
||||
break;
|
||||
case 'replace':
|
||||
// Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title}
|
||||
re = /^\/jobs\/(\d+)\/(service|status|description|title)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id, valueName] = operation.path.match(re);
|
||||
this.replace(id, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(job) {
|
||||
return {id: job.id,
|
||||
service: job.service,
|
||||
status: job.status,
|
||||
description: job.description,
|
||||
title: job.title};
|
||||
}
|
||||
}
|
||||
JobList.options = {
|
||||
item: `<tr>
|
||||
<td><a class="btn-floating disabled"><i class="nopaque-icons service service-color darken service-icon"></i></a></td>
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: 'status', attr: 'data-status'}, 'description', 'title']
|
||||
};
|
||||
71
app/static/js/nopaque/RessourceLists/JobResultList.js
Normal file
71
app/static/js/nopaque/RessourceLists/JobResultList.js
Normal file
@ -0,0 +1,71 @@
|
||||
class JobResultList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...JobResultList.options, ...options});
|
||||
this.jobId = listElement.dataset.jobId;
|
||||
this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId);
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.jobs[this.jobId].results);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let jobResultId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
if (actionButtonElement === null) {return;}
|
||||
let action = actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'download':
|
||||
window.location.href = this.user.data.jobs[this.jobId].results[jobResultId].download_url;
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: "${action}"`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let re;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'add':
|
||||
// Matches the only paths that should be handled here: /jobs/{this.user.data.jobs[this.jobId].id}/results/{jobResultId}
|
||||
re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/results/(\\d+)$');
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(jobResult) {
|
||||
let description;
|
||||
if (jobResult.filename.endsWith('.pdf.zip')) {
|
||||
description = 'PDF files with text layer';
|
||||
} else if (jobResult.filename.endsWith('.txt.zip')) {
|
||||
description = 'Raw text files';
|
||||
} else if (jobResult.filename.endsWith('.vrt.zip')) {
|
||||
description = 'VRT compliant files including the NLP data';
|
||||
} else if (jobResult.filename.endsWith('.xml.zip')) {
|
||||
description = 'TEI compliant files';
|
||||
} else if (jobResult.filename.endsWith('.poco.zip')) {
|
||||
description = 'HOCR and image files for post correction (PoCo)';
|
||||
} else {
|
||||
description = 'All result files created during this job';
|
||||
}
|
||||
return {id: jobResult.id, description: description, filename: jobResult.filename};
|
||||
}
|
||||
}
|
||||
JobResultList.options = {
|
||||
item: `<tr>
|
||||
<td><span class="description"></span></td>
|
||||
<td><span class="filename"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="download" data-position="top" data-tooltip="View"><i class="material-icons">file_download</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, 'description', 'filename']
|
||||
};
|
||||
93
app/static/js/nopaque/RessourceLists/QueryResultList.js
Normal file
93
app/static/js/nopaque/RessourceLists/QueryResultList.js
Normal file
@ -0,0 +1,93 @@
|
||||
class QueryResultList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...QueryResultList.options, ...options});
|
||||
this.user.eventListeners.queryResult.addEventListener((eventType, payload) => this.eventHandler(eventType, payload));
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(this.user.data.query_results);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let queryResultId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
let deleteModalHTML = `<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm query result deletion</h4>
|
||||
<p>Do you really want to delete the query result <b>${this.user.data.query_results[queryResultId].title}</b>? It will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="${this.user.data.query_results[queryResultId].url}/delete"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
let deleteModalParentElement = document.querySelector('#modals');
|
||||
deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
|
||||
let deleteModalElement = deleteModalParentElement.lastChild;
|
||||
let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
|
||||
deleteModal.open();
|
||||
break;
|
||||
case 'view':
|
||||
if (queryResultId !== '-1') {window.location.href = this.user.data.query_results[queryResultId].url;}
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: "${action}"`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
let id, match, re, valueName;
|
||||
for (let operation of patch) {
|
||||
switch(operation.op) {
|
||||
case 'add':
|
||||
// Matches the only paths that should be handled here: /jobs/{jobId}
|
||||
re = /^\/query_results\/(\d+)$/;
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
case 'remove':
|
||||
// See case add ;)
|
||||
re = /^\/query_results\/(\d+)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id] = operation.path.match(re);
|
||||
this.remove(id);
|
||||
}
|
||||
break;
|
||||
case 'replace':
|
||||
// Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title}
|
||||
re = /^\/query_results\/(\d+)\/(corpus_title|description|query|title)$/;
|
||||
if (re.test(operation.path)) {
|
||||
[match, id, valueName] = operation.path.match(re);
|
||||
this.replace(id, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(queryResult) {
|
||||
return {id: queryResult.id,
|
||||
corpus_title: queryResult.corpus_title,
|
||||
description: queryResult.description,
|
||||
query: queryResult.query,
|
||||
title: queryResult.title};
|
||||
}
|
||||
}
|
||||
QueryResultList.options = {
|
||||
item: `<tr>
|
||||
<td><b class="title"></b><br><i class="description"></i><br></td>
|
||||
<td><span class="corpus_title"></span><br><span class="query"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
|
||||
};
|
||||
99
app/static/js/nopaque/RessourceLists/RessourceList.js
Normal file
99
app/static/js/nopaque/RessourceLists/RessourceList.js
Normal file
@ -0,0 +1,99 @@
|
||||
class RessourceList {
|
||||
/* A wrapper class for the list.js list.
|
||||
* This class is not meant to be used directly, instead it should be used as
|
||||
* a base class for concrete ressource list implementations.
|
||||
*/
|
||||
constructor(listElement, options = {}) {
|
||||
if (listElement.dataset.userId) {
|
||||
if (listElement.dataset.userId in nopaque.appClient.users) {
|
||||
this.user = nopaque.appClient.users[listElement.dataset.userId];
|
||||
} else {
|
||||
console.error(`User not found: ${listElement.dataset.userId}`);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.user = nopaque.appClient.users.self;
|
||||
}
|
||||
this.list = new List(listElement, {...RessourceList.options, ...options});
|
||||
this.list.list.innerHTML = `<tr>
|
||||
<td class="row" colspan="100%">
|
||||
<div class="col s12"> </div>
|
||||
<div class="col s3 m2 xl1">
|
||||
<div class="preloader-wrapper active">
|
||||
<div class="spinner-layer spinner-green-only">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s9 m6 xl5">
|
||||
<span class="card-title">Waiting for data...</span>
|
||||
<p>This list is not initialized yet.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`;
|
||||
this.list.list.style.cursor = 'pointer';
|
||||
if (typeof this.onclick === 'function') {this.list.list.addEventListener('click', event => this.onclick(event));}
|
||||
}
|
||||
|
||||
eventHandler(eventType, payload) {
|
||||
switch (eventType) {
|
||||
case 'init':
|
||||
this.init();
|
||||
break;
|
||||
case 'patch':
|
||||
this.patch(payload);
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown event type: ${eventType}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
init(ressources) {
|
||||
this.list.clear();
|
||||
this.add(Object.values(ressources));
|
||||
this.list.sort('id', {order: 'desc'});
|
||||
let emptyListElementHTML = `<tr class="show-if-only-child" data-id="-1">
|
||||
<td colspan="100%">
|
||||
<span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
|
||||
<p>No ressource available.</p>
|
||||
</td>
|
||||
</tr>`;
|
||||
this.list.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
/*
|
||||
* It's not possible to generalize a patch Handler for all type of
|
||||
* ressources. So this method is meant to be an interface.
|
||||
*/
|
||||
console.error('patch method not implemented!');
|
||||
}
|
||||
|
||||
add(values) {
|
||||
let ressources = Array.isArray(values) ? values : [values];
|
||||
if (typeof this.preprocessRessource === 'function') {
|
||||
ressources = ressources.map(ressource => this.preprocessRessource(ressource));
|
||||
}
|
||||
// Set a callback function ('() => {return;}') to force List.js perform the
|
||||
// add method asynchronous: https://listjs.com/api/#add
|
||||
this.list.add(ressources, () => {return;});
|
||||
}
|
||||
|
||||
remove(id) {
|
||||
this.list.remove('id', id);
|
||||
}
|
||||
|
||||
replace(id, valueName, newValue) {
|
||||
this.list.get('id', id)[0].values({[valueName]: newValue});
|
||||
}
|
||||
}
|
||||
RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};
|
||||
71
app/static/js/nopaque/RessourceLists/UserList.js
Normal file
71
app/static/js/nopaque/RessourceLists/UserList.js
Normal file
@ -0,0 +1,71 @@
|
||||
class UserList extends RessourceList {
|
||||
constructor(listElement, options = {}) {
|
||||
super(listElement, {...UserList.options, ...options});
|
||||
users = undefined;
|
||||
}
|
||||
|
||||
init(users) {
|
||||
this.users = users;
|
||||
super.init(users);
|
||||
}
|
||||
|
||||
onclick(event) {
|
||||
let ressourceElement = event.target.closest('tr');
|
||||
if (ressourceElement === null) {return;}
|
||||
let userId = ressourceElement.dataset.id;
|
||||
let actionButtonElement = event.target.closest('.action-button');
|
||||
let action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
let deleteModalHTML = `<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm user deletion</h4>
|
||||
<p>Do you really want to delete the corpus <b>${this.users[userId].username}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="/admin/users/${userId}/delete"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
let deleteModalParentElement = document.querySelector('#modals');
|
||||
deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
|
||||
let deleteModalElement = deleteModalParentElement.lastChild;
|
||||
let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
|
||||
deleteModal.open();
|
||||
break;
|
||||
case 'edit':
|
||||
window.location.href = `/admin/users/${userId}/edit`;
|
||||
break;
|
||||
case 'view':
|
||||
if (userId !== '-1') {window.location.href = `/admin/users/${userId}`;}
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown action: ${action}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
preprocessRessource(user) {
|
||||
return {id: user.id,
|
||||
id_: user.id,
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
last_seen: new Date(user.last_seen * 1000).toLocaleString("en-US"),
|
||||
role: user.role.name};
|
||||
}
|
||||
}
|
||||
UserList.options = {
|
||||
item: `<tr>
|
||||
<td><span class="id_"></span></td>
|
||||
<td><span class="username"></span></td>
|
||||
<td><span class="email"></span></td>
|
||||
<td><span class="last_seen"></span></td>
|
||||
<td><span class="role"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="edit" data-position="top" data-tooltip="Edit"><i class="material-icons">edit</i></a>
|
||||
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>`,
|
||||
valueNames: [{data: ['id']}, 'id_', 'username', 'email', 'last_seen', 'role']
|
||||
};
|
||||
250
app/static/js/nopaque/main.js
Normal file
250
app/static/js/nopaque/main.js
Normal file
@ -0,0 +1,250 @@
|
||||
class AppClient {
|
||||
constructor(currentUserId) {
|
||||
if (currentUserId) {
|
||||
this.socket = io({transports: ['websocket']});
|
||||
this.users = {};
|
||||
this.users.self = this.loadUser(currentUserId);
|
||||
this.users.self.eventListeners.job.addEventListener((eventType, payload) => this.jobEventHandler(eventType, payload));
|
||||
}
|
||||
}
|
||||
|
||||
flash(message, category) {
|
||||
let toast;
|
||||
let toastCloseActionElement;
|
||||
|
||||
switch (category) {
|
||||
case "corpus":
|
||||
message = `<i class="left material-icons">book</i>${message}`;
|
||||
break;
|
||||
case "error":
|
||||
message = `<i class="left material-icons error-color-text">error</i>${message}`;
|
||||
break;
|
||||
case "job":
|
||||
message = `<i class="left nopaque-icons">J</i>${message}`;
|
||||
break;
|
||||
default:
|
||||
message = `<i class="left material-icons">notifications</i>${message}`;
|
||||
}
|
||||
|
||||
toast = M.toast({html: `<span>${message}</span>
|
||||
<button data-action="close" class="btn-flat toast-action white-text">
|
||||
<i class="material-icons">close</i>
|
||||
</button>`});
|
||||
toastCloseActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
|
||||
toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
|
||||
}
|
||||
|
||||
jobEventHandler(eventType, payload) {
|
||||
switch (eventType) {
|
||||
case 'init':
|
||||
break;
|
||||
case 'patch':
|
||||
this.jobPatch(payload);
|
||||
break;
|
||||
default:
|
||||
console.error(`[AppClient.jobEventHandler] Unknown event type: ${eventType}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
loadUser(userId) {
|
||||
if (userId in this.users) {return this.users[userId];}
|
||||
let user = new User();
|
||||
this.users[userId] = user;
|
||||
this.socket.on(`user_${userId}_init`, msg => user.init(msg));
|
||||
this.socket.on(`user_${userId}_patch`, msg => user.patch(msg));
|
||||
this.socket.emit('start_user_session', userId);
|
||||
return user;
|
||||
}
|
||||
|
||||
jobPatch(patch) {
|
||||
if (this.users.self.data.settings.job_status_site_notifications === 'none') {return;}
|
||||
let jobStatusPatches = patch.filter(operation => operation.op === 'replace' && /^\/jobs\/(\d+)\/status$/.test(operation.path));
|
||||
for (let operation of jobStatusPatches) {
|
||||
let [match, jobId] = operation.path.match(/^\/jobs\/(\d+)\/status$/);
|
||||
if (this.users.self.data.settings.job_status_site_notifications === "end" && !['complete', 'failed'].includes(operation.value)) {continue;}
|
||||
this.flash(`[<a href="/jobs/${jobId}">${this.users.self.data.jobs[jobId].title}</a>] New status: ${operation.value}`, 'job');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class User {
|
||||
constructor() {
|
||||
this.data = undefined;
|
||||
this.eventListeners = {
|
||||
corpus: {
|
||||
addEventListener(listener, corpusId='*') {
|
||||
if (corpusId in this) {this[corpusId].push(listener);} else {this[corpusId] = [listener];}
|
||||
}
|
||||
},
|
||||
job: {
|
||||
addEventListener(listener, jobId='*') {
|
||||
if (jobId in this) {this[jobId].push(listener);} else {this[jobId] = [listener];}
|
||||
}
|
||||
},
|
||||
queryResult: {
|
||||
addEventListener(listener, queryResultId='*') {
|
||||
if (queryResultId in this) {this[queryResultId].push(listener);} else {this[queryResultId] = [listener];}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
init(data) {
|
||||
this.data = data;
|
||||
|
||||
for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
|
||||
if (corpusId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
} else {
|
||||
if (corpusId in this.data.corpora) {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
|
||||
if (jobId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
} else {
|
||||
if (jobId in this.data.jobs) {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
|
||||
if (queryResultId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
} else {
|
||||
if (queryResultId in this.data.query_results) {
|
||||
for (let eventListener of eventListeners) {eventListener('init');}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
patch(patch) {
|
||||
this.data = jsonpatch.apply_patch(this.data, patch);
|
||||
|
||||
let corporaPatch = patch.filter(operation => operation.path.startsWith("/corpora"));
|
||||
if (corporaPatch.length > 0) {
|
||||
for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
|
||||
if (corpusId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', corporaPatch);}
|
||||
} else {
|
||||
let corpusPatch = corporaPatch.filter(operation => operation.path.startsWith(`/corpora/${corpusId}`));
|
||||
if (corpusPatch.length > 0) {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', corpusPatch);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let jobsPatch = patch.filter(operation => operation.path.startsWith("/jobs"));
|
||||
if (jobsPatch.length > 0) {
|
||||
for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
|
||||
if (jobId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', jobsPatch);}
|
||||
} else {
|
||||
let jobPatch = jobsPatch.filter(operation => operation.path.startsWith(`/jobs/${jobId}`));
|
||||
if (jobPatch.length > 0) {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', jobPatch);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let queryResultsPatch = patch.filter(operation => operation.path.startsWith("/query_results"));
|
||||
if (queryResultsPatch.length > 0) {
|
||||
for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
|
||||
if (queryResultId === '*') {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', queryResultsPatch);}
|
||||
} else {
|
||||
let queryResultPatch = queryResultsPatch.filter(operation => operation.path.startsWith(`/query_results/${queryResultId}`));
|
||||
if (queryResultPatch.length > 0) {
|
||||
for (let eventListener of eventListeners) {eventListener('patch', queryResultPatch);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* The nopaque object is used as a namespace for nopaque specific functions and
|
||||
* variables.
|
||||
*/
|
||||
var nopaque = {};
|
||||
|
||||
nopaque.Forms = {};
|
||||
nopaque.Forms.init = function() {
|
||||
var abortRequestElement, parentElement, progressElement, progressModal,
|
||||
progressModalElement, request, submitElement;
|
||||
|
||||
for (let form of document.querySelectorAll(".nopaque-submit-form")) {
|
||||
submitElement = form.querySelector('button[type="submit"]');
|
||||
submitElement.addEventListener("click", function() {
|
||||
for (let selectElement of form.querySelectorAll('select')) {
|
||||
if (selectElement.value === "") {
|
||||
parentElement = selectElement.closest(".input-field");
|
||||
parentElement.querySelector(".select-dropdown").classList.add("invalid");
|
||||
for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
|
||||
helperTextElement.remove();
|
||||
}
|
||||
parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
request = new XMLHttpRequest();
|
||||
if (form.dataset.hasOwnProperty("progressModal")) {
|
||||
progressModalElement = document.getElementById(form.dataset.progressModal);
|
||||
progressModal = M.Modal.getInstance(progressModalElement);
|
||||
progressModal.options.dismissible = false;
|
||||
abortRequestElement = progressModalElement.querySelector(".abort-request");
|
||||
abortRequestElement.addEventListener("click", function() {request.abort();});
|
||||
progressElement = progressModalElement.querySelector(".determinate");
|
||||
}
|
||||
form.addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
var formData;
|
||||
|
||||
formData = new FormData(form);
|
||||
// Initialize progress modal
|
||||
if (progressModalElement) {
|
||||
progressElement.style.width = "0%";
|
||||
progressModal.open();
|
||||
}
|
||||
request.open("POST", window.location.href);
|
||||
request.send(formData);
|
||||
});
|
||||
request.addEventListener("load", function(event) {
|
||||
var fieldElement;
|
||||
|
||||
if (request.status === 201) {
|
||||
window.location.href = JSON.parse(this.responseText).redirect_url;
|
||||
}
|
||||
if (request.status === 400) {
|
||||
for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
|
||||
fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
|
||||
for (let error of errors) {
|
||||
fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
|
||||
}
|
||||
}
|
||||
if (progressModalElement) {
|
||||
progressModal.close();
|
||||
}
|
||||
}
|
||||
if (request.status === 500) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
if (progressModalElement) {
|
||||
request.upload.addEventListener("progress", function(event) {
|
||||
progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user