mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-21 05:20:36 +00:00
New project structure
This commit is contained in:
Stephan Porada
@ -65,173 +65,7 @@
|
||||
{% include 'modals/export_query_results.html.j2' %}
|
||||
{% include 'modals/context_modal.html.j2' %}
|
||||
|
||||
<!-- import modules -->
|
||||
<script type="module">
|
||||
/**
|
||||
* First Phase:
|
||||
* Document content is loaded and scripts are being imported and executed.
|
||||
*/
|
||||
import {
|
||||
CorpusAnalysisClient,
|
||||
CorpusAnalysisDisplay,
|
||||
SocketEventListener,
|
||||
ListenerCallback,
|
||||
} from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
|
||||
import {
|
||||
recieveSession,
|
||||
recieveQueryStatus,
|
||||
recieveQueryData,
|
||||
} from '../../static/js/modules/nopaque.listenerFunctions.js';
|
||||
import {
|
||||
querySetup,
|
||||
queryRenderResults,
|
||||
} from '../../static/js/modules/nopaque.listenerCallbacks.js'
|
||||
import {
|
||||
Results,
|
||||
Data,
|
||||
MetaData,
|
||||
} from '../../static/js/nopaque.Results.js';
|
||||
import {
|
||||
ResultsList,
|
||||
} from '../../static/js/nopaque.lists.js';
|
||||
import {
|
||||
scrollToTop,
|
||||
} from '../../static/js/modules/nopaque.scrollToTop.js';
|
||||
import {
|
||||
InteractionElement,
|
||||
InteractionElements,
|
||||
} from '../../static/js/modules/nopaque.InteractionElement.js';
|
||||
|
||||
/**
|
||||
* Second Phase:
|
||||
* Asynchronus and event driven code
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Initialize the CorpusAnalysisClient dynamic mode
|
||||
let corpusId = {{ corpus_id}}
|
||||
const client = new CorpusAnalysisClient({'corpusId': corpusId,
|
||||
'socket': nopaque.socket,
|
||||
'logging': true,
|
||||
'dynamicMode': true});
|
||||
console.info("CorpusAnalysisClient created as client:", client);
|
||||
// Initialize modals which are shown depending on events or client status
|
||||
const initLoadingElement = document.getElementById("init-display");
|
||||
const initLoadingModal = M.Modal.init(initLoadingElement,
|
||||
{"dismissible": false});
|
||||
// Set up display elements which are shown depending on the client status
|
||||
const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
|
||||
client.getHTMLElements(['#query-display']);
|
||||
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
|
||||
// Register those display elements to client
|
||||
client.setDisplay("init", initLoadingDisplay);
|
||||
client.setDisplay("query", queryDisplay);
|
||||
/**
|
||||
* Initializing the results object holding all the data of a query.
|
||||
* Also holds the metadata of one query.
|
||||
* 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;
|
||||
console.info('Initialized the Results object.')
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
let interactionElements = new InteractionElements();
|
||||
const expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
|
||||
expertModeInteraction.setCallback('on',
|
||||
results.jsList.expertModeOn,
|
||||
results.jsList,
|
||||
['query-display', client]);
|
||||
expertModeInteraction.setCallback('off',
|
||||
results.jsList.expertModeOff,
|
||||
results.jsList,
|
||||
['query-display', client]);
|
||||
const subResultsInteraction = new InteractionElement("add-to-sub-results");
|
||||
subResultsInteraction.setCallback('on',
|
||||
results.jsList.activateAddToSubResults,
|
||||
results.jsList);
|
||||
subResultsInteraction.setCallback('off',
|
||||
results.jsList.deactivateAddToSubResults,
|
||||
results.jsList);
|
||||
|
||||
const activateInspectInteraction = new InteractionElement('inspect',
|
||||
false);
|
||||
activateInspectInteraction.setCallback('noCheck',
|
||||
results.jsList.activateInspect,
|
||||
results.jsList);
|
||||
const changeContextInteraction = new InteractionElement('display-options-form-results_per_page',
|
||||
false);
|
||||
changeContextInteraction.setCallback('noCheck',
|
||||
results.jsList.changeContext,
|
||||
results.jsList)
|
||||
interactionElements.addInteractions([expertModeInteraction,
|
||||
subResultsInteraction,
|
||||
activateInspectInteraction,
|
||||
changeContextInteraction]);
|
||||
|
||||
/**
|
||||
* Checks if a change for every interactionElement happens and executes
|
||||
* the callbacks accordingly.
|
||||
*/
|
||||
interactionElements.onChangeExecute();
|
||||
/**
|
||||
* Register listeners listening to socket.io events and their callbacks
|
||||
* Afterwards load them.
|
||||
*/
|
||||
const listenForSession = new SocketEventListener('corpus_analysis_init',
|
||||
recieveSession);
|
||||
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
|
||||
recieveQueryStatus);
|
||||
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
|
||||
querySetup);
|
||||
listenForQueryStatus.setCallbacks([queryStatusCallback]);
|
||||
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
|
||||
recieveQueryData);
|
||||
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
|
||||
queryRenderResults);
|
||||
listenForQueryData.setCallbacks([queryDataCallback]);
|
||||
client.setSocketEventListeners([listenForSession, listenForQueryStatus,
|
||||
listenForQueryData]);
|
||||
client.loadSocketEventListeners();
|
||||
// Session initialization
|
||||
client.requestSession();
|
||||
// Send a query and recieve its answer data
|
||||
let queryFormElement = document.getElementById("query-form");
|
||||
queryFormElement.addEventListener("submit", (event) => {
|
||||
try {
|
||||
/**
|
||||
* Selects first page of result list if pagination is already available
|
||||
* from an query submitted before.
|
||||
* This avoids confusion for the user e.g.: The user was on page 24
|
||||
* reviewing the results and issues a new query. He would not see any
|
||||
* results until the new results reach page 24 or he clicks on another
|
||||
* valid result page element from the new pagination.
|
||||
*/
|
||||
let firstPageElement = document.querySelector('a.page');
|
||||
firstPageElement.click();
|
||||
} catch (e) {
|
||||
// No page element is present if first query is submitted.
|
||||
}
|
||||
// Prevent page from reloading on submit
|
||||
event.preventDefault();
|
||||
// Get query string and send query to server
|
||||
results.data.getQueryStr(queryFormElement);
|
||||
client.requestQueryData(results.data.query);
|
||||
|
||||
// Add scrollToTop functionality
|
||||
scrollToTop();
|
||||
});
|
||||
});
|
||||
<script type="text/javascript"
|
||||
src="web/app/static/js/modules/corpus_analysis/main.js">
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
237
web/app/templates/corpora/analyse_corpus.html.j2.new.bak
Normal file
237
web/app/templates/corpora/analyse_corpus.html.j2.new.bak
Normal file
@ -0,0 +1,237 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% set headline = ' ' %}
|
||||
|
||||
{% set full_width = True %}
|
||||
{% set imported = False %}
|
||||
|
||||
{% 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>
|
||||
{{ query_form.query() }}
|
||||
{{ query_form.query.label }}
|
||||
<span class="helper-text">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2 right-align">
|
||||
<br class="hide-on-small-only">
|
||||
{{ M.render_field(query_form.submit, material_icon='send') }}
|
||||
</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="error-container hide show-on-error"></div>
|
||||
<div class=" row hide show-on-success">
|
||||
{% include 'interactions/infos.html.j2' %}
|
||||
{% include 'interactions/export.html.j2' %}
|
||||
{% include 'interactions/create.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/analysis_init.html.j2' %}
|
||||
{% include 'modals/export_query_results.html.j2' %}
|
||||
{% include 'modals/context_modal.html.j2' %}
|
||||
|
||||
<!-- import modules -->
|
||||
<script type="module">
|
||||
/**
|
||||
* First Phase:
|
||||
* Document content is loaded and scripts are being imported and executed.
|
||||
*/
|
||||
import {
|
||||
CorpusAnalysisClient,
|
||||
CorpusAnalysisDisplay,
|
||||
SocketEventListener,
|
||||
ListenerCallback,
|
||||
} from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
|
||||
import {
|
||||
recieveSession,
|
||||
recieveQueryStatus,
|
||||
recieveQueryData,
|
||||
} from '../../static/js/modules/nopaque.listenerFunctions.js';
|
||||
import {
|
||||
querySetup,
|
||||
queryRenderResults,
|
||||
} from '../../static/js/modules/nopaque.listenerCallbacks.js'
|
||||
import {
|
||||
Results,
|
||||
Data,
|
||||
MetaData,
|
||||
} from '../../static/js/nopaque.Results.js';
|
||||
import {
|
||||
ResultsList,
|
||||
} from '../../static/js/nopaque.lists.js';
|
||||
import {
|
||||
scrollToTop,
|
||||
} from '../../static/js/modules/nopaque.scrollToTop.js';
|
||||
import {
|
||||
InteractionElement,
|
||||
InteractionElements,
|
||||
} from '../../static/js/modules/nopaque.InteractionElement.js';
|
||||
|
||||
/**
|
||||
* Second Phase:
|
||||
* Asynchronus and event driven code
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Initialize the CorpusAnalysisClient dynamic mode
|
||||
let corpusId = {{ corpus_id}}
|
||||
const client = new CorpusAnalysisClient({'corpusId': corpusId,
|
||||
'socket': nopaque.socket,
|
||||
'logging': true,
|
||||
'dynamicMode': true});
|
||||
console.info("CorpusAnalysisClient created as client:", client);
|
||||
// Initialize modals which are shown depending on events or client status
|
||||
const initLoadingElement = document.getElementById("init-display");
|
||||
const initLoadingModal = M.Modal.init(initLoadingElement,
|
||||
{"dismissible": false});
|
||||
// Set up display elements which are shown depending on the client status
|
||||
const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
|
||||
client.getHTMLElements(['#query-display']);
|
||||
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
|
||||
// Register those display elements to client
|
||||
client.setDisplay("init", initLoadingDisplay);
|
||||
client.setDisplay("query", queryDisplay);
|
||||
/**
|
||||
* Initializing the results object holding all the data of a query.
|
||||
* Also holds the metadata of one query.
|
||||
* 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;
|
||||
console.info('Initialized the Results object.')
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
let interactionElements = new InteractionElements();
|
||||
const expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
|
||||
expertModeInteraction.setCallback('on',
|
||||
results.jsList.expertModeOn,
|
||||
results.jsList,
|
||||
['query-display', client]);
|
||||
expertModeInteraction.setCallback('off',
|
||||
results.jsList.expertModeOff,
|
||||
results.jsList,
|
||||
['query-display', client]);
|
||||
const subResultsInteraction = new InteractionElement("add-to-sub-results");
|
||||
subResultsInteraction.setCallback('on',
|
||||
results.jsList.activateAddToSubResults,
|
||||
results.jsList);
|
||||
subResultsInteraction.setCallback('off',
|
||||
results.jsList.deactivateAddToSubResults,
|
||||
results.jsList);
|
||||
|
||||
const activateInspectInteraction = new InteractionElement('inspect',
|
||||
false);
|
||||
activateInspectInteraction.setCallback('noCheck',
|
||||
results.jsList.activateInspect,
|
||||
results.jsList);
|
||||
const changeContextInteraction = new InteractionElement('display-options-form-results_per_page',
|
||||
false);
|
||||
changeContextInteraction.setCallback('noCheck',
|
||||
results.jsList.changeContext,
|
||||
results.jsList)
|
||||
interactionElements.addInteractions([expertModeInteraction,
|
||||
subResultsInteraction,
|
||||
activateInspectInteraction,
|
||||
changeContextInteraction]);
|
||||
|
||||
/**
|
||||
* Checks if a change for every interactionElement happens and executes
|
||||
* the callbacks accordingly.
|
||||
*/
|
||||
interactionElements.onChangeExecute();
|
||||
/**
|
||||
* Register listeners listening to socket.io events and their callbacks
|
||||
* Afterwards load them.
|
||||
*/
|
||||
const listenForSession = new SocketEventListener('corpus_analysis_init',
|
||||
recieveSession);
|
||||
const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
|
||||
recieveQueryStatus);
|
||||
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
|
||||
querySetup);
|
||||
listenForQueryStatus.setCallbacks([queryStatusCallback]);
|
||||
const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
|
||||
recieveQueryData);
|
||||
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
|
||||
queryRenderResults);
|
||||
listenForQueryData.setCallbacks([queryDataCallback]);
|
||||
client.setSocketEventListeners([listenForSession, listenForQueryStatus,
|
||||
listenForQueryData]);
|
||||
client.loadSocketEventListeners();
|
||||
// Session initialization
|
||||
client.requestSession();
|
||||
// Send a query and recieve its answer data
|
||||
let queryFormElement = document.getElementById("query-form");
|
||||
queryFormElement.addEventListener("submit", (event) => {
|
||||
try {
|
||||
/**
|
||||
* Selects first page of result list if pagination is already available
|
||||
* from an query submitted before.
|
||||
* This avoids confusion for the user e.g.: The user was on page 24
|
||||
* reviewing the results and issues a new query. He would not see any
|
||||
* results until the new results reach page 24 or he clicks on another
|
||||
* valid result page element from the new pagination.
|
||||
*/
|
||||
let firstPageElement = document.querySelector('a.page');
|
||||
firstPageElement.click();
|
||||
} catch (e) {
|
||||
// No page element is present if first query is submitted.
|
||||
}
|
||||
// Prevent page from reloading on submit
|
||||
event.preventDefault();
|
||||
// Get query string and send query to server
|
||||
results.data.getQueryStr(queryFormElement);
|
||||
client.requestQueryData(results.data.query);
|
||||
|
||||
// Add scrollToTop functionality
|
||||
scrollToTop();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user