mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-16 11:00:41 +00:00
Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development
This commit is contained in:
Stephan Porada
125
app/templates/corpora/analyse_corpus.html.j2
Normal file
125
app/templates/corpora/analyse_corpus.html.j2
Normal file
@ -0,0 +1,125 @@
|
||||
{% 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> </p>
|
||||
<span class="card-title">Help</span>
|
||||
<p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
|
||||
<p> </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 %}
|
||||
@ -1,83 +1,6 @@
|
||||
{% 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 %}
|
||||
|
||||
Reference in New Issue
Block a user