Skip to content
Snippets Groups Projects
Commit 0a0d86ea authored by Bhabesh Bhabani Mukhopadhyay's avatar Bhabesh Bhabani Mukhopadhyay
Browse files

#VOAPP-44 : capturing image and store

Capturing image through camera using cordova plugin and store in indexeddb and localstorage
parent ee8d7bb8
No related branches found
No related tags found
No related merge requests found
......@@ -21,7 +21,7 @@
<router-link id="linkMap" ref='linkMap' :to="{name:'MapObservation', params: {observationId:observationId,geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel,locationPointOfInterestId:mapLocationPointOfInterestId}}">Observation Map </router-link>
<div v-if="mapGeoinfo" id="divMapGeoInfo"><map-observation :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"></map-observation></div>
<photo :isImageVisible=false :observationId="observationId"></photo>
<photo :isImageVisible=false :observationId="observationId" :organismId="observation.organismId" ></photo>
<photo :isImageVisible=true :observationId="observation.observationId" :organismId="observation.organismId" :imageFileName="photo.observationIllustrationPK.fileName" v-for="photo in observation.observationIllustrationSet" v-bind:key="photo.observationIllustrationPK.fileName"></photo>
<!-- <photo-observation :observationId="observation.observationId" :organismId="observation.organismId" :imageFileName="photo.observationIllustrationPK.fileName" v-for="photo in observation.observationIllustrationSet" v-bind:key="photo.observationIllustrationPK.fileName"></photo-observation> -->
......
......@@ -76,7 +76,7 @@ export default {
let strUUID = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);
if(strUUID)
{
this.fetchFromServer(); // TODO - Tobe shifted to two way Sync process
//this.fetchFromServer(); // TODO - Tobe shifted to two way Sync process
this.getObservationsFromStore(); // TODO -- to be in effect after two sync in process
}
}
......
<template>
<div>
<div id='divImg'>
<div v-if=isImageVisible>
<img src='' class="img-thumbnail float-left" ref="image"/>
</div>
......@@ -23,6 +23,7 @@ export default {
take_photo : "Ta bilde",
dbIndexPhoto : '',
entityName : '',
observationImages : [],
observationImage : {
observationId : '',
organismId : '',
......@@ -39,16 +40,22 @@ export default {
alert(message);
},
renderPhoto: function(imageURI) {
console.info("Image info: " + imageURI);
this.searchDBByindex('observationId',this.observationId,this.organismId,imageURI);
},
launchCamera: function() {
this.searchDBByindex('observationId',this.observationId);
launchCamera: function() {
if(navigator.camera)
{
console.info("The camera should launch now");
navigator.camera.getPicture(this.renderPhoto, this.onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI ,
destinationType: Camera.DestinationType.DATA_URL, //FILE_URI
correctOrientation: true
});
}
{
console.log('WARNING : Functional Cordova plugin needed to launch camera');
}
},
fetchFromServer()
{
......@@ -71,12 +78,12 @@ export default {
.then(imageTextData => {
This.observationImage.illustration.imageTextData = imageTextData;
//console.log ('imageTextData : ',imageTextData);
This.storeData();
This.storeData(This.observationImage);
})
}
},
async storeData()
async storeData(observationImage)
{ let This = this;
let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
......@@ -84,11 +91,11 @@ export default {
let db = evt.target.result;
if(db.objectStoreNames.contains(This.entityName)){
let transaction = db.transaction([This.entityName],'readwrite');
let objectstore = transaction.objectStore(This.entityName).add(This.observationImage,This.observationImage.illustration.fileName);
let objectstore = transaction.objectStore(This.entityName).add(observationImage,observationImage.illustration.fileName);
}
else
{
let store = db.createObjectStore(This.entityName, {keypath : This.observationImage.illustration.fileName});
let store = db.createObjectStore(This.entityName, {keypath : observationImage.illustration.fileName});
store.createIndex('observationId', 'observationId', { unique: false });
store.createIndex('organismId', 'organismId', { unique: false });
}
......@@ -99,7 +106,7 @@ export default {
{
let db = event.target.result;
if( !db.objectStoreNames.contains(This.entityName)){
let store = db.createObjectStore(This.entityName, {keypath : This.observationImage.illustration.fileName});
let store = db.createObjectStore(This.entityName, {keypath : observationImage.illustration.fileName});
store.createIndex('observationId', 'observationId', { unique: false });
store.createIndex('organismId', 'organismId', { unique: false });
}
......@@ -110,53 +117,174 @@ export default {
},
async getImageFromStore()
{
let This = this;
let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
dbRequest.onsuccess = function(evt) {
let db = evt.target.result;
let transaction = db.transaction([This.entityName],'readwrite');
let objectstore = transaction.objectStore(This.entityName);
let objectstoreRequest = objectstore.get(This.observationImage.illustration.fileName);
objectstoreRequest.onsuccess = function(event)
{
let observationImage = event.target.result;
This.displayImage(observationImage.illustration.imageTextData);
}
}
let This = this;
let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
dbRequest.onsuccess = function(evt) {
let db = evt.target.result;
let transaction = db.transaction([This.entityName],'readwrite');
let objectstore = transaction.objectStore(This.entityName);
if(This.observationImage.illustration.fileName)
{
let objectstoreRequest = objectstore.get(This.observationImage.illustration.fileName);
objectstoreRequest.onsuccess = function(event)
{
let observationImage = event.target.result;
This.displayImage(observationImage.illustration.imageTextData);
}
}
else{
console.log(This.observationImage);
}
}
},
displayImage(imgTextData)
{
let image = this.$refs.image;
let image = null;
if(this.$refs.image)
{
image = this.$refs.image;
}
else{
console.log('inside display image');
image = document.createElement('img');
let imgSrc = document.createAttribute('src');
let att = document.createAttribute("class");
att.value = "img-thumbnail float-left";
image.setAttributeNode(att);
let divImg = document.getElementById("divImg");
divImg.appendChild(image);
}
image.width = CommonUtil.CONST_IMAGE_WIDTH;
image.height = CommonUtil.CONST_IMAGE_HEIGHT;
image.src=imgTextData;
},
searchDBByindex(indexName,indexValue)
searchDBByindex(indexName,indexValue,organismId,imageTextData,storeImage)
{
let This = this;
let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
let This = this;
let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
dbRequest.onsuccess = function(evt) {
let db = evt.target.result;
let transaction = db.transaction([This.entityName],'readwrite');
let objectstore = transaction.objectStore(This.entityName);
let indexStore = objectstore.index(indexName);
let indexStore = objectstore.index(indexName);
let keyRange = IDBKeyRange.only(indexValue);
indexStore.openCursor(keyRange).onsuccess = function(event) {
let observationImages = [];
indexStore.openCursor(keyRange).onsuccess = function(event) {
let cursor = event.target.result;
if(cursor)
{
console.log(cursor.value);
observationImages.push(cursor.value);
cursor.continue();
}
}
transaction.oncomplete = function(){
This.storeImage(observationImages,indexValue,organismId,imageTextData);
}
}
},
storeImage(observationImages,indexValue,organismId,imageTextData)
{
let selectedFileFirstName = '';
let selectedFileName = '';
let observation = {};
let illustration = {};
if(observationImages)
{
let len = observationImages.length;
selectedFileFirstName=indexValue+'_illustration'+'_'+(len+1);
}
else
{
selectedFileFirstName=indexValue+'_illustration';
}
observation.observationId = indexValue;
observation.organismId = organismId;
illustration.deleted = false;
illustration.fileName = selectedFileFirstName+'.jpg';
illustration.imageTextData = "data:image/jpeg;base64,"+imageTextData;
observation.illustration = illustration;
this.observationImage = observation;
this.addImageIntoObservation(observation);
this.storeData(observation);
},
addImageIntoObservation(observation)
{
let lstObservations = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_LIST));
if(observation.observationId)
{
$.each(lstObservations, function(index, jobservation)
{
if(jobservation.observationId === observation.observationId)
{
if(jobservation.observationIllustrationSet && jobservation.observationIllustrationSet.length != 0)
{
let observationIllustrationSet = [];
let findRecord = false;
$.each(jobservation.observationIllustrationSet, function(index, illustration)
{
if(illustration.observationIllustrationPK.fileName === observation.illustration.fileName)
{
findRecord = true;
return false;
}
})
if (!findRecord)
{
let illustration = {};
let observationIllustrationPK = {};
observationIllustrationPK.observationId = observation.observationId;
observationIllustrationPK.fileName = observation.illustration.fileName;
illustration = {'observationIllustrationPK' : observationIllustrationPK, 'uploaded':false};
jobservation.observationIllustrationSet.push(illustration);
return false;
}
}
}
});
}
localStorage.setItem(CommonUtil.CONST_STORAGE_OBSERVATION_LIST,JSON.stringify(lstObservations));
}
},
mounted(){
this.CONST_URL_DOMAIN = this.$refs.CommonUtil.getDomain();
......@@ -169,7 +297,7 @@ export default {
if(this.organismId)
{
this.fetchFromServer();
//this.fetchFromServer();
this.getImageFromStore();
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment