mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Create and use a nopaque namespace for functions and ressources
This commit is contained in:
parent
cc74871f90
commit
3e85daf8ab
@ -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");
|
||||
});
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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> </p>";
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user