mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Change corpus analyse ui
This commit is contained in:
		@@ -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 %}
 | 
			
		||||
<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>
 | 
			
		||||
        <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 %}
 | 
			
		||||
        </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 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 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>
 | 
			
		||||
      </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>
 | 
			
		||||
        <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"),
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user