nopaque/web/app/templates/main/dashboard.html.j2

255 lines
11 KiB
Plaintext
Raw Normal View History

2020-02-07 14:21:59 +00:00
{% extends "nopaque.html.j2" %}
2019-08-01 08:33:05 +00:00
{% block page_content %}
2020-07-22 10:16:33 +00:00
<div class="col s12">
<h3>My Corpora and Query results</h3>
<p>Create a corpus to interactively perform linguistic analysis or import query results to save interesting passages.</p>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s6"><a class="active" href="#corpora">Corpora</a></li>
<li class="tab col s6"><a href="#query-results">Query results</a></li>
</ul>
</div>
<div class="col s12" id="corpora">
<div class="card">
<div class="card-content">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table class="highlight">
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
</div>
<div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div>
</div>
2020-01-15 09:52:51 +00:00
</div>
2020-07-22 10:16:33 +00:00
<div class="col s12" id="query-results">
<div class="card">
<div class="card-content">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-query-results" class="search" type="search"></input>
<label for="search-query-results">Search query result</label>
</div>
<ul class="pagination paginationTop"></ul>
<table class="highlight responsive-table">
<thead>
<tr>
<th>
<span class="sort" data-sort="title">Title</span> and<br>
<span class="sort" data-sort="description">Description</span>
</th>
<th>
<span class="sort" data-sort="corpus">Corpus</span> and<br>
<span class="sort" data-sort="query">Query</span>
</th>
<th>{# Actions #}</th>
</tr>
</thead>
<tbody class="list">
<tr class="show-if-only-child">
<td colspan="5">
<span class="card-title"><i class="material-icons left">folder</i>Nothing here...</span>
<p>No query results yet imported.</p>
</td>
</tr>
</tbody>
</table>
<ul class="pagination paginationBottom"></ul>
</div>
<div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('query_results.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a>
</div>
</div>
</div>
</div>
2019-08-01 08:33:05 +00:00
</div>
2020-02-12 14:48:51 +00:00
<div class="col s12" id="jobs">
2019-09-27 11:56:52 +00:00
<h3>My Jobs</h3>
2020-02-27 10:29:42 +00:00
<p>A job is the execution of a service provided by nopaque. You can create any number of jobs and let them be processed simultaneously.</p>
2020-01-15 09:52:51 +00:00
<div class="card">
2020-02-12 14:48:51 +00:00
<div class="card-content">
2020-01-15 09:52:51 +00:00
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="search"></input>
2020-01-15 09:52:51 +00:00
<label for="search-job">Search job</label>
</div>
<table class="highlight">
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
2020-01-15 09:52:51 +00:00
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
</div>
<div class="card-action right-align">
2020-02-27 10:30:05 +00:00
<p><a class="modal-trigger waves-effect waves-light btn" href="#" data-target="new-job-modal"><i class="material-icons left">add</i>New job</a></p>
</div>
</div>
2019-08-01 08:33:05 +00:00
</div>
<!-- Modals -->
<div id="delete-corpus-modal" class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the corpus <b id="selected-corpus-title"></b>? All files will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
<a class="btn modal-close red waves-effect waves-light" id="selected-corpus-delete-link"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
<div id="delete-job-modal" class="modal">
<div class="modal-content">
<h4>Confirm job deletion</h4>
<p>Do you really want to delete the job <b id="selected-job-title"></b>? All files will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
<a class="btn modal-close red waves-effect waves-light" id="selected-job-delete-link"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
2020-07-22 10:16:33 +00:00
<div id="delete-query-result-modal" class="modal no-autoinit">
<div class="modal-content">
<h4>Confirm query result deletion</h4>
<p>Do you really want to delete the query result <b id="selected-query-result-title"></b>? It will be permanently deleted.</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
<a class="btn modal-close red waves-effect waves-light" id="selected-query-result-delete-link"><i class="material-icons left">delete</i>Delete</a>
</div>
</div>
2020-01-15 09:52:51 +00:00
<div id="new-job-modal" class="modal">
<div class="modal-content">
2020-01-16 14:24:24 +00:00
<h4>Select a service</h4>
2020-02-27 10:29:42 +00:00
<div class="row">
<div class="col s12 m4">
2020-04-09 08:02:24 +00:00
<a href="{{ url_for('services.service', service='file-setup') }}" style="color: rgba(0,0,0,0.87);">
2020-02-27 10:29:42 +00:00
<div class="card-panel center-align hoverable">
<i class="large material-icons" style="color: #ee6e73;">burst_mode</i>
<p>File setup</p>
<p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="{{ url_for('services.service', service='ocr') }}" style="color: rgba(0,0,0,0.87);">
<div class="card-panel center-align hoverable">
<i class="large material-icons" style="color: #ee6e73;">find_in_page</i>
<p>Optical Character Recognition</p>
<p class="light">nopaque converts your image data like photos or scans into text data through a process called OCR. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="{{ url_for('services.service', service='nlp') }}" style="color: rgba(0,0,0,0.87);">
<div class="card-panel center-align hoverable">
<i class="large material-icons" style="color: #ee6e73;">format_textdirection_l_to_r</i>
<p>Natural Language Processing</p>
<p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
</div>
</a>
</div>
</div>
2020-01-15 09:52:51 +00:00
</div>
<div class="modal-footer">
2020-02-20 14:59:08 +00:00
<a href="#!" class="modal-close waves-effect waves-light btn-flat">Close</a>
2020-01-15 09:52:51 +00:00
</div>
</div>
<script>
2020-02-12 11:19:54 +00:00
var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
2020-07-15 06:57:39 +00:00
"Corpus");
var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "Job");
2020-07-22 10:16:33 +00:00
var queryResultList = new RessourceList("query-results",
nopaque.queryResultsSubscribers,
"QueryResult", {page: 10});
var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
var deleteCorpusModal;
var deleteJobModalElement = document.getElementById("delete-job-modal");
var deleteJobModal;
2020-07-22 10:16:33 +00:00
var deleteQueryResultModalElement = document.getElementById("delete-query-result-modal");
var deleteQueryResultModal;
var selectedCorpusDeleteLinkElement = document.getElementById("selected-corpus-delete-link");
var selectedCorpusTitleElement = document.getElementById("selected-corpus-title");
var selectedJobDeleteLinkElement = document.getElementById("selected-job-delete-link");
var selectedJobTitleElement = document.getElementById("selected-job-title");
2020-07-22 10:16:33 +00:00
var selectedQueryResultDeleteLinkElement = document.getElementById("selected-query-result-delete-link");
var selectedQueryResultTitleElement = document.getElementById("selected-query-result-title");
function prepareDeleteCorpusModal(selectedCorpusId) {
var selectedCorpus;
if (selectedCorpusId in nopaque.user.corpora) {
selectedCorpus = nopaque.user.corpora[selectedCorpusId];
selectedCorpusDeleteLinkElement.href = `/corpora/${selectedCorpus.id}/delete`;
selectedCorpusTitleElement.innerText = selectedCorpus.title;
} else {
selectedQueryResult = undefined;
selectedCorpusDeleteLinkElement.href = "";
selectedCorpusTitleElement.innerText = "";
}
deleteCorpusModal.open();
}
function prepareDeleteJobModal(selectedJobId) {
var selectedJob;
if (selectedJobId in nopaque.user.jobs) {
selectedJob = nopaque.user.jobs[selectedJobId];
selectedJobDeleteLinkElement.href = `/jobs/${selectedJob.id}/delete`;
selectedJobTitleElement.innerText = selectedJob.title;
} else {
selectedJob = undefined;
selectedJobDeleteLinkElement.href = "";
selectedJobTitleElement.innerText = "";
}
deleteJobModal.open();
}
2020-07-22 10:16:33 +00:00
function prepareDeleteQueryResultModal(selectedQueryResultId) {
var selectedQueryResult;
if (selectedQueryResultId in nopaque.user.query_results) {
selectedQueryResult = nopaque.user.query_results[selectedQueryResultId];
selectedQueryResultDeleteLinkElement.href = `/query_results/${selectedQueryResult.id}/delete`;
selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
} else {
selectedQueryResult = undefined;
selectedQueryResultDeleteLinkElement.href = "";
selectedQueryResultTitleElement.innerText = "";
}
deleteQueryResultModal.open();
}
document.addEventListener("DOMContentLoaded", () => {
deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
deleteJobModal = M.Modal.init(deleteJobModalElement);
2020-07-22 10:16:33 +00:00
deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
});
</script>
2019-08-01 08:33:05 +00:00
{% endblock %}