Skip to content
Snippets Groups Projects
Commit fa7ac6d6 authored by Bhabesh Bhabani Mukhopadhyay's avatar Bhabesh Bhabani Mukhopadhyay
Browse files

Components in Observation and Map with their heights

parent 2130d6b2
No related branches found
No related tags found
No related merge requests found
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div id='map-observation'> <div id='map-observation'>
<div v-if="isMyMapPanelVisible"><router-link :to="{name: 'Observation'}" class="btn btn-success ">Back</router-link></div> <div v-if="isMyMapPanelVisible"><router-link :to="{name: 'Observation'}" class="btn btn-success ">Back</router-link></div>
</div> </div>
<div id="ObservationMapPanel" v-if="isMyMapPanelVisible"> <div id="ObservationMapPanel" v-if="isMyMapPanelVisible">
<div> <div>
<input value="" placeholder="name" style="position:absolute"> <input value="" placeholder="name" style="position:absolute">
...@@ -20,6 +19,14 @@ ...@@ -20,6 +19,14 @@
</select> </select>
</div> </div>
</div> </div>
<div v-else >
<div id='divPrivacy' ref='divPrivacy'>
<select >
<option>Select</option>
<option>some text</option>
</select>
</div>
</div>
</div> </div>
</template> </template>
...@@ -243,9 +250,12 @@ export default { ...@@ -243,9 +250,12 @@ export default {
let routeParam=this.$route.params; let routeParam=this.$route.params;
// This ensures that the map fills the entire viewport // This ensures that the map fills the entire viewport
var mapDiv = document.getElementById("map-observation"); var mapDiv = document.getElementById("map-observation");
var navDiv = document.getElementById("vipsobsappmenu"); var navDiv = document.getElementById("vipsobsappmenu");
var appDiv = document.getElementById("app"); var appDiv = document.getElementById("app");
var divPrivacy = document.getElementById("divPrivacy");
if(this.isMapPanelVisible) if(this.isMapPanelVisible)
{ {
var panelObDiv = document.getElementById("ObservationMapPanel"); var panelObDiv = document.getElementById("ObservationMapPanel");
...@@ -261,7 +271,40 @@ export default { ...@@ -261,7 +271,40 @@ export default {
} }
else else
{ {
mapDiv.style.height = (screen.height - navDiv.offsetHeight ) + "px"; console.log('divPrivacy.offsetHeight : '+divPrivacy.offsetHeight);
let linkMap = document.getElementById("linkMap");
//console.log(this.$refs);
//console.log(this.$parent.$refs);
let heightTitleObservation = (this.$parent.$refs.titleObservation) ? this.$parent.$refs.titleObservation.clientHeight : 0;
let heightCameraLauncher = (this.$parent.$refs.cameraLauncher) ? this.$parent.$refs.cameraLauncher.clientHeight : 0;
let heightDivCropId = (this.$parent.$refs.divCropId) ? this.$parent.$refs.divCropId.clientHeight : 0;
let heightDivPestId = (this.$parent.$refs.divPestId) ? this.$parent.$refs.divPestId.clientHeight : 0;
let heightDivDateTime = (this.$parent.$refs.divDateTime) ? this.$parent.$refs.divDateTime.clientHeight : 0;
let heightLinkMap = (linkMap)?linkMap.offsetHeight:0;
let heightDivObservationText = (this.$parent.$refs.divObservationText) ? this.$parent.$refs.divObservationText.clientHeight : 0;
let heightDivPrivacy = this.$refs.divPrivacy.clientHeight;
console.log(this.$parent.$refs.linkMap);
mapDiv.style.height = (
screen.height - (
navDiv.offsetHeight
//+ divPrivacy.offsetHeight
+ heightTitleObservation
+ heightCameraLauncher
+ heightDivCropId
+ heightDivPestId
+ heightDivDateTime
+ heightLinkMap
+ heightDivPrivacy
+ heightDivObservationText
)
) + "px";
} }
if(routeParam.geoinfo) if(routeParam.geoinfo)
......
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1 ref='titleObservation'>{{ msg }}</h1>
<button type="button" class="btn btn-primary" id="cameraLauncher" @click="launchCamera">{{ take_photo }}</button> <button type="button" class="btn btn-primary" id="cameraLauncher" ref='cameraLauncher' @click="launchCamera">{{ take_photo }}</button>
<br> <br>
<select v-model="crop.cropId" v-on:change="selectCrop($event)"> <select id="divCropId" ref='divCropId' v-model="crop.cropId" v-on:change="selectCrop($event)">
<option v-for="crop in crops" v-bind:value='crop.organismId' >{{crop.latinName}}</option> <option v-for="crop in crops" v-bind:value='crop.organismId' >{{crop.latinName}}</option>
</select> </select>
<br> <br>
<div class="clearfix"/> <div class="clearfix"/>
<select v-model="pest.pestId"> <select v-model="pest.pestId" id='divPestId' ref='divPestId'>
<option v-for="pest in pests" v-bind:value='pest.pestId'>{{pest.pestName}}</option> <option v-for="pest in pests" v-bind:value='pest.pestId'>{{pest.pestName}}</option>
</select> </select>
<div class="clearfix"/> <div class="clearfix"/>
<div> <div ref='divDateTime'>
<!-- <input type="datetime-local" v-bind='strDateObservation | dateFormat' v-model="strDateObservation"/> --> <!-- <input type="datetime-local" v-bind='strDateObservation | dateFormat' v-model="strDateObservation"/> -->
<input type="datetime-local" v-model="strDateObservation"/> <input type="datetime-local" v-model="strDateObservation" />
</div> </div>
<router-link :to="{name:'MapObservation', params: {geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel}}">Observation Map </router-link> <router-link id="linkMap" ref='linkMap' :to="{name:'MapObservation', params: {geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel}}">Observation Map </router-link>
<div v-if="mapGeoinfo"><map-observation :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"></map-observation></div> <div v-if="mapGeoinfo" id="divMapGeoInfo"><map-observation :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"></map-observation></div>
<div>Observation Detail</div>
<div ref='divObservationText'>
<div>Observation Detail</div>
<input type="text" v-model="observationHeader"/> <input type="text" v-model="observationHeader"/>
<p><textarea v-model="observationText" /></p> <p><textarea v-model="observationText" /></p>
</div>
<button class="btn btn-secondary float-right" v-on:click="saveObservation">Save</button> <button class="btn btn-secondary float-right" v-on:click="saveObservation">Save</button>
...@@ -41,6 +40,8 @@ import CommonUtil from '@/components/CommonUtil' ...@@ -41,6 +40,8 @@ import CommonUtil from '@/components/CommonUtil'
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
import MapObservation from '@/components/MapObservation' import MapObservation from '@/components/MapObservation'
export default { export default {
name: 'Observation', name: 'Observation',
props: ['observationId'], props: ['observationId'],
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment