mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-16 01:35:41 +00:00
421 lines
16 KiB
JavaScript
421 lines
16 KiB
JavaScript
|
class RessourceList extends List {
|
||
|
|
constructor(idOrElement, subscriberList, type, options) {
|
||
|
|
if (!type || !["Corpus", "CorpusFile", "Job", "JobInput", "QueryResult", "User"].includes(type)) {
|
||
|
|
throw "Unknown Type!";
|
||
|
|
}
|
||
|
|
super(idOrElement, {...RessourceList.options['common'],
|
||
|
|
...RessourceList.options[type],
|
||
|
|
...(options ? options : {})});
|
||
|
|
if (subscriberList) {subscriberList.push(this);}
|
||
|
|
this.type = type;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
_init(ressources) {
|
||
|
|
this.clear();
|
||
|
|
this._add(Object.values(ressources));
|
||
|
|
this.sort("id", {order: "desc"});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
_update(patch) {
|
||
|
|
let item, pathArray;
|
||
|
|
|
||
|
|
for (let operation of patch) {
|
||
|
|
/* "/{ressourceName}/{ressourceId}/..." -> ["{ressourceId}", "..."] */
|
||
|
|
pathArray = operation.path.split("/").slice(2);
|
||
|
|
switch(operation.op) {
|
||
|
|
case "add":
|
||
|
|
if (pathArray.includes("results")) {break;}
|
||
|
|
this._add([operation.value]);
|
||
|
|
break;
|
||
|
|
case "remove":
|
||
|
|
this.remove("id", pathArray[0]);
|
||
|
|
break;
|
||
|
|
case "replace":
|
||
|
|
item = this.get("id", pathArray[0])[0];
|
||
|
|
switch(pathArray[1]) {
|
||
|
|
case "status":
|
||
|
|
item.values({status: operation.value,
|
||
|
|
"analyse-link": ["analysing", "prepared", "start analysis"].includes(operation.value) ? `/corpora/${pathArray[0]}/analyse` : ""});
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_add(values, callback) {
|
||
|
|
this.add(values.map(x => RessourceList.dataMappers[this.type](x)), callback);
|
||
|
|
// Initialize modal and tooltipped elements in list
|
||
|
|
M.AutoInit(this.listContainer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
RessourceList.dataMappers = {
|
||
|
|
// A data mapper describes entitys rendered per row. One key value pair holds
|
||
|
|
// the data to be rendered in the list.js table. Key has to correspond
|
||
|
|
// with the ValueNames defined below in RessourceList.options ValueNames.
|
||
|
|
// Links are declared with double ticks(") around them. The key for links
|
||
|
|
// have to correspond with the class of an <a> element in the
|
||
|
|
// RessourceList.options item blueprint.
|
||
|
|
|
||
|
|
/* ### Corpus mapper ### */
|
||
|
|
Corpus: corpus => ({
|
||
|
|
creation_date: corpus.creation_date,
|
||
|
|
description: corpus.description,
|
||
|
|
id: corpus.id,
|
||
|
|
link: `/corpora/${corpus.id}`,
|
||
|
|
status: corpus.status,
|
||
|
|
title: corpus.title,
|
||
|
|
title1: corpus.title,
|
||
|
|
"analyse-link": ["analysing", "prepared", "start analysis"].includes(corpus.status) ? `/corpora/${corpus.id}/analyse` : "",
|
||
|
|
"delete-link": `/corpora/${corpus.id}/delete`,
|
||
|
|
"delete-modal": `delete-corpus-${corpus.id}-modal`,
|
||
|
|
"delete-modal-trigger": `delete-corpus-${corpus.id}-modal`,
|
||
|
|
}),
|
||
|
|
/* ### CorpusFile mapper ### TODO: replace delete-modal with delete-onclick */
|
||
|
|
CorpusFile: corpus_file => ({
|
||
|
|
author: corpus_file.author,
|
||
|
|
filename: corpus_file.filename,
|
||
|
|
id: corpus_file.id,
|
||
|
|
link: `${corpus_file.corpus_id}/files/${corpus_file.id}`,
|
||
|
|
"publishing-year": corpus_file.publishing_year,
|
||
|
|
title: corpus_file.title,
|
||
|
|
title1: corpus_file.title,
|
||
|
|
"delete-link": `/corpora/${corpus_file.corpus_id}/files/${corpus_file.id}/delete`,
|
||
|
|
"delete-modal": `delete-corpus-file-${corpus_file.id}-modal`,
|
||
|
|
"delete-modal-trigger": `delete-corpus-file-${corpus_file.id}-modal`,
|
||
|
|
"download-link": `${corpus_file.corpus_id}/files/${corpus_file.id}/download`,
|
||
|
|
}),
|
||
|
|
/* ### Job mapper ### */
|
||
|
|
Job: job => ({
|
||
|
|
creation_date: job.creation_date,
|
||
|
|
description: job.description,
|
||
|
|
id: job.id,
|
||
|
|
link: `/jobs/${job.id}`,
|
||
|
|
service: job.service.name,
|
||
|
|
status: job.status,
|
||
|
|
title: job.title,
|
||
|
|
title1: job.title,
|
||
|
|
"delete-link": `/jobs/${job.id}/delete`,
|
||
|
|
"delete-modal": `delete-job-${job.id}-modal`,
|
||
|
|
"delete-modal-trigger": `delete-job-${job.id}-modal`,
|
||
|
|
}),
|
||
|
|
/* ### JobInput mapper ### */
|
||
|
|
JobInput: job_input => ({
|
||
|
|
filename: job_input.filename,
|
||
|
|
id: job_input.job_id,
|
||
|
|
"download-link": `${job_input.job_id}/inputs/${job_input.id}/download`
|
||
|
|
}),
|
||
|
|
/* ### QueryResult mapper ### */
|
||
|
|
QueryResult: query_result => ({
|
||
|
|
corpus_name: query_result.query_metadata.corpus_name,
|
||
|
|
description: query_result.description,
|
||
|
|
id: query_result.id,
|
||
|
|
link: `/corpora/result/${query_result.id}`,
|
||
|
|
query: query_result.query_metadata.query,
|
||
|
|
title: query_result.title,
|
||
|
|
"delete-link": `/corpora/result/${query_result.id}/delete`,
|
||
|
|
"delete-modal": `delete-query-result-${query_result.id}-modal`,
|
||
|
|
"delete-modal-trigger": `delete-query-result-${query_result.id}-modal`,
|
||
|
|
"inspect-link": `/corpora/result/${query_result.id}/inspect`,
|
||
|
|
}),
|
||
|
|
/* ### User mapper ### */
|
||
|
|
User: user => ({
|
||
|
|
confirmed: user.confirmed,
|
||
|
|
email: user.email,
|
||
|
|
id: user.id,
|
||
|
|
link: `users/${user.id}`,
|
||
|
|
role: user.role.name,
|
||
|
|
username: user.username,
|
||
|
|
username2: user.username,
|
||
|
|
"delete-link": `/admin/users/${user.id}/delete`,
|
||
|
|
"delete-modal": `delete-user-${user.id}-modal`,
|
||
|
|
"delete-modal-trigger": `delete-user-${user.id}-modal`,
|
||
|
|
}),
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
RessourceList.options = {
|
||
|
|
// common list.js options for 5 rows per page etc.
|
||
|
|
common: {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]},
|
||
|
|
// extended list.js options for 10 rows per page etc.
|
||
|
|
extended: {
|
||
|
|
page: 10,
|
||
|
|
pagination: [
|
||
|
|
{
|
||
|
|
name: "paginationTop",
|
||
|
|
paginationClass: "paginationTop",
|
||
|
|
innerWindow: 8,
|
||
|
|
outerWindow: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
paginationClass: "paginationBottom",
|
||
|
|
innerWindow: 8,
|
||
|
|
outerWindow: 1,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
/* Type specific List.js options. Usually only "item" and "valueNames" gets
|
||
|
|
* defined here but it is possible to define other List.js options.
|
||
|
|
* item: https://listjs.com/api/#item
|
||
|
|
* valueNames: https://listjs.com/api/#valueNames
|
||
|
|
*/
|
||
|
|
Corpus: {
|
||
|
|
item: `<tr>
|
||
|
|
<td>
|
||
|
|
<a class="btn-floating disabled">
|
||
|
|
<i class="material-icons service">book</i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<b class="title"></b><br>
|
||
|
|
<i class="description"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="badge new status" data-badge-caption=""></span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="right-align">
|
||
|
|
<a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
|
||
|
|
<i class="material-icons">delete</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Edit">
|
||
|
|
<i class="material-icons">edit</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light analyse-link" data-position="top" data-tooltip="Analyse">
|
||
|
|
<i class="material-icons">search</i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="modal delete-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h4>Confirm corpus deletion</h4>
|
||
|
|
<p>Do you really want to delete the corpus <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"creation_date",
|
||
|
|
"description",
|
||
|
|
"title",
|
||
|
|
"title1",
|
||
|
|
{data: ["id"]},
|
||
|
|
{name: "analyse-link", attr: "href"},
|
||
|
|
{name: "delete-link", attr: "href"},
|
||
|
|
{name: "delete-modal-trigger", attr: "data-target"},
|
||
|
|
{name: "delete-modal", attr: "id"},
|
||
|
|
{name: "link", attr: "href"},
|
||
|
|
{name: "status", attr: "data-status"},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
CorpusFile: {
|
||
|
|
item: `<tr>
|
||
|
|
<td class="filename" style="word-break: break-word;"></td>
|
||
|
|
<td class="author" style="word-break: break-word;"></td>
|
||
|
|
<td class="title" style="word-break: break-word;"></td>
|
||
|
|
<td class="publishing-year" style="word-break: break-word;"></td>
|
||
|
|
<td>
|
||
|
|
<div class="right-align">
|
||
|
|
<a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
|
||
|
|
<i class="material-icons">delete</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download">
|
||
|
|
<i class="material-icons">file_download</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Edit">
|
||
|
|
<i class="material-icons">edit</i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="modal delete-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h4>Confirm corpus file deletion</h4>
|
||
|
|
<p>Do you really want to delete the corpus file <b class="title1"></b>? It 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 delete-link"><i class="material-icons left">delete</i>Delete</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"author",
|
||
|
|
"filename",
|
||
|
|
"publishing-year",
|
||
|
|
"title",
|
||
|
|
"title1",
|
||
|
|
{data: ["id"]},
|
||
|
|
{name: "delete-link", attr: "href"},
|
||
|
|
{name: "delete-modal-trigger", attr: "data-target"},
|
||
|
|
{name: "delete-modal", attr: "id"},
|
||
|
|
{name: "download-link", attr: "href"},
|
||
|
|
{name: "link", attr: "href"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
Job: {
|
||
|
|
item: `<tr>
|
||
|
|
<td>
|
||
|
|
<a class="btn-floating disabled">
|
||
|
|
<i class="material-icons service"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<b class="title"></b><br>
|
||
|
|
<i class="description"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="badge new status" data-badge-caption=""></span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="right-align">
|
||
|
|
<a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
|
||
|
|
<i class="material-icons">delete</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Go to job">
|
||
|
|
<i class="material-icons">send</i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="modal delete-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h4>Confirm job deletion</h4>
|
||
|
|
<p>Do you really want to delete the job <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"creation_date",
|
||
|
|
"description",
|
||
|
|
"title",
|
||
|
|
"title1",
|
||
|
|
{data: ["id"]},
|
||
|
|
{name: "delete-link", attr: "href"},
|
||
|
|
{name: "delete-modal-trigger", attr: "data-target"},
|
||
|
|
{name: "delete-modal", attr: "id"},
|
||
|
|
{name: "link", attr: "href"},
|
||
|
|
{name: "service", attr: "data-service"},
|
||
|
|
{name: "status", attr: "data-status"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
JobInput: {
|
||
|
|
item : `<tr>
|
||
|
|
<td class="filename"></td>
|
||
|
|
<td class="right-align">
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download">
|
||
|
|
<i class="material-icons">file_download</i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"filename",
|
||
|
|
"id",
|
||
|
|
{name: "download-link", attr: "href"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
QueryResult: {
|
||
|
|
item: `<tr>
|
||
|
|
<td>
|
||
|
|
<b class="title"></b><br>
|
||
|
|
<i class="description"></i><br>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="corpus_name"></span><br>
|
||
|
|
<span class="query"></span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="right-align">
|
||
|
|
<a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
|
||
|
|
<i class="material-icons">delete</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Info">
|
||
|
|
<i class="material-icons">info</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light inspect-link" data-position="top" data-tooltip="Analyse">
|
||
|
|
<i class="material-icons">search</i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="modal delete-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h4>Confirm query result deletion</h4>
|
||
|
|
<p>Do you really want to delete the query result <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"corpus_name",
|
||
|
|
"description",
|
||
|
|
"query",
|
||
|
|
"title",
|
||
|
|
"title2",
|
||
|
|
{data: ["id"]},
|
||
|
|
{name: "delete-link", attr: "href"},
|
||
|
|
{name: "delete-modal-trigger", attr: "data-target"},
|
||
|
|
{name: "delete-modal", attr: "id"},
|
||
|
|
{name: "inspect-link", attr: "href"},
|
||
|
|
{name: "link", attr: "href"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
User: {
|
||
|
|
item: `<tr>
|
||
|
|
<td class="id"></td>
|
||
|
|
<td class="username"></td>
|
||
|
|
<td class="email"></td>
|
||
|
|
<td class="role"></td>
|
||
|
|
<td>
|
||
|
|
<div class="right-align">
|
||
|
|
<a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
|
||
|
|
<i class="material-icons">delete</i>
|
||
|
|
</a>
|
||
|
|
<a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Go to user">
|
||
|
|
<i class="material-icons">send</i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="modal delete-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h4>Confirm corpus deletion</h4>
|
||
|
|
<p>Do you really want to delete the job <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>`,
|
||
|
|
valueNames: [
|
||
|
|
"username",
|
||
|
|
"username2",
|
||
|
|
"email",
|
||
|
|
"role",
|
||
|
|
"id",
|
||
|
|
{name: "link", attr: "href"},
|
||
|
|
{name: "delete-link", attr: "href"},
|
||
|
|
{name: "delete-modal-trigger", attr: "data-target"},
|
||
|
|
{name: "delete-modal", attr: "id"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export { RessourceList, };
|