mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
579 lines
21 KiB
JavaScript
579 lines
21 KiB
JavaScript
class Utils {
|
|
static elementFromString(string) {
|
|
let tmpElement = document.createElement('div');
|
|
tmpElement.innerHTML = string.trim();
|
|
return tmpElement.firstChild;
|
|
}
|
|
|
|
static generateElementId(prefix='') {
|
|
for (let i = 0; true; i++) {
|
|
if (document.querySelector(`#${prefix}${i}`) !== null) {continue;}
|
|
return `${prefix}${i}`;
|
|
}
|
|
}
|
|
|
|
static isObject(object) {
|
|
return object !== null && typeof object === 'object' && !Array.isArray(object);
|
|
}
|
|
|
|
static mergeObjectsDeep(...objects) {
|
|
let mergedObject = {};
|
|
if (objects.length === 0) {
|
|
return mergedObject;
|
|
}
|
|
if (objects.length === 1) {
|
|
if (!Utils.isObject(objects[0])) {
|
|
throw 'Cannot merge non-object';
|
|
}
|
|
return Utils.mergeObjectsDeep(mergedObject, objects[0]);
|
|
}
|
|
if (!Utils.isObject(objects[0]) || !Utils.isObject(objects[1])) {
|
|
throw 'Cannot merge non-object';
|
|
}
|
|
for (let key in objects[0]) {
|
|
if (objects[0].hasOwnProperty(key)) {
|
|
if (objects[1].hasOwnProperty(key)) {
|
|
if (Utils.isObject(objects[0][key]) && Utils.isObject(objects[1][key])) {
|
|
mergedObject[key] = Utils.mergeObjectsDeep(objects[0][key], objects[1][key]);
|
|
} else {
|
|
mergedObject[key] = objects[1][key];
|
|
}
|
|
} else {
|
|
mergedObject[key] = objects[0][key];
|
|
}
|
|
}
|
|
}
|
|
for (let key in objects[1]) {
|
|
if (objects[1].hasOwnProperty(key)) {
|
|
if (!objects[0].hasOwnProperty(key)) {
|
|
mergedObject[key] = objects[1][key];
|
|
}
|
|
}
|
|
}
|
|
if (objects.length === 2) {
|
|
return mergedObject;
|
|
}
|
|
return Utils.mergeObjectsDeep(mergedObject, ...objects.slice(2));
|
|
}
|
|
|
|
static buildCorpusRequest(userId, corpusId) {
|
|
return new Promise((resolve, reject) => {
|
|
let corpus = app.data.users[userId].corpora[corpusId];
|
|
|
|
fetch(`/corpora/${corpus.id}/build`, {method: 'POST', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
if (response.status === 409) {app.flash('Conflict', 'error'); reject(response);}
|
|
app.flash(`Corpus "${corpus.title}" marked for building`, 'corpus');
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
static deleteCorpusRequest(userId, corpusId) {
|
|
return new Promise((resolve, reject) => {
|
|
let corpus = app.data.users[userId].corpora[corpusId];
|
|
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Corpus deletion</h4>
|
|
<p>Do you really want to delete the Corpus <b>${corpus.title}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let corpusTitle = corpus.title;
|
|
fetch(`/corpora/${corpus.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`Corpus "${corpus.title}" marked for deletion`, 'corpus');
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteCorpusFileRequest(userId, corpusId, corpusFileId) {
|
|
return new Promise((resolve, reject) => {
|
|
let corpus = app.data.users[userId].corpora[corpusId];
|
|
let corpusFile = corpus.files[corpusFileId];
|
|
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Corpus File deletion</h4>
|
|
<p>Do you really want to delete the Corpus File <b>${corpusFile.title}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let corpusFileTitle = corpusFile.title;
|
|
fetch(`/corpora/${corpusId}/files/${corpusFileId}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`Corpus File "${corpusFileTitle}" deleted`, 'corpus');
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteSpaCyNLPPipelineModelRequest(userId, spaCyNLPPipelineModelId) {
|
|
return new Promise((resolve, reject) => {
|
|
let spaCyNLPPipelineModel = app.data.users[userId].spacy_nlp_pipeline_models[spaCyNLPPipelineModelId];
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm SpaCy NLP Pipeline Model deletion</h4>
|
|
<p>Do you really want to delete the SpaCy NLP Pipeline Model <b>${spaCyNLPPipelineModel.title}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let spaCyNLPPipelineModelTitle = spaCyNLPPipelineModel.title;
|
|
fetch(`/contributions/spacy-nlp-pipeline-models/${spaCyNLPPipelineModelId}`, {method: 'DELETE'})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`SpaCy NLP Pipeline Model "${spaCyNLPPipelineModelTitle}" marked for deletion`);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteTesseractOCRPipelineModelRequest(userId, tesseractOCRPipelineModelId) {
|
|
return new Promise((resolve, reject) => {
|
|
let tesseractOCRPipelineModel = app.data.users[userId].tesseract_ocr_pipeline_models[tesseractOCRPipelineModelId];
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Tesseract OCR Pipeline Model deletion</h4>
|
|
<p>Do you really want to delete the Tesseract OCR Pipeline Model <b>${tesseractOCRPipelineModel.title}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let tesseractOCRPipelineModelTitle = tesseractOCRPipelineModel.title;
|
|
fetch(`/contributions/tesseract-ocr-pipeline-models/${tesseractOCRPipelineModelId}`, {method: 'DELETE'})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`Tesseract OCR Pipeline Model "${tesseractOCRPipelineModelTitle}" marked for deletion`);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteProfileAvatarRequest(userId) {
|
|
return new Promise((resolve, reject) => {
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Avatar deletion</h4>
|
|
<p>Do you really want to delete your Avatar?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
fetch(`/users/${userId}/avatar`, {method: 'DELETE', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`Avatar marked for deletion`);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteJobRequest(userId, jobId) {
|
|
return new Promise((resolve, reject) => {
|
|
let job = app.data.users[userId].jobs[jobId];
|
|
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Job deletion</h4>
|
|
<p>Do you really want to delete the Job <b>${job.title}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let jobTitle = job.title;
|
|
fetch(`/jobs/${job.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`Job "${jobTitle}" marked for deletion`, 'job');
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static getJobLogRequest(userId, jobId) {
|
|
return new Promise((resolve, reject) => {
|
|
let job = app.data.users[userId].jobs[jobId];
|
|
|
|
fetch(`/jobs/${job.id}/log`, {method: 'GET', headers: {Accept: 'application/json, text/plain'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
return response.text();
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
)
|
|
.then(
|
|
(text) => {
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Job logs</h4>
|
|
<pre><code>${text}</code></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="btn modal-close waves-effect waves-light">Close</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
modal.open();
|
|
resolve(text);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
static restartJobRequest(userId, jobId) {
|
|
return new Promise((resolve, reject) => {
|
|
let job = app.data.users[userId].jobs[jobId];
|
|
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm Job restart</h4>
|
|
<p>Do you really want to restart the Job <b>${job.title}</b>? All Job Results will be permanently deleted.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Restart</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let jobTitle = job.title;
|
|
fetch(`/jobs/${job.id}/restart`, {method: 'POST', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
if (response.status === 409) {app.flash('Conflict', 'error'); reject(response);}
|
|
app.flash(`Job "${jobTitle}" restarted.`, 'job');
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static deleteUserRequest(userId) {
|
|
return new Promise((resolve, reject) => {
|
|
let user = app.data.users[userId];
|
|
|
|
let modalElement = Utils.elementFromString(
|
|
`
|
|
<div class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm User deletion</h4>
|
|
<p>Do you really want to delete the User <b>${user.username}</b>? All files will be permanently deleted!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
|
|
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector('#modals').appendChild(modalElement);
|
|
let modal = M.Modal.init(
|
|
modalElement,
|
|
{
|
|
dismissible: false,
|
|
onCloseEnd: () => {
|
|
modal.destroy();
|
|
modalElement.remove();
|
|
}
|
|
}
|
|
);
|
|
|
|
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
|
confirmElement.addEventListener('click', (event) => {
|
|
let userName = user.username;
|
|
fetch(`/users/${user.id}`, {method: 'DELETE', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
|
|
app.flash(`User "${userName}" marked for deletion`);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
modal.open();
|
|
});
|
|
}
|
|
|
|
static shareTesseractOCRPipelineModelRequest(userId, tesseractOCRPipelineModelId, is_public) {
|
|
return new Promise((resolve, reject) => {
|
|
let tesseractOCRPipelineModel = app.data.users[userId].tesseract_ocr_pipeline_models[tesseractOCRPipelineModelId];
|
|
let msg = '';
|
|
if (is_public) {
|
|
msg = `Model "${tesseractOCRPipelineModel.title}" is now public`;
|
|
} else {
|
|
msg = `Model "${tesseractOCRPipelineModel.title}" is now private`;
|
|
}
|
|
fetch(`/contributions/tesseract-ocr-pipeline-models/${tesseractOCRPipelineModel.id}/toggle-public-status`, {method: 'POST', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
app.flash(msg);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
static shareSpaCyNLPPipelineModelRequest(userId, spaCyNLPPipelineModelId, is_public) {
|
|
return new Promise((resolve, reject) => {
|
|
let spaCyNLPPipelineModel = app.data.users[userId].spacy_nlp_pipeline_models[spaCyNLPPipelineModelId];
|
|
let msg = '';
|
|
if (is_public) {
|
|
msg = `Model "${spaCyNLPPipelineModel.title}" is now public`;
|
|
} else {
|
|
msg = `Model "${spaCyNLPPipelineModel.title}" is now private`;
|
|
}
|
|
fetch(`/contributions/spacy-nlp-pipeline-models/${spaCyNLPPipelineModel.id}/toggle-public-status`, {method: 'POST', headers: {Accept: 'application/json'}})
|
|
.then(
|
|
(response) => {
|
|
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
|
|
app.flash(msg);
|
|
resolve(response);
|
|
},
|
|
(response) => {
|
|
app.flash('Something went wrong', 'error');
|
|
reject(response);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
}
|