From 962e58f2d34782f4eded43d9b6730e807ca066dc Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 2 Dec 2021 11:16:06 +0100
Subject: [PATCH] Enable auto initialization for ressource lists
---
.../nopaque/RessourceLists/CorpusFileList.js | 1 -
.../nopaque/RessourceLists/QueryResultList.js | 2 +-
.../nopaque/RessourceLists/RessourceList.js | 29 ++++++++++++-------
app/templates/_scripts.html.j2 | 29 ++++++++++++++++++-
app/templates/admin/user.html.j2 | 14 ++-------
app/templates/admin/users.html.j2 | 6 ++--
app/templates/corpora/corpus.html.j2 | 3 +-
app/templates/jobs/job.html.j2 | 6 ++--
app/templates/main/dashboard.html.j2 | 21 ++++----------
9 files changed, 63 insertions(+), 48 deletions(-)
diff --git a/app/static/js/nopaque/RessourceLists/CorpusFileList.js b/app/static/js/nopaque/RessourceLists/CorpusFileList.js
index ed6a4b49..e49ee8fa 100644
--- a/app/static/js/nopaque/RessourceLists/CorpusFileList.js
+++ b/app/static/js/nopaque/RessourceLists/CorpusFileList.js
@@ -5,7 +5,6 @@ class CorpusFileList extends RessourceList {
}
init(user) {
- console.log(user);
this._init(user.corpora[this.corpusId].files);
}
diff --git a/app/static/js/nopaque/RessourceLists/QueryResultList.js b/app/static/js/nopaque/RessourceLists/QueryResultList.js
index 832a482d..302967aa 100644
--- a/app/static/js/nopaque/RessourceLists/QueryResultList.js
+++ b/app/static/js/nopaque/RessourceLists/QueryResultList.js
@@ -4,7 +4,7 @@ class QueryResultList extends RessourceList {
}
init(user) {
- super.init(user.query_results);
+ super._init(user.query_results);
}
onclick(event) {
diff --git a/app/static/js/nopaque/RessourceLists/RessourceList.js b/app/static/js/nopaque/RessourceLists/RessourceList.js
index 81b9133d..442f25c9 100644
--- a/app/static/js/nopaque/RessourceLists/RessourceList.js
+++ b/app/static/js/nopaque/RessourceLists/RessourceList.js
@@ -4,8 +4,17 @@ class RessourceList {
* a base class for concrete ressource list implementations.
*/
constructor(listElement, options = {}) {
- this.list = new List(listElement, {...RessourceList.options, ...options});
- this.list.list.innerHTML = `
+ let i;
+
+ if (!(listElement.hasAttribute('id'))) {
+ for (i = 0; true; i++) {
+ if (document.querySelector(`ressource-list-${i}`)) {continue;}
+ listElement.id = `ressource-list-${i}`;
+ break;
+ }
+ }
+ this.listjs = new List(listElement, {...RessourceList.options, ...options});
+ this.listjs.list.innerHTML = `
<tr>
<td class="row" colspan="100%">
<div class="col s12"> </div>
@@ -31,9 +40,9 @@ class RessourceList {
</td>
</tr>
`.trim();
- this.list.list.style.cursor = 'pointer';
+ this.listjs.list.style.cursor = 'pointer';
this.userId = listElement.dataset.userId;
- if (typeof this.onclick === 'function') {this.list.list.addEventListener('click', event => this.onclick(event));}
+ if (typeof this.onclick === 'function') {this.listjs.list.addEventListener('click', event => this.onclick(event));}
if (this.userId) {
app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
app.getUserById(this.userId).then(
@@ -44,7 +53,7 @@ class RessourceList {
}
_init(ressources) {
- this.list.clear();
+ this.listjs.clear();
this.add(Object.values(ressources));
let emptyListElementHTML = `
<tr class="show-if-only-child">
@@ -54,7 +63,7 @@ class RessourceList {
</td>
</tr>
`.trim();
- this.list.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
+ this.listjs.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
}
init(user) {throw 'Not implemented';}
@@ -66,17 +75,17 @@ class RessourceList {
add(values) {
let ressources = Array.isArray(values) ? values : [values];
ressources = ressources.map(ressource => this.preprocessRessource(ressource));
- this.list.add(ressources, () => {
- this.list.sort('id', {order: 'desc'});
+ this.listjs.add(ressources, () => {
+ this.listjs.sort('id', {order: 'desc'});
});
}
remove(id) {
- this.list.remove('id', id);
+ this.listjs.remove('id', id);
}
replace(id, valueName, newValue) {
- this.list.get('id', id)[0].values({[valueName]: newValue});
+ this.listjs.get('id', id)[0].values({[valueName]: newValue});
}
}
RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};
diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2
index a86e3cfb..e030a920 100644
--- a/app/templates/_scripts.html.j2
+++ b/app/templates/_scripts.html.j2
@@ -16,7 +16,7 @@
"js/nopaque/RessourceDisplays/JobDisplay.js" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
-{% assets output="js/nopaque/RessourceLists.min.bundle.js",
+{% assets filters='rjsmin', output="js/nopaque/RessourceLists.min.bundle.js",
"js/nopaque/RessourceLists/RessourceList.js",
"js/nopaque/RessourceLists/CorpusList.js",
"js/nopaque/RessourceLists/CorpusFileList.js",
@@ -41,5 +41,32 @@
app.getUserById(currentUserId).then(user => {}, error => {throw JSON.stringify(error)});
{% endif %}
nopaque.Forms.init();
+ for (let nopaqueRessourceListElement of document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)')) {
+ 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;
+ }
+ }
for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {app.flash(flashedMessage[1], flashedMessage[0]);}
</script>
diff --git a/app/templates/admin/user.html.j2 b/app/templates/admin/user.html.j2
index 3bc9b1d6..a7dcfe80 100644
--- a/app/templates/admin/user.html.j2
+++ b/app/templates/admin/user.html.j2
@@ -37,7 +37,7 @@
</div>
</div>
-<div class="col s12 l6" id="corpora" data-user-id="{{ user.hashid }}">
+<div class="col s12 l6 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ user.hashid }}">
<h3>Corpora</h3>
<div class="card">
<div class="card-content">
@@ -65,7 +65,7 @@
</div>
</div>
-<div class="col s12 l6" id="jobs" data-user-id="{{ user.hashid }}">
+<div class="col s12 l6 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ user.hashid }}">
<h3>Jobs</h3>
<div class="card">
<div class="card-content">
@@ -74,7 +74,7 @@
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
- <table class="highlight ressource-list">
+ <table class="highlight">
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
@@ -108,11 +108,3 @@
</div>
</div>
{% endblock modals %}
-
-{% block scripts %}
-{{ super() }}
-<script>
- let corpusList = new CorpusList(document.querySelector('#corpora'));
- let jobList = new JobList(document.querySelector('#jobs'));
-</script>
-{% endblock scripts %}
diff --git a/app/templates/admin/users.html.j2 b/app/templates/admin/users.html.j2
index 8c1e09c1..57df8862 100644
--- a/app/templates/admin/users.html.j2
+++ b/app/templates/admin/users.html.j2
@@ -8,7 +8,7 @@
<h1 id="title">{{ title }}</h1>
</div>
- <div class="col s12" id="users">
+ <div class="col s12 nopaque-ressource-list no-autoinit" data-ressource-type="User" id="users">
<div class="card">
<div class="card-content">
<div class="input-field">
@@ -16,7 +16,7 @@
<input id="search-user" class="search" type="text"></input>
<label for="search-user">Search user</label>
</div>
- <table class="highlight ressource-list">
+ <table class="highlight">
<thead>
<tr>
<th class="sort" data-sort="id">Id</th>
@@ -40,7 +40,7 @@
{% block scripts %}
{{ super() }}
<script>
- let userList = new UserList(document.querySelector('#users'), {page: 10});
+ let userList = new UserList(document.querySelector('#users'));
userList.init({{ dict_users|tojson }});
</script>
{% endblock scripts %}
diff --git a/app/templates/corpora/corpus.html.j2 b/app/templates/corpora/corpus.html.j2
index 1d455eda..e98e5b06 100644
--- a/app/templates/corpora/corpus.html.j2
+++ b/app/templates/corpora/corpus.html.j2
@@ -72,7 +72,7 @@
</div>
</div>
- <div class="col s12" id="corpus-files" data-corpus-id="{{ corpus.hashid }}" data-user-id="{{ corpus.user.hashid }}">
+ <div class="col s12 nopaque-ressource-list" data-corpus-id="{{ corpus.hashid }}" data-ressource-type="CorpusFile" data-user-id="{{ corpus.user.hashid }}">
<div class="card">
<div class="card-content">
<span class="card-title" id="files">Corpus files</span>
@@ -122,6 +122,5 @@
{{ super() }}
<script>
let corpusDisplay = new CorpusDisplay(document.querySelector('#corpus-display'));
- let corpusFileList = new CorpusFileList(document.querySelector('#corpus-files'));
</script>
{% endblock scripts %}
diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2
index 2712b6ac..43796238 100644
--- a/app/templates/jobs/job.html.j2
+++ b/app/templates/jobs/job.html.j2
@@ -87,7 +87,7 @@
</div>
</div>
- <div class="col s12" id="job-inputs" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}">
+ <div class="col s12 nopaque-ressource-list" data-job-id="{{ job.hashid }}" data-ressource-type="JobInput" data-user-id="{{ job.user.hashid }}">
<div class="card">
<div class="card-content">
<div class="row">
@@ -112,7 +112,7 @@
</div>
</div>
- <div class="col s12" id="job-results" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}">
+ <div class="col s12 nopaque-ressource-list" data-job-id="{{ job.hashid }}" data-ressource-type="JobResult" data-user-id="{{ job.user.hashid }}">
<div class="card">
<div class="card-content">
<div class="row">
@@ -172,7 +172,5 @@
{{ super() }}
<script>
let jobDisplay = new JobDisplay(document.querySelector('#job-display'));
- let jobInputList = new JobInputList(document.querySelector('#job-inputs'));
- let jobResultList = new JobResultList(document.querySelector('#job-results'));
</script>
{% endblock scripts %}
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index 8872efca..8e5804ad 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -18,7 +18,7 @@
<li class="tab col s6"><a href="#query-results">Query results</a></li>
</ul>
</div>
- <div class="col s12" data-user-id="{{ current_user.hashid }}" id="corpora">
+ <div class="col s12 nopaque-ressource-list" data-ressource-type="Corpus" data-user-id="{{ current_user.hashid }}" id="corpora">
<div class="card">
<div class="card-content">
<div class="input-field">
@@ -26,7 +26,7 @@
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
- <table class="highlight ressource-list">
+ <table class="highlight">
<thead>
<tr>
<th></th>
@@ -48,7 +48,7 @@
</div>
</div>
</div>
- <div class="col s12" id="query-results">
+ <div class="col s12 nopaque-ressource-list" data-ressource-type="QueryResult" data-user-id="{{ current_user.hashid }}" id="query-results">
<div class="card">
<div class="card-content">
<div class="input-field">
@@ -56,7 +56,7 @@
<input id="search-query-results" class="search" type="search"></input>
<label for="search-query-results">Search query result</label>
</div>
- <table class="highlight ressource-list">
+ <table class="highlight">
<thead>
<tr>
<th>
@@ -89,7 +89,7 @@
</div>
</div>
- <div class="col s12" data-user-id="{{ current_user.hashid }}" id="jobs">
+ <div class="col s12 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ current_user.hashid }}" id="jobs">
<h3>My Jobs</h3>
<p>A job is the execution of a service provided by nopaque. You can create any number of jobs and let them be processed simultaneously.</p>
<div class="card">
@@ -99,7 +99,7 @@
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
- <table class="highlight ressource-list">
+ <table class="highlight">
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
@@ -174,12 +174,3 @@
</div>
</div>
{% endblock modals %}
-
-{% block scripts %}
-{{ super() }}
-<script>
- let corpusList = new CorpusList(document.querySelector('#corpora'));
- let jobList = new JobList(document.querySelector('#jobs'));
- //let queryResultList = new QueryResultList(document.querySelector('#query-results'));
-</script>
-{% endblock scripts %}
--
GitLab