Add delete button in job and corpus lists.

This commit is contained in:
Patrick Jentsch
2020-07-17 08:43:02 +02:00
parent d4c6b72761
commit ada7007a0e
4 changed files with 183 additions and 23 deletions

View File

@ -88,6 +88,28 @@
<!-- 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>
<div id="delete-user-modal" class="modal">
<div class="modal-content">
<h4>Confirm user deletion</h4>
@ -103,8 +125,44 @@
<script>
var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, "Corpus");
var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers, "Job");
var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
var deleteCorpusModal;
var deleteJobModalElement = document.getElementById("delete-job-modal");
var deleteJobModal;
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");
function prepareDeleteCorpusModal(selectedCorpusId) {
var selectedCorpus;
if (selectedCorpusId in nopaque.foreignUser.corpora) {
selectedCorpus = nopaque.foreignUser.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.foreignUser.jobs) {
selectedJob = nopaque.foreignUser.jobs[selectedJobId];
selectedJobDeleteLinkElement.href = `/jobs/${selectedJob.id}/delete`;
selectedJobTitleElement.innerText = selectedJob.title;
} else {
selectedJob = undefined;
selectedJobDeleteLinkElement.href = "";
selectedJobTitleElement.innerText = "";
}
deleteJobModal.open();
}
document.addEventListener("DOMContentLoaded", () => {
nopaque.socket.emit("foreign_user_data_stream_init", {{ user.id }});
deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
deleteJobModal = M.Modal.init(deleteJobModalElement);
});
</script>
{% endblock %}

View File

@ -65,6 +65,29 @@
</div>
</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>
<div id="new-job-modal" class="modal">
<div class="modal-content">
<h4>Select a service</h4>
@ -107,5 +130,44 @@
var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
"Corpus");
var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "Job");
var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
var deleteCorpusModal;
var deleteJobModalElement = document.getElementById("delete-job-modal");
var deleteJobModal;
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");
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();
}
document.addEventListener("DOMContentLoaded", () => {
deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
deleteJobModal = M.Modal.init(deleteJobModalElement);
});
</script>
{% endblock %}

View File

@ -84,9 +84,20 @@
</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-query-result-modal" class="modal no-autoinit">
<div class="modal-content">
<h4>Confirm deletion</h4>
<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">
@ -101,24 +112,43 @@
var queryResultList = new RessourceList("query-results",
nopaque.queryResultsSubscribers,
"QueryResult", {page: 10});
var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
var deleteCorpusModal;
var deleteQueryResultModalElement = document.getElementById("delete-query-result-modal");
var deleteQueryResultModal;
var selectedQueryResultTitleElement = document.getElementById("selected-query-result-title");
var selectedCorpusDeleteLinkElement = document.getElementById("selected-corpus-delete-link");
var selectedCorpusTitleElement = document.getElementById("selected-corpus-title");
var selectedQueryResultDeleteLinkElement = document.getElementById("selected-query-result-delete-link");
document.addEventListener("DOMContentLoaded", () => {
deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
});
function prepareQueryResultModal(selectedQueryResultId) {
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 prepareDeleteQueryResultModal(selectedQueryResultId) {
var selectedQueryResult;
if (selectedQueryResultId in nopaque.user.query_results) {
selectedQueryResult = nopaque.user.query_results[selectedQueryResultId];
selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
selectedQueryResultDeleteLinkElement.href = `/query_results/${selectedQueryResult.id}/delete`;
selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
} else {
selectedQueryResult = None;
selectedQueryResultTitleElement.innerText = "";
selectedQueryResult = undefined;
selectedQueryResultDeleteLinkElement.href = "";
selectedQueryResultTitleElement.innerText = "";
}
deleteQueryResultModal.open();
}
document.addEventListener("DOMContentLoaded", () => {
deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
});
</script>
{% endblock %}