sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +00:00
Code Issues Projects Releases Wiki Activity

Create and use a nopaque namespace for functions and ressources

Browse Source
This commit is contained in:
Patrick Jentsch 2020-01-20 09:49:39 +01:00
parent cc74871f90
commit 3e85daf8ab
7 changed files with 115 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/static/js/nopaque.js
View File

@ -1,17 +1,32 @@
var socket = io(); var nopaque = {};
var corpora;
var corporaSubscribers = [];
var jobs;
var jobsSubscribers = [];
var foreignCorpora;
var foreignCorporaSubscribers = [];
var foreignJobs;
var foreignJobsSubscribers = [];
function toast(message, color="") { // nopaque ressources
nopaque["socket"] = io();
nopaque["corpora"] = undefined;
nopaque["corporaSubscribers"] = [];
nopaque["jobs"] = undefined;
nopaque["jobsSubscribers"] = [];
nopaque["foreignCorpora"] = undefined;
nopaque["foreignCorporaSubscribers"] = [];
nopaque["foreignJobs"] = undefined;
nopaque["foreignJobsSubscribers"] = [];
// nopaque functions
nopaque["navigation"] = {};
nopaque["navigation"]["init"] = function() {
for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
if (entry.href === window.location.href) {
entry.parentNode.classList.add("active");
}
}
}
nopaque["toast"] = function(message, color="") {
var toast; var toast;
var toastActionElement; var toastActionElement;
@ -29,63 +44,64 @@ function toast(message, color="") {
} }
socket.on('init-corpora', function(msg) { // socket event handlers
corpora = JSON.parse(msg); nopaque.socket.on('init-corpora', function(msg) {
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);} nopaque.corpora = JSON.parse(msg);
for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
}); });
socket.on('init-jobs', function(msg) { nopaque.socket.on('init-jobs', function(msg) {
jobs = JSON.parse(msg); nopaque.jobs = JSON.parse(msg);
for (let subscriber of jobsSubscribers) {subscriber._init(jobs);} for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
}); });
socket.on('update-corpora', function(msg) { nopaque.socket.on('update-corpora', function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
corpora = jsonpatch.apply_patch(corpora, patch); nopaque.corpora = jsonpatch.apply_patch(nopaque.corpora, patch);
for (let subscriber of corporaSubscribers) {subscriber._update(patch);} for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(patch);}
}); });
socket.on('update-jobs', function(msg) { nopaque.socket.on('update-jobs', function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
jobs = jsonpatch.apply_patch(jobs, patch); nopaque.jobs = jsonpatch.apply_patch(nopaque.jobs, patch);
for (let subscriber of jobsSubscribers) {subscriber._update(patch);} for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(patch);}
}); });
socket.on('init-foreign-corpora', function(msg) { nopaque.socket.on('init-foreign-corpora', function(msg) {
foreignCorpora = JSON.parse(msg); nopaque.foreignCorpora = JSON.parse(msg);
for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);} for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
}); });
socket.on('init-foreign-jobs', function(msg) { nopaque.socket.on('init-foreign-jobs', function(msg) {
foreignJobs = JSON.parse(msg); nopaque.foreignJobs = JSON.parse(msg);
for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);} for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
}); });
socket.on('update-foreign-corpora', function(msg) { nopaque.socket.on('update-foreign-corpora', function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch); nopaque.foreignCorpora = jsonpatch.apply_patch(nopaque.foreignCorpora, patch);
for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);} for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._update(patch);}
}); });
socket.on('update-foreign-jobs', function(msg) { nopaque.socket.on('update-foreign-jobs', function(msg) {
var patch; var patch;
patch = JSON.parse(msg); patch = JSON.parse(msg);
foreignJobs = jsonpatch.apply_patch(foreignJobs, patch); nopaque.foreignJobs = jsonpatch.apply_patch(nopaque.foreignJobs, patch);
for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);} for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._update(patch);}
}); });
@ -96,10 +112,6 @@ document.addEventListener("DOMContentLoaded", function() {
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}); {"alignment": "right", "constrainWidth": false, "coverTrigger": false});
M.Dropdown.init(document.getElementById("nav-account"), M.Dropdown.init(document.getElementById("nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}); {"alignment": "right", "constrainWidth": false, "coverTrigger": false});
for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) { nopaque.navigation.init();
if (entry.href === window.location.href) { nopaque.socket.emit("subscribe_user_ressources");
entry.parentNode.classList.add("active");
}
}
socket.emit("subscribe_user_ressources");
}); });

