Saving the Annotated Data


Now the biggest hurdle is to create the annotated data for storing in the database and then delivering that data to the user whenever he/she needs the data again. So first we will be creating objects that will be stored inside of the mongo collection.

Following are the methods that are self-explanatory as well. There are 3 methods basically createDot , createComment, createHighlighterObj. All will be going to create an object that will be stored in the database.

//This function will create 2 things
//create a circle DOM obj.
// highlighter ====> param will tell whether this circle is a highlighter circle / or normal one.
var createDot = function({
commentCircleID,
commentBoxID,
type,
top,
left,
highlighter,
highlighterID
}) {
let commentCircle = document.createElement(‘div’);
commentCircle.id = commentCircleID;
commentCircle.className = ‘rd-circle’;
commentCircle.style.backgroundColor = CURRENT_COLOR;
commentCircle.setAttribute(‘data-commentbox’, commentBoxID);
commentCircle.setAttribute(‘data-dot-type’, type);

if (highlighter)
commentCircle.setAttribute(‘data-highlighter’, highlighterID)

if (type == ‘normal’) {
commentCircle.style.top = top;
commentCircle.style.left = left;
}
return commentCircle;
}

// render the highlighter common part…
var renderHighlighterCommonPart = function(newElement, dataObj) {
// step 2 : A new Elem should be created which has same styles as of highlightedElem and append it to body
newElement.style.width = addPixels(dataObj.width);
newElement.style.height = addPixels(dataObj.height);
newElement.style.top = addPixels(dataObj.top);
newElement.style.left = addPixels(dataObj.left);
return newElement;
}

// Type can have 2 values,
// normal —> In normal highlighter we will create a dot as well
// image —-> In image highlighter we will create a dotted bordered element around image.
var createHighLighter = function(dataObj) {
let newElement = document.createElement(‘div’);

var deleteDiv = document.createElement(‘div’);
// deleteDiv.className = ‘rd-highlighter-delete-btn’;
// let buttonChild = document.createElement(‘button’);
deleteDiv.className = “rd-circle-close”;
deleteDiv.style.backgroundColor = CURRENT_COLOR;
let divText = document.createTextNode(“x”);
deleteDiv.appendChild(divText);
deleteDiv.addEventListener(‘click’, deleteHighlighter, false);
// deleteDiv.appendChild(buttonChild);
deleteDiv.style.position = ‘absolute’;
let divWidth = dataObj.width – 17;
deleteDiv.style.cursor = “pointer”;
deleteDiv.style.pointerEvents= “auto”;
deleteDiv.style.top = -2 + “px”;
deleteDiv.style.right = -2 + “px”;
newElement.appendChild(deleteDiv);

newElement.id = dataObj.id;
newElement.className = ‘rd-new-highlight’;
newElement.setAttribute(‘data-rdhighlighter-type’, dataObj.type);
newElement = renderHighlighterCommonPart(newElement, dataObj);
//newElement.style.display = ‘none’;
if (dataObj.type == ‘image’) {
newElement.style.border = ‘2px dotted ‘+CURRENT_COLOR;
} else {
newElement.style.border = ‘2px solid ‘+CURRENT_COLOR;
}
newElement.style.backgroundColor = “transparent”;
//newElement.style.cssText = toolObj.highlightedElem.style.cssText;
return newElement;
}

