sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-03 20:02:47 +00:00
Code Issues Projects Releases Wiki Activity

Change HTML for corpus analysis

Browse Source
This commit is contained in:
Patrick Jentsch
2019-11-14 15:34:07 +01:00
parent 1b02d73d66
commit df98f3a900
2 changed files with 78 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
app/templates/corpora/corpus_analysis.html.j2
View File

@@ -1,37 +1,26 @@
{% extends "full_width.html.j2" %}
{% block page_content %}
<div class="col s12 m3 l3 sticky">
<div class="col s12 m3 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 id="query-form" method="POST">
{{ form.hidden_tag() }}
<span class="card-title">Query and analysis</span>
<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>
{% for error in 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>
{{ form.hits_per_page() }}
@@ -40,78 +29,46 @@
<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 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>
</form>
</div>
</div>
<div class="card">
<div class="card-content">
<form id="download-form" method="POST">
{{ dl_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>
{{ 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>
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</form>
</div>
</div>
</div>
<script>
socket.on('query_results', function(json_results) {
console.log('Results recieved')
console.log(json_results)
var queryResultsElement = document.getElementById("query-results");
for (let json_result of json_results) {
queryResultsElement.innerHTML += json_result['word_list'] + '<br>';
}
});
</script>
<div class="col s12 m9 l9">
<div class="col s12 m9">
<div class="card">
<div class="card-content">
<span class="card-title">Query Results</span>
<p id="query-results"></p>
<div id="query-results"></div>
</div>
</div>
</div>
<script>
let queryData = document.forms['query_form'].elements;
console.log(queryData);
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">
@@ -133,16 +90,37 @@ function sendQueryData() {
</div>
<script>
var loadingModal;
var loadingModal;
document.addEventListener('DOMContentLoaded', function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"), {"dismissible": false});
loadingModal.open();
});
document.addEventListener('DOMContentLoaded', function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
loadingModal.open();
});
socket.emit('init_corpus_analysis', {{ corpus_id }});
socket.emit('init_corpus_analysis', {{ corpus_id }});
socket.on('init_corpus_analysis', function(msg) {
if (msg === 'Ready') {loadingModal.close();}
});
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 %}