Storing and display photo using IndexedDB

src/components/CommonUtil.vue

@@ -17,6 +17,8 @@ export default {
     CONST_STORAGE_OBSERVATION_LIST      :   'store-observation-list',
     CONST_STORAGE_IMAGE_LIST            :   'store-image-list',
 
+    CONST_IMAGE_WIDTH                   :   100,
+    CONST_IMAGE_HEIGHT                  :   100,
     CONST_IMAGE_CANVAS_WIDTH            :   100,
     CONST_IMAGE_CANVAS_HEIGHT           :   100,
 
@@ -46,10 +48,15 @@ export default {
 
     CONST_GPS_DEFAULT_ZOOM              :   4.2,
     CONST_GPS_OBSERVATION_ZOOM          :   10,
+
+    CONST_DB_NAME                       :   'db-index-observation',
+    CONST_DB_VERSION                    :   1,
+    CONST_DB_ENTITY_PHOTO               :   'entityPhoto',
+
     data(){
         return {
-            isEmulator                          :   true,
-            CONST_URL_DOMAIN                    :   'http://vipslogic-local.no',
+            isEmulator                          :   false,
+            CONST_URL_DOMAIN                    :   'http://vipslogic-local.no',  //'http://logic.testvips.nibio.no/', //'http://vipslogic-local.no',
             CONST_URL_DOMAIN_EMULATOR_ANDROID   :   'http://10.0.2.2:8080/VIPSLogic', /** Android emulator host loop back */
 
             domain                              :   'test',

src/components/Observation.vue

@@ -22,14 +22,17 @@
       <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">
-      --
+      <photo :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> -->
+      
+      <div class="clearfix"/>
+      
       <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>  
@@ -40,12 +43,13 @@ import CommonUtil from '@/components/CommonUtil'
 import { DateTime } from 'luxon'
 import MapObservation from '@/components/MapObservation'
 import PhotoObservation from '@/components/PhotoObservation'
+import Photo from '@/components/Photo.vue'
 
 
 export default {
   name: 'Observation',
   props: ['observationId'],
-  components: {MapObservation,PhotoObservation},
+  components: {MapObservation,PhotoObservation,Photo},
   data () {
     return {
       msg: 'Observasjon',

src/components/Photo.vue

+<template>
+    <div>
+     <img src='' class="img-thumbnail float-left" ref="image"/>
+    <common-util ref="CommonUtil"/>
+    </div>
+</template>
+
+<script>
+import CommonUtil from '@/components/CommonUtil'
+
+export default {
+    name        :   'Photo',
+    components  :   {CommonUtil},
+    props       :   ['observationId','organismId','imageFileName'], 
+    data ()  {
+                return {
+                    dbIndexPhoto        :   '',
+                    entityName          :   '',
+                    observationImage   :   {
+                                                observationId               :   '',
+                                                organismId                  :   '',
+                                                illustration                :   {
+                                                                                    fileName        : '',
+                                                                                    imageTextData   : '', 
+                                                                                    deleted         : false
+                                                                                } 
+                                            },
+                }
+    },
+    methods     : {
+                    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.observationImage.illustration.imageTextData = imageTextData;
+                                        //console.log ('imageTextData : ',imageTextData);
+                                        This.storeData();
+                                })
+                        },
+                        async storeData()
+                        {       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).add(This.observationImage,This.observationImage.illustration.fileName);
+                            } 
+                            
+
+                            dbRequest.onupgradeneeded= function (event)
+                            {
+                                let db = event.target.result;
+                                if( !db.objectStoreNames.contains(This.entityName)){
+                                   let store = db.createObjectStore(This.entityName, {keypath : This.observationImage.illustration.fileName});
+                                    store.createIndex('observationId', 'observationId', { unique: false });
+                                    store.createIndex('organismId', 'organismId', { unique: false });
+                                }
+                            }
+
+                            this.getImageFromStore();
+
+                        },
+                       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);
+                                    }
+                             }
+
+                        },
+                         displayImage(imgTextData)
+                        {
+                            let image = this.$refs.image;
+                            image.width = CommonUtil.CONST_IMAGE_WIDTH;
+                            image.height = CommonUtil.CONST_IMAGE_HEIGHT;
+                            image.src=imgTextData;
+
+                        }
+
+    },
+    mounted(){
+                    this.CONST_URL_DOMAIN                       = this.$refs.CommonUtil.getDomain();
+                    this.entityName                             = CommonUtil.CONST_DB_ENTITY_PHOTO;
+
+                    this.observationImage.observationId         =   this.observationId;
+                    this.observationImage.organismId            =   this.organismId;
+                    this.observationImage.illustration.fileName =   this.imageFileName;      
+
+
+
+                    this.fetchFromServer();
+                    this.getImageFromStore();
+    }    
+}
+</script>
\ No newline at end of file

src/components/PhotoObservation.vue

@@ -11,6 +11,8 @@
 <script>
 import CommonUtil from '@/components/CommonUtil'
 
+
+
 export default {
     name        :   'PhotoObservation',
     components  :   {CommonUtil},
@@ -28,12 +30,13 @@ export default {
                                                                                         } ,
                                                         observationIllustrationSet  :   []
                                                     },
-                            storageData         :   [] 
+                            storageData         :   [],
 
 
                         }
                     },
     methods     :   {
+
                         getPhotosFromStore()
                         {
                             let     This                =   this;
@@ -221,8 +224,9 @@ export default {
     },
     mounted()       {
 
-            this.CONST_URL_DOMAIN = this.$refs.CommonUtil.getDomain();
-            
+            this.CONST_URL_DOMAIN   = this.$refs.CommonUtil.getDomain();
+
+            localStorage.removeItem(CommonUtil.CONST_STORAGE_IMAGE_LIST);
             this.fetchFromServer();
             this.getPhotosFromStore();