-
+
{% include 'tables/query_results.html.j2' %}
@@ -93,6 +97,10 @@ import {
ResultsList,
ViewEventListener,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
+// Import listener which will be registered to the ViewEventListener class.
+import {
+ recieveClientNotification,
+} from '../../static/js/modules/corpus_analysis/view/listeners.js';
import {
scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
@@ -130,7 +138,116 @@ document.addEventListener("DOMContentLoaded", () => {
saveQueryData,
[client, results]);
listenForQueryData.setCallbacks([queryDataCallback]);
- // TODO: execute callbacks manually with right input
+ // Set the event listeners
+ client.setSocketEventListeners([
+ listenForQueryStatus,
+ listenForQueryData,
+ ]);
+ /**
+ * Register resultsList listeners listening to notification events emitted by
+ * the Client class.
+ */
+ const listenForClientNotification = new ViewEventListener('notify-view',
+ recieveClientNotification);
+ resultsList.setNotificationListeners([listenForClientNotification]);
+ resultsList.loadNotificationListeners();
+ // Get all needed HTMLElements for the following event listeners.
+ resultsList.getHTMLElements([
+ '.add-btn',
+ '.pagination',
+ '#display-options-form-expert_mode',
+ '#display-options-form-result_context',
+ '#display-options-form-results_per_page',
+ '#full-results-create',
+ '#meta-data-modal-content',
+ '#meta-data-modal',
+ '#query-results-table',
+ '#show-meta-data',
+ '#sub-results-create',
+ ]);
+ // Execute client event listener callbacks manually because dynamicMode is false
+ client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson])
+ client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson])
+ /**
+ * The following listener handles what functions are called when the user
+ * does use the page navigation to navigate to a new page.
+ */
+ for (let element of resultsList.pagination) {
+ element.addEventListener("click", (event) => {
+ // Shows match context according to the user picked value on a new page.
+ resultsList.changeContext();
+ // De- or activates expertMode on new page depending on switch value.
+ if (resultsList.displayOptionsFormExpertMode.checked) {
+ resultsList.expertModeOn('query-display', results);
+ } else {
+ resultsList.expertModeOff('query-display');
+ }
+ // Activates inspect buttons on new page if client is not busy.
+ resultsList.toggleInspectButtons(client);
+ });
+ }
+
+ /**
+ * The following event Listener handles the expert mode switch for the list.
+ */
+ resultsList.displayOptionsFormExpertMode.onchange = (event) => {
+ if (event.target.checked) {
+ resultsList.expertModeOn('query-display', results);
+ } else {
+ resultsList.expertModeOff('query-display');
+ }
+ };
+
+ /**
+ * The following event Listener handles the add-btn and the inspect-btn
+ * onclick events via bubbleing.
+ */
+ resultsList.queryResultsTable.addEventListener('click', (event) => {
+ let dataIndex;
+ if (event.target.classList.contains('inspect-btn')) {
+ dataIndex = parseInt(event.target.closest('tr').dataset.index);
+ resultsList.inspect(client, results, [dataIndex], 'inspect');
+ } else if (event.target.classList.contains('add-btn')) {
+ dataIndex = parseInt(event.target.closest('tr').dataset.index);
+ resultsList.addToSubResults(dataIndex, client);
+ }
+ })
+
+ /**
+ * Following event listeners handle the change of Context size per match and
+ * the number of matches shown per page.
+ */
+ resultsList.displayOptionsFormResultsPerPage.onchange = (event) => {
+ resultsList.changeHitsPerPage(client, results);
+ };
+ resultsList.displayOptionsFormResultContext.onchange = (event) => {
+ resultsList.changeContext();
+ };
+
+ /**
+ * The following event listener handles the show metadata button and its
+ * functionality. Before the needed modal is initialized.
+ */
+ resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
+ 'preventScrolling': false,
+ 'opacity': 0.0,
+ 'dismissible': false,
+ 'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
+ });
+ resultsList.showMetaData.onclick = () => {
+ resultsList.metaDataModalContent.textContent = '';
+ let table = resultsList.createMetaDataForModal(results.metaData);
+ resultsList.metaDataModalContent.insertAdjacentHTML('afterbegin', table);
+ resultsList.metaDataModal.open();
+ let collapsibles = resultsList.metaDataModalContent.querySelectorAll(".text-metadata");
+ for (let collapsible of collapsibles) {
+ collapsible.onclick = () => {
+ let elems = resultsList.metaDataModalContent.querySelectorAll('.collapsible');
+ let instances = M.Collapsible.init(elems, {accordion: false});
+ resultsList.createTextDetails(results.metaData);
+ }
+ }
+ };
// Enable scroll to Top functionality.
scrollToTop('#headline', '#menu-scroll-to-top-div');
});