Create and use a nopaque namespace for functions and ressources

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

View File

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

View File

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

View File

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

View File

@ -181,18 +181,16 @@
var loadingModal;
document.addEventListener("DOMContentLoaded", function() {
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-ready").classList.add("hide");}
});
document.getElementById("context-modal-ready").classList.add("hide");}});
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
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();}
});
@ -230,13 +228,13 @@
"hits_per_page": formData.get("hits_per_page"),
"query": formData.get("query")};
hitsPerPage = formData.get("hits_per_page");
socket.emit("corpus_analysis", queryData);
nopaque.socket.emit("corpus_analysis", queryData);
queryLoadingElement.classList.remove("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(message);
queryLoadingElement.classList.add("hide");
@ -250,11 +248,11 @@
if (message === null) {
queryResultsTableElement.classList.add("hide");
toast("No results for this query!")
nopaque.toast("No results for this query!")
return;
} else if (message === "CQI_CQP_ERROR_GENERAL") {
queryResultsTableElement.classList.add("hide");
toast("Invalid query entered!", "red");
nopaque.toast("Invalid query entered!", "red");
return;
} else {
total_nr_matches = message["total_nr_matches"];
@ -365,7 +363,7 @@
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
inspectBtn.onclick = function() {
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(message);
contextResultsElement.innerHTML = "<p>&nbsp;</p>";

View File

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

View File

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

View File

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