sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Add query results to dashboard

Browse Source
This commit is contained in:
Patrick Jentsch 2020-07-22 12:16:33 +02:00
parent 3cb8ec9697
commit a92079beb3
1 changed files with 108 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/app/templates/main/dashboard.html.j2
View File

@ -1,9 +1,17 @@
{% extends "nopaque.html.j2" %}
{% block page_content %}
<div class="col s12" id="corpora">
<h3>My Corpora</h3>
<p>This service enables you to group your files into corpora. You can create as many as you want and edit them at all times.</p>
<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">
@ -31,6 +39,47 @@
<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>
</div>
<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>
</div>
<div class="col s12" id="jobs">
@ -88,6 +137,17 @@
</div>
</div>
<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>
<div id="new-job-modal" class="modal">
<div class="modal-content">
<h4>Select a service</h4>
@ -130,14 +190,21 @@
var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
"Corpus");
var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "Job");
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;
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");
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) {
@ -164,9 +231,23 @@
}
deleteJobModal.open();
}
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);
deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
});
</script>