Fixing IndexedDB life cycle

README.md

@@ -135,3 +135,18 @@ emulator -avd Pixel_3a_API_30_x86 -wipe-data
 ```
 
 Replace your emulator name with the example above
+
+## Android publishing
+### Notes and docs
+
+[Developer account for Google Play](https://play.google.com/console/)
+
+https://stackoverflow.com/questions/69357694/unable-to-build-app-bundle-aab-in-cordova
+
+https://cordova.apache.org/docs/en/11.x/guide/platforms/android/plugin.html
+
+https://developer.android.com/guide/app-bundle
+
+https://developer.android.com/studio/publish#unknown-sources
+
+

src/components/CommonUtil.vue

@@ -69,7 +69,7 @@
 		CONST_GPS_OBSERVATION_ZOOM: 10,
 
 		CONST_DB_NAME: 'db-index-observation',
-		CONST_DB_VERSION: 1,
+		CONST_DB_VERSION: 3,
 		CONST_DB_ENTITY_PHOTO: 'entityPhoto',
 		CONST_DB_INDEX_NAME_OBSERVATION_ID: 'observationId',
 

src/components/ObservationIllustration.vue

@@ -108,40 +108,28 @@
 			},
 			/* Fetch the image data (base64 encoded) from the IndexedDB*/
 			getObservationIllustrationDataFromStore() {
-
-				let isDBStoreNotAvailable = null;
 				let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
-				this.checkDBUpgrade(dbRequest, CommonUtil.CONST_DB_ENTITY_PHOTO);
 				dbRequest.onsuccess = (evt) => {
 					let db = evt.target.result;
-					if (db.objectStoreNames.contains(CommonUtil.CONST_DB_ENTITY_PHOTO)) {
-						let transaction = db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO], 'readwrite');
-						let objectstore = transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
-						if (this.observationIllustration.observationIllustrationPK.fileName) {
-							let objectstoreRequest = objectstore.get(this.observationIllustration.observationIllustrationPK.fileName);
-							objectstoreRequest.onsuccess = (event) => {
-								let observationImage = event.target.result;
-								if (observationImage) {
-									//console.info("Rendering image data for file " + observationImage.illustration.fileName);
-									this.imageBase64Data = observationImage.illustration.imageTextData;
-								}
-								else {
-									console.log('Image filename mentioned in Observation, but no image data found');
-								}
-							};
-						}
-						else {
-							// Pass??
-						}
+					let transaction = db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO], 'readwrite');
+					let objectstore = transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
+					if (this.observationIllustration.observationIllustrationPK.fileName) {
+						let objectstoreRequest = objectstore.get(this.observationIllustration.observationIllustrationPK.fileName);
+						objectstoreRequest.onsuccess = (event) => {
+							let observationImage = event.target.result;
+							if (observationImage) {
+								//console.info("Rendering image data for file " + observationImage.illustration.fileName);
+								this.imageBase64Data = observationImage.illustration.imageTextData;
+							}
+							else {
+								console.log('Image filename mentioned in Observation, but no image data found');
+							}
+						};
 					}
 					else {
-						db.close();
-						isDBStoreNotAvailable = true;
+						// Pass??
 					}
 				}
-				if (isDBStoreNotAvailable) {
-					this.checkDBUpgrade(dbRequest, CommonUtil.CONST_DB_ENTITY_PHOTO);
-				}
 			},
 			/** Remove the image data from IndexedDB */
 			deleteImageFromIndexedDB() {
@@ -175,23 +163,6 @@
 						}
 					};
 				}
-			},
-			/** Check requirement for DB upgrade */
-			checkDBUpgrade(dbRequest, entityName, keyName) {
-				dbRequest.onupgradeneeded = function (event) {
-					let db = event.target.result;
-					if (!db.objectStoreNames.contains(entityName)) {
-						let store = null;
-						if (keyName) {
-							store = db.createObjectStore(entityName, {keypath: keyName});
-						}
-						else {
-							store = db.createObjectStore(entityName);
-						}
-						store.createIndex('observationId', 'observationId', {unique: false});
-						store.createIndex('organismId', 'organismId', {unique: false});
-					}
-				}
 			}
 		},
 

src/components/ObservationIllustrationBoard.vue

@@ -131,53 +131,49 @@
 					var db = evt.target.result;
 					// Get all registered fileNames, and find an available filename
 					var fileName = this.observationId + "_illustration.jpg";
-					if (db.objectStoreNames.contains(CommonUtil.CONST_DB_ENTITY_PHOTO)) {
-						var transaction = db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO], 'readwrite')
-						var objectStore = transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
-						// Finding an available filename
-						var request = objectStore.getAllKeys().onsuccess = (event) => {
-							//console.info("All keys?");
-							// Array(4) [ "20799_illustration.jpg", "20801_illustration.jpg", "20801_illustration_1.jpg", "20801_illustration_2.jpg" ]
-							//console.info(event.target.result); //DETTE funker!!!
+					var transaction = db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO], 'readwrite')
+					var objectStore = transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
+					// Finding an available filename
+					var request = objectStore.getAllKeys().onsuccess = (event) => {
+						//console.info("All keys?");
+						// Array(4) [ "20799_illustration.jpg", "20801_illustration.jpg", "20801_illustration_1.jpg", "20801_illustration_2.jpg" ]
+						//console.info(event.target.result); //DETTE funker!!!
 
-							var existingFileNames = event.target.result;
-							var counter = 1;
-							while (existingFileNames.indexOf(fileName) >= 0) {
-								fileName = this.observationId + "_illustration_" + (counter++) + ".jpg";
+						var existingFileNames = event.target.result;
+						var counter = 1;
+						while (existingFileNames.indexOf(fileName) >= 0) {
+							fileName = this.observationId + "_illustration_" + (counter++) + ".jpg";
+						}
+						// Create the illustration object for storage in IndexedDB
+						var newIndexedDBIllustration = {
+							observationId: this.observationId,
+							deleted: false,
+							illustration: {
+								fileName: fileName,
+								imageTextData: "data:image/jpeg;base64," + imageTextData
 							}
-							// Create the illustration object for storage in IndexedDB
-							var newIndexedDBIllustration = {
-								observationId: this.observationId,
-								deleted: false,
-								illustration: {
-									fileName: fileName,
-									imageTextData: "data:image/jpeg;base64," + imageTextData
-								}
-							};
-							// Store the image in IndexedDB
-							transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO).add(newIndexedDBIllustration, newIndexedDBIllustration.illustration.fileName).onsuccess = (event) => {
-								// Create an item for the ObservationIllustrationSet
-								var newObservationIllustration = {
-									observationIllustrationPK: {
-										observationId: this.observationId,
-										fileName: fileName
-									},
-									uploaded: false
-								}
-								// Add the component to the ObservationIllustrationBoard
-								this.observationIllustrations.push(newObservationIllustration);
-								this.organizeIllustrationsForRendering(); // Need to do this to ensure the first image is rendered
-								this.$emit("observationIllustrationSetUpdated", this.observationIllustrations);
-							};
 						};
-
-					}
-
-
+						// Store the image in IndexedDB
+						transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO).add(newIndexedDBIllustration, newIndexedDBIllustration.illustration.fileName).onsuccess = (event) => {
+							// Create an item for the ObservationIllustrationSet
+							var newObservationIllustration = {
+								observationIllustrationPK: {
+									observationId: this.observationId,
+									fileName: fileName
+								},
+								uploaded: false
+							}
+							// Add the component to the ObservationIllustrationBoard
+							this.observationIllustrations.push(newObservationIllustration);
+							this.organizeIllustrationsForRendering(); // Need to do this to ensure the first image is rendered
+							this.$emit("observationIllustrationSetUpdated", this.observationIllustrations);
+						};
+					};
 
 					// Add the component to the ObservationIllustrationBoard
 					// Mark the observation as "InNeedOfSync" or similar...
 				}
+				
 			},
 			onFail: function (message) {
 				alert(message);

src/components/Sync.vue

@@ -980,19 +980,7 @@
 						let objectstore = transaction.objectStore(entityName).add(observationImage, observationImage.illustration.fileName);
 					}
 					else {
-						let store = db.createObjectStore(entityName, {keypath: observationImage.illustration.fileName});
-						store.createIndex('observationId', 'observationId', {unique: false});
-						store.createIndex('organismId', 'organismId', {unique: false});
-					}
-				}
-
-
-				dbRequest.onupgradeneeded = function (event) {
-					let db = event.target.result;
-					if (!db.objectStoreNames.contains(entityName)) {
-						let store = db.createObjectStore(entityName, {keypath: observationImage.illustration.fileName});
-						store.createIndex('observationId', 'observationId', {unique: false});
-						store.createIndex('organismId', 'organismId', {unique: false});
+						alert("Photo part of IndexedDB not created. Please report this error.");
 					}
 				}
 

src/main.js

@@ -73,6 +73,24 @@ const init = () => {
 		console.info("Vue is ready");
 		console.info("User's preferred language is " + this.$i18n.locale);
 		// Are we logged in already?
+		// Load the database, in case we need to create the schema
+		let dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
+		dbRequest.onsuccess = function (evt) {
+			console.info("IndexedDB contacted");
+			// All good
+		}
+
+		dbRequest.onupgradeneeded = function (event) {
+			console.info("No/outdated IndexedDB database found. Updating schema.")
+			// Define the database schema here
+			let db = event.target.result;
+			if(!db.objectStoreNames.contains(CommonUtil.CONST_DB_ENTITY_PHOTO))
+			{
+				let store = db.createObjectStore(CommonUtil.CONST_DB_ENTITY_PHOTO, {keypath: "fileName"});
+				store.createIndex('observationId', 'observationId', {unique: false});
+				store.createIndex('organismId', 'organismId', {unique: false});
+			}
+		}
 	  }
 
     });