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

#VOAPP-43: Fetching image from server, converting to Base64 and store 

Multiple Images under particular observation successfully stored in localstorage
parent 91abe89b
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/CommonUtil.vue
+ 7
− 3
View file @ 4b2b8f0f
......@@ -15,6 +15,7 @@ export default {
CONST_STORAGE_PEST_LIST : 'store-pest-list',
CONST_STORAGE_CROP_PEST_LIST : 'store-crop-pest-list',
CONST_STORAGE_OBSERVATION_LIST : 'store-observation-list',
CONST_STORAGE_IMAGE_LIST : 'store-image-list',
CONST_CROP_CATEGORY_ID : 'cropCategoryId',
......@@ -33,6 +34,8 @@ export default {
CONST_URL_USER_OBSERVATION_LIST : '/rest/observation/list/user',
CONST_URL_USER_POI : '/rest/poi/user',
CONST_URL_STATIC_IMAGE_PATH : '/static/images/observations/',
CONST_GPS_URL_NORWAY_MAP : 'https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?Version=1.0.0&service=wmts&request=getcapabilities',
......@@ -48,17 +51,18 @@ export default {
CONST_URL_DOMAIN_EMULATOR_ANDROID : 'http://10.0.2.2:8080/VIPSLogic', /** Android emulator host loop back */
domain : 'test',
domains : [
domains : [
'http://vipslogic-local.no',
'http://10.0.2.2:8080/VIPSLogic'
],
}
},
methods :
{
getDomain()
{
return (this.isEmulator) ? this.CONST_URL_DOMAIN_EMULATOR_ANDROID : this.CONST_URL_DOMAIN;
{ let resultURL = (this.isEmulator) ? this.CONST_URL_DOMAIN_EMULATOR_ANDROID : this.CONST_URL_DOMAIN;
return resultURL;
},
//TODO - Below code need to be developed basis of HOST domain search for platform independency
domainCheck()
......
src/components/Observation.vue
+ 6
− 6
View file @ 4b2b8f0f
......@@ -2,7 +2,7 @@
<div class="hello">
<h1 ref='titleObservation'>{{ msg }}</h1>
<button type="button" class="btn btn-primary" id="cameraLauncher" ref='cameraLauncher' @click="launchCamera">{{ take_photo }}</button>
<br>
<br>
<select id="divCropId" ref='divCropId' v-model="crop.cropId" v-on:change="selectCrop($event)">
<option v-for="crop in crops" v-bind:value='crop.organismId' >{{crop.latinName}}</option>
......@@ -22,16 +22,16 @@
<div v-if="mapGeoinfo" id="divMapGeoInfo"><map-observation :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"></map-observation></div>
<photo-observation :observationId="observation.observationId" :organismId="observation.organismId" :imageFileName="photo.observationIllustrationPK.fileName" v-for="photo in observation.observationIllustrationSet" v-bind:key="photo.observationIllustrationPK.fileName">
--
<div ref='divObservationText'>
<div>Observation Detail</div>
<input type="text" v-model="observationHeader"/>
<p><textarea v-model="observationText" /></p>
</div>
</photo-observation>
<button class="btn btn-secondary float-right" v-on:click="saveObservation">Save</button>
</div>
</template>
......@@ -39,13 +39,13 @@
import CommonUtil from '@/components/CommonUtil'
import { DateTime } from 'luxon'
import MapObservation from '@/components/MapObservation'
import PhotoObservation from '@/components/PhotoObservation'
export default {
name: 'Observation',
props: ['observationId'],
components: {MapObservation},
components: {MapObservation,PhotoObservation},
data () {
return {
msg: 'Observasjon',
......
src/components/PhotoObservation.vue 0 → 100644
+ 188
− 0
View file @ 4b2b8f0f
<template>
<div>
Photo : Observation Id : {{observationId}}
Organism Id : {{organismId}}
Image File Name : {{imageFileName}}
<common-util ref="CommonUtil"/>
</div>
</template>
<script>
import CommonUtil from '@/components/CommonUtil'
export default {
name : 'PhotoObservation',
components : {CommonUtil},
props : ['observationId','organismId','imageFileName'],
data() {
return {
CONST_URL_DOMAIN : '--',
observationImages : {
observationId : '',
organismId : '',
illustration : {
fileName : '',
imageTextData : '',
deleted : false
} ,
observationIllustrationSet : []
},
storageData : []
}
},
methods : {
checkPhotoAvailability()
{
this.storageData = localStorage.getItem(CommonUtil.CONST_STORAGE_IMAGE_LIST);
if(lstPhotosJson)
{
// TODO
// Get Photos from store
// check mentioned specfic photos available in store or not if not fetch from server
// If two way sync .. check whether fetch needed or not to pull more
}
else
{
//TODO
// Fetch photos from server
fetchFromServer();
}
},
fetchFromServer()
{
let photoURL=this.CONST_URL_DOMAIN+CommonUtil.CONST_URL_STATIC_IMAGE_PATH+this.organismId+'/'+this.imageFileName;
let imgTest;
let This = this;
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
toDataURL(photoURL)
.then(imageTextData => {
This.getImageDataJSON(This.imageFileName,imageTextData);
//console.log('RESULT:', imageTextData)
This.storeData(This);
})
},
getImageDataJSON(fileName,imageTextData)
{
this.observationImages.observationId = this.observationId;
this.observationImages.organismId = this.organismId;
this.observationImages.illustration.fileName = fileName;
this.observationImages.illustration.imageTextData = imageTextData;
},
storeData()
{
this.storageData = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_IMAGE_LIST));
let storageData = this.storageData;
let imageData = this.observationImages;
let imageFileName = this.imageFileName;
let This = this;
if(this.storageData && this.storageData.length != 0)
{
let flagFound01 = false;
$.each(storageData, function(index, data){
if(
(data.observationId === imageData.observationId) &&
(data.organismId === imageData.organismId)
)
{
flagFound01 = true;
let illustrations = data.observationIllustrationSet;
let flagFound02 = false;
$.each(illustrations, function(x, image){
if(image.fileName === imageFileName)
{
/**
* Either no write / save to local disk
Or overwrite local storage data
*/
flagFound02 = true;
return false;
}
else
{
/**
* Decide write operation for new illustration of existing observation
* -- If flagFound02 is 'false' then it trigger the write opeation after the immediate loop
*/
}
})
if(!flagFound02)
{
data.observationIllustrationSet.push(imageData.illustration);
localStorage.setItem(CommonUtil.CONST_STORAGE_IMAGE_LIST,JSON.stringify(storageData));
}
}
else{
/**Decide write for new observation in non emtpty store
-- If flagFound01 flag false then it will triger the write operation after loop.
*/
}
})
if(!flagFound01)
{
let localObservationImageData = {
observationId : This.observationImages.observationId,
organismId : This.observationImages.organismId,
observationIllustrationSet : [
This.observationImages.illustration
]
};
storageData.push(localObservationImageData);
localStorage.setItem(CommonUtil.CONST_STORAGE_IMAGE_LIST,JSON.stringify(storageData));
}
}
else{
console.log('storage system call 2');
let localObservationImages = [];
let localObservationImageData = {
observationId : this.observationImages.observationId,
organismId : this.observationImages.organismId,
observationIllustrationSet : [
this.observationImages.illustration
]
};
localObservationImages.push(localObservationImageData);
localStorage.setItem(CommonUtil.CONST_STORAGE_IMAGE_LIST,JSON.stringify(localObservationImages));
this.storageData = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_IMAGE_LIST));
return false;
}
}
},
mounted() {
this.CONST_URL_DOMAIN = this.$refs.CommonUtil.getDomain();
this.fetchFromServer();
}
}
</script>
src/components/Sync.vue
+ 0
− 2
View file @ 4b2b8f0f
......@@ -267,9 +267,7 @@ export default {
},
mounted () {
console.log('mounted in Sync ');
this.CONST_URL_DOMAIN = this.$refs.CommonUtil.getDomain();
}
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment