Skip to content
Snippets Groups Projects
Commit 14e869b2 authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

parents ba0e8273 ab0e79ac
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/templates/base.html.j2
+ 24
− 22
View file @ 14e869b2
......@@ -37,7 +37,6 @@
var jobsSubscribers = [];
var socket = io();
socket.emit('subscribe_user_ressources');
socket.on('init-corpora', function(msg) {
corpora = JSON.parse(msg);
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
......@@ -141,7 +140,7 @@
{% if current_user.is_administrator() %}
<li><div class="divider"></div></li>
<li><a class="subheader">Administration</a></li>
<li><a href="{{ url_for('admin.for_admins_only') }}"><i class="material-icons">build</i>Administration tools</a></li>
<li><a href="{{ url_for('admin.index') }}"><i class="material-icons">build</i>Administration tools</a></li>
{% endif %}
<div class="hide-on-large-only">
<li><div class="divider"></div></li>
......@@ -170,28 +169,31 @@
</div>
</footer>
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
<script>
M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
M.Dropdown.init(
document.getElementById("nav-notifications"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
M.Dropdown.init(
document.getElementById("nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
// Highlight current navigation entry
var entry;
for (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');
</script>
<script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
<script>
M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
M.Dropdown.init(
document.getElementById("nav-notifications"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
M.Dropdown.init(
document.getElementById("nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
// Highlight current navigation entry
var entry;
for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
if (entry.href === window.location.href) {
entry.parentNode.classList.add("active");
}
{% for message in get_flashed_messages() %}
M.toast({html: '{{ message }}'})
{% endfor %}
}
{% for message in get_flashed_messages() %}
M.toast({html: '{{ message }}'})
{% endfor %}
</script>
</body>
</html>
app/templates/corpora/analyse_corpus.html.j2 0 → 100644
+ 125
− 0
View file @ 14e869b2
{% extends "full_width.html.j2" %}
{% block page_content %}
<div class="col s12 m3 sticky">
<div class="card">
<div class="card-content">
<form id="query-form" method="POST">
{{ query_form.hidden_tag() }}
<span class="card-title">Query and analysis</span>
<div class="input-field">
{{ query_form.query(class='materialize-textarea') }}
{{ query_form.query.label }}
{% for error in query_form.query.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
<button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
<p>&nbsp;</p>
<span class="card-title">Help</span>
<p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
<p>&nbsp;</p>
<span class="card-title">Options</span>
<div class="input-field">
<i class="material-icons prefix">format_list_numbered</i>
{{ query_form.hits_per_page() }}
{{ query_form.hits_per_page.label }}
{% for error in query_form.hits_per_page.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
<div class="input-field">
<i class="material-icons prefix">short_text</i>
{{ query_form.context() }}
{{ query_form.context.label }}
{% for error in query_form.context.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-content">
<form id="download-form" method="POST">
{{ query_download_form.hidden_tag() }}
<span class="card-title">Download Results</span>
<p>Downlaod all results of the current query as csv, excel or json file.</p>
<div class="input-field">
<i class="material-icons prefix">insert_drive_file</i>
{{ query_download_form.file_type() }}
{{ query_download_form.file_type.label }}
{% for error in query_download_form.file_type.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</form>
</div>
</div>
</div>
<div class="col s12 m9">
<div class="card">
<div class="card-content">
<span class="card-title">Query Results</span>
<div id="query-results"></div>
</div>
</div>
</div>
<div id="loading-modal" class="modal no-autoinit">
<div class="modal-content">
<h4>Waiting for analysis software</h4>
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<script>
var loadingModal;
document.addEventListener('DOMContentLoaded', function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
loadingModal.open();
});
socket.emit('init_corpus_analysis', {{ corpus_id }});
var queryFormElement = document.getElementById("query-form");
var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results");
queryFormSubmitElement.addEventListener('click', function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
let queryData = {'context': formData.get('context'),
'hits_per_page': formData.get('hits_per_page'),
'query': formData.get('query')};
socket.emit('query', queryData);
M.toast({html: 'Query has been sent!'});
});
socket.on('init_corpus_analysis', function(msg) {
if (msg === 'Ready') {loadingModal.close();}
});
socket.on('query', function(results) {
queryResultsElement.innerHTML = '';
for (let result of results) {
queryResultsElement.innerHTML += '<p>' + result['word_list'] + '</p>';
}
});
</script>
{% endblock %}
app/templates/corpora/corpus.html.j2
+ 76
− 79
View file @ 14e869b2
{% extends "limited_width.html.j2" %}
{% block page_content %}
<script>
{% if corpus.creator == current_user %}
var foreignCorpusFlag = false;
{% else %}
var foreignCorpusFlag = true;
socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
{% endif %}
class InformationUpdater {
constructor(corpusId) {
this.corpusId = corpusId;
if (foreignCorpusFlag) {
foreignCorporaSubscribers.push(this);
} else {
corporaSubscribers.push(this);
}
}
_init() {
if (foreignCorpusFlag) {
this.corpus = foreignCorpora[this.corpusId];
} else {
this.corpus = corpora[this.corpusId];
}
// Status
this.setStatus(this.corpus.status);
}
_update(patch) {
var pathArray;
for (let operation of patch) {
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
if (pathArray[0] != this.corpusId) {continue;}
switch(operation.op) {
case "add":
location.reload();
break;
case "delete":
location.reload();
break;
case "replace":
if (pathArray[1] === "status") {
this.setStatus(operation.value);
}
break;
default:
break;
}
}
}
setStatus(status) {
var 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');
if (status === 'prepared' || status === 'analysing') {
analyseBtn.classList.remove('hide', 'disabled');
} else if (status === 'start analysis' || status === 'stop analysis') {
analyseBtn.classList.remove('hide');
analyseBtn.classList.add('disabled');
}
if (status === 'prepared' || status === 'preparable' || status === 'preparing' || status === 'start analysis' || status === 'analysing' || status === 'stop analysis') {
var prepareBtn = document.getElementById('prepare');
prepareBtn.classList.add('hide');
}
}
}
var informationUpdater = new InformationUpdater({{ corpus.id }});
</script>
<div class="col s12 m4">
<h3 id="title">{{ corpus.title }}</h3>
<p id="description">{{ corpus.description }}</p>
......@@ -98,7 +21,7 @@
</div>
</div>
<div class="card-action right-align">
<a href="{{ url_for('corpora.corpus_analysis', corpus_id=corpus.id) }}" class="waves-effect waves-light btn hide" id="analyse"><i class="material-icons left">help</i>Analyse</a>
<a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" class="waves-effect waves-light btn hide" id="analyse"><i class="material-icons left">help</i>Analyse</a>
{% if corpus.files[0] is defined %}
<a href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}" class="waves-effect waves-light btn" id="prepare"><i class="material-icons left">whatshot</i>Prepare</a>
{% endif %}
......@@ -146,11 +69,12 @@
</div>
</div>
<!-- Modals -->
<div id="delete-corpus-modal" class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the Corpus {{corpus.title}}? All files will be permanently deleted!</p>
<p>Do you really want to delete the corpus {{corpus.title}}? All files will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
......@@ -169,5 +93,78 @@
<a class="modal-close waves-effect waves-green btn red" href="{{ url_for('corpora.delete_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}">Confirm<i class="material-icons right">send</i></a>
</div>
</div>
<script>
class InformationUpdater {
constructor(corpusId, foreignCorpusFlag) {
this.corpusId = corpusId;
this.foreignCorpusFlag = foreignCorpusFlag;
if (this.foreignCorpusFlag) {
foreignCorporaSubscribers.push(this);
} else {
corporaSubscribers.push(this);
}
}
_init() {
var corpus = this.foreignCorpusFlag ? foreignCorpora[this.corpusId] : corpora[this.corpusId];
// Status
this.setStatus(corpus.status);
}
_update(patch) {
var pathArray;
for (let operation of patch) {
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
if (pathArray[0] != this.corpusId) {continue;}
switch(operation.op) {
case "add":
location.reload();
break;
case "delete":
location.reload();
break;
case "replace":
if (pathArray[1] === "status") {
this.setStatus(operation.value);
}
break;
default:
break;
}
}
}
setStatus(status) {
var 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');
if (status === 'prepared' || status === 'analysing') {
analyseBtn.classList.remove('hide', 'disabled');
} else if (status === 'start analysis' || status === 'stop analysis') {
analyseBtn.classList.remove('hide');
analyseBtn.classList.add('disabled');
}
if (status === 'prepared' || status === 'preparable' || status === 'preparing' || status === 'start analysis' || status === 'analysing' || status === 'stop analysis') {
var prepareBtn = document.getElementById('prepare');
prepareBtn.classList.add('hide');
}
}
}
{% if corpus.creator == current_user %}
var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
{% else %}
var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
{% endif %}
</script>
{% endfor %}
{% endblock %}
app/templates/jobs/job.html.j2
+ 105
− 108
View file @ 14e869b2
{% extends "limited_width.html.j2" %}
{% block page_content %}
<script>
{% if job.creator == current_user %}
var foreignJobFlag = false;
{% else %}
var foreignJobFlag = true;
socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }});
{% endif %}
class InformationUpdater {
constructor(jobId) {
this.jobId = jobId;
if (foreignJobFlag) {
foreignJobsSubscribers.push(this);
} else {
jobsSubscribers.push(this);
}
}
_init() {
if (foreignJobFlag) {
this.job = foreignJobs[this.jobId];
} else {
this.job = jobs[this.jobId];
}
// End date
this.setEndDate(this.job.end_date);
// Status
this.setStatus(this.job.status);
// End date
if (this.job.end_date) {this.setEndDate(this.job.end_date);}
// Input results
for (let input of this.job.inputs) {
for (let result of input.results) {
this.setResult(result);
}
}
}
_update(patch) {
var pathArray;
for (let operation of patch) {
/* "/jobId/valueName" -> ["jobId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
if (pathArray[0] != this.jobId) {continue;}
switch(operation.op) {
case "add":
if (pathArray[1] === "inputs" && pathArray[3] === "results") {
this.setResult(operation.value);
}
break;
case "delete":
location.reload();
break;
case "replace":
if (pathArray[1] === "end_date") {
this.setEndDate(operation.value);
} else if (pathArray[1] === "status") {
this.setStatus(operation.value);
}
break;
default:
break;
}
}
}
setEndDate(timestamp) {
var end_date;
if (timestamp === null) {
end_date = "N.a.";
} else {
end_date = new Date(timestamp * 1000).toLocaleString("en-US");
}
document.getElementById("end-date").value = end_date;
M.updateTextFields();
}
setResult(result) {
var 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");
resultDownloadButtonElement.href = `/jobs/${this.jobId}/results/${result.id}/download`;
resultDownloadButtonElement.innerText = result.filename.split(".").reverse()[0];
resultDownloadButtonElement.setAttribute("download", "");
resultDownloadButtonIconElement = document.createElement("i");
resultDownloadButtonIconElement.classList.add("material-icons", "left");
resultDownloadButtonIconElement.innerText = "file_download";
resultDownloadButtonElement.prepend(resultDownloadButtonIconElement);
resultsElement.append(resultDownloadButtonElement);
resultsElement.append(" ");
}
setStatus(status) {
var statusElement;
statusElement = document.getElementById("status");
statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
statusElement.innerText = status;
}
}
var informationUpdater = new InformationUpdater({{ job.id }});
</script>
<div class="col s12 m4">
<h3 id="title">{{ job.title }}</h3>
<p id="description">{{ job.description }}</p>
......@@ -210,6 +102,7 @@
</div>
</div>
<!-- Modals -->
<div id="delete-job-modal" class="modal">
<div class="modal-content">
......@@ -221,4 +114,108 @@
<a class="modal-close waves-effect waves-green btn red" href="{{ url_for('jobs.delete_job', job_id=job.id) }}">Confirm<i class="material-icons right">send</i></a>
</div>
</div>
<script>
class InformationUpdater {
constructor(jobId, foreignJobFlag) {
this.jobId = jobId;
this.foreignJobFlag = foreignJobFlag;
if (this.foreignJobFlag) {
foreignJobsSubscribers.push(this);
} else {
jobsSubscribers.push(this);
}
}
_init() {
var job = this.foreignJobFlag ? foreignJobs[this.jobId] : jobs[this.jobId];
// End date
this.setEndDate(job.end_date);
// Status
this.setStatus(job.status);
// End date
if (job.end_date) {this.setEndDate(job.end_date);}
// Input results
for (let input of job.inputs) {
for (let result of input.results) {
this.setResult(result);
}
}
}
_update(patch) {
var pathArray;
for (let operation of patch) {
/* "/jobId/valueName" -> ["jobId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
if (pathArray[0] != this.jobId) {continue;}
switch(operation.op) {
case "add":
if (pathArray[1] === "inputs" && pathArray[3] === "results") {
this.setResult(operation.value);
}
break;
case "delete":
location.reload();
break;
case "replace":
if (pathArray[1] === "end_date") {
this.setEndDate(operation.value);
} else if (pathArray[1] === "status") {
this.setStatus(operation.value);
}
break;
default:
break;
}
}
}
setEndDate(timestamp) {
var end_date;
if (timestamp === null) {
end_date = "N.a.";
} else {
end_date = new Date(timestamp * 1000).toLocaleString("en-US");
}
document.getElementById("end-date").value = end_date;
M.updateTextFields();
}
setResult(result) {
var 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");
resultDownloadButtonElement.href = `/jobs/${this.jobId}/results/${result.id}/download`;
resultDownloadButtonElement.innerText = result.filename.split(".").reverse()[0];
resultDownloadButtonElement.setAttribute("download", "");
resultDownloadButtonIconElement = document.createElement("i");
resultDownloadButtonIconElement.classList.add("material-icons", "left");
resultDownloadButtonIconElement.innerText = "file_download";
resultDownloadButtonElement.prepend(resultDownloadButtonIconElement);
resultsElement.append(resultDownloadButtonElement);
resultsElement.append(" ");
}
setStatus(status) {
var statusElement;
statusElement = document.getElementById("status");
statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
statusElement.innerText = status;
}
}
{% if job.creator == current_user %}
var informationUpdater = new InformationUpdater({{ job.id }}, false);
{% else %}
var informationUpdater = new InformationUpdater({{ job.id }}, true);
socket.emit('subscribe_foreign_user_ressources', {{ job.user_id }});
{% endif %}
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment