mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-03 20:02:47 +00:00 
			
		
		
		
	Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into development
This commit is contained in:
		@@ -76,6 +76,7 @@ def analyse_corpus(corpus_id):
 | 
			
		||||
        prefix='inspect-display-options-form')
 | 
			
		||||
    return render_template(
 | 
			
		||||
        'corpora/analyse_corpus.html.j2',
 | 
			
		||||
        corpus=corpus,
 | 
			
		||||
        corpus_id=corpus_id,
 | 
			
		||||
        display_options_form=display_options_form,
 | 
			
		||||
        query_form=query_form,
 | 
			
		||||
 
 | 
			
		||||
@@ -41,173 +41,202 @@
 | 
			
		||||
  <div class="card">
 | 
			
		||||
    <div class="card-content" id="result-list" style="overflow: hidden;">
 | 
			
		||||
      <div class="error-container hide show-on-error"></div>
 | 
			
		||||
      <div class="hide show-on-success" style="margin-top:-20px;">
 | 
			
		||||
        <div class="row" style="margin-bottom: 0px;">
 | 
			
		||||
          <div class="col s12 m3 l3" id="results-info">
 | 
			
		||||
            <div class="row section">
 | 
			
		||||
              <h6 style="margin-top: 0px;">Infos</h6>
 | 
			
		||||
              <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
              <div class="col" id="infos">
 | 
			
		||||
                <p>
 | 
			
		||||
                  <span id="received-match-count">
 | 
			
		||||
                  </span> of
 | 
			
		||||
                  <span id="match-count"></span>
 | 
			
		||||
                  matches loaded.
 | 
			
		||||
                  <br>
 | 
			
		||||
                  Matches occured in
 | 
			
		||||
                  <span id="text-lookup-count"></span>
 | 
			
		||||
                  corpus files:
 | 
			
		||||
                  <br>
 | 
			
		||||
                  <span id=text-titles></span>
 | 
			
		||||
                </p>
 | 
			
		||||
                <p id="query-results-user-feedback">
 | 
			
		||||
                  <i class="material-icons">help</i>
 | 
			
		||||
                  The Server is still sending your results.
 | 
			
		||||
                  Functions like "Export Results" and "Match Inspect" will be
 | 
			
		||||
                  available after all matches have been loaded.
 | 
			
		||||
                </p>
 | 
			
		||||
                <div class="progress" id="query-results-progress">
 | 
			
		||||
                  <div class="determinate" id="query-results-determinate"></div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
      <div class=" row hide show-on-success">
 | 
			
		||||
        <div class="col s12 m2 l2" id="infos">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Infos</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="show-metadata"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                             waves-light
 | 
			
		||||
                             btn-flat"
 | 
			
		||||
                      type="submit">Corpus Metadata
 | 
			
		||||
                <i class="material-icons left">info_outline</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="col s12 m9 l9" id="actions-and-tools">
 | 
			
		||||
            <div class="row section">
 | 
			
		||||
              <div class="col s12 m3 l3" id="export">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Export</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <button class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat"
 | 
			
		||||
                            type="submit"
 | 
			
		||||
                            id="results-create">Create Results
 | 
			
		||||
                      <i class="material-icons left">build</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                    <button id="query-results-export"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            hide"
 | 
			
		||||
                            type="submit">Results
 | 
			
		||||
                      <i class="material-icons left">file_download</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <button class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            hide
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit"
 | 
			
		||||
                            id="sub-results-create">Create Sub-Results
 | 
			
		||||
                      <i class="material-icons left">build</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                    <button id="sub-results-export"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            hide"
 | 
			
		||||
                            type="submit">Sub-Results
 | 
			
		||||
                      <i class="material-icons left">file_download</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col s12 m3 l3" id="create">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <div class="switch">
 | 
			
		||||
                      Sub-Results creation:
 | 
			
		||||
                      <label>
 | 
			
		||||
                        Off
 | 
			
		||||
                        <input disabled
 | 
			
		||||
                               type="checkbox"
 | 
			
		||||
                               id="add-to-sub-results">
 | 
			
		||||
                        <span class="lever"></span>
 | 
			
		||||
                        On
 | 
			
		||||
                      </label>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="col s12 hide" id="sub-results-match-ids-div">
 | 
			
		||||
                    <div class="input-field">
 | 
			
		||||
                      <p><span id="nr-marked-matches"></span> matches marked
 | 
			
		||||
                        for Sub-Results:</p>
 | 
			
		||||
                      <textarea id="sub-results-match-ids"
 | 
			
		||||
                                class="materialize-textarea"
 | 
			
		||||
                                disabled>
 | 
			
		||||
                      </textarea>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col s12 m3 l3" id="display">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Display</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <form id="display-options-form">
 | 
			
		||||
                      {{ M.render_field(display_options_form.results_per_page,
 | 
			
		||||
                                        material_icon='format_list_numbered') }}
 | 
			
		||||
                      {{ M.render_field(display_options_form.result_context,
 | 
			
		||||
                                        material_icon='short_text') }}
 | 
			
		||||
                      {{ M.render_field(display_options_form.expert_mode) }}
 | 
			
		||||
                    </form>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col s12 m3 l3" id="anlysis">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Analysis</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <button id="placeholder1"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit">Action One
 | 
			
		||||
                      <i class="material-icons left">cloud</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="col s12">
 | 
			
		||||
                    <button id="placeholder2"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit">Action Two
 | 
			
		||||
                      <i class="material-icons left">add</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <p>
 | 
			
		||||
                <span id="received-match-count">
 | 
			
		||||
                </span> of
 | 
			
		||||
                <span id="match-count"></span>
 | 
			
		||||
                matches loaded.
 | 
			
		||||
                <br>
 | 
			
		||||
                Matches occured in
 | 
			
		||||
                <span id="text-lookup-count"></span>
 | 
			
		||||
                corpus files:
 | 
			
		||||
                <br>
 | 
			
		||||
                <span id=text-titles></span>
 | 
			
		||||
              </p>
 | 
			
		||||
              <p id="query-results-user-feedback">
 | 
			
		||||
                <i class="material-icons">help</i>
 | 
			
		||||
                The Server is still sending your results.
 | 
			
		||||
                Functions like "Export Results" and "Match Inspect" will be
 | 
			
		||||
                available after all matches have been loaded.
 | 
			
		||||
              </p>
 | 
			
		||||
              <div class="progress" id="query-results-progress">
 | 
			
		||||
                <div class="determinate" id="query-results-determinate"></div>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <!-- Table showing the query results -->
 | 
			
		||||
        <div class="col s12">
 | 
			
		||||
          <ul class="pagination paginationTop"></ul>
 | 
			
		||||
          <table class="responsive-table highlight">
 | 
			
		||||
            <thead>
 | 
			
		||||
              <tr>
 | 
			
		||||
                <th style="width: 2%">Nr.</th>
 | 
			
		||||
                <th style="width: 3%">Title</th>
 | 
			
		||||
                <th style="width: 25%">Left context</th>
 | 
			
		||||
                <th style="width: 35%">Match</th>
 | 
			
		||||
                <th style="width: 10%">Actions</th>
 | 
			
		||||
                <th style="width: 25%">Right Context</th>
 | 
			
		||||
              </tr>
 | 
			
		||||
            </thead>
 | 
			
		||||
            <tbody class="list" id="query-results">
 | 
			
		||||
            </tbody>
 | 
			
		||||
          </table>
 | 
			
		||||
          <ul class="pagination paginationBottom"></ul>
 | 
			
		||||
        <div class="col s12 m2 l2" id="export">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Export</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat"
 | 
			
		||||
                      type="submit"
 | 
			
		||||
                      id="results-create">Create Results
 | 
			
		||||
                <i class="material-icons left">build</i>
 | 
			
		||||
              </button>
 | 
			
		||||
              <button id="query-results-export"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide"
 | 
			
		||||
                      type="submit">Results
 | 
			
		||||
                <i class="material-icons left">file_download</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit"
 | 
			
		||||
                      id="sub-results-create">Create Sub-Results
 | 
			
		||||
                <i class="material-icons left">build</i>
 | 
			
		||||
              </button>
 | 
			
		||||
              <button id="sub-results-export"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide"
 | 
			
		||||
                      type="submit">Sub-Results
 | 
			
		||||
                <i class="material-icons left">file_download</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="create">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <div class="switch">
 | 
			
		||||
                Sub-Results creation:
 | 
			
		||||
                <label>
 | 
			
		||||
                  Off
 | 
			
		||||
                  <input disabled
 | 
			
		||||
                         type="checkbox"
 | 
			
		||||
                         id="add-to-sub-results">
 | 
			
		||||
                  <span class="lever"></span>
 | 
			
		||||
                  On
 | 
			
		||||
                </label>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12 hide" id="sub-results-match-ids-div">
 | 
			
		||||
              <div class="input-field">
 | 
			
		||||
                <p><span id="nr-marked-matches"></span> matches marked
 | 
			
		||||
                  for Sub-Results:</p>
 | 
			
		||||
                <textarea id="sub-results-match-ids"
 | 
			
		||||
                          class="materialize-textarea"
 | 
			
		||||
                          disabled>
 | 
			
		||||
                </textarea>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="display">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Display</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <form id="display-options-form">
 | 
			
		||||
                {{ M.render_field(display_options_form.results_per_page,
 | 
			
		||||
                                  material_icon='format_list_numbered') }}
 | 
			
		||||
                {{ M.render_field(display_options_form.result_context,
 | 
			
		||||
                                  material_icon='short_text') }}
 | 
			
		||||
                {{ M.render_field(display_options_form.expert_mode) }}
 | 
			
		||||
              </form>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="anlysis">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Analysis</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder1"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action One
 | 
			
		||||
                <i class="material-icons left">cloud</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder2"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action Two
 | 
			
		||||
                <i class="material-icons left">add</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="cite">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Cite Nopaque</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder1"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action One
 | 
			
		||||
                <i class="material-icons left">cloud</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder2"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action Two
 | 
			
		||||
                <i class="material-icons left">add</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <!-- Table showing the query results -->
 | 
			
		||||
      <div class="col s12">
 | 
			
		||||
        <ul class="pagination paginationTop"></ul>
 | 
			
		||||
        <table class="responsive-table highlight">
 | 
			
		||||
          <thead>
 | 
			
		||||
            <tr>
 | 
			
		||||
              <th style="width: 2%">Nr.</th>
 | 
			
		||||
              <th style="width: 3%">Title</th>
 | 
			
		||||
              <th style="width: 25%">Left context</th>
 | 
			
		||||
              <th style="width: 35%">Match</th>
 | 
			
		||||
              <th style="width: 10%">Actions</th>
 | 
			
		||||
              <th style="width: 25%">Right Context</th>
 | 
			
		||||
            </tr>
 | 
			
		||||
          </thead>
 | 
			
		||||
          <tbody class="list" id="query-results">
 | 
			
		||||
          </tbody>
 | 
			
		||||
        </table>
 | 
			
		||||
        <ul class="pagination paginationBottom"></ul>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
@@ -391,6 +420,7 @@
 | 
			
		||||
  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
 | 
			
		||||
  var textTitlesElement;  // matched text titles
 | 
			
		||||
  var nrMarkedMatches;  // count of matches marked for subresults
 | 
			
		||||
  var showMetadataButton;  // Button to show corpus metadata
 | 
			
		||||
 | 
			
		||||
  // ###### Defining local scope variables ######
 | 
			
		||||
  let contextPerItemElement;  // Form Element for display option
 | 
			
		||||
@@ -439,6 +469,7 @@
 | 
			
		||||
  textLookupCountElement = document.getElementById("text-lookup-count");
 | 
			
		||||
  textTitlesElement = document.getElementById("text-titles");
 | 
			
		||||
  nrMarkedMatches = document.getElementById("nr-marked-matches");
 | 
			
		||||
  showMetadataButton = document.getElementById("show-metadata");
 | 
			
		||||
 | 
			
		||||
  // ###### js list options and intialization ######
 | 
			
		||||
  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
 | 
			
		||||
@@ -588,8 +619,12 @@
 | 
			
		||||
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // ### Download events and sub-results creation ###
 | 
			
		||||
  // ### Show corpus Metadata
 | 
			
		||||
  showMetadataButton.onclick = () => {
 | 
			
		||||
    console.log("click");
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // ### Download events and sub-results creation ###
 | 
			
		||||
  var loadingSpinnerHTML = `
 | 
			
		||||
              <div class="preloader-wrapper button-icon-spinner small active">
 | 
			
		||||
                <div class="spinner-layer spinner-green-only">
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										109
									
								
								web/app/templates/macros/query_result_macro.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										109
									
								
								web/app/templates/macros/query_result_macro.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,109 @@
 | 
			
		||||
{% macro show_metadata(query_metadata) %}
 | 
			
		||||
<div class="col s12">
 | 
			
		||||
  <p>Below the metadata for the results from the Corpus
 | 
			
		||||
    <i>{{ query_metadata.corpus_name }}</i> generated with the query
 | 
			
		||||
    <i>{{ query_metadata.query }}</i> are shown.
 | 
			
		||||
  </p>
 | 
			
		||||
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<div class="col s12">
 | 
			
		||||
  <div class="card">
 | 
			
		||||
    <div class="card-content" id="results">
 | 
			
		||||
      <table class="responsive-table highlight">
 | 
			
		||||
        <thead>
 | 
			
		||||
          <tr>
 | 
			
		||||
            <th>Metadata Description</th>
 | 
			
		||||
            <th>Value</th>
 | 
			
		||||
          </tr>
 | 
			
		||||
        </thead>
 | 
			
		||||
        <tbody>
 | 
			
		||||
          {% for pair in query_metadata|dictsort %}
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td>{{ pair[0] }}</td>
 | 
			
		||||
            {% if pair[0] == 'corpus_all_texts'
 | 
			
		||||
               or pair[0] == 'text_lookup'  %}
 | 
			
		||||
              <td>
 | 
			
		||||
              <table>
 | 
			
		||||
              {% for key, value  in pair[1].items()  %}
 | 
			
		||||
                  <tr style="border-bottom: none;">
 | 
			
		||||
                    <td>
 | 
			
		||||
                      <i>{{ value['title'] }}</i> written
 | 
			
		||||
                      by <i>{{ value['author'] }}</i>
 | 
			
		||||
                      in <i>{{ value['publishing_year'] }}</i>
 | 
			
		||||
                      <a class="waves-effect
 | 
			
		||||
                                waves-light
 | 
			
		||||
                                btn
 | 
			
		||||
                                right
 | 
			
		||||
                                more-text-detials"
 | 
			
		||||
                         data-metadata-key="{{ pair[0] }}"
 | 
			
		||||
                         data-text-key="{{ key }}"
 | 
			
		||||
                         href="#modal-text-details">More
 | 
			
		||||
                          <i class="material-icons right"
 | 
			
		||||
                             data-metadata-key="{{ pair[0] }}"
 | 
			
		||||
                             data-text-key="{{ key }}">
 | 
			
		||||
                             info_outline
 | 
			
		||||
                          </i>
 | 
			
		||||
                      </a>
 | 
			
		||||
                    </td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
              {% endfor %}
 | 
			
		||||
              </table>
 | 
			
		||||
              </td>
 | 
			
		||||
            {% else %}
 | 
			
		||||
              <td>{{ pair[1] }}</td>
 | 
			
		||||
            {% endif %}
 | 
			
		||||
          </tr>
 | 
			
		||||
          {% endfor %}
 | 
			
		||||
        </tbody>
 | 
			
		||||
      </table>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Modal Structure -->
 | 
			
		||||
<div id="modal-text-details" class="modal modal-fixed-footer">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Bibliographic data</h4>
 | 
			
		||||
    <p id="bibliographic-data"></p>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
var moreTextDetailsButtons;
 | 
			
		||||
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
 | 
			
		||||
for (var btn of moreTextDetailsButtons) {
 | 
			
		||||
  btn.onclick = () => {
 | 
			
		||||
    let modal = document.getElementById("modal-text-details");
 | 
			
		||||
    modal = M.Modal.init(modal, {"dismissible": true});
 | 
			
		||||
    modal.open();
 | 
			
		||||
    let metadataKey = event.target.dataset.metadataKey;
 | 
			
		||||
    let textKey = event.target.dataset.textKey;
 | 
			
		||||
    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
 | 
			
		||||
    console.log(textData);
 | 
			
		||||
    let bibliographicData = document.getElementById("bibliographic-data");
 | 
			
		||||
    bibliographicData.innerHTML = "";
 | 
			
		||||
    let table = document.createElement("table");
 | 
			
		||||
    for (let [key, value] of Object.entries(textData)) {
 | 
			
		||||
      table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
      `
 | 
			
		||||
        <tr>
 | 
			
		||||
          <td>${key}</td>
 | 
			
		||||
          <td>${value}</td>
 | 
			
		||||
        </tr>
 | 
			
		||||
      `);
 | 
			
		||||
    }
 | 
			
		||||
    table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
      `
 | 
			
		||||
        <thead>
 | 
			
		||||
          <th>Description</th>
 | 
			
		||||
          <th>Value</th>
 | 
			
		||||
        </thead>
 | 
			
		||||
      `)
 | 
			
		||||
    bibliographicData.appendChild(table);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
		Reference in New Issue
	
	Block a user