mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
204 lines
8.2 KiB
Django/Jinja
204 lines
8.2 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 show-on-success">
|
|
{% 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 { CorpusAnalysisClient,
|
|
CorpusAnalysisDisplay,
|
|
SocketEventListener } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
|
|
import { recieveSession, recieveQueryStatus,
|
|
recieveQueryData } from '../../static/js/modules/nopaque.listenerFunctions.js';
|
|
import { Results, Data, MetaData } from '../../static/js/nopaque.Results.js';
|
|
import { ResultsList } from '../../static/js/nopaque.lists.js';
|
|
import { queryRenderResults, querySetup } from '../../static/js/modules/nopaque.listenerCallbacks.js'
|
|
|
|
/**
|
|
* Second Phase:
|
|
* Asynchronus and event driven code
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Initialize the CorpusAnalysisClient
|
|
const client = new CorpusAnalysisClient({'logging': true,
|
|
'dynamicMode': false});
|
|
console.info("CorpusAnalysisClient created as client:", client);
|
|
// Set up display elements which hare show depending on the client status
|
|
client.getHTMLElements(['#query-display']);
|
|
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
|
|
// Register those display elements to client
|
|
client.setDisplay("query", queryDisplay);
|
|
/**
|
|
* Initializing the results object holding all the data of a query.
|
|
* Also holds the metadata of one query.
|
|
* resultsListOptions is set to determine how many results per page are
|
|
* shown etc.
|
|
* Lastly it contains the object ResultsList which is a list.js
|
|
* subclass which handles the visual representation of the query data.
|
|
*/
|
|
let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
|
|
ResultsList.options.page = displayOptionsData["resultsPerPage"];
|
|
let data = new Data();
|
|
let resultsList = new ResultsList("result-list", ResultsList.options);
|
|
let resultsMetaData = new MetaData();
|
|
let results = new Results(data, resultsList, resultsMetaData);
|
|
// make results part of the client
|
|
client.results = results;
|
|
// inits some object keys and values
|
|
client.results.clearAll();
|
|
console.info('Initialized the Results object.')
|
|
// init some modals
|
|
let deleteOverlay = () => {
|
|
let overlay = document.getElementsByClassName("modal-overlay")[0];
|
|
overlay.remove();
|
|
};
|
|
client.getHTMLElements(['#meta-data-modal'])
|
|
client.metaDataModal = M.Modal.init(client.metaDataModal,
|
|
{'preventScrolling': false,
|
|
'opacity': 0.0,
|
|
'dismissible': false,
|
|
'onOpenEnd': deleteOverlay});
|
|
// saving imported data into client object
|
|
const payload = {{ query_result_file_content|tojson|safe }};
|
|
|
|
|
|
//
|
|
// // Initialization of interactionElemnts
|
|
// // An interactionElement is an object identifing a switch or button via
|
|
// // htmlID. Callbacks are set for these elements which will be triggered on
|
|
// // a pagination interaction by the user or if the status of the element has
|
|
// // been altered. (Like the switche has ben turned on or off).
|
|
// interactionElements = new InteractionElements();
|
|
// let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
|
|
// expertModeInteraction.setCallback("on",
|
|
// results.jsList.expertModeOn,
|
|
// results.jsList,
|
|
// ["query-display"])
|
|
// expertModeInteraction.setCallback("off",
|
|
// results.jsList.expertModeOff,
|
|
// results.jsList,
|
|
// ["query-display"])
|
|
//
|
|
// let activateInspectInteraction = new InteractionElement("inspect",
|
|
// false);
|
|
// activateInspectInteraction.setCallback("noCheck",
|
|
// results.jsList.activateInspect,
|
|
// results.jsList);
|
|
//
|
|
// let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
|
|
// false);
|
|
// changeContextInteraction.setCallback("noCheck",
|
|
// results.jsList.changeContext,
|
|
// results.jsList)
|
|
// interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
|
|
//
|
|
// // checks if a change for every interactionElement happens and executes
|
|
// // the callbacks accordingly
|
|
// interactionElements.onChangeExecute();
|
|
//
|
|
// // eventListener if pagination is used to apply new context size to new page
|
|
// // and also activate inspect match if progress is 100
|
|
// // also adds more interaction buttons like add to sub results
|
|
// for (let element of paginationElements) {
|
|
// element.addEventListener("click", (event) => {
|
|
// results.jsList.pageChangeEventInteractionHandler(interactionElements);
|
|
// });
|
|
// }
|
|
//
|
|
// render results directly with callbacks because we are not in dynamic mode
|
|
querySetup(payload, client);
|
|
queryRenderResults(payload, client);
|
|
|
|
// // ### Show corpus Metadata
|
|
// showMetaDataButton.onclick = () => {
|
|
// metaDataModal.open();
|
|
// };
|
|
//
|
|
// // live update of hits per page if hits per page value is changed
|
|
// let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
|
|
// hitsPerPageInputElement.onchange = changeHitsPerPageBind;
|
|
//
|
|
// // live update of lr context per item if context value is changed
|
|
// contextPerItemElement.onchange = results.jsList.changeContext;
|
|
//
|
|
// // new insepct event listener makeing use of javascript bubbleing
|
|
// let resultsTable = document.getElementById("query-results");
|
|
// resultsTable.addEventListener("click", (event) => {
|
|
// if (event.target.classList.contains("inspect-btn")) {
|
|
// const dataIndex = event.target.closest("tr").dataset.index;
|
|
// const fakeResponse = results.jsList.createFakeResponse();
|
|
// results.jsList.showMatchContext(fakeResponse);
|
|
// }
|
|
// });
|
|
//
|
|
// // scroll to top button if user scrolled down the list
|
|
// let headline = document.querySelector(".headline");
|
|
// let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
|
|
// window.addEventListener("scroll", (event) => {
|
|
// if (pageYOffset > 250) {
|
|
// scrollToTop.classList.toggle("hide", false);
|
|
// } else {
|
|
// scrollToTop.classList.toggle("hide", true);
|
|
// }
|
|
// });
|
|
// scrollToTop.onclick = () => {
|
|
// headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
|
|
// };
|
|
});
|
|
</script>
|
|
{% endblock %}
|