/// Since commentBox Appears where there are dot objects so we will
// make the comment Boxes appear right there using that dot circle.
var createComment = function(commentCircleDOMObj) {
let commentDiv = document.createElement(“div”);
let highLighter = commentCircleDOMObj.getAttribute(‘data-highlighter’);

commentDiv.className = ‘rd-comment’;
commentDiv.id = commentCircleDOMObj.getAttribute(‘data-commentBox’);
commentDiv.setAttribute(‘data-commentCircleID’, commentCircleDOMObj.id);
if (highLighter)
commentDiv.style.top = removePixels(commentCircleDOMObj.style.top) + COMMENTBOX_HEIGHT / 2 + ‘px’;
else
commentDiv.style.top = commentCircleDOMObj.style.top;

commentDiv.style.left = commentCircleDOMObj.style.left;

let pChild = document.createElement(‘p’);
let pChildText = document.createTextNode(‘Comment For’);
pChild.appendChild(pChildText);

let textAreaChild = document.createElement(‘textarea’);
let ParentDiv = document.createElement(‘div’);
ParentDiv.style.display = “flex”;
let okButtonChild = document.createElement(‘button’);
let okButtonText = document.createTextNode(‘OK’)
okButtonChild.appendChild(okButtonText);

// Binding the current Comment Button with the commentCircle
okButtonChild.setAttribute(‘data-circle’, commentCircleDOMObj.id);
okButtonChild.setAttribute(‘data-highlighter’, commentCircleDOMObj.getAttribute(‘data-highlighter’));
okButtonChild.addEventListener(‘click’, commentClick, false)

let delButtonChild = document.createElement(‘button’);
let delButtonText = document.createTextNode(‘DELETE’)
delButtonChild.appendChild(delButtonText);

// Binding the current Comment Button with the commentCircle
delButtonChild.setAttribute(‘data-circle’, commentCircleDOMObj.id);
delButtonChild.setAttribute(‘data-highlighter’, commentCircleDOMObj.getAttribute(‘data-highlighter’));
delButtonChild.addEventListener(‘click’, deleteCommentBox, false)

ParentDiv.appendChild(okButtonChild);
ParentDiv.appendChild(delButtonChild);

commentDiv.appendChild(pChild);
commentDiv.appendChild(textAreaChild);
commentDiv.appendChild(ParentDiv);
return commentDiv;
}

To actually save the data the user have to click on the save button and then make a call to the API. This facility of saving the data is only available to the authorized users 🙂 so adding the desired security automatically to your applications.

var saveData = function() {
console.log(rdData, “rdData…………”);
let fetchPath = API_PATH + ‘save-data’;
console.log(localStorage.getItem(‘authToken’), localStorage.getItem(‘userId’))

//Saving the count of variables as well…
rdData.totalElements.highlighterCount = highlighterCount;
rdData.totalElements.dotCommentCount = dotCommentCount;
rdData.totalElements.textHighlighterCount = textHighlighterCount;

// Call the api to save the data.
fetch(fetchPath, {
method: ‘post’,
headers: {
‘Accept’: ‘application/json, text/plain, */*’,
‘Content-Type’: ‘application/json’,
‘X-Auth-Token’: localStorage.getItem(‘authToken’),
‘X-User-Id’: localStorage.getItem(‘userId’)
},
mode: ‘cors’,
body: JSON.stringify({
data: rdData,
url: SITE_URL
})
})
.then(res => res.json())
.then(res => {
if (res.status == ‘success’) {
alert(‘Data has been saved successfully’)
} else if (res.statusCode == 500 || res.status == ‘error’) {
alert(‘There has been some error while saving the data’);
}
})
.catch(e => {
alert(e.message);
})
}

This method here shown will make an API call to the backend and will be saving the data in the mongo collection using fetch API. 

This is the backend API method to store the data.

//Path api/save-data
Api.addRoute(‘save-data’,{authRequired: true},{
post: function() {
let data = this.bodyParams.data;
let userId = this.user._id;
let siteUrl = this.bodyParams.url;
console.log(siteUrl,”siteUrl”);
if(userId){
let checkExistence = MirroredSites.find({userId : userId, url : siteUrl}).fetch();
if(checkExistence){
//console.log(“does exist”);
let rdDataId = MirroredSites.update({userId : userId, url : siteUrl},{$set : {rdData : data}});
return {
status : ‘success’,
statusCode : 200,
data : “data is entered into the collection”,
rdDataId : rdDataId
}
}
else{
console.log(“does not exist”);
return {
status : ‘error’,
statusCode : 500,
data : ‘user with this url is not found’,
}
}
}
else {
return {
status : ‘error’,
statusCode : 500,
data : ‘can not find user’
}
}
}
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s