unstructuredAnnotation.js 8.48 KiB
/**
* This function will fire when the DOM is ready
*/
let staticCategories = [];
$(document).ready(function () {
getAnnotationCategories(function (categories) {
buildAnnotationList(categories);
staticCategories = categories;
});
$('#missingAnnotation').hide();
// fetch the document text of the given id
getMyGroupId(getFullSubmissionOfGroup);
$('#backToTasks').click(function () {
location.href = "../project/tasks-student.jsp?projectName=" + $('#projectName').text().trim();
});
// set click listener to save button
$('#btnSave').click(function () {
saveButtonHandler();
});
/**
* Context menu handler
*/
$.contextMenu({
selector: '.context-menu-one',
callback: function (key, options) {
// handle the category click
handleCategoryClick(key);
},
items: {
"titel": {name: "Titel", icon: "edit"},
"recherche": {name: "Recherche", icon: "edit"},
"literaturverzeichnis": {name: "Literaturverzeichnis", icon: "edit"},
"forschungsfrage": {name: "Forschungsfrage", icon: "edit"},
"untersuchungskonzept": {name: "Untersuchungskonzept", icon: "edit"},
"methodik": {name: "Methodik", icon: "edit"},
"durchfuehrung": {name: "Durchführung", icon: "edit"},
"auswertung": {name: "Auswertung", icon: "edit"}
}
});
});
/**
* Handel the category selection
*
* @param category The chosen category
* @param startCharacter The start character of the selected range
* @param endCharacter The end character of the selected range
*/
function handleCategorySelection(category, startCharacter, endCharacter) {
// if highlighting is possible
if (!isAlreadyHighlighted(startCharacter, endCharacter)) {
toggleStatusbar(category);
highlightText(category, startCharacter, endCharacter);
// update data from category list
addSelectionDataToList(startCharacter, endCharacter, category);
removeSelection();
} else {
// show error message to user window.alert("Dieser Bereich wurde bereits zugeordnet.")
}
}
function highlightText(category, startCharacter, endCharacter) {
let color = $('.added-' + category).css('background-color');
let length = endCharacter - startCharacter;
quill.formatText(startCharacter, length, 'background', color);
}
function removeSelection() {
quill.setSelection(null);
}
/**
* Check if the selected range is already highlighted
*
* @param startCharacter The start character of the range
* @param endCharacter The end character of the range
* @returns {boolean} Returns true if the selected range ist already highlighted
*/
function isAlreadyHighlighted(startCharacter, endCharacter) {
let isHighlighted = false;
$('#annotations').find('.category-card').each(function () {
let array = $(this).data('array');
if (array != null) {
for (let i = 0; i < array.length; i++) {
if ((array[i].start <= startCharacter && startCharacter <= array[i].end - 1) || // startCharacter inside highlighted range
(array[i].start <= endCharacter - 1 && endCharacter - 1 <= array[i].end - 1) || // endCharacter inside highlighted range
(startCharacter <= array[i].start && array[i].end - 1 <= endCharacter - 1)) { // new range overlaps hightlighted range
isHighlighted = true;
}
}
}
});
return isHighlighted;
}
function toggleStatusbar(category) {
let categoryTag = $('#' + category);
if (!categoryTag.hasClass('added-' + category)) {
categoryTag.toggleClass("not-added added-" + category);
}
}
/**
* Save start and end character to the data array of a category
*
* @param startCharacter The start character of the body element
* @param endCharacter The end character of the body element
* @param category The chosen category
*/
function addSelectionDataToList(startCharacter, endCharacter, category) {
let elem = $('#' + category);
let array = elem.data('array');
if (array != null) {
// define new object
let newElement = {
start: startCharacter,
end: endCharacter
};
// update array
array.push(newElement);
} else {
// store first element in array
array = [
{
"start": startCharacter, "end": endCharacter
}
]
}
// sort array
array.sort(function (a, b) {
return a.start - b.start;
});
// store updated array
elem.data('array', array);
}
/**
* Handel the save button click
* Iterate over the category cards and send each post request to the back-end
*/
function saveButtonHandler() {
// show alert message
if (window.confirm("Möchten Sie wirklich ihre Annotationen speichern?")) {
// declare array of promises
let promises = [];
let categoriesSent = [];
$('#annotations').find('.category-card').each(function () {
let array = $(this).data('array');
if (array != null) {
// initialize the post request
let category = $(this).attr('id').toUpperCase();
let submissionPartPostRequest = {
groupId: groupId,
fullSubmissionId: fullSubmissionId,
category: category,
body: []
};
// iterate over the array
for (let i = 0; i < array.length; i++) {
// initialize a body element
let submissionPartBodyElement = {
text: $('#documentText').text().slice(array[i].start, array[i].end),
startCharacter: array[i].start,
endCharacter: array[i].end
};
// store the body element in the post request
submissionPartPostRequest.body.push(submissionPartBodyElement);
}
// send the post request to the back-end and save promise
promises.push(createSubmissionPart(submissionPartPostRequest, function (response) {
console.log(`send ${response.category} 's post request to back-end`);
}));
categoriesSent.push(category);
}
});
$.when.apply($, promises).then(function () {
if (categoriesSent.length === staticCategories.length) {
finalizeDossier(fullSubmissionId);
} else {
let missingAnnotation = $('#missingAnnotation');
missingAnnotation.show();
missingAnnotation.text("Sie haben noch nicht alle Kategorien markiert");
}
});
// redirect user to project page after saving
// location.href="projects-student.jsp" + getUserEmail() + "&projectName=" + getProjectIdFromUrl(); }
}
/**
*
*/
function finalizeDossier(submissionId) {
let requestObj = new RequestObj(1, "/submissions", "/id/?/projects/?/finalize", [submissionId, $('#projectName').text().trim()]);
serverSide(requestObj, "POST", function (response) {
location.href = "../project/tasks-student.jsp?projectName=" + getQueryVariable('projectName');
})
}
/**
* Handle the category click and start the saving event
*
* @param key The selected category
* @param color
*/
function handleCategoryClick(key) {
let selection = quill.getSelection();
if (selection.length > 0) {
let endCharacter = selection.index + selection.length;
handleCategorySelection(key, selection.index, endCharacter);
}
}
function buildAnnotationList(categories) {
let data = {categories: []};
categories.forEach(function (category) {
data.categories.push({name: category, nameLower: category.toLowerCase()})
});
let tmpl = $.templates("#annotationTemplate");
let html = tmpl.render(data);
$("#annotations").html(html);
}
function deleteCategory(category) {
let categoryLI = $('#' + category);
let textArrays = categoryLI.data('array');
for (let i = 0; i < textArrays.length; i++) {
quill.formatText(textArrays[i].start, textArrays[i].end - textArrays[i].start, 'background', '#FFF');
}
categoryLI.data('array', []);
$('.added-' + category).each(function () {
$(this).toggleClass('added-' + category + ' not-added');
});
let test = category;
}