-
Tor-Einar Skog authoredTor-Einar Skog authored
ObservationIllustrationBoard.vue 19.33 KiB
<!--
Copyright (c) 2022 NIBIO <http://www.nibio.no/>.
This file is part of VIPSObservationApp.
VIPSObservationApp is free software: you can redistribute it and/or modify
it under the terms of the NIBIO Open Source License as published by
NIBIO, either version 1 of the License, or (at your option) any
later version.
VIPSObservationApp is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
NIBIO Open Source License for more details.
You should have received a copy of the NIBIO Open Source License
along with VIPSObservationApp. If not, see <http://www.nibio.no/licenses/>.
Author: Tor-Einar Skog <tor-einar.skog@nibio.no>
Dated : 2022-02-23
-->
<template>
<div class="row">
<div class="col-6">
<font-awesome-icon style="font-size: x-large; vertical-align: middle;" icon="camera" />
<a class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher'
@click="launchCamera">{{ $t("photo.label.takephoto") }}</a>
</div>
<div class="col-6">
<font-awesome-icon style="font-size: x-large; vertical-align: middle;" icon="file-image" />
<a type="button" class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher'
@click="launchGallery">{{ $t("photo.label.selectphoto") }}</a>
</div>
<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"
@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>
<script>
import CommonUtil from '@/components/CommonUtil'
import ObservationIllustration from "@/components/ObservationIllustration"
export default {
name: "ObservationIllustrationBoard",
components: {ObservationIllustration, CommonUtil},
props: {
initialObservationIllustrations: Array,
observationId: Number
},
data() {
return {
observationIllustrationPairs: [],
observationIllustrations: [],
modalImageBase64Data: ""
};
},
methods: {
// Triggered by the delete event in the ObservationIllustration component
deleteObservationIllustrationMetaData: function (observationIllustrationPK) {
// The ObservationIllustration file data has already been deleted by the component
// Mark the meta data as deleted from the current observation
// It will be removed on the next sync
var updatedList = [];
for (var i = 0; i < this.observationIllustrations.length; i++) {
if (this.observationIllustrations[i].observationIllustrationPK.fileName == observationIllustrationPK.fileName) {
this.observationIllustrations[i].deleted = true;
}
updatedList.push(this.observationIllustrations[i]);
}
this.observationIllustrations = updatedList;
this.organizeIllustrationsForRendering();
// 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) {
console.info("The camera should launch now");
navigator.camera.getPicture(this.addIllustration, this.onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL, //FILE_URI
correctOrientation: true,
});
}
else {
console.log('WARNING : Functional Cordova plugin needed to launch camera');
}
},
/** Image gallery launcher with same camera plugin */
launchGallery: function () {
if (navigator.camera) {
console.info("Other photo location should launch now");
navigator.camera.getPicture(this.addIllustration, this.onFail, {
quality: 50,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.DATA_URL, //FILE_URI
correctOrientation: true,
});
}
else {
console.log('WARNING : Functional Cordova camera plugin needed to launch gallery');
}
},
// Should probably be commented before building
mockLaunchCamera: function () {
var imageTextData = "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";
this.addIllustration(imageTextData);
},
// Callback for launchCamera and launchGallery
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, and find an available filename
var fileName = this.observationId + "_illustration.jpg";
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";
}
// 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);
};
};
// Add the component to the ObservationIllustrationBoard
// Mark the observation as "InNeedOfSync" or similar...
}
},
onFail: function (message) {
alert(message);
},
fileNameExists: function (fileName) {
},
organizeIllustrationsForRendering: function () {
if (this.observationIllustrations == undefined) {
return;
}
var obsIllusPair = [];
var tempObsIllusPairs = [];
var counter = 0;
for (var i = 0; i < this.observationIllustrations.length; i++) {
if (!this.observationIllustrations[i].deleted) {
obsIllusPair.push(this.observationIllustrations[i]);
}
if (obsIllusPair.length == 2 || i == this.observationIllustrations.length - 1) {
tempObsIllusPairs.push(obsIllusPair);
obsIllusPair = [];
}
if (!this.observationIllustrations[i].deleted) {
counter++;
}
}
this.observationIllustrationPairs = tempObsIllusPairs;
}
},
mounted() {
// Copying to manipulate on instance
this.observationIllustrations = this.initialObservationIllustrations;
this.organizeIllustrationsForRendering();
//console.info("ObservationIllustrationBoard mounted. ObservationId=" + this.observationId);
},
watch: {
initialObservationIllustrations: function (val) {
this.observationIllustrations = this.initialObservationIllustrations;
this.organizeIllustrationsForRendering();
}
}
};
</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>