-
Tor-Einar Skog authoredTor-Einar Skog authored
Quantification.vue 3.87 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: Bhabesh Bhabani Mukhopadhyay
Author: Tor-Einar Skog <tor-einar.skog@nibio.no>
Dated : 19-Aug-2021
-->
<template>
<div>
<div id="quantificationForm"/>
</div>
</template>
<script>
import CommonUtil from '@/components/CommonUtil';
import { JSONEditor } from "@json-editor/json-editor/dist/jsoneditor";
export default {
props: ['observationId', 'organismId', 'isEditable', 'schemaData'],
data() {
return {
observation_Id: '',
organism_id: '',
iseditable: true,
observationDataSchema: {},
observationData: null,
editor: null
}
},
watch: {
organismId: function(val, oldVal)
{
this.observationData = null;
this.initQuantification();
}
},
methods:
{
change() {
this.observationData = this.editor.getValue();
this.$emit('updateQuantificationData', this.observationData);
},
initQuantification() {
this.observation_Id = (this.observationId) ? this.observationId : this.$route.params.observationId;
this.organism_id = (this.organismId) ? this.organismId : this.$route.params.organismId;
let pestList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_PEST_LIST));
let pest = pestList.find(({organismId}) => organismId === this.organism_id);
if(pest == null)
{
// TODO: i18n this!!
pest = {
observationDataSchema: "{\"$schema\":\"http://json-schema.org/draft-04/schema#\",\"type\":\"object\",\"title\":\" \",\"properties\":{\"number\":{\"title\":\"Antall\",\"type\":\"string\"},\"unit\":{\"title\":\"Måleenhet\",\"type\":\"string\"}}}"
}
}
this.observationDataSchema = JSON.parse(pest.observationDataSchema);
if(this.observationData == null)
{
this.observationData = JSON.parse(pest.observationData);
}
// Only on first time setup
if(this.editor == null)
{
this.editor = new JSONEditor(document.getElementById('quantificationForm'),{
schema: this.observationDataSchema,
ajax: true, // If true, JSON Editor will load external URLs in $ref via ajax.
theme: "bootstrap4",
disable_edit_json: true, // If true, remove all Edit JSON buttons from objects.
disable_properties: true, // If true, remove all Edit Properties buttons from objects.
remove_button_labels: true, // Display only icons in buttons. This works only if iconlib is set.
disable_collapse: true // Make sure no elements can be collapsed
});
this.editor.on("ready",()=>{this.editor.setValue(this.observationData);})
this.editor.on("change",this.change);
}
else
{
// Subsequent calls to initQuantification() means that a new value must be set
this.editor.setValue(this.observationData);
}
}
},
errorCaptured(err, vm, info) {
CommonUtil.logInfo('err : ' + err);
CommonUtil.logInfo('vm : ' + vm);
CommonUtil.logInfo('info : ' + info);
},
mounted() {
this.observationData = (this.schemaData) ? this.schemaData : (this.$route.params.schemaData) ? this.$route.params.schemaData : null;
if (typeof (this.isEditable) === 'undefined') {
this.iseditable = true;
}
else {
this.iseditable = false;
}
this.initQuantification();
},
}
</script>