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

Restructure project

Browse Source
This commit is contained in:
Patrick Jentsch
2022-09-02 13:07:30 +02:00
parent ec9225b881
commit 8e1d94bb5d
73 changed files with 2105 additions and 2468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
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,94 +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.data.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;
}
}
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
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;
}
}
}
}

132
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,98 +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.data.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;
}
}
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
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;
}
}
}
onPATCH(patch) {return;}
onPatch(patch) {return;}
}

133
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']},
@ -44,91 +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.data.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;
}
}
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
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;
}
}
}
}

84
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,46 +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;
}
}
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
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;
}
}
}
}

13
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});
}

108
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,50 +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.subscribeUser(this.userId).then((response) => {
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
});
app.getUser(this.userId).then((user) => {
this.init(user);
this.isInitialized = true;
});
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';}
onPATCH(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);
}
});
}
@ -140,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});
}
}

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

@ -1,20 +1,49 @@
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,
@ -25,7 +54,7 @@ class UserList extends RessourceList {
'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;
}
}
}
}