mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-12 09:00:40 +00:00
Add first query result function
This commit is contained in:
@ -117,8 +117,9 @@
|
||||
});
|
||||
socket.on('query', function(results) {
|
||||
queryResultsElement.innerHTML = '';
|
||||
for (let result of results) {
|
||||
queryResultsElement.innerHTML += '<p>' + result['word_list'] + '</p>';
|
||||
for (let key in results) {
|
||||
console.log(results[key]);
|
||||
queryResultsElement.innerHTML += '<p>' + results[key]['match_cpos_list'] + '</p>';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -1,143 +0,0 @@
|
||||
{% extends "full_width.html.j2" %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="col s12 m3 l3 sticky">
|
||||
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}"><i class="material-icons left">arrow_back</i>Back to corpus overview</a>
|
||||
<div class="card">
|
||||
<form id="query_form" method="POST">
|
||||
<div class="card-content">
|
||||
{{ form.hidden_tag() }}
|
||||
<span class="card-title">Query and analysis</span>
|
||||
<br>
|
||||
<div class="input-field">
|
||||
{{ form.query(class='materialize-textarea') }}
|
||||
{{ form.query.label }}
|
||||
{% for error in form.query.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="right-align">
|
||||
<button id="sent_query" class="btn" type="submit" name="action">Start Query
|
||||
<i class="material-icons left">search</i>
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<span class="card-title">Help</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
|
||||
CQP Query Language Tutorial</a>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
<span class="card-title">Options</span>
|
||||
<br>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">format_list_numbered</i>
|
||||
{{ form.hits_per_page() }}
|
||||
{{ form.hits_per_page.label }}
|
||||
{% for error in form.hits_per_page.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">short_text</i>
|
||||
{{ form.context() }}
|
||||
{{ form.context.label }}
|
||||
{% for error in form.context.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<br>
|
||||
</form>
|
||||
<span class="card-title">Download Results</span>
|
||||
<p>Downlaod all results of the current query as csv, excel or json file.</p>
|
||||
<form method="POST">
|
||||
{{ form.hidden_tag() }}
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">insert_drive_file</i>
|
||||
{{ dl_form.file_type() }}
|
||||
{{ dl_form.file_type.label }}
|
||||
{% for error in dl_form.file_type.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="right-align">
|
||||
<button class="btn" type="submit" name="action">Download
|
||||
<i class="material-icons left">file_download</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
socket.on('query_results', function(json_results) {
|
||||
console.log('Results recieved');
|
||||
console.log(json_results);
|
||||
});
|
||||
</script>
|
||||
<div class="col s12 m9 l9">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Query Results</span>
|
||||
<p id="query-results"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let queryData = document.forms['query_form'].elements;
|
||||
var queryBtn = document.getElementById('sent_query');
|
||||
queryBtn.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
sendQueryData();
|
||||
});
|
||||
function sendQueryData() {
|
||||
var query_data = {};
|
||||
for (element of queryData) {
|
||||
if (!element.value || element.name == 'csrf_token' || !element.id) {
|
||||
continue;
|
||||
}
|
||||
query_data[element.id] = element.value
|
||||
}
|
||||
console.log(query_data)
|
||||
socket.emit('query_event', query_data);
|
||||
M.toast({html: 'Query has been sent'});
|
||||
console.log('Query data has been sent!');
|
||||
}
|
||||
</script>
|
||||
|
||||
<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 }});
|
||||
socket.on('init_corpus_analysis', function(msg) {
|
||||
if (msg === 'Ready') {loadingModal.close();}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user