Skip to content
Snippets Groups Projects
Commit 0aaecd92 authored by Lene Wasskog's avatar Lene Wasskog
Browse files

feat: Fix styling bugs in observation form

parent c065e604
Branches
No related tags found
No related merge requests found
......@@ -62,13 +62,13 @@
<div class="col-1 d-flex align-items-center">
<font-awesome-icon class="form-icon" icon="map-location"/>
</div>
<div class="col-5 d-flex align-items-center">
<div class="col-7 d-flex align-items-center ">
<router-link id="linkMap" class="vips-btn large" ref='linkMap' v-if="!isPartOfTimeSeries"
:to="{name:'MapObservation', params: {observationId:observation.observationId,geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel,locationPointOfInterestId:mapLocationPointOfInterestId, observation:observation}}">
{{ mapGeoinfo ? $t("observation.map.label.edit") : $t("observation.map.label.new") }}
</router-link>
</div>
<div class="col-6 d-flex align-items-center" v-html="currentLocationName()"></div>
<div class="col-4 d-flex align-items-center float-end" v-html="currentLocationName()"></div>
</div>
<div v-if="mapGeoinfo" id="divMapGeoInfo">
......@@ -114,25 +114,25 @@
v-on:click="toggleShowQuantification">{{ $t("observation.quantification.label") }}
</a>
</div>
<div class="form-group mb-3 row" v-if="showQuantificationForm">
<fieldset id='divSchemaForm' class="form-group border">
<legend style="font-size: 1em !important;">{{ $t("observation.quantification.form.label") }}
</legend>
<quantification :isEditable="false" :observationId="observation.observationId"
:organismId="observation.organismId" :schemaData="observation.observationData"
v-on:updateQuantificationData="updateQuantificationData"
v-on:quantificationErrorCount="updateQuantificationErrorCount"></quantification>
</fieldset>
</div>
<div class="form-group mb-3 row">
<observation-illustration-board
v-bind:initialObservationIllustrations="observation.observationIllustrationSet"
v-bind:observationId="observation.observationId"
@observationIllustrationSetUpdated="handleObservationIllustrationSetUpdated"/>
</div>
<div class="mb-3">
<div class="form-check form-switch">
</div>
<div class="form-group mb-3 row" v-if="showQuantificationForm">
<fieldset id='divSchemaForm' class="form-group border">
<legend style="font-size: 1em !important;">{{ $t("observation.quantification.form.label") }}
</legend>
<quantification :isEditable="false" :observationId="observation.observationId"
:organismId="observation.organismId" :schemaData="observation.observationData"
v-on:updateQuantificationData="updateQuantificationData"
v-on:quantificationErrorCount="updateQuantificationErrorCount"></quantification>
</fieldset>
</div>
<observation-illustration-board
v-bind:initialObservationIllustrations="observation.observationIllustrationSet"
v-bind:observationId="observation.observationId"
@observationIllustrationSetUpdated="handleObservationIllustrationSetUpdated"/>
<div class="row form-group mb-3">
<div class="col">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" @change="setDefaultHeader" v-model="useDefaultHeader"
id="useDefaultHeader">
<label class="form-check-label" for="useDefaultHeader">Bruk standardtittel</label>
......@@ -143,34 +143,39 @@
<label for="heading">{{ this.$i18n.t("observation.detail.heading.placeholder") }}</label>
</div>
</div>
<div class="mb-3">
</div>
<div class="row mb-3">
<div class="col">
<div class="form-floating">
<textarea id="body" v-model="observation.observationText" class="form-control" rows="4"/>
<label for="body">{{ this.$i18n.t("observation.detail.body.placeholder") }}</label>
</div>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" v-model="observation.broadcastMessage" id="broadcastMessage">
<label class="form-check-label" for="broadcastMessage">{{ $t("observation.broadcast.label") }}</label>
<font-awesome-icon icon="fa-solid fa-circle-question" class="helpIcon"
onclick="document.getElementById('infoModal').style.display = 'block';"/>
</div>
<div v-if="!observation.deleted" class="float-end">
<a v-if="isDeleteBttnVisible" class="vips-btn danger" @click="callForRemoveObservation">{{
$t("delete.label")
}}</a>
<span v-else>
<router-link v-if="backToTimeSeries"
:to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
class="vips-btn danger">
{{ $t("cancel.label") }}
</router-link>
<router-link v-else class="vips-btn danger" to="/">{{ $t("cancel.label") }}</router-link>
</span>
<a class="vips-btn" @click="saveObservation">{{ $t("save.label") }}</a>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" v-model="observation.broadcastMessage" id="broadcastMessage">
<label class="form-check-label" for="broadcastMessage">{{ $t("observation.broadcast.label") }}</label>
<font-awesome-icon icon="fa-solid fa-circle-question" class="helpIcon"
onclick="document.getElementById('infoModal').style.display = 'block';"/>
</div>
</div>
</div>
<div v-if="!observation.deleted" class="float-end">
<a v-if="isDeleteBttnVisible" class="vips-btn danger" @click="callForRemoveObservation">{{
$t("delete.label")
}}</a>
<span v-else>
<router-link v-if="backToTimeSeries"
:to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:this.paramObservationTimeSeries.observationTimeSeriesId}}"
class="vips-btn danger">
{{ $t("cancel.label") }}
</router-link>
<router-link v-else class="vips-btn danger" to="/">{{ $t("cancel.label") }}</router-link>
</span>
<a class="vips-btn" @click="saveObservation">{{ $t("save.label") }}</a>
</div>
<div class="centeredModal" id="infoModal" onclick="this.style.display='none';">
<font-awesome-icon icon="fa-solid fa-circle-question"/>
......@@ -483,9 +488,7 @@ export default {
/** On selecting a particular crop */
selectCrop() {
console.info("Crop has been selected!")
if (this.formData.cropId !== this.observation.cropOrganismId) {
console.info("NEW crop! " + this.formData.cropId);
const lstCropPestList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_PEST_LIST));
const lstPestIds = [];
......@@ -502,10 +505,8 @@ export default {
/** On selecting a particular pest */
selectPest() {
console.info("Pest has been selected!")
// If crop/pest is changed
if (this.formData.pestId !== this.observation.organismId) {
console.info("NEW pest! " + this.formData.pestId);
this.observation.organismId = this.formData.pestId;
this.isPestSelected = true;
this.setShowQuantification(false);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment