mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
139 lines
4.8 KiB
Django/Jinja
139 lines
4.8 KiB
Django/Jinja
{% extends "nopaque.html.j2" %}
|
|
|
|
{% set headline = ' ' %}
|
|
|
|
{% set full_width = True %}
|
|
{% set imported = True %}
|
|
|
|
{% block page_content %}
|
|
|
|
<div class="col s12">
|
|
<div class="card">
|
|
<div class="card-content" style="padding-top: 5px;
|
|
padding-bottom: 0px;">
|
|
<!-- Query form -->
|
|
<div class="row">
|
|
<form id="query-form">
|
|
<div class="col s12 m10">
|
|
<div class="input-field">
|
|
<i class="material-icons prefix">search</i>
|
|
<input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
|
|
<label for="disabled">Query</label>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2 right-align">
|
|
<br class="hide-on-small-only">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- entire results div/card -->
|
|
<div class="col s12" id="query-display">
|
|
<div class="card">
|
|
<div class="card-content" id="result-list" style="overflow: hidden;">
|
|
<div class="row">
|
|
{% include 'interactions/infos.html.j2' %}
|
|
{% include 'interactions/display.html.j2' %}
|
|
{% include 'interactions/analysis.html.j2' %}
|
|
{% include 'interactions/cite.html.j2' %}
|
|
</div>
|
|
{% include 'tables/query_results.html.j2' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll to top element -->
|
|
{% include 'interactions/scroll_to_top.html.j2' %}
|
|
|
|
<!-- Modals -->
|
|
{% include 'modals/show_metadata.html.j2' %}
|
|
{% include 'modals/show_text_details.html.j2' %}
|
|
{% include 'modals/context_modal.html.j2' %}
|
|
|
|
|
|
<script type="module">
|
|
/**
|
|
* First Phase:
|
|
* Document content is loaded and scripts are being imported and executed.
|
|
*/
|
|
|
|
// Import Client classes. Client handles the server client communication.
|
|
import {
|
|
Client,
|
|
ClientEventListener,
|
|
ListenerCallback,
|
|
} from '../../static/js/modules/corpus_analysis/client/Client.js';
|
|
/**
|
|
* Import Client listener functions which will listen for defined socket or
|
|
* javascript events.
|
|
*/
|
|
import {
|
|
recieveQueryStatus,
|
|
recieveQueryData,
|
|
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
|
|
// Import client listener callbacks so they can be registered to the listeners.
|
|
import {
|
|
prepareQueryData,
|
|
saveQueryData,
|
|
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
|
|
// Import Results class which will be used to save results data of a query etc.
|
|
import {
|
|
Results,
|
|
} from '../../static/js/modules/corpus_analysis/model/Results.js';
|
|
/**
|
|
* Import the ResultsList which can be understood as a View class that handles
|
|
* how the data from Results is represented to the user. The ViewEventListener
|
|
* is used to register listener functions which listen for events emitred by
|
|
* the Client.
|
|
*/
|
|
import {
|
|
ResultsList,
|
|
ViewEventListener,
|
|
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
|
|
import {
|
|
scrollToTop,
|
|
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
|
|
/**
|
|
* Second Phase:
|
|
* Asynchronus and event driven code.
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Initialize the client with dynamicMode set to false.
|
|
const client = new Client({'logging': true,
|
|
'dynamicMode': false});
|
|
/**
|
|
* Initializing the results object as a model holding all the data of a
|
|
* query. Also holds the metadata of one query and results data.
|
|
* After that initialize the ResultsList object as the View handeling the
|
|
* representation of the data for the user.
|
|
*/
|
|
let results = new Results();
|
|
let resultsList = new ResultsList('result-list', ResultsList.options);
|
|
// Import results data from json file.
|
|
const resultsJson = {{ query_result_file_content|tojson|safe }};
|
|
/**
|
|
* Register needed listeners and their callbacks. But we will
|
|
* just call the attached callbacks manually. Because dynamicMode is false.
|
|
*/
|
|
const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
|
|
recieveQueryStatus);
|
|
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
|
|
prepareQueryData,
|
|
[client, results]);
|
|
listenForQueryStatus.setCallbacks([queryStatusCallback]);
|
|
const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
|
|
recieveQueryData);
|
|
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
|
|
saveQueryData,
|
|
[client, results]);
|
|
listenForQueryData.setCallbacks([queryDataCallback]);
|
|
// TODO: execute callbacks manually with right input
|
|
// Enable scroll to Top functionality.
|
|
scrollToTop('#headline', '#menu-scroll-to-top-div');
|
|
});
|
|
</script>
|
|
{% endblock %}
|