sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-13 17:40:40 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into development

Browse Source
This commit is contained in:
Inga Kirschnick
2022-09-07 14:53:51 +02:00
parent f46544451e ceef272d06
commit 7fe183bf2a
114 changed files with 3774 additions and 3316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/static/css/helpers.scss Normal file
View File

@ -0,0 +1,31 @@
/*
* Spacing
*/
$spacing-shortcuts: ("margin": "mg", "padding": "pd");
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto);
@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
@each $spacing-name, $spacing-value in $spacing-values {
// All directions
.#{$spacing-shortcut-value}-#{$spacing-name} {
#{$spacing-shortcut-name}: $spacing-value !important;
}
// Horizontal axis
.#{$spacing-shortcut-value}x-#{$spacing-name} {
#{$spacing-shortcut-name}-left: $spacing-value !important;
#{$spacing-shortcut-name}-right: $spacing-value !important;
}
// Vertical axis
.#{$spacing-shortcut-value}y-#{$spacing-name} {
#{$spacing-shortcut-name}-top: $spacing-value !important;
#{$spacing-shortcut-name}-bottom: $spacing-value !important;
}
// Cardinal directions
@each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
.#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
#{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
}
}
}
}

11
app/static/css/style.css
View File

@ -49,5 +49,14 @@ h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab
.nopaque-icons.service-icon[data-service="spacy-nlp-pipeline"]:empty:before {content: "G";}
.nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
.hoverable {cursor: pointer;}
.clickable {
cursor: pointer !important;
pointer-events: all !important;
}
.chip.s-attr .chip.p-attr {background-color: inherit;}
.width-25 {width: 25%;}
.width-50 {width: 50%;}
.width-75 {width: 75%;}
.width-100 {width: 100%;}

147
app/static/js/App.js
View File

@ -1,78 +1,111 @@
class App {
constructor() {
this.data = {users: {}};
this.eventListeners = {'users.patch': []};
this.promises = {users: {}};
this.data = {
promises: {getUser: {}, subscribeUser: {}},
users: {},
};
this.socket = io({transports: ['websocket'], upgrade: false});
this.socket.on('users.patch', patch => this.usersPatchHandler(patch));
this.socket.on('PATCH', (patch) => {this.onPatch(patch);});
}
get users() {
return this.data.users;
}
addEventListener(type, listener) {
if (!(type in this.eventListeners)) {
throw `Unknown event type: ${type}`;
getUser(userId) {
if (userId in this.data.promises.getUser) {
return this.data.promises.getUser[userId];
}
this.eventListeners[type].push(listener);
this.data.promises.getUser[userId] = new Promise((resolve, reject) => {
fetch(`/users/${userId}?backrefs=true&relationships=true`, {headers: {Accept: 'application/json'}})
.then(
(response) => {return response.json();},
(response) => {
if (response.status === 403) {this.flash('Forbidden', 'error');}
if (response.status === 404) {this.flash('Not Found', 'error');}
reject(response);
}
)
.then(
(user) => {
this.data.users[userId] = user;
resolve(this.data.users[userId]);
},
(error) => {
console.error(error, 'error');
reject(error);
}
);
});
return this.data.promises.getUser[userId];
}
flash(message, category) {
let iconPrefix;
let toast;
let toastCloseActionElement;
switch (category) {
case 'corpus':
iconPrefix = '<i class="left material-icons">book</i>';
break;
case 'error':
iconPrefix = '<i class="error-color-text left material-icons">error</i>';
break;
case 'job':
iconPrefix = '<i class="left nopaque-icons">J</i>';
break;
default:
iconPrefix = '<i class="left material-icons">notifications</i>';
break;
subscribeUser(userId) {
if (userId in this.data.promises.subscribeUser) {
return this.data.promises.subscribeUser[userId];
}
toast = M.toast(
{
html: `
<span>${iconPrefix}${message}</span>
<button class="btn-flat toast-action white-text" data-action="close">
<i class="material-icons">close</i>
</button>
`.trim()
}
);
toastCloseActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
}
getUserById(userId) {
if (userId in this.promises.users) {
return this.promises.users[userId];
}
this.promises.users[userId] = new Promise((resolve, reject) => {
this.socket.emit('users.user.get', userId, response => {
this.data.promises.subscribeUser[userId] = new Promise((resolve, reject) => {
this.socket.emit('SUBSCRIBE /users/<user_id>', userId, (response) => {
if (response.code === 200) {
this.data.users[userId] = response.payload;
resolve(this.data.users[userId]);
resolve(response);
} else {
reject(response);
}
});
});
return this.promises.users[userId];
return this.data.promises.subscribeUser[userId];
}
usersPatchHandler(patch) {
let listener;
flash(message, category) {
let iconPrefix = '';
switch (category) {
case 'corpus': {
iconPrefix = '<i class="left material-icons">book</i>';
break;
}
case 'error': {
iconPrefix = '<i class="error-color-text left material-icons">error</i>';
break;
}
case 'job': {
iconPrefix = '<i class="left nopaque-icons">J</i>';
break;
}
default: {
iconPrefix = '<i class="left material-icons">notifications</i>';
break;
}
}
let toast = M.toast(
{
html: `
<span>${iconPrefix}${message}</span>
<button class="action-button btn-flat toast-action white-text" data-action="close">
<i class="material-icons">close</i>
</button>
`.trim()
}
);
let toastCloseActionElement = toast.el.querySelector('.action-button[data-action="close"]');
toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
}
onPatch(patch) {
// Filter Patch to only include operations on users that are initialized
let regExp = new RegExp(`^/users/(${Object.keys(this.data.users).join('|')})`);
let filteredPatch = patch.filter(operation => regExp.test(operation.path));
this.data = jsonpatch.applyPatch(this.data, patch).newDocument;
//this.data = jsonpatch.apply_patch(this.data, patch);
for (listener of this.eventListeners['users.patch']) {listener(patch);}
// Handle job status updates
let subRegExp = new RegExp(`^/users/([A-Za-z0-9]*)/jobs/([A-Za-z0-9]*)/status$`);
let subFilteredPatch = filteredPatch
.filter((operation) => {return operation.op === 'replace';})
.filter((operation) => {return subRegExp.test(operation.path);});
for (let operation of subFilteredPatch) {
let [match, userId, jobId] = operation.path.match(subRegExp);
this.flash(`[<a href="/jobs/${jobId}">${this.data.users[userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
}
// Apply Patch
jsonpatch.applyPatch(this.data, filteredPatch);
}
}

18
app/static/js/Forms/CreateCorpusFileForm.js Normal file
View File

@ -0,0 +1,18 @@
class CreateCorpusFileForm extends Form {
static autoInit() {
let createCorpusFileFormElements = document.querySelectorAll('.create-corpus-file-form');
for (let createCorpusFileFormElement of createCorpusFileFormElements) {
new CreateCorpusFileForm(createCorpusFileFormElement);
}
}
constructor(formElement) {
super(formElement);
this.addEventListener('requestLoad', (event) => {
if (event.target.status === 201) {
window.location.href = event.target.getResponseHeader('Location');
}
});
}
}

25
app/static/js/Forms/CreateJobForm.js Normal file
View File

@ -0,0 +1,25 @@
class CreateJobForm extends Form {
static autoInit() {
let createJobFormElements = document.querySelectorAll('.create-job-form');
for (let createJobFormElement of createJobFormElements) {
new CreateJobForm(createJobFormElement);
}
}
constructor(formElement) {
super(formElement);
let versionField = this.formElement.querySelector('#create-job-form-version');
versionField.addEventListener('change', (event) => {
let url = new URL(window.location.href);
url.search = `?version=${event.target.value}`;
window.location.href = url.toString();
});
this.addEventListener('requestLoad', (event) => {
if (event.target.status === 201) {
window.location.href = event.target.getResponseHeader('Location');
}
});
}
}

141
app/static/js/Forms/Form.js Normal file
View File

@ -0,0 +1,141 @@
class Form {
static autoInit() {
CreateCorpusFileForm.autoInit();
CreateJobForm.autoInit();
}
constructor(formElement) {
this.formElement = formElement;
this.eventListeners = {
'requestLoad': []
};
this.afterRequestListeners = [];
for (let selectElement of this.formElement.querySelectorAll('select')) {
selectElement.removeAttribute('required');
}
this.formElement.addEventListener('submit', (event) => {
event.preventDefault();
this.submit(event);
});
}
addEventListener(eventType, listener) {
if (eventType in this.eventListeners) {
this.eventListeners[eventType].push(listener);
} else {
throw `Unknown event type ${eventType}`;
}
}
submit(event) {
let request = new XMLHttpRequest();
let modalElement = Utils.elementFromString(
`
<div class="modal">
<div class="modal-content">
<h4><i class="material-icons left">file_upload</i>Submitting...</h4>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
</div>
<div class="modal-footer">
<a class="action-button btn red waves-effect waves-light modal-close" data-action="cancel">Cancel</a>
</div>
</div>
`
);
document.querySelector('#modals').appendChild(modalElement);
let modal = M.Modal.init(
modalElement,
{
dismissible: false,
onCloseEnd: () => {
modal.destroy();
modalElement.remove();
}
}
);
modal.open();
// Remove all previous helper text elements that indicate errors
let errorHelperTextElements = this.formElement
.querySelectorAll('.helper-text[data-helper-text-type="error"]');
for (let errorHelperTextElement of errorHelperTextElements) {
errorHelperTextElement.remove();
}
// Check if select elements are filled out properly
for (let selectElement of this.formElement.querySelectorAll('select')) {
if (selectElement.value === '') {
let inputFieldElement = selectElement.closest('.input-field');
let errorHelperTextElement = Utils.elementFromString(
'<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>'
);
inputFieldElement.appendChild(errorHelperTextElement);
inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
modal.close();
return;
}
}
// Setup abort handling
let cancelElement = modalElement.querySelector('.action-button[data-action="cancel"]');
cancelElement.addEventListener('click', (event) => {request.abort();});
// Setup load handling (after the request completed)
request.addEventListener('load', (event) => {
for (let listener of this.eventListeners['requestLoad']) {
listener(event);
}
if (request.status === 400) {
let responseJson = JSON.parse(request.responseText);
console.log(responseJson);
for (let [inputName, inputErrors] of Object.entries(responseJson.errors)) {
let inputFieldElement = this.formElement
.querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`)
.closest('.input-field');
for (let inputError of inputErrors) {
let errorHelperTextElement = Utils.elementFromString(
`<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>`
);
inputFieldElement.appendChild(errorHelperTextElement);
}
}
}
if (request.status === 500) {
app.flash('Internal Server Error', 'error');
}
modal.close();
});
// Setup progress handling
let progressBarElement = modalElement.querySelector('.progress > .determinate');
request.upload.addEventListener('progress', (event) => {
let progress = Math.floor(100 * event.loaded / event.total);
progressBarElement.style.width = `${progress}%`;
});
request.open(this.formElement.method, this.formElement.action);
request.setRequestHeader('Accept', 'application/json');
let formData = new FormData(this.formElement);
switch (this.formElement.enctype) {
case 'application/x-www-form-urlencoded':
let urlSearchParams = new URLSearchParams(formData);
request.send(urlSearchParams);
break;
case 'multipart/form-data': {
request.send(formData);
break;
}
case 'text/plain': {
throw 'enctype "text/plain" is not supported';
break;
}
default: {
break;
}
}
}
}

22
app/static/js/JobStatusNotifier.js
View File

@ -1,22 +0,0 @@
class JobStatusNotifier {
constructor(userId) {
this.userId = userId;
}
usersPatchHandler(patch) {
let filteredPatch;
let jobId;
let match;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/status$`)
filteredPatch = patch
.filter(operation => operation.op === 'replace')
.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
[match, jobId] = operation.path.match(re);
app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
}
}
}

60
app/static/js/RessourceDisplays/CorpusDisplay.js
View File

@ -2,12 +2,20 @@ class CorpusDisplay extends RessourceDisplay {
constructor(displayElement) {
super(displayElement);
this.corpusId = displayElement.dataset.corpusId;
this.displayElement
.querySelector('.action-button[data-action="build-request"]')
.addEventListener('click', (event) => {
Utils.buildCorpusRequest(this.userId, this.corpusId);
});
this.displayElement
.querySelector('.action-button[data-action="delete-request"]')
.addEventListener('click', (event) => {
Utils.deleteCorpusRequest(this.userId, this.corpusId);
});
}
init(user) {
let corpus;
corpus = user.corpora[this.corpusId];
let corpus = user.corpora[this.corpusId];
this.setCreationDate(corpus.creation_date);
this.setDescription(corpus.description);
this.setLastEditedDate(corpus.last_edited_date);
@ -16,17 +24,20 @@ class CorpusDisplay extends RessourceDisplay {
this.setNumTokens(corpus.num_tokens);
}
usersPatchHandler(patch) {
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'replace':
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/last_edited_date$`);
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}$`);
if (re.test(operation.path)) {
window.location.href = '/dashboard#corpora';
}
break;
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/last_edited_date$`);
if (re.test(operation.path)) {
this.setLastEditedDate(operation.value);
break;
@ -42,8 +53,10 @@ class CorpusDisplay extends RessourceDisplay {
break;
}
break;
default:
}
default: {
break;
}
}
}
}
@ -55,7 +68,7 @@ class CorpusDisplay extends RessourceDisplay {
setNumTokens(numTokens) {
this.setElements(
this.displayElement.querySelectorAll('.corpus-token-ratio'),
`${numTokens}/${app.users[this.userId].corpora[this.corpusId].max_num_tokens}`
`${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
);
}
@ -64,31 +77,28 @@ class CorpusDisplay extends RessourceDisplay {
}
setStatus(status) {
let element;
let elements;
elements = this.displayElement.querySelectorAll('.corpus-analyse-trigger')
for (element of elements) {
let elements = this.displayElement.querySelectorAll('.corpus-analyse-trigger')
for (let element of elements) {
if (['BUILT', 'STARTING_ANALYSIS_SESSION', 'RUNNING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
elements = this.displayElement.querySelectorAll('.corpus-build-trigger');
for (element of elements) {
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.users[this.userId].corpora[this.corpusId].files).length > 0) {
elements = this.displayElement.querySelectorAll('.action-button[data-action="build-request"]');
for (let element of elements) {
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.data.users[this.userId].corpora[this.corpusId].files).length > 0) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
elements = this.displayElement.querySelectorAll('.corpus-status');
for (element of elements) {
for (let element of elements) {
element.dataset.corpusStatus = status;
}
elements = this.displayElement.querySelectorAll('.corpus-status-spinner');
for (element of elements) {
for (let element of elements) {
if (['SUBMITTED', 'QUEUED', 'BUILDING', 'STARTING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
element.classList.remove('hide');
} else {

75
app/static/js/RessourceDisplays/JobDisplay.js
View File

@ -2,12 +2,25 @@ class JobDisplay extends RessourceDisplay {
constructor(displayElement) {
super(displayElement);
this.jobId = this.displayElement.dataset.jobId;
this.displayElement
.querySelector('.action-button[data-action="delete-request"]')
.addEventListener('click', (event) => {
Utils.deleteJobRequest(this.userId, this.jobId);
});
this.displayElement
.querySelector('.action-button[data-action="get-log-request"]')
.addEventListener('click', (event) => {
Utils.getJobLogRequest(this.userId, this.jobId);
});
this.displayElement
.querySelector('.action-button[data-action="restart-request"]')
.addEventListener('click', (event) => {
Utils.restartJobRequest(this.userId, this.jobId);
});
}
init(user) {
let job;
job = user.jobs[this.jobId];
let job = user.jobs[this.jobId];
this.setCreationDate(job.creation_date);
this.setEndDate(job.creation_date);
this.setDescription(job.description);
@ -18,17 +31,20 @@ class JobDisplay extends RessourceDisplay {
this.setTitle(job.title);
}
usersPatchHandler(patch) {
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'replace':
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/end_date$`);
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}$`);
if (re.test(operation.path)) {
window.location.href = '/dashboard#jobs';
}
break;
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/end_date$`);
if (re.test(operation.path)) {
this.setEndDate(operation.value);
break;
@ -39,8 +55,10 @@ class JobDisplay extends RessourceDisplay {
break;
}
break;
default:
}
default: {
break;
}
}
}
}
@ -54,29 +72,42 @@ class JobDisplay extends RessourceDisplay {
}
setStatus(status) {
let element;
let elements;
elements = this.displayElement.querySelectorAll('.job-status');
for (element of elements) {
let elements = this.displayElement.querySelectorAll('.job-status');
for (let element of elements) {
element.dataset.jobStatus = status;
}
elements = this.displayElement.querySelectorAll('.job-status-spinner');
for (element of elements) {
for (let element of elements) {
if (['COMPLETED', 'FAILED'].includes(status)) {
element.classList.add('hide');
} else {
element.classList.remove('hide');
}
}
elements = this.displayElement.querySelectorAll('.job-restart-trigger');
for (element of elements) {
elements = this.displayElement.querySelectorAll('.job-log-trigger');
for (let element of elements) {
if (['COMPLETED', 'FAILED'].includes(status)) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
}
elements = this.displayElement.querySelectorAll('.action-button[data-action="get-log-request"]');
for (let element of elements) {
if (['COMPLETED', 'FAILED'].includes(status)) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
elements = this.displayElement.querySelectorAll('.action-button[data-action="restart-request"]');
for (let element of elements) {
if (status === 'FAILED') {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
}
setCreationDate(creationDate) {

28
app/static/js/RessourceDisplays/RessourceDisplay.js
View File

@ -2,30 +2,42 @@ class RessourceDisplay {
constructor(displayElement) {
this.displayElement = displayElement;
this.userId = this.displayElement.dataset.userId;
app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
app.getUserById(this.userId).then(user => this.init(user));
this.isInitialized = false;
if (this.userId) {
app.subscribeUser(this.userId)
.then((response) => {
app.socket.on('PATCH', (patch) => {
if (this.isInitialized) {this.onPatch(patch);}
});
});
app.getUser(this.userId)
.then((user) => {
this.init(user);
this.isInitialized = true;
});
}
}
init(user) {throw 'Not implemented';}
usersPatchHandler(patch) {throw 'Not implemented';}
onPatch(patch) {throw 'Not implemented';}
setElement(element, value) {
switch (element.tagName) {
case 'INPUT':
case 'INPUT': {
element.value = value;
M.updateTextFields();
break;
default:
}
default: {
element.innerText = value;
break;
}
}
}
setElements(elements, value) {
let element;
for (element of elements) {
for (let element of elements) {
this.setElement(element, value);
}
}

138
app/static/js/RessourceLists/CorpusFileList.js
View File

@ -1,19 +1,47 @@
class CorpusFileList extends RessourceList {
static autoInit() {
for (let corpusFileListElement of document.querySelectorAll('.corpus-file-list:not(.no-autoinit)')) {
new CorpusFileList(corpusFileListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search corpus file</label>
</div>
<table>
<thead>
<tr>
<th>Filename</th>
<th>Author</th>
<th>Title</th>
<th>Publishing year</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable">
<tr class="clickable hoverable">
<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 nopaque-service-color darken waves-effect waves-light" data-action="download" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">file_download</i></a>
<a class="action-button btn-floating tooltipped nopaque-service-color darken waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>
<a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
<a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: corpusFile => {
ressourceMapper: (corpusFile) => {
return {
'id': corpusFile.id,
'author': corpusFile.author,
@ -23,7 +51,7 @@ class CorpusFileList extends RessourceList {
'title': corpusFile.title
};
},
sortValueName: 'creation-date',
sortArgs: ['creation-date', {order: 'desc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -34,7 +62,6 @@ class CorpusFileList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...CorpusFileList.options, ...options});
this.corpusId = listElement.dataset.corpusId;
@ -44,92 +71,59 @@ class CorpusFileList extends RessourceList {
this._init(user.corpora[this.corpusId].files);
}
onclick(event) {
let action;
let actionButtonElement;
let corpusFileElement;
let corpusFileId;
let deleteModal;
let deleteModalElement;
let tmp;
corpusFileElement = event.target.closest('tr[data-id]');
if (corpusFileElement === null) {return;}
corpusFileId = corpusFileElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
let corpusFileElement = event.target.closest('tr');
let corpusFileId = corpusFileElement.dataset.id;
switch (action) {
case 'delete':
tmp = document.createElement('div');
tmp.innerHTML = `
<div class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the corpus file <b>${app.users[this.userId].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="/corpora/${this.corpusId}/files/${corpusFileId}/delete"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
`.trim();
deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
deleteModal = M.Modal.init(
deleteModalElement,
{
onCloseEnd: () => {
deleteModal.destroy();
deleteModalElement.remove();
}
}
);
deleteModal.open();
case 'delete': {
Utils.deleteCorpusFileRequest(this.userId, this.corpusId, corpusFileId);
break;
case 'download':
}
case 'download': {
window.location.href = `/corpora/${this.corpusId}/files/${corpusFileId}/download`;
break;
case 'view':
}
case 'view': {
window.location.href = `/corpora/${this.corpusId}/files/${corpusFileId}`;
break;
default:
}
default: {
break;
}
}
}
usersPatchHandler(patch) {
let corpusFileId;
let filteredPatch;
let match;
let operation;
let re;
let valueName;
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add':
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
this.add(operation.value);
}
case 'add': {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
case 'remove':
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
}
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
[match, corpusFileId] = operation.path.match(re);
let [match, corpusFileId] = operation.path.match(re);
this.remove(corpusFileId);
}
break;
case 'replace':
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)/(author|filename|publishing_year|title)$`);
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)/(author|filename|publishing_year|title)$`);
if (re.test(operation.path)) {
[match, corpusFileId, valueName] = operation.path.match(re);
let [match, corpusFileId, valueName] = operation.path.match(re);
this.replace(corpusFileId, valueName.replace('_', '-'), operation.value);
}
break;
default:
}
default: {
break;
}
}
}
}

130
app/static/js/RessourceLists/CorpusList.js
View File

@ -1,17 +1,44 @@
class CorpusList extends RessourceList {
static autoInit() {
for (let corpusListElement of document.querySelectorAll('.corpus-list:not(.no-autoinit)')) {
new CorpusList(corpusListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>Title and Description</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable">
<tr class="clickable hoverable">
<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="status badge new corpus-status-color corpus-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 nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>
<a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: corpus => {
ressourceMapper: (corpus) => {
return {
'id': corpus.id,
'creation-date': corpus.creation_date,
@ -20,7 +47,7 @@ class CorpusList extends RessourceList {
'title': corpus.title
};
},
sortValueName: 'creation-date',
sortArgs: ['creation-date', {order: 'desc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -30,96 +57,63 @@ class CorpusList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...CorpusList.options, ...options});
}
init(user) {
super._init(user.corpora);
this._init(user.corpora);
}
onclick(event) {
let action;
let actionButtonElement;
let corpusElement;
let corpusId;
let deleteModal;
let deleteModalElement;
let tmp;
corpusElement = event.target.closest('tr[data-id]');
if (corpusElement === null) {return;}
corpusId = corpusElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
let corpusElement = event.target.closest('tr');
let corpusId = corpusElement.dataset.id;
switch (action) {
case 'delete':
tmp = document.createElement('div');
tmp.innerHTML = `
<div class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the corpus <b>${app.users[this.userId].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="/corpora/${corpusId}/delete"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
`.trim();
deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
deleteModal = M.Modal.init(
deleteModalElement,
{
onCloseEnd: () => {
deleteModal.destroy();
deleteModalElement.remove();
}
}
);
deleteModal.open();
case 'delete-request': {
Utils.deleteCorpusRequest(this.userId, corpusId);
break;
case 'view':
}
case 'view': {
window.location.href = `/corpora/${corpusId}`;
break;
default:
}
default: {
break;
}
}
}
usersPatchHandler(patch) {
let corpusId;
let filteredPatch;
let match;
let operation;
let re;
let valueName;
re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add':
re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
case 'add': {
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
case 'remove':
re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
}
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
[match, corpusId] = operation.path.match(re);
let [match, corpusId] = operation.path.match(re);
this.remove(corpusId);
}
break;
case 'replace':
re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)/(status|description|title)$`);
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)/(status|description|title)$`);
if (re.test(operation.path)) {
[match, corpusId, valueName] = operation.path.match(re);
let [match, corpusId, valueName] = operation.path.match(re);
this.replace(corpusId, valueName, operation.value);
}
break;
default:
}
default: {
break;
}
}
}
}

59
app/static/js/RessourceLists/JobInputList.js
View File

@ -1,21 +1,46 @@
class JobInputList extends RessourceList {
static autoInit() {
for (let jobInputListElement of document.querySelectorAll('.job-input-list:not(.no-autoinit)')) {
new JobInputList(jobInputListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search job input</label>
</div>
<table>
<thead>
<tr>
<th>Filename</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable">
<tr class="clickable hoverable">
<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>
<a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: jobInput => {
ressourceMapper: (jobInput) => {
return {
'id': jobInput.id,
'creation-date': jobInput.creation_date,
'filename': jobInput.filename
};
},
sortValueName: 'creation-date',
sortArgs: ['filename', {order: 'asc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -23,7 +48,6 @@ class JobInputList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...JobInputList.options, ...options});
this.jobId = listElement.dataset.jobId;
@ -33,26 +57,21 @@ class JobInputList extends RessourceList {
this._init(user.jobs[this.jobId].inputs);
}
onclick(event) {
let jobInputElement;
let jobInputId;
let action;
let actionButtonElement;
jobInputElement = event.target.closest('tr[data-id]');
if (jobInputElement === null) {return;}
jobInputId = jobInputElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
if (actionButtonElement === null) {return;}
action = actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
let jobInputElement = event.target.closest('tr');
let jobInputId = jobInputElement.dataset.id;
switch (action) {
case 'download':
case 'download': {
window.location.href = `/jobs/${this.jobId}/inputs/${jobInputId}/download`;
break;
default:
}
default: {
break;
}
}
}
usersPatchHandler(patch) {return;}
onPatch(patch) {return;}
}

132
app/static/js/RessourceLists/JobList.js
View File

@ -1,17 +1,44 @@
class JobList extends RessourceList {
static autoInit() {
for (let jobListElement of document.querySelectorAll('.job-list:not(.no-autoinit)')) {
new JobList(jobListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search job</label>
</div>
<table>
<thead>
<tr>
<th>Service</th>
<th>Title and Description</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable service-color lighten">
<tr class="clickable hoverable service-color lighten">
<td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="status badge new job-status-color job-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="service-2 action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
<a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: job => {
ressourceMapper: (job) => {
return {
'id': job.id,
'creation-date': job.creation_date,
@ -23,7 +50,7 @@ class JobList extends RessourceList {
'title': job.title
};
},
sortValueName: 'creation-date',
sortArgs: ['creation-date', {order: 'desc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -36,7 +63,6 @@ class JobList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...JobList.options, ...options});
}
@ -45,89 +71,55 @@ class JobList extends RessourceList {
this._init(user.jobs);
}
onclick(event) {
let action;
let actionButtonElement;
let deleteModal;
let deleteModalElement;
let jobElement;
let jobId;
let tmp;
jobElement = event.target.closest('tr[data-id]');
if (jobElement === null) {return;}
jobId = jobElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
let jobElement = event.target.closest('tr');
let jobId = jobElement.dataset.id;
switch (action) {
case 'delete':
tmp = document.createElement('div');
tmp.innerHTML = `
<div class="modal">
<div class="modal-content">
<h4>Confirm job deletion</h4>
<p>Do you really want to delete the job <b>${app.users[this.userId].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="/jobs/${jobId}/delete"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
`.trim();
deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
deleteModal = M.Modal.init(
deleteModalElement,
{
onCloseEnd: () => {
deleteModal.destroy();
deleteModalElement.remove();
}
}
);
deleteModal.open();
case 'delete-request': {
Utils.deleteJobRequest(this.userId, jobId);
break;
case 'view':
}
case 'view': {
window.location.href = `/jobs/${jobId}`;
break;
default:
}
default: {
break;
}
}
}
usersPatchHandler(patch) {
let filteredPatch;
let jobId;
let match;
let operation;
let re;
let valueName;
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add':
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
this.add(operation.value);
}
case 'add': {
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
case 'remove':
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
}
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
[match, jobId] = operation.path.match(re);
let [match, jobId] = operation.path.match(re);
this.remove(jobId);
}
break;
case 'replace':
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
if (re.test(operation.path)) {
[match, jobId, valueName] = operation.path.match(re);
let [match, jobId, valueName] = operation.path.match(re);
this.replace(jobId, valueName, operation.value);
}
break;
default:
}
default: {
break;
}
}
}
}

82
app/static/js/RessourceLists/JobResultList.js
View File

@ -1,15 +1,41 @@
class JobResultList extends RessourceList {
static autoInit() {
for (let jobResultListElement of document.querySelectorAll('.job-result-list:not(.no-autoinit)')) {
new JobResultList(jobResultListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search job result</label>
</div>
<table>
<thead>
<tr>
<th>Description</th>
<th>Filename</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable">
<tr class="clickable hoverable">
<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>
<a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: jobResult => {
ressourceMapper: (jobResult) => {
return {
'id': jobResult.id,
'creation-date': jobResult.creation_date,
@ -17,7 +43,7 @@ class JobResultList extends RessourceList {
'filename': jobResult.filename
};
},
sortValueName: 'creation-date',
sortArgs: ['filename', {order: 'asc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -26,7 +52,6 @@ class JobResultList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...JobResultList.options, ...options});
this.jobId = listElement.dataset.jobId;
@ -36,44 +61,35 @@ class JobResultList extends RessourceList {
super._init(user.jobs[this.jobId].results);
}
onclick(event) {
let action;
let actionButtonElement;
let jobResultElement;
let jobResultId;
jobResultElement = event.target.closest('tr[data-id]');
if (jobResultElement === null) {return;}
jobResultId = jobResultElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
if (actionButtonElement === null) {return;}
action = actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
let jobResultElement = event.target.closest('tr');
let jobResultId = jobResultElement.dataset.id;
switch (action) {
case 'download':
case 'download': {
window.location.href = `/jobs/${this.jobId}/results/${jobResultId}/download`;
break;
default:
}
default: {
break;
}
}
}
usersPatchHandler(patch) {
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add':
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
this.add(operation.value);
}
case 'add': {
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
default:
}
default: {
break;
}
}
}
}

15
app/static/js/RessourceLists/QueryResultList.js
View File

@ -1,12 +1,18 @@
class QueryResultList extends RessourceList {
static autoInit() {
for (let queryResultListElement of document.querySelectorAll('.query-result-list:not(.no-autoinit)')) {
new QueryResultList(queryResultListElement);
}
}
static options = {
item: `
<tr class="hoverable">
<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>
<a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim(),
@ -20,7 +26,7 @@ class QueryResultList extends RessourceList {
'title': queryResult.title
};
},
sortValueName: 'creation-date',
sortArgs: ['creation-date', {order: 'desc'}],
valueNames: [
{data: ['id']},
{data: ['creation-date']},
@ -31,7 +37,6 @@ class QueryResultList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...QueryResultList.options, ...options});
}
@ -89,7 +94,7 @@ class QueryResultList extends RessourceList {
}
}
usersPatchHandler(patch) {
onPATCH(patch) {
let filteredPatch;
let match;
let operation;

107
app/static/js/RessourceLists/RessourceList.js
View File

@ -3,45 +3,22 @@ class RessourceList {
* This class is not meant to be used directly, instead it should be used as
* a base class for concrete ressource list implementations.
*/
static autoInit() {
const nopaqueRessourceListElements = document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)');
let nopaqueRessourceListElement;
for (nopaqueRessourceListElement of nopaqueRessourceListElements) {
switch (nopaqueRessourceListElement.dataset.ressourceType) {
case 'Corpus':
new CorpusList(nopaqueRessourceListElement);
break;
case 'CorpusFile':
new CorpusFileList(nopaqueRessourceListElement);
break;
case 'Job':
new JobList(nopaqueRessourceListElement);
break;
case 'JobInput':
new JobInputList(nopaqueRessourceListElement);
break;
case 'JobResult':
new JobResultList(nopaqueRessourceListElement);
break;
case 'QueryResult':
new QueryResultList(nopaqueRessourceListElement);
break;
case 'User':
new UserList(nopaqueRessourceListElement);
break;
default:
break;
}
}
static autoInit() {
CorpusList.autoInit();
CorpusFileList.autoInit();
JobList.autoInit();
JobInputList.autoInit();
JobResultList.autoInit();
QueryResultList.autoInit();
UserList.autoInit();
}
static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}};
constructor(listElement, options = {}) {
let i;
if (!(listElement.hasAttribute('id'))) {
let i;
for (i = 0; true; i++) {
if (document.querySelector(`#ressource-list-${i}`)) {continue;}
listElement.id = `ressource-list-${i}`;
@ -56,9 +33,14 @@ class RessourceList {
this.ressourceMapper = options.ressourceMapper;
delete options.ressourceMapper;
}
if ('sortValueName' in options) {
this.sortValueName = options.sortValueName;
delete options.sortValueName;
if ('initialHtmlGenerator' in options) {
this.initialHtmlGenerator = options.initialHtmlGenerator;
listElement.innerHTML = this.initialHtmlGenerator(listElement.id);
delete options.initialHtmlGenerator;
}
if ('sortArgs' in options) {
this.sortArgs = options.sortArgs;
delete options.sortArgs;
}
this.listjs = new List(listElement, {...RessourceList.options, ...options});
this.listjs.list.innerHTML = `
@ -87,47 +69,54 @@ class RessourceList {
</td>
</tr>
`.trim();
this.listjs.list.style.cursor = 'pointer';
this.userId = this.listjs.listContainer.dataset.userId;
this.listjs.list.addEventListener('click', event => this.onclick(event));
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
this.isInitialized = false;
if (this.userId) {
app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
app.getUserById(this.userId).then(
user => this.init(user),
error => {throw JSON.stringify(error);}
);
app.subscribeUser(this.userId)
.then((response) => {
app.socket.on('PATCH', (patch) => {
if (this.isInitialized) {this.onPatch(patch);}
});
});
app.getUser(this.userId)
.then((user) => {
this.init(user);
this.isInitialized = true;
});
}
}
_init(ressources) {
this.listjs.clear();
this.add(Object.values(ressources));
let emptyListElementHTML = `
<tr class="show-if-only-child">
<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>
`.trim();
this.listjs.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
this.listjs.list.insertAdjacentHTML(
'afterbegin',
`
<tr class="show-if-only-child">
<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>
`.trim()
);
}
init(user) {throw 'Not implemented';}
onclick(event) {throw 'Not implemented';}
onClick(event) {throw 'Not implemented';}
usersPatchHandler(patch) {throw 'Not implemented';}
onPatch(patch) {throw 'Not implemented';}
add(ressources) {
let values = Array.isArray(ressources) ? ressources : [ressources];
if ('ressourceMapper' in this) {
values = values.map(value => this.ressourceMapper(value));
values = values.map((value) => {return this.ressourceMapper(value);});
}
this.listjs.add(values, () => {
if ('sortValueName' in this) {
this.listjs.sort(this.sortValueName, {order: 'desc'});
if ('sortArgs' in this) {
this.listjs.sort(...this.sortArgs);
}
});
}
@ -137,6 +126,6 @@ class RessourceList {
}
replace(id, valueName, newValue) {
this.listjs.get('id', id)[0].values({[valueName]: newValue});
this.listjs.get('id', id)[0].values({[valueName]: newValue});
}
}

102
app/static/js/RessourceLists/UserList.js
View File

@ -1,31 +1,60 @@
class UserList extends RessourceList {
static autoInit() {
for (let userListElement of document.querySelectorAll('.user-list:not(.no-autoinit)')) {
new UserList(userListElement);
}
}
static options = {
initialHtmlGenerator: (id) => {
return `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${id}-search" class="search" type="search"></input>
<label for="${id}-search">Search user</label>
</div>
<table>
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Email</th>
<th>Last seen</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
},
item: `
<tr class="hoverable">
<tr class="clickable hoverable">
<td><span class="id-1"></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>
<a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating waves-effect waves-light" data-action="edit"><i class="material-icons">edit</i></a>
<a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim(),
ressourceMapper: user => {
ressourceMapper: (user) => {
return {
'id': user.id,
'id-1': user.id,
'username': user.username,
'email': user.email,
'last-seen': new Date(user.last_seen).toLocaleString("en-US"),
'last-seen': new Date(user.last_seen).toLocaleString('en-US'),
'member-since': user.member_since,
'role': user.role.name
};
},
sortValueName: 'member-since',
sortArgs: ['member-since', {order: 'desc'}],
valueNames: [
{data: ['id']},
{data: ['member-since']},
@ -37,8 +66,6 @@ class UserList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...UserList.options, ...options});
}
@ -47,55 +74,28 @@ class UserList extends RessourceList {
super._init(Object.values(users));
}
onclick(event) {
let action;
let actionButtonElement;
let deleteModal;
let deleteModalElement;
let tmp;
let userElement;
let userId;
userElement = event.target.closest('tr[data-id]');
if (userElement === null) {return;}
userId = userElement.dataset.id;
actionButtonElement = event.target.closest('.action-button[data-action]');
action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
onClick(event) {
let actionButtonElement = event.target.closest('.action-button');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
let userElement = event.target.closest('tr');
let userId = userElement.dataset.id;
switch (action) {
case 'delete':
tmp = document.createElement('div');
tmp.innerHTML = `
<div class="modal">
<div class="modal-content">
<h4>Confirm user deletion</h4>
<p>Do you really want to delete user <b>${userId}</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>
`.trim();
deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
deleteModal = M.Modal.init(
deleteModalElement,
{
onCloseEnd: () => {
deleteModal.destroy();
deleteModalElement.remove();
}
}
);
deleteModal.open();
case 'delete': {
Utils.deleteUserRequest(userId);
if (userId === currentUserId) {window.location.href = '/';}
break;
case 'edit':
}
case 'edit': {
window.location.href = `/admin/users/${userId}/edit`;
break;
case 'view':
}
case 'view': {
window.location.href = `/admin/users/${userId}`;
break;
default:
}
default: {
break;
}
}
}
}

125
app/static/js/UploadForm.js
View File

@ -1,125 +0,0 @@
class UploadForm {
static autoInit() {
const nopaqueSubmitForms = document.querySelectorAll('.nopaque-upload-form');
let nopaqueSubmitForm;
for (nopaqueSubmitForm of nopaqueSubmitForms) {
new UploadForm(nopaqueSubmitForm);
}
}
constructor(formElement) {
this.formElement = formElement;
this.request = new XMLHttpRequest();
this.formElement.addEventListener('submit', (event) => {
event.preventDefault();
this.submit();
});
}
submit() {
const selectElements = this.formElement.querySelectorAll('select');
let abortElement;
let helperTextElement;
let helperTextElements;
let inputFieldElement;
let modal;
let modalElement;
let progressElement;
let selectElement;
let tmp;
// Check if select elements are filled out properly
for (selectElement of selectElements) {
if (selectElement.value === '') {
inputFieldElement = selectElement.closest('.input-field');
inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
helperTextElements = inputFieldElement.querySelectorAll('.helper-text');
for (helperTextElement of helperTextElements) {
helperTextElement.remove();
}
inputFieldElement.insertAdjacentHTML(
'beforeend',
'<span class="helper-text error-color-text">Please select an option.</span>'
);
return;
}
}
// Setup modal
tmp = document.createElement('div');
tmp.innerHTML = `
<div class="modal">
<div class="modal-content">
<h4><i class="material-icons left">file_upload</i>Uploading files...</h4>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="btn red waves-effect waves-light abort">Cancel</a>
</div>
</div>
`.trim();
modalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
modal = M.Modal.init(
modalElement,
{
dismissible: false,
onCloseEnd: () => {
modal.destroy();
modalElement.remove();
}
}
);
modal.open();
// Setup abort handling
abortElement = modalElement.querySelector('.abort');
abortElement.addEventListener('click', event => {this.request.abort();});
this.request.addEventListener('abort', event => {
this.request.abort();
modal.close();
});
// Setup load handling (after the request completed)
this.request.addEventListener('load', event => {
const response = JSON.parse(this.request.responseText);
let inputError;
let inputErrors;
let inputFieldElement;
let inputName;
if (this.request.status === 201) {
window.location.href = response.redirect_url;
}
if (this.request.status === 400) {
for ([inputName, inputErrors] of Object.entries(response)) {
inputFieldElement = this.formElement.querySelector(`input[name="${inputName}"], select[name="${inputName}"]`).closest('.input-field');
for (inputError of inputErrors) {
inputFieldElement.insertAdjacentHTML(
'beforeend',
`<span class="helper-text red-text">${inputError}</span>`
);
}
}
}
if (this.request.status === 500) {
location.reload();
}
modal.close();
});
// Setup progress handling
progressElement = modalElement.querySelector('.progress > .determinate');
this.request.upload.addEventListener('progress', event => {
const progress = Math.floor(100 * event.loaded / event.total);
progressElement.style.width = `${progress}%`;
});
this.request.open('POST', window.location.href);
this.request.send(new FormData(this.formElement));
}
}

326
app/static/js/Utils.js Normal file
View File

@ -0,0 +1,326 @@
class Utils {
static elementFromString(string) {
let tmpElement = document.createElement('div');
tmpElement.innerHTML = string.trim();
return tmpElement.firstChild;
}
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) => {
app.flash(`Corpus "${corpus.title}" marked for building`, 'corpus');
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', 'error');}
if (response.status === 409) {app.flash('Conflict', '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 job deletion</h4>
<p>Do you really want to delete the job <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) => {
app.flash(`Corpus "${corpusTitle}" marked for deletion`, 'corpus');
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', '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 job deletion</h4>
<p>Do you really want to delete the job <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) => {
app.flash(`Corpus file "${corpusFileTitle}" marked for deletion`, 'corpus');
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', '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) => {
app.flash(`Job "${jobTitle}" marked for deletion`, 'job');
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', '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) => {
resolve(response);
return response.text();
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', '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();
}
);
});
}
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 log and result 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">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) => {
app.flash(`Job "${jobTitle}" restarted.`, 'job');
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', 'error');}
if (response.status === 409) {app.flash('Conflict', '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 job 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) => {
app.flash(`User "${userName}" marked for deletion`);
resolve(response);
},
(response) => {
if (response.status === 403) {app.flash('Forbidden', 'error');}
if (response.status === 404) {app.flash('Not Found', 'error');}
reject(response);
}
);
});
modal.open();
});
}
}