<!--
    
  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 = "/9j/4AAQSkZJRgABAQEASABIAAD/4RbMRXhpZgAASUkqAAgAAAALAA8BAgAIAAAAkgAAABABAgAJAAAAmgAAABIBAwABAAAAAQAAABoBBQABAAAApAAAABsBBQABAAAArAAAACgBAwABAAAAAgAAADEBAgANAAAAtAAAADIBAgAUAAAAwgAAABMCAwABAAAAAQAAAGmHBAABAAAA1gAAACWIBAABAAAANgMAAAQEAABzYW1zdW5nAFNNLUc5MzBGAABIAAAAAQAAAEgAAAABAAAAR0lNUCAyLjEwLjE4AAAyMDIyOjAzOjExIDExOjAwOjIzAB0AmoIFAAEAAAA4AgAAnYIFAAEAAABAAgAAIogDAAEAAAACAAAAJ4gDAAEAAAAoAAAAAJAHAAQAAAAwMjIwA5ACABQAAABIAgAABJACABQAAABcAgAAAZIKAAEAAABwAgAAApIFAAEAAAB4AgAAA5IKAAEAAACAAgAABJIKAAEAAACIAgAABZIFAAEAAACQAgAAB5IDAAEAAAAFAAAACZIDAAEAAAAAAAAACpIFAAEAAACYAgAAfJIHAGIAAACgAgAAhpIHAAgAAAACAwAAkJICAAUAAAAKAwAAkZICAAUAAAAQAwAAkpICAAUAAAAWAwAAAKAHAAQAAAAwMTAwAaADAAEAAAABAAAAAqAEAAEAAADADwAAA6AEAAEAAADcCAAAAqQDAAEAAAAAAAAAA6QDAAEAAAAAAAAABaQDAAEAAAAaAAAABqQDAAEAAAAAAAAAIKQCABkAAAAcAwAAAAAAAAEAAADABQAAEQAAAAoAAAAyMDE3OjA3OjEwIDIwOjQzOjM2ADIwMTc6MDc6MTAgMjA6NDM6MzYAHQQAAGQAAACZAAAAZAAAACUDAABkAAAAAAAAAAoAAACZAAAAZAAAAKQBAABkAAAABwABAAcABAAAADAxMDACAAQAAQAAAAAgAQAMAAQAAQAAAAAAAAAQAAUAAQAAAFoAAABAAAQAAQAAAAAAAABQAAQAAQAAAAEAAAAAAQMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADA5ODAAADA5ODAAADA5ODAAAEMxMkxMSkIxOFZNIEMxMkxMSkswMUdNCgAACQAAAAEABAAAAAICAAABAAIAAgAAAE4AAAACAAUAAwAAAKgDAAADAAIAAgAAAFcAAAAEAAUAAwAAAMADAAAFAAEAAQAAAAAAAAAGAAUAAQAAANgDAAAHAAUAAwAAAOADAAAdAAIACwAAAPgDAAAAAAAALAAAAAEAAAAiAAAAAQAAABUAAAABAAAAewAAAAEAAAAWAAAAAQAAABIAAAABAAAAJgEAAAEAAAADAAAAAQAAACsAAAABAAAAIwAAAAEAAAAyMDE3OjA3OjExAAAIAAABBAABAAAAAAEAAAEBBAABAAAAjwAAAAIBAwADAAAAagQAAAMBAwABAAAABgAAAAYBAwABAAAABgAAABUBAwABAAAAAwAAAAECBAABAAAAcAQAAAICBAABAAAAUxIAAAAAAAAIAAgACAD/2P/gABBKRklGAAEBAAABAAEAAP/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIAI8BAAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AM8Kc08IfapAntTgntXoXOOxGEPtTgh9qlCD0pQntRcCMKacEPtUoT2NOCexpXCxEFNPCHPapNn+yaeE9qLjIgh9qcEPtUwTjpShPY0rjIgh9qcEPtUwjHpThH/smi4WIdh9qUIfapxH/smnCMf3TSuOxCEPtR5Z9qs+X/smlEY/umlzFWK3ln2pfLPtVryh/dNHlf7Jpcw7FXyz6ikMZ9RVvy/9k0hj/wBk0cwWKvln2pPLPtVry/8AZNIY/wDZNHMKxVKEelNKH2q2Y/8AZNM8v/ZNPmE0VShz2ppQ+1WjH/smmtH/ALJp3FYqlD7UhQ+1WTH/ALJprJ7Gi4WKpQ+1NKHParRTjpTSg9KdxFUofak2H2qyUHpTdg9KLgRBeetOC+9SBBnpTxH0+U1PMFiMJ704J71Js/2TTgnsaXMFiMJ708L71IE9jTgg9KOYdiNVwOtOCc9alCD0p4j/ANk0uYLEQTjrThHk9amWMY+6acI+fumlzFWIhHjvTwnvUoj/ANk09Yx3U0uYaiRBOnNOCe9TCMf3TTxGP7ppcxSRCEz3pRH7/pU4jH9004Rj+6aXMVYg2e9L5fHWrHlD+6aXyx/dNLmHYreX70hj96teUP7poMY/umlzD5Sp5ee/6U0x471bMf8AsmmmP/ZNPmJ5SoU5600pgdatGMZ+6aaY+PumnzC5SqU96YV96tGP/ZNMMY/umnclorFPemFPerRQY6GmFP8AZNPmFYqlOvNMKe9WjGP7pppjH900+YVisV96aU561ZMY/umm+WP7pp3FYhCc9akVOOtShP8AZFPCHHSsPaGnKRBfelCe9TBPYU4J7Cl7QOUiVPenBOetTBPYUoTnoKOcOUiCe9SBeetSBPanhPYUc4+UjCcDmnhfepAnTinhPYUucfKRBM45qQJ71IE9hT1T2o5ylEjCe9PVMjrUoTp8op4jOPuilzlKJEI/enBPerAjOfuinrEcfdFS5lcpWEfvThF7/pVsQnP3BTxA39wfpU85XKUjHjv+lNMfv+laH2dv7g/SmmBv7g/SlzhymeY8d6YU96vtCc/cFRtEeflFVzicSiyc9aYV96uNGc/dFRlOPuimpkuJUK9eaYU96tlOvAphT2FUpEuJUKe9NKe9WinsKQp/siq5iOUqFPemlPerZj/2RSeX/sijmFYpmP3ppTnrVtk2jJAqlNqVlBK0UsoV16jYT/SnzC5R4QZ708KMVTTUoWOAsn5D/Gp47lHwQG59a4PaM6/Zk4UUoQe9CuDnrTwe9L2wvZgFFOCD3pQacDR7YPZgFGKcFFKDxTwafth+zBUHHWnhBnvSr2p460e2H7MQIOOtPCD3pV7VKozR7YfsxFQcdakWMY71MIyIwcjpTlU4qfbIpUxqxjPepViXHU1NHExbqOlWoom2nkdal1kV7MrpApPU1OtsmBy1aEUTbjyOlWkibA5FSqjexLkomR9lT1ao3tkAPLVv+W3qKikhYqeRVNyW6JVRM514FDdTVd4l55Nb00LBxyOlUZomw3I60lVNOVPYyGjGe9Qsgx3rRkjO7qOlVmQ47VaqkOBTZBz1qMoPerjKeajKH2rRVCXAqlRSbB71Yf5FLHoKrSXSR4yG59BVKoQ4AUHvVS5maGQKoBBGeafqF3HDpsk7BioCnAHPJFeQ+OL+K61qF0VwBbqPmA/vNVKdxch6pqlw9taq6BSS4HP0NeUeJfFV9beILqFIrcquzBKtn7gPrTdW1KHUrVYYVkVlcMS4AGMEdj71zc1s5lblaPaFqkzpo9e1Pd/x89v+ea/4VZTxHqy4Au8Y/wCmaf4Vzccg3d+lP3j3qnCPY0TOutvEmrNuzd56f8s0/wAK0rfXdScJuuc5PPyL6/SvPxIvoacJVyODWcqUWNM9UtdSu337pc4x/CP8K0YbqZiuX6j0FePCVfQ1NHcIpBIasXQ8y1JHsqzSY+9+lWEdieteOxahEqkFX6+g/wAanXVYAfuSfkP8azdB9y00ewB245qRWOeteSR6zbqFykvB9B/jVhdetc/6ub8h/jWboy7lKx6urHjmpVY8815YniG08rb5c2f90f40z+2bduiS/kP8azdOXctRR7CjsVUE8YqaMAr+NeNtr9qItvlzZHH3R/jSw+IbRUIMc/X+6P8AGodOY1FHuEYG78KtRAbT9a8qtfE9lFKWaK4xtxwq/wCNblj4x09YGBhuvvf3V9B/tVg5SQTpN7HpcaKG6dqsKBgVx1t4103zD+4uun9xf/iq1IPFlhKqFYrkbjgZVfX613YWrTivfZwzoVexv01gNprOXXbVs4jm/If41HJ4itEBzHPx6KP8a6pYnDtW5kZqhU7FyVFLDjtVCZF+fjv/AFqGTxPZbv8AVXHT+6v+NUbjxFabXPlz9f7o9frXk1KqU3yu50U6c1uieRF3dO1ZNxIyRgqcHNc54j8Y6fbahGjw3RJiB4VfU/7VeXm/ilG1VfPXkCtqfNLU3cT1eXUboassIl/dl1BG0dDjPatG6lePZtbGc9q8RRgt/HcH7iurEd8DFX9U1e3ufK2JKNuc5A9vetdegvZHdXur3ytMonwAxAGxfX6Vzusa9qUXk7LnGd2f3a+3tXHz3CNG2A3NUn+fGO3rW0LkumkdTd+JdXmsmhku90ZAyPLQdCPaudu/9NlElx87hdoPTj8PrWe0TZPI60wxn1FaqL7kuy6FqT92uV4Oaqu7FySaTyz6ijaRVJEtjUkw33hUvmDbncKoB+elP8zjGP1rpMFIs+Z/tCl80/3hVPf7U1p8Art/WpDmL4n/AOmi/mKeJxx86/mKx2n2/wAP604XOADs/WlYOY2BOP76/mKlWUZ5cfnWF9s/6Z/rU323/pn/AOPVLRSmbYlAH31/Oj7Sg/5aoPxFZIusw52dj3qBp9wxt/Wptc09odAl0uB+9TH1FTC7Qf8ALZPzFc4k2EA2/rUgkz2qHA0jUNmS6zuxKp59RToZzsOXHX2rIU9DU8b/AC9O9Q4mkZHTxXuWOZk6eoq3HqLIuFuEAz7VyyT7Tnb+tWIpPMUnGOcVzypI3jUOyh1mUOcXcfT/AGa17TXLgRxkXaYB64X1+lcJFFljz29K0IrjyYQm3OM85rnlRXQ2Ul1O6/4SW7TpfxjPsn+FNPiOZs77+LB652CuFe+6fu//AB6q8l7lSPL/APHqlYa4nKKO7l199w230JGOxWsLUPEeqBJvKu8gN8uI0PGfpXNfbNvHl/rUiXfnERbMZ75qlh+XWxDkmV9S1LUL24WS4kZ3CBQdgHGT6D3qsGKcg4q7cR/vBz29KoSttUH3rqja2hkxTO+fvcfSmvJuxlgcUir5idcZqSGw8zd+9xj/AGf/AK9XoiHd7EBbcNoIJ9BQsUrZ2xufoprSg0LbIsv2n3xs9fxq/FY+Tn95nP8As0nWitgVOT3MgWMjRg/Z5CSP7ppV05iPmtpM/wC6a3hP5Y27c7eOtIbrP8H61HtpFezRlrpduT80Bx9TUy6RZEcwc/7zf41KL3eceXj8aRr3axHl5/4FS55j5InAZPqaaS2ep/OovNYdhUgOYi/fBr07nlAXI6saiZyX+8aVT5mc9vSmMMPQIU5NJz36VJGofOe1OWNWk2knFFx2Is09c5qwLSP1b86kNpGgyC351LkilFkSn93jNIEdzhRk/Wtuy0a3uLRJXeUM2c4Ix1+lWotDtUYkSTdPUf4Vi6sUbRpSZhRWN06qVjJB6fMP8asppl7z+6/8fH+NdBFYxRBVVnIB7kVOyBOmeaydd9DeNBdTAisp1Zd8fA68irkdsdvMa9fatlbKNkDFnyRnqKjkt0ibapbGM81m6tzZU7FRbUA8xL+QqQRKowEUfQVemhWNAQT171GsYYZJNTzFqJHhj9zr7UCG4J3c7f8AeqeSMRLuUknOOaBM3l4wOlLmHykYTPUUnljPKj8qXefao2mYZ4FO7FoElvubKxjGPakS3kiYSMm1R3yKabyRTgBfyprX0sq+Wypg+gNPUm6L8MtuUPmbSc91zT/ssL8eTGf+AissOR6Vd+2SJyFX8qzcWndFXQ5reJGP7pAB6KKVfKXOFUfQUhmaSIuQMkHpUMTl85xxTjqS3YuGVGj2Rt8/bHFRmVov9a5GenOaovcPCzMoUlT3phu5Ln74UbemBVKInIe7yeazb22Ekjmo3ughw0jA/jTZpmWI4A4rPlkLsCQOlaKNzNsnSSRTku351DLNJ5pxI/5mpSM1SncrMwGKtRIcmbiIVOTipQM8VSF0/ov5UfbJAw+VfyrC0ja8S4yFOuOab5yocEHj0qNLh5s7gox6VHKfmNHKw5kW0ukbOA1NaVeTg1VhP3qsyRgQb+c4FNxsJSQLICO9Oa9jUZKv+VRwqGQk+tVnGV/Glyj57Ggt5GY84b8qY13GR0b8qzxIy/IAMVIOTT5A5ycyAt5mDjrTvtKSdA3HrVVpCMpximqducU+QOcvtOpj24OcVVlO5gR6VC07DPAqNrl89Fpco+cvCVZOADnrzTXcIcHP4VWjlZWyAOlRz3D+YOF6U+QXOWPMHoacJVAzg1WjO9sH0q0IVMJbJzg0+UOcjknVsYBqHzV3dDSsoGKrscE/Wq5SHIldwT3p2NyYHeq+41YXhAfanYm437nBq3LdR3KhEDAg55FUZpCHHTpUSTNGcgD8aXLcalYuI4W4RTnO4VoON+MdqxBOxmD4Gcg1dW9kOflT8qmUOqHzEz9CKhMqw/eBOfSpjzHu7kZqndc7PxojroKRMLpM5w1MlkWRgQD0xzVYnauRTDMw7CtUiGxVPlHc3TpxQfnO4dD61E7kr2oWRgoGBV2JuXZELrgY609JVSHySDuwRkdOakwKmjtonCuyZbPXJrLmsaKJVSFueRTgNsgB7GrcqLHjaMZqAqC2e9TcqwsjgY602NwZAOaCA3WqTTOkzbWxgnHFVuIs3IzIPpSGZfQ1WaeRzlmyfpUXmN607ElwTrvAwetSyuAo69azPMYPkHkVMkryHDtkdelDiPmHO4Mh60x2HFJJwTiq0sr8c/pVKJLlYuNcIIsYbgCoGlVjkA1II1aBSRyQCalhtomQkp39TT5UiOe5E8yyDAB/GmZqPp0prOwPBpqIcxYkkAXoetCODhucVVd2I5NOjduBnjNFhqRqQIbrdswNuM7qfcMEt2Q9VwD+dVrWV4t+w4zjPFQyzyO7hmyCfQVHKU2BO7kUGQEbec1EWYdDTUYmTk1ViLkwYCq/mD3p8jENwe1T3dvFFEGRcHdjqaaQmyuJBjoaVXB9agJxmnQnOc07C5i5FcojqSG49KtJdxvnAbj1FZBY7yM96esjrnBx+FRKncpTsX5omCtLkbSc+/NVHcA96sQyPKyxucoRyMUXEMayABe3rSi7OzKavqiuBzS7SabkinBjjrWpFz//2QD/4gKwSUNDX1BST0ZJTEUAAQEAAAKgbGNtcwQwAABtbnRyUkdCIFhZWiAH5gADAAsACQA7ADRhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1kZXNjAAABIAAAAEBjcHJ0AAABYAAAADZ3dHB0AAABmAAAABRjaGFkAAABrAAAACxyWFlaAAAB2AAAABRiWFlaAAAB7AAAABRnWFlaAAACAAAAABRyVFJDAAACFAAAACBnVFJDAAACFAAAACBiVFJDAAACFAAAACBjaHJtAAACNAAAACRkbW5kAAACWAAAACRkbWRkAAACfAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAEcASQBNAFAAIABiAHUAaQBsAHQALQBpAG4AIABzAFIARwBCbWx1YwAAAAAAAAABAAAADGVuVVMAAAAaAAAAHABQAHUAYgBsAGkAYwAgAEQAbwBtAGEAaQBuAABYWVogAAAAAAAA9tYAAQAAAADTLXNmMzIAAAAAAAEMQgAABd7///MlAAAHkwAA/ZD///uh///9ogAAA9wAAMBuWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAJJ8AAA+EAAC2xFhZWiAAAAAAAABilwAAt4cAABjZcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltjaHJtAAAAAAADAAAAAKPXAABUfAAATM0AAJmaAAAmZwAAD1xtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAEcASQBNAFBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEL/2wBDAAEBAQEBAQEBAQEBAQECAgMCAgICAgQDAwIDBQQFBQUEBAQFBgcGBQUHBgQEBgkGBwgICAgIBQYJCgkICgcICAj/2wBDAQEBAQICAgQCAgQIBQQFCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAj/wgARCAAcADIDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABgcEBQgC/8QAGwEAAwEAAwEAAAAAAAAAAAAAAwQFBgACBwH/2gAMAwEAAhADEAAAAZm0yZgIxqtQIFHqQqoe0jSFEtvK/RnTLecUersrkvLHR3EWrl4Ae6JZc1si+z8/rWfFtC7c3hhIZeUmhKCvKVrsyP8ADV5VJoDRKKv/xAAfEAABBAMAAwEAAAAAAAAAAAADAgQFBgABEQcTFSH/2gAIAQEAAQUCDFYCJ7gIXufB/DQvMNEZ8neMPKlVLjK/UsuRlxpBjMG1Xds7bYqhXndn8vwbMTi/XYzhURZN6aw1i3jSLIBQ5wrQCzMHyivGbJCrJJ90LSBKkHCye0qxgdm2MpSbCg5HA8//xAAoEQABBAECBQMFAAAAAAAAAAABAAIDBBEFEgYUFSFBIjFRMlJxgaH/2gAIAQMBAT8B5UplQqLT0NMUmnp9UrlyhpMJUPD8R9ioOF/hWKtiOTYIDj8FO0EvGQMKbh3B9ZXR4V0W79v9Cq6Nc89v2qdNzO5enXy1uNyfPHIMuKknjj+lq6u/4QjGE6Ugp92TdhMsOLVJYcBlMlL2nPhb1//EACYRAAEDAwEJAQEAAAAAAAAAAAEAAgMEBREhBhITFSIxQlGxQYH/2gAIAQIBAT8BNyanXMJ90CN3CZdU24hcwCmdWs7YKlu9azuxVW1VQwZLCqO/Mmh4zp2sPokAq2bXOlG8wZAVLd5XjOFzGVHaClPl9VTeqbx1/iqbkH6BiNBG92TGmskh0jGnxRwySnqcULOz2uJ1YTYW4TaZmMqSBuVHC3OE+IRvG7+rdX//xAAtEAABAwIDBgQHAAAAAAAAAAABAAIDBBEFEjETISIyQdFhcaHBBiVCUWJysf/aAAgBAQAGPwIcK5VyrkXKuVcqaJ4q6lPiwEehQ+bwM/ZpHso4Tj1C15PW62sWK4bMLaiZu5RUlZjFLtpOVsfHYXtc20CfHgEL66szss6WMiMtvxeOn9U8rfiWuga55cGMY2zPAJuWmyD7mVndObLUwUzbaulHsmSS4uXv03ahbKPFahjfxJRkqZql1Qfq3AyefdObSUsIf1LxmPnvRyiPL04VG9pdc3TLuCmeZHXYd3p3UwcQ5oG4HojLnOYEAevZTNldmyDceuq0C//EACMQAQACAQMEAwEBAAAAAAAAAAEAESExQVFxgbHBYZGh4fH/2gAIAQEAAT8haONGFJa/hCuTVoY2OP1FsBs/sh/IUyxt5KEEeAQPuqmqIC8dWcQTFxRZcnc+R4eIcybGEMaqYxy2qHGNCJbobaNIZ2WACpuXlskZPkzSz4lEq636dZkDPOvqxtCHMNPTs0hptoCvBs0Z8bQRuvoNVLcvtnBX+yy5bXPf3AxaCnZ7Q2iTSXosOZ0CuFP840hXdopdzMEo90//2gAMAwEAAgADAAAAEFAPmJbUfbCqd1g//8QAIxEBAAIBAwMFAQAAAAAAAAAAAQARMSFBYVFxkYGhscHw0f/aAAgBAwEBPxDjj9ojmJWI5tBbTim9VMKxFpj2zLwPVm7UVDrUmEpO8wQHn4uBafUVDH8dYZph5H1crbb+7zbzxr8xkhfQv2gCFZ11fe426HxAFl8JYFoItthQO8ujhp/Jaf/EACMRAQACAQMDBQEAAAAAAAAAAAEAESExQVFxgZFhobHB0fD/2gAIAQIBAT8Q5U5cNvL2sJ3jtWepM92DXyTWt6I/cUDBvEOVKeK5FEvbDFaNQ7Xwc9rgguvHzDh95is+h+Jq7PgX3UJao85/JQsvrVeCYonHL2Z9vHENLjamj2qU8u+sFjCiK0SoRlghRU0F/YjWaHk2016wj//EAB4QAQACAwEBAQEBAAAAAAAAAAERIQAxQWFRcaHR/9oACAEBAAE/EGD68xaBHphHc/mDA5xPQrzGSO/TPQOGuIUUD7kEloGVn7BGKHIEACUdG7WPcEsHm+0/tiziWEsIDVVSnJljnXLS9FxcWqQtku+zncGASAVQCV3ld29k6FhMwxuE9MbQnoKCBMbdVTepLfFFQoCkF6jiMLB10TgEjz5QAnZwDLbZZUwpbQtspLir/nRsGdoADaAJI+mxvU6RmyIyXjYJZEEEWkmWUoIAMaGiUjBREKsMzTqvXCGdaITsoutCXeS3iCXSSIpNs2zsITYCw09F1RfX7lHMPiAB8h1ZxCTFpw+/6z//2Q==";
				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";
					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 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>