Change RessourceList

This commit is contained in:
Patrick Jentsch 2020-02-12 12:19:54 +01:00
parent a28726994c
commit 611bb6ef62
5 changed files with 109 additions and 120 deletions

View File

@ -1,7 +1,13 @@
class RessourceList extends List { class RessourceList extends List {
constructor(idOrElement, subscriberList, dataMapper=null, options={}) { constructor(idOrElement, subscriberList, type, options={}) {
super(idOrElement, {...RessourceList.options, ...options}); if (!['corpus', 'job'].includes(type)) {
this.dataMapper = dataMapper; console.error("Unknown Type!");
return;
}
super(idOrElement, {...RessourceList.options['common'],
...RessourceList.options[type],
...options});
this.type = type;
subscriberList.push(this); subscriberList.push(this);
} }
@ -43,19 +49,15 @@ class RessourceList extends List {
addRessources(ressources) { addRessources(ressources) {
if (this.dataMapper) { this.add(ressources.map(x => RessourceList.dataMapper[this.type](x)));
this.add(ressources.map(x => this.dataMapper(x)));
} else {
this.add(ressources);
}
} }
} }
RessourceList.dataMapper = { RessourceList.dataMapper = {
corpus: corpus => ({creation_date: corpus.creation_date, corpus: corpus => ({creation_date: corpus.creation_date,
description: corpus.description, description: corpus.description,
id: corpus.id, id: corpus.id,
link: `/corpora/${corpus.id}`, "analyse-link": `/corpora/${corpus.id}/analyse`,
service: "corpus", "edit-link": `/corpora/${corpus.id}`,
status: corpus.status, status: corpus.status,
title: corpus.title}), title: corpus.title}),
job: job => ({creation_date: job.creation_date, job: job => ({creation_date: job.creation_date,
@ -67,32 +69,53 @@ RessourceList.dataMapper = {
title: job.title}) title: job.title})
}; };
RessourceList.options = { RessourceList.options = {
item: `<tr> common: {page: 4, pagination: {innerWindow: 8, outerWindow: 1}},
<td> corpus: {item: `<tr>
<a class="btn-floating disabled"> <td>
<i class="material-icons service"></i> <a class="btn-floating disabled">
</a> <i class="material-icons service">book</i>
</td> </a>
<td> </td>
<b class="title"></b><br> <td>
<i class="description"></i> <b class="title"></b><br>
</td> <i class="description"></i>
<td> </td>
<span class="badge new status" data-badge-caption=""></span> <td>
</td> <span class="badge new status" data-badge-caption=""></span>
<td class="right-align"> </td>
<a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i> <td class="right-align">
</td> <a class="btn-small edit-link waves-effect waves-light"><i class="material-icons">edit</i></a>
</tr>`, <a class="btn-small analyse-link waves-effect waves-light">Analyse<i class="material-icons right">search</i></a>
page: 4, </td>
pagination: {innerWindow: 8, outerWindow: 1}, </tr>`,
valueNames: ["creation_date", valueNames: ["creation_date", "description", "title",
"description", {data: ["id"]},
"title", {name: "analyse-link", attr: "href"},
{data: ["id"]}, {name: "edit-link", attr: "href"},
{name: "link", attr: "href"}, {name: "status", attr: "data-status"}]},
{name: "service", attr: "data-service"}, job: {item: `<tr>
{name: "status", attr: "data-status"}]}; <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 class="right-align">
<a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i></a>
</td>
</tr>`,
valueNames: ["creation_date", "description", "title",
{data: ["id"]},
{name: "link", attr: "href"},
{name: "service", attr: "data-service"},
{name: "status", attr: "data-status"}]}
};
class ResultList extends List { class ResultList extends List {

View File

@ -103,8 +103,9 @@
<script> <script>
var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, RessourceList.dataMapper.corpus); var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, "corpus");
var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers, RessourceList.dataMapper.job); var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers,
"job");
nopaque.socket.emit("foreign_user_ressources_init", {{ user.id }}); nopaque.socket.emit("foreign_user_ressources_init", {{ user.id }});
</script> </script>
{% endblock %} {% endblock %}

View File

@ -73,85 +73,50 @@
<a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a> <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
</div> </div>
</div> </div>
</div>
<div class="col s12"> <ul class="collapsible popout">
<h4>Input and result files</h4> <li>
</div> <div class="collapsible-header"><i class="material-icons">done</i>Result files</div>
<div class="collapsible-body">
<div class="col s12 m7"> <table class="highlight responsive-table">
<div class="card"> <thead>
<div class="card-content"> <tr>
<span class="card-title">Filewise</span> <th>Bundlename</th>
<table class="highlight responsive-table"> <th>Download</th>
<thead> </tr>
<tr> </thead>
<th>Filename</th> <tbody id="results"></tbody>
<th>Download</th> </table>
</tr> </div>
</thead> </li>
<tbody id="inputs"> <li>
{% for input in job.inputs %} <div class="collapsible-header">
<tr> <i class="material-icons">input</i>Input files
<td id="input-{{ input.id }}-filename">{{ input.filename }}</td> </div>
<td id="input-{{ input.id }}-download"> <div class="collapsible-body">
<a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}"> <table class="highlight responsive-table">
<i class="material-icons">file_download</i> <thead>
</a> <tr>
</td> <th>Filename</th>
</tr> <th>Download</th>
{% endfor %} </tr>
</tbody> </thead>
</table> <tbody id="inputs">
</div> {% for input in job.inputs %}
</div> <tr>
</div> <td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
<td id="input-{{ input.id }}-download">
<div class="col s12 m5"> <a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
<div class="card"> <i class="material-icons">file_download</i>
<div class="card-content"> </a>
<span class="card-title">Bundled</span> </td>
<table class="highlight responsive-table"> </tr>
<thead> {% endfor %}
<tr> </tbody>
<th>Bundlename</th> </table>
<th>Download</th> </div>
</tr> </li>
</thead> </ul>
<tbody id="results"></tbody>
</table>
</div>
</div>
</div>
<div class="col s12 hide">
<div class="card">
<div class="card-content">
<span class="card-title">Files</span>
<table class="highlight responsive-table">
<thead>
<tr>
<th>Filename</th>
<th>Download</th>
</tr>
</thead>
<tbody>
{% for input in job.inputs %}
<tr>
<td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
<td id="input-{{ input.id }}-download">
<a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
<i class="material-icons">file_download</i>
</a>
</td>
<td id="input-{{ input.id }}-results"></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div> </div>

View File

@ -89,7 +89,8 @@
</div> </div>
<script> <script>
var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, RessourceList.dataMapper.corpus); var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, RessourceList.dataMapper.job); "corpus");
var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "job");
</script> </script>
{% endblock %} {% endblock %}

View File

@ -38,7 +38,6 @@
<script> <script>
var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
RessourceList.dataMapper.corpus, "corpus", {page: 10});
{page: 10});
</script> </script>
{% endblock %} {% endblock %}