33
app/templates/admin/index.html.j2
View File

@ -2,32 +2,27 @@
{% block page_content %} {% block page_content %}
<div class="col s12"> <div class="col s12">
<div id="user-list"> <div class="card">
<div class="card"> <div class="card-content" id="users">
<div class="card-content"> <span class="card-title">User list</span>
<span class="card-title">User list</span> <div class="input-field">
<div class="input-field"> <i class="material-icons prefix">search</i>
<i class="material-icons prefix">search</i> <input id="search-user" class="search" type="search"></input>
<input id="search-user" class="search" type="text"></input> <label for="search-user">Search user</label>
<label for="search-user">Search user</label>
</div>
<ul class="pagination paginationTop"></ul>
{{ table }}
<ul class="pagination paginationBottom"></ul>
</div> </div>
<ul class="pagination paginationTop"></ul>
{{ table }}
<ul class="pagination paginationBottom"></ul>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
var options = {page: 10, var options = {page: 10,
pagination: [{ pagination: [{name: "paginationTop",
name: "paginationTop", paginationClass: "paginationTop",},
paginationClass: "paginationTop", {paginationClass: "paginationBottom"}],
}, {
paginationClass: "paginationBottom",
}],
valueNames: ['username', 'email', 'role', 'confirmed', 'id']}; valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
var userList = new List('user-list', options); var userList = new List('users', options);
</script> </script>
{% endblock %} {% endblock %}

6
app/templates/admin/user.html.j2
View File

@ -100,8 +100,8 @@
<script> <script>
var corpusList = new CorpusList("corpora", foreignCorporaSubscribers); var corpusList = new CorpusList("corpora", nopaque.foreignCorporaSubscribers);
var jobList = new JobList("jobs", foreignJobsSubscribers); var jobList = new JobList("jobs", nopaque.foreignJobsSubscribers);
socket.emit("subscribe_foreign_user_ressources", {{ user.id }}); nopaque.socket.emit("subscribe_foreign_user_ressources", {{ user.id }});
</script> </script>
{% endblock %} {% endblock %}

24
app/templates/corpora/analyse_corpus.html.j2
View File

@ -181,18 +181,16 @@
var loadingModal; var loadingModal;
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
contextModal = M.Modal.init(document.getElementById("context-modal"), contextModal = M.Modal.init(document.getElementById("context-modal"),
{"dismissible": true, {"onCloseEnd": function() {
"onCloseEnd": function() {
document.getElementById("context-modal-loading").classList.remove("hide"); document.getElementById("context-modal-loading").classList.remove("hide");
document.getElementById("context-modal-ready").classList.add("hide");} document.getElementById("context-modal-ready").classList.add("hide");}});
});
loadingModal = M.Modal.init(document.getElementById("loading-modal"), loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false}); {"dismissible": false});
loadingModal.open(); loadingModal.open();
socket.emit("request_corpus_analysis", {{ corpus_id }}); nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }});
}); });
socket.on("request_corpus_analysis", function(msg) { nopaque.socket.on("request_corpus_analysis", function(msg) {
if (msg === "[201]: Created") {loadingModal.close();} if (msg === "[201]: Created") {loadingModal.close();}
}); });
@ -230,13 +228,13 @@
"hits_per_page": formData.get("hits_per_page"), "hits_per_page": formData.get("hits_per_page"),
"query": formData.get("query")}; "query": formData.get("query")};
hitsPerPage = formData.get("hits_per_page"); hitsPerPage = formData.get("hits_per_page");
socket.emit("corpus_analysis", queryData); nopaque.socket.emit("corpus_analysis", queryData);
queryLoadingElement.classList.remove("hide"); queryLoadingElement.classList.remove("hide");
queryResultsTableElement.classList.add("hide"); queryResultsTableElement.classList.add("hide");
toast("Query has been sent!") nopaque.toast("Query has been sent!")
}); });
socket.on("corpus_analysis", function(message) { nopaque.socket.on("corpus_analysis", function(message) {
console.log("### corpus_analysis ###"); console.log("### corpus_analysis ###");
console.log(message); console.log(message);
queryLoadingElement.classList.add("hide"); queryLoadingElement.classList.add("hide");
@ -250,11 +248,11 @@
if (message === null) { if (message === null) {
queryResultsTableElement.classList.add("hide"); queryResultsTableElement.classList.add("hide");
toast("No results for this query!") nopaque.toast("No results for this query!")
return; return;
} else if (message === "CQI_CQP_ERROR_GENERAL") { } else if (message === "CQI_CQP_ERROR_GENERAL") {
queryResultsTableElement.classList.add("hide"); queryResultsTableElement.classList.add("hide");
toast("Invalid query entered!", "red"); nopaque.toast("Invalid query entered!", "red");
return; return;
} else { } else {
total_nr_matches = message["total_nr_matches"]; total_nr_matches = message["total_nr_matches"];
@ -365,7 +363,7 @@
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index"); var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
inspectBtn.onclick = function() { inspectBtn.onclick = function() {
contextModal.open(); contextModal.open();
socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]}); nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
}; };
} }
}); });
@ -399,7 +397,7 @@
} }
socket.on("match_context", function(message) { nopaque.socket.on("match_context", function(message) {
console.log("### match_context ###"); console.log("### match_context ###");
console.log(message); console.log(message);
contextResultsElement.innerHTML = "<p>&nbsp;</p>"; contextResultsElement.innerHTML = "<p>&nbsp;</p>";

21
app/templates/corpora/corpus.html.j2
View File

@ -102,21 +102,27 @@
this.corpusId = corpusId; this.corpusId = corpusId;
this.foreignCorpusFlag = foreignCorpusFlag; this.foreignCorpusFlag = foreignCorpusFlag;
if (this.foreignCorpusFlag) { if (this.foreignCorpusFlag) {
foreignCorporaSubscribers.push(this); nopaque.foreignCorporaSubscribers.push(this);
} else { } else {
corporaSubscribers.push(this); nopaque.corporaSubscribers.push(this);
} }
} }
_init() { _init() {
var corpus = this.foreignCorpusFlag ? foreignCorpora[this.corpusId] : corpora[this.corpusId]; let corpus;
if (this.foreignCorpusFlag) {
corpus = nopaque.foreignCorpora[this.corpusId];
} else {
corpus = nopaque.corpora[this.corpusId];
}
// Status // Status
this.setStatus(corpus.status); this.setStatus(corpus.status);
} }
_update(patch) { _update(patch) {
var pathArray; let pathArray;
for (let operation of patch) { for (let operation of patch) {
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */ /* "/corpusId/valueName" -> ["corpusId", "valueName"] */
@ -141,12 +147,13 @@
} }
setStatus(status) { setStatus(status) {
var statusElement; let analyseBtn, statusElement;
statusElement = document.getElementById("status"); statusElement = document.getElementById("status");
statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS)); statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']); statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
statusElement.innerText = status; statusElement.innerText = status;
var analyseBtn = document.getElementById('analyse'); analyseBtn = document.getElementById('analyse');
if (status === 'prepared' || status === 'analysing' || status === 'failed') { if (status === 'prepared' || status === 'analysing' || status === 'failed') {
analyseBtn.classList.remove('hide', 'disabled'); analyseBtn.classList.remove('hide', 'disabled');
} else if (status === 'start analysis' || status === 'stop analysis') { } else if (status === 'start analysis' || status === 'stop analysis') {
@ -164,7 +171,7 @@
var informationUpdater = new InformationUpdater({{ corpus.id }}, false); var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
{% else %} {% else %}
var informationUpdater = new InformationUpdater({{ corpus.id }}, true); var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }}); nopaque.socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
{% endif %} {% endif %}
</script> </script>
{% endblock %} {% endblock %}

25
app/templates/jobs/job.html.j2
View File

@ -122,14 +122,20 @@
this.jobId = jobId; this.jobId = jobId;
this.foreignJobFlag = foreignJobFlag; this.foreignJobFlag = foreignJobFlag;
if (this.foreignJobFlag) { if (this.foreignJobFlag) {
foreignJobsSubscribers.push(this); nopaque.foreignJobsSubscribers.push(this);
} else { } else {
jobsSubscribers.push(this); nopaque.jobsSubscribers.push(this);
} }
} }
_init() { _init() {
var job = this.foreignJobFlag ? foreignJobs[this.jobId] : jobs[this.jobId]; let job;
if (this.foreignJobFlag) {
job = nopaque.foreignJobs[this.jobId];
} else {
job = nopaque.jobs[this.jobId];
}
// End date // End date
this.setEndDate(job.end_date); this.setEndDate(job.end_date);
@ -146,7 +152,7 @@
} }
_update(patch) { _update(patch) {
var pathArray; let pathArray;
for (let operation of patch) { for (let operation of patch) {
/* "/jobId/valueName" -> ["jobId", "valueName"] */ /* "/jobId/valueName" -> ["jobId", "valueName"] */
@ -175,7 +181,8 @@
} }
setEndDate(timestamp) { setEndDate(timestamp) {
var end_date; let end_date;
if (timestamp === null) { if (timestamp === null) {
end_date = "N.a."; end_date = "N.a.";
} else { } else {
@ -186,8 +193,9 @@
} }
setResult(result) { setResult(result) {
var resultsElement, resultDownloadButtonElement, let resultsElement, resultDownloadButtonElement,
resultDownloadButtonIconElement; resultDownloadButtonIconElement;
resultsElement = document.getElementById(`input-${result.job_input_id}-results`); resultsElement = document.getElementById(`input-${result.job_input_id}-results`);
resultDownloadButtonElement = document.createElement("a"); resultDownloadButtonElement = document.createElement("a");
resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small"); resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
@ -203,7 +211,8 @@
} }
setStatus(status) { setStatus(status) {
var statusElement; let statusElement;
statusElement = document.getElementById("status"); statusElement = document.getElementById("status");
statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS)); statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']); statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
@ -215,7 +224,7 @@
var informationUpdater = new InformationUpdater({{ job.id }}, false); var informationUpdater = new InformationUpdater({{ job.id }}, false);
{% else %} {% else %}
var informationUpdater = new InformationUpdater({{ job.id }}, true); var informationUpdater = new InformationUpdater({{ job.id }}, true);
socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }}); nopaque.socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }});
{% endif %} {% endif %}
</script> </script>
{% endblock %} {% endblock %}

7
app/templates/main/dashboard.html.j2
View File

@ -86,10 +86,7 @@
</div> </div>
<script> <script>
// Init corpus list var corpusList = new CorpusList("corpora", nopaque.corporaSubscribers);
var corpusList = new CorpusList("corpora", corporaSubscribers); var jobList = new JobList("jobs", nopaque.jobsSubscribers);
// Init job list
var jobList = new JobList("jobs", jobsSubscribers);
</script> </script>
{% endblock %} {% endblock %}