Skip to content
Snippets Groups Projects
Commit df98f3a9 authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Change HTML for corpus analysis

parent 1b02d73d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/corpora/events.py
+ 2
− 2
View file @ df98f3a9
...@@ -38,7 +38,7 @@ def init_corpus_analysis(corpus_id): ...@@ -38,7 +38,7 @@ def init_corpus_analysis(corpus_id):
corpus_id, request.sid) corpus_id, request.sid)
@socketio.on('query_event') @socketio.on('query')
@login_required @login_required
def recv_query(message): def recv_query(message):
logger.warning(message) logger.warning(message)
...@@ -80,7 +80,7 @@ def recv_query(message): ...@@ -80,7 +80,7 @@ def recv_query(message):
match['word_list'] = [foo[cpos]['word'] for cpos in match['cpos_list']] match['word_list'] = [foo[cpos]['word'] for cpos in match['cpos_list']]
match.pop('cpos_list', None) match.pop('cpos_list', None)
logger.warning(matches) logger.warning(matches)
socketio.emit('query_results', matches, room=request.sid) socketio.emit('query', matches, room=request.sid)
def observe_corpus_analysis_connection(app, corpus_id, session_id): def observe_corpus_analysis_connection(app, corpus_id, session_id):
......
app/templates/corpora/corpus_analysis.html.j2
+ 76
− 98
View file @ df98f3a9
{% extends "full_width.html.j2" %} {% extends "full_width.html.j2" %}
{% block page_content %} {% 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> <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"> <div class="card">
<form id="query_form" method="POST">
<div class="card-content"> <div class="card-content">
{{ form.hidden_tag() }} <form id="query-form" method="POST">
<span class="card-title">Query and analysis</span> {{ form.hidden_tag() }}
<br> <span class="card-title">Query and analysis</span>
<div class="input-field"> <div class="input-field">
{{ form.query(class='materialize-textarea') }} {{ form.query(class='materialize-textarea') }}
{{ form.query.label }} {{ form.query.label }}
{% for error in form.query.errors %} {% for error in form.query.errors %}
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text red-text">{{ error }}</span>
{% endfor %} {% endfor %}
</div> </div>
<div class="right-align"> <button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
<button id="sent_query" class="btn" type="submit" name="action">Start Query <p>&nbsp;</p>
<i class="material-icons left">search</i> <span class="card-title">Help</span>
</button> <p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
</div> <p>&nbsp;</p>
<br> <span class="card-title">Options</span>
<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"> <div class="input-field">
<i class="material-icons prefix">format_list_numbered</i> <i class="material-icons prefix">format_list_numbered</i>
{{ form.hits_per_page() }} {{ form.hits_per_page() }}
...@@ -40,78 +29,46 @@ ...@@ -40,78 +29,46 @@
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text red-text">{{ error }}</span>
{% endfor %} {% endfor %}
</div> </div>
<br> <div class="input-field">
<div class="input-field"> <i class="material-icons prefix">short_text</i>
<i class="material-icons prefix">short_text</i> {{ form.context() }}
{{ form.context() }} {{ form.context.label }}
{{ form.context.label }} {% for error in form.context.errors %}
{% for error in form.context.errors %} <span class="helper-text red-text">{{ error }}</span>
<span class="helper-text red-text">{{ error }}</span> {% endfor %}
{% endfor %} </div>
</div> </form>
<br> </div>
</form> </div>
<span class="card-title">Download Results</span>
<p>Downlaod all results of the current query as csv, excel or json file.</p> <div class="card">
<form method="POST"> <div class="card-content">
{{ form.hidden_tag() }} <form id="download-form" method="POST">
<div class="input-field"> {{ dl_form.hidden_tag() }}
<i class="material-icons prefix">insert_drive_file</i> <span class="card-title">Download Results</span>
{{ dl_form.file_type() }} <p>Downlaod all results of the current query as csv, excel or json file.</p>
{{ dl_form.file_type.label }} <div class="input-field">
{% for error in dl_form.file_type.errors %} <i class="material-icons prefix">insert_drive_file</i>
<span class="helper-text red-text">{{ error }}</span> {{ dl_form.file_type() }}
{% endfor %} {{ dl_form.file_type.label }}
</div> {% for error in dl_form.file_type.errors %}
<div class="right-align"> <span class="helper-text red-text">{{ error }}</span>
<button class="btn" type="submit" name="action">Download {% endfor %}
<i class="material-icons left">file_download</i> </div>
</button> <button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</div> </form>
</form>
</div> </div>
</div> </div>
</div> </div>
<script>
socket.on('query_results', function(json_results) { <div class="col s12 m9">
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="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<span class="card-title">Query Results</span> <span class="card-title">Query Results</span>
<p id="query-results"></p> <div id="query-results"></div>
</div> </div>
</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 id="loading-modal" class="modal no-autoinit">
<div class="modal-content"> <div class="modal-content">
...@@ -133,16 +90,37 @@ function sendQueryData() { ...@@ -133,16 +90,37 @@ function sendQueryData() {
</div> </div>
<script> <script>
var loadingModal; var loadingModal;
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"), {"dismissible": false}); loadingModal = M.Modal.init(document.getElementById("loading-modal"),
loadingModal.open(); {"dismissible": false});
}); loadingModal.open();
});
socket.emit('init_corpus_analysis', {{ corpus_id }});
socket.emit('init_corpus_analysis', {{ corpus_id }}); var queryFormElement = document.getElementById("query-form");
socket.on('init_corpus_analysis', function(msg) { var queryFormSubmitElement = document.getElementById("query-form-submit");
if (msg === 'Ready') {loadingModal.close();} 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> </script>
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment