Skip to content
Snippets Groups Projects
Commit 16476028 authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

First working version of new Illustration component

parent 1c105710
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ 16476028
......@@ -16,6 +16,7 @@
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/vue-fontawesome": "^2.0.2",
"ekko-lightbox": "^5.3.0",
"luxon": "^1.26.0",
"ol": "6.5.0",
"ol-ext": "^3.1.18",
......
src/components/Observation.vue
+ 1
− 8
View file @ 16476028
......@@ -88,12 +88,7 @@
v-bind:observationId="observation.observationId"
@observationIllustrationSetUpdated = "handleObservationIllustrationSetUpdated"
/>
<div v-if="isMounted" >
<photo :isImageVisible=false :observationId="observationId" :organismId="observation.organismId" ></photo>
<photo :isImageVisible=true :observationId="observation.observationId" :organismId="observation.organismId" :imageFileName="photo.observationIllustrationPK.fileName" :isDeleted='photo.deleted' :isUploaded="photo.uploaded" 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>
<div ref='divObservationText' class="form-group">
<div><font-awesome-icon icon="fa-regular fa-file-lines" style="font-size: x-large;"/></div>
......@@ -117,8 +112,6 @@
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'
import Quantification from '@/components/Quantification.vue'
import Sync from '@/components/Sync'
import ObservationIllustrationBoard from "@/components/ObservationIllustrationBoard"
......
src/components/ObservationIllustration.vue
+ 12
− 4
View file @ 16476028
......@@ -23,9 +23,12 @@
-->
<template>
<div style="position:relative;">
<img :src="imageBase64Data" style="width: 100%; margin-bottom: 10px;"/>
<font-awesome-icon style="font-size: large; color: white; background-color:#3d8052; position:absolute; top: 5px; left: 5px; padding: 4px;" icon="fa-regular fa-trash-can" @click="handleDeleteImageRequest" />
<div>
<div style="position:relative;">
<img :src="imageBase64Data" style="width: 100%; margin-bottom: 10px;" @click="handleImageClick"/>
<font-awesome-icon style="font-size: large; color: white; background-color:#3d8052; position:absolute; top: 5px; left: 5px; padding: 4px;" icon="fa-regular fa-trash-can" @click="handleDeleteImageRequest" />
</div>
</div>
</template>
......@@ -62,6 +65,11 @@ export default {
// We handle this in the parent component
this.$emit("deleteObservationIllustrationMetaData", this.observationIllustration.observationIllustrationPK);
},
handleImageClick() {
this.$emit("illustrationClicked", this.imageBase64Data);
document.getElementById("observationModal").style.display="block";
//$('#observationModal').modal();
},
/* Fetch the image data (base64 encoded) from the IndexedDB*/
getObservationIllustrationDataFromStore()
{
......@@ -116,7 +124,7 @@ export default {
let db = evt.target.result;
let transaction = db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO],'readwrite');
let objectstore = transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
//let objectStoreRequest = objectstore.delete(this.observationIllustration.observationIllustrationPK.fileName);
let objectStoreRequest = objectstore.delete(this.observationIllustration.observationIllustrationPK.fileName);
this.propagateMetaDataDelete();
}
},
......
src/components/ObservationIllustrationBoard.vue
+ 70
− 22
View file @ 16476028
......@@ -32,10 +32,13 @@
<div class="container">
<div class="row" v-for="observationIllustrationPair in observationIllustrationPairs">
<div class="col-6" v-for="observationIllustration in observationIllustrationPair" >
<observation-illustration :observationIllustration="observationIllustration" @deleteObservationIllustrationMetaData="deleteObservationIllustrationMetaData"/>
<observation-illustration :observationIllustration="observationIllustration" @deleteObservationIllustrationMetaData="deleteObservationIllustrationMetaData" @illustrationClicked="setModalImage"/>
</div>
</div>
</div>
<div class="centeredModal" id="observationModal" onclick="this.style.display='none';">
<img :src="modalImageBase64Data" class="img-fluid" /></div>
</div>
</div>
</template>
......@@ -54,7 +57,8 @@ export default {
data() {
return {
observationIllustrationPairs: [],
observationIllustrations: []
observationIllustrations: [],
modalImageBase64Data: ""
};
},
methods: {
......@@ -75,6 +79,9 @@ export default {
// Propagate change up to parent Observation Object
this.$emit("observationIllustrationSetUpdated", this.observationIllustrations);
},
setModalImage: function(imageBase64Data){
this.modalImageBase64Data = imageBase64Data;
},
/** Camera plugin Launcher */
launchCamera: function() {
if(navigator.camera)
......@@ -108,41 +115,64 @@ export default {
console.log('WARNING : Functional Cordova camera plugin needed to launch gallery');
}
},
fileNameExists: function(IndexedDBHandle, fileName){
},
/*
// Should probably be commented before building
mockLaunchCamera: function(){
var imageTextData="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";
this.addIllustration(imageTextData);
},*/
// Callback for launchCamera and launchGallery
addIllustration: function(imageURI){
addIllustration: function(imageTextData){
var dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
// This stuff is asynchronous...
dbRequest.onsuccess = (evt) => {
var db = evt.target.result;
// Get all registered fileNames
// Find an available filename
// 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])
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 counter = 1;
var fileNameExists = false;
do {
fileName = this.observationId + "_illustration_" + counter + ".jpg";
counter++;
}
while(this.fileNameExists(fileName))*/
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
}
};
// 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
}
}
// Add the component to the ObservationIllustrationBoard
this.observationIllustrations.push(newObservationIllustration);
this.$emit("observationIllustrationSetUpdated", this.observationIllustrations);
};
};
}
// Store the image in IndexedDB
// Create an item for the ObservationIllustrationSet
// Add the component to the ObservationIllustrationBoard
// Mark the observation as "InNeedOfSync" or similar...
}
......@@ -180,6 +210,13 @@ export default {
this.observationIllustrations = this.initialObservationIllustrations;
this.organizeIllustrationsForRendering();
//console.info("ObservationIllustrationBoard mounted. ObservationId=" + this.observationId);
},
watch: {
initialObservationIllustrations: function(val)
{
this.observationIllustrations = this.initialObservationIllustrations;
this.organizeIllustrationsForRendering();
}
}
};
......@@ -187,5 +224,16 @@ export default {
</script>
<style scoped>
.centeredModal {
position: fixed;
display: none;
width: 95%;
padding: 10px;
border: 2px solid #3d8052;
border-radius: 5px;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment