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

Change corpus analyse ui

parent 88f87da8
No related branches found
No related tags found
No related merge requests found
...@@ -50,8 +50,8 @@ class EditCorpusFileForm(FlaskForm): ...@@ -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'),
......
...@@ -36,57 +36,69 @@ ...@@ -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 %}
</div> <span class="helper-text red-text">{{ error }}</span>
<button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button> {% endfor %}
<p>&nbsp;</p> </div>
<span class="card-title">Help</span> </div>
<p><a target="_blank" rel="noopener noreferrer" href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p> <div class="col s12 m1">
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<span class="card-title">Options</span> <button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
<div class="input-field"> </div>
<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>
<div class="switch"> </div>
<label> </div>
Expert Mode </div>
<input type="checkbox" id="expert-mode-switch">
<span class="lever"></span> <div class="col s12 m3">
</label> <div class="card">
<div class="card-content">
<div id="query-form">
<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>
</form> </div>
</div> </div>
</div> </div>
</form>
<div class="card"> <div class="col s12 hide">
<div class="card-content"> <div class="card">
<span class="card-title">Query Link</span> <div class="card-content">
<form id="download-form" method="POST"> <span class="card-title">Query Link</span>
{{ query_download_form.hidden_tag() }}
<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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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"),
......
...@@ -25,7 +25,7 @@ services: ...@@ -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:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment