From 9353a3d5dbb51c2e736133b3ccd2fd238d2279f3 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 15 Jan 2020 15:52:42 +0100
Subject: [PATCH] Change corpus analyse ui
---
app/corpora/forms.py | 4 +-
app/templates/corpora/analyse_corpus.html.j2 | 114 ++++++++++---------
docker-compose.yml | 2 +-
3 files changed, 65 insertions(+), 55 deletions(-)
diff --git a/app/corpora/forms.py b/app/corpora/forms.py
index c06e3833..2612cf9f 100644
--- a/app/corpora/forms.py
+++ b/app/corpora/forms.py
@@ -50,8 +50,8 @@ class EditCorpusFileForm(FlaskForm):
class QueryForm(FlaskForm):
- query = TextAreaField('CQP Query', validators=[DataRequired(),
- (Length(1, 1024))])
+ query = StringField('CQP Query',
+ validators=[DataRequired(), Length(1, 1024)])
hits_per_page = SelectField('Hits per page',
choices=[('', 'Nr. of hits per page'),
('10', '10'),
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index c1f20bc2..2325013c 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -36,57 +36,69 @@
}
</style>
-<div class="col s12 m3 sticky">
- <div class="card">
- <div class="card-content">
- <form id="query-form" method="POST">
- {{ query_form.hidden_tag() }}
- <span class="card-title">Query and analysis</span>
- <div class="input-field">
- {{ query_form.query(class='materialize-textarea') }}
- {{ query_form.query.label }}
- {% for error in query_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> </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> </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 %}
+<form id="query-form">
+ <div class="col s12">
+ <div class="card">
+ <div class="card-content">
+ <div class="row">
+ <div class="col s12 m11">
+ <div class="input-field">
+ <i class="material-icons prefix">search</i>
+ {{ query_form.query() }}
+ {{ query_form.query.label }}
+ <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>
+ {% 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"> </p>
+ <button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
+ </div>
</div>
- <div class="switch">
- <label>
- Expert Mode
- <input type="checkbox" id="expert-mode-switch">
- <span class="lever"></span>
- </label>
+ </div>
+ </div>
+ </div>
+
+ <div class="col s12 m3">
+ <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>
- </form>
+ </div>
</div>
</div>
+</form>
- <div class="card">
- <div class="card-content">
- <span class="card-title">Query Link</span>
- <form id="download-form" method="POST">
- {{ query_download_form.hidden_tag() }}
+<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>
<p>Downlaod all results of the current query as csv, excel or json file.</p>
<div class="input-field">
@@ -98,10 +110,9 @@
{% endfor %}
</div>
<button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
- </form>
+ </div>
</div>
</div>
-</div>
<div class="col s12 m9 hide" id="getting-query-results">
<div class="card">
@@ -116,11 +127,11 @@
</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-content">
<span class="card-title">Query Results</span>
- <table>
+ <table class="hide">
<thead>
<tr>
<th style="width: 5%">Title</th>
@@ -203,12 +214,11 @@
})
var queryFormElement = document.getElementById("query-form");
- var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results");
var contextResultsElement = document.getElementById("context-results");
var queryLoadingElement = document.getElementById("getting-query-results");
var queryResultsTableElement = document.getElementById("recieved-query-results");
- queryFormSubmitElement.addEventListener("click", function(event) {
+ queryFormElement.addEventListener("submit", function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
let queryData = {"context": formData.get("context"),
diff --git a/docker-compose.yml b/docker-compose.yml
index acc3e81e..3a055d3c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -25,7 +25,7 @@ services:
constraints:
- node.role == manager
environment:
- - VIRTUAL_HOST=nopaque.localhost
+ - VIRTUAL_HOST=nopaque.localhost,129.70.216.233
env_file: nopaque.env
image: gitlab.ub.uni-bielefeld.de:4567/sfb1288inf/opaque:development
volumes:
--
GitLab