Change corpus analyse ui

This commit is contained in:
Patrick Jentsch 2020-01-15 15:52:42 +01:00
parent 88f87da86c
commit 9353a3d5db
3 changed files with 66 additions and 56 deletions

View File

@ -50,8 +50,8 @@ class EditCorpusFileForm(FlaskForm):
class QueryForm(FlaskForm): class QueryForm(FlaskForm):
query = TextAreaField('CQP Query', validators=[DataRequired(), query = StringField('CQP Query',
(Length(1, 1024))]) validators=[DataRequired(), Length(1, 1024)])
hits_per_page = SelectField('Hits per page', hits_per_page = SelectField('Hits per page',
choices=[('', 'Nr. of hits per page'), choices=[('', 'Nr. of hits per page'),
('10', '10'), ('10', '10'),

View File

@ -36,57 +36,69 @@
} }
</style> </style>
<div class="col s12 m3 sticky"> <form id="query-form">
<div class="card"> <div class="col s12">
<div class="card-content"> <div class="card">
<form id="query-form" method="POST"> <div class="card-content">
{{ query_form.hidden_tag() }} <div class="row">
<span class="card-title">Query and analysis</span> <div class="col s12 m11">
<div class="input-field"> <div class="input-field">
{{ query_form.query(class='materialize-textarea') }} <i class="material-icons prefix">search</i>
{{ query_form.query.label }} {{ query_form.query() }}
{% for error in query_form.query.errors %} {{ query_form.query.label }}
<span class="helper-text red-text">{{ error }}</span> <span class="helper-text" data-error="wrong" data-success="right"><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/"><i class="material-icons" style="font-size: inherit;">help</i> CQP query language tutorial</a></span>
{% endfor %} {% for error in query_form.query.errors %}
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
</div>
<div class="col s12 m1">
<p class="hide-on-small-only">&nbsp;</p>
<button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
</div>
</div> </div>
<button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button> </div>
<p>&nbsp;</p>
<span class="card-title">Help</span>
<p><a target="_blank" rel="noopener noreferrer" 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>
<div class="switch">
<label>
Expert Mode
<input type="checkbox" id="expert-mode-switch">
<span class="lever"></span>
</label>
</div>
</form>
</div> </div>
</div> </div>
<div class="card"> <div class="col s12 m3">
<div class="card-content"> <div class="card">
<span class="card-title">Query Link</span> <div class="card-content">
<form id="download-form" method="POST"> <div id="query-form">
{{ query_download_form.hidden_tag() }} <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>
<div class="switch">
<label>
Expert Mode
<input type="checkbox" id="expert-mode-switch">
<span class="lever"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="col s12 hide">
<div class="card">
<div class="card-content">
<span class="card-title">Query Link</span>
<span class="card-title">Download Results</span> <span class="card-title">Download Results</span>
<p>Downlaod all results of the current query as csv, excel or json file.</p> <p>Downlaod all results of the current query as csv, excel or json file.</p>
<div class="input-field"> <div class="input-field">
@ -98,10 +110,9 @@
{% endfor %} {% endfor %}
</div> </div>
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button> <button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
</form> </div>
</div> </div>
</div> </div>
</div>
<div class="col s12 m9 hide" id="getting-query-results"> <div class="col s12 m9 hide" id="getting-query-results">
<div class="card"> <div class="card">
@ -116,11 +127,11 @@
</div> </div>
</div> </div>
<div class="col s12 m9 hide" id="recieved-query-results"> <div class="col s12 m9" id="recieved-query-results">
<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>
<table> <table class="hide">
<thead> <thead>
<tr> <tr>
<th style="width: 5%">Title</th> <th style="width: 5%">Title</th>
@ -203,12 +214,11 @@
}) })
var queryFormElement = document.getElementById("query-form"); var queryFormElement = document.getElementById("query-form");
var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results"); var queryResultsElement = document.getElementById("query-results");
var contextResultsElement = document.getElementById("context-results"); var contextResultsElement = document.getElementById("context-results");
var queryLoadingElement = document.getElementById("getting-query-results"); var queryLoadingElement = document.getElementById("getting-query-results");
var queryResultsTableElement = document.getElementById("recieved-query-results"); var queryResultsTableElement = document.getElementById("recieved-query-results");
queryFormSubmitElement.addEventListener("click", function(event) { queryFormElement.addEventListener("submit", function(event) {
event.preventDefault(); event.preventDefault();
let formData = new FormData(queryFormElement); let formData = new FormData(queryFormElement);
let queryData = {"context": formData.get("context"), let queryData = {"context": formData.get("context"),

View File

@ -25,7 +25,7 @@ services:
constraints: constraints:
- node.role == manager - node.role == manager
environment: environment:
- VIRTUAL_HOST=nopaque.localhost - VIRTUAL_HOST=nopaque.localhost,129.70.216.233
env_file: nopaque.env env_file: nopaque.env
image: gitlab.ub.uni-bielefeld.de:4567/sfb1288inf/opaque:development image: gitlab.ub.uni-bielefeld.de:4567/sfb1288inf/opaque:development
volumes: volumes: