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

feat: Move icons into buttons. Find correct time series name.

Add floating label to date field
parent 11b3ae88
Branches
No related tags found
No related merge requests found
...@@ -31,8 +31,8 @@ ...@@ -31,8 +31,8 @@
<router-link v-else class="vips-btn" to="/">{{ $t("back.label") }}</router-link> <router-link v-else class="vips-btn" to="/">{{ $t("back.label") }}</router-link>
</div> </div>
<div v-if="this.observation.observationTimeSeries" class="mt-3 mb-3"> <div v-if="this.observation.observationTimeSeries || this.observation.observationTimeSeriesId" class="mt-3 mb-3">
<b>{{ $t("observation.for.observationTimeSeries.name") }} <i>{{ this.observation.observationTimeSeries.name }}</i></b> <b>{{ $t("observation.for.observationTimeSeries.name") }} <i>{{timeSeriesName()}}</i></b>
</div> </div>
<div v-if="observation.deleted"> <div v-if="observation.deleted">
...@@ -58,18 +58,20 @@ ...@@ -58,18 +58,20 @@
<label for="pestId">{{ this.$i18n.t("observation.selectpest") }}</label> <label for="pestId">{{ this.$i18n.t("observation.selectpest") }}</label>
</div> </div>
<div class="form-group mb-3 row"> <div v-if="this.observation.observationTimeSeries" class="form-group row">
<div class="col-1 d-flex align-items-center"> <div class="col-12 d-flex align-items-center">
<font-awesome-icon class="form-icon" icon="map-location"/> Plassering:&nbsp;<span v-html="currentLocationName()"></span>
</div> </div>
<div class="col-7 d-flex align-items-center "> </div>
<router-link id="linkMap" class="vips-btn large" ref='linkMap' v-if="!isPartOfTimeSeries" <div v-else class="form-group mb-3 row">
:to="{name:'MapObservation', params: {observationId:observation.observationId,geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel,locationPointOfInterestId:mapLocationPointOfInterestId, observation:observation}}"> <div class="col-8 d-flex align-items-center ">
{{ mapGeoinfo ? $t("observation.map.label.edit") : $t("observation.map.label.new") }} <router-link id="linkMap" class="vips-btn large" ref='linkMap' v-if="!isPartOfTimeSeries"
</router-link> :to="{name:'MapObservation', params: {observationId:observation.observationId,geoinfo:mapGeoinfo,isMapPanelVisible:newMapPanel,locationPointOfInterestId:mapLocationPointOfInterestId, observation:observation}}">
</div> <font-awesome-icon class="form-icon" icon="map-location"/>{{ mapGeoinfo ? $t("observation.map.label.edit") : $t("observation.map.label.new") }}
<div class="col-4 d-flex align-items-center float-end" v-html="currentLocationName()"></div> </router-link>
</div> </div>
<div class="col-4 d-flex align-items-center" v-html="currentLocationName()"></div>
</div>
<div v-if="mapGeoinfo" id="divMapGeoInfo"> <div v-if="mapGeoinfo" id="divMapGeoInfo">
<map-observation :disabled="isPartOfTimeSeries" :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible" <map-observation :disabled="isPartOfTimeSeries" :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"
...@@ -77,18 +79,11 @@ ...@@ -77,18 +79,11 @@
:polygonService="observation.polygonService" :polygonService="observation.polygonService"
v-on:visibilityObservationAction="visibilityObservationAction"/> v-on:visibilityObservationAction="visibilityObservationAction"/>
</div> </div>
<div class="form-floating mb-3">
<div class="form-group mb-3 row">
<div class="col-1 d-flex align-items-center">
<label for="strDateObservation">
<font-awesome-icon class="form-icon" icon="calendar-days"/>
</label>
</div>
<div class="col-11">
<input id="strDateObservation" class="form-control" ref="strDateObservation" type="date" <input id="strDateObservation" class="form-control" ref="strDateObservation" type="date"
:max="maxObservationDate" :min="minObservationDate" v-model="strDateObservation" :max="maxObservationDate" :min="minObservationDate" v-model="strDateObservation"
v-on:change="capturedTime($event)"/> v-on:change="capturedTime($event)" placeholder="Dato for observasjon" v-on:focus="(this.type='date')" v-on:blur="(this.type='text')"/>
</div> <label for="strDateObservation">Dato for observasjon</label>
</div> </div>
<div class="form-check form-switch mb-3 row"> <div class="form-check form-switch mb-3 row">
...@@ -100,18 +95,18 @@ ...@@ -100,18 +95,18 @@
</div> </div>
<div class="form-group mb-3 row"> <div class="form-group mb-3 row">
<div class="col-1 d-flex align-items-center"> <div class="col">
<font-awesome-icon class="form-icon" icon="scale-balanced"/>
</div>
<div class="col-11">
<a v-if="showQuantificationForm" <a v-if="showQuantificationForm"
class="vips-btn large" class="vips-btn large"
v-on:click="toggleShowQuantification">{{ $t("observation.quantification.remove.label") }} v-on:click="toggleShowQuantification">
<font-awesome-icon class="form-icon" icon="scale-balanced"/>
{{ $t("observation.quantification.remove.label") }}
</a> </a>
<a v-else <a v-else
class="vips-btn large" class="vips-btn large"
v-on:click="toggleShowQuantification">{{ $t("observation.quantification.label") }} v-on:click="toggleShowQuantification">
<font-awesome-icon class="form-icon" icon="scale-balanced"/>
{{ $t("observation.quantification.label") }}
</a> </a>
</div> </div>
</div> </div>
...@@ -248,6 +243,15 @@ export default { ...@@ -248,6 +243,15 @@ export default {
this.observation.observationHeading = this.getDefaultHeader(); this.observation.observationHeading = this.getDefaultHeader();
} }
}, },
timeSeriesName() {
if(this.observation.observationTimeSeries) {
return this.observation.observationTimeSeries.name;
} else if(this.observation.observationTimeSeriesId) {
const jsonLocalOtsList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_TIME_SERIES_LIST));
const ots = jsonLocalOtsList.find(({observationTimeSeriesId}) => observationTimeSeriesId === this.observation.observationTimeSeriesId);
return ots ? ots.name: "ukjent"
}
},
handleObservationIllustrationSetUpdated(newList) { handleObservationIllustrationSetUpdated(newList) {
this.observation.observationIllustrationSet = newList; this.observation.observationIllustrationSet = newList;
}, },
...@@ -362,7 +366,9 @@ export default { ...@@ -362,7 +366,9 @@ export default {
} }
}, },
toggleShowQuantification() { toggleShowQuantification() {
if (this.showQuantificationForm) { if(!this.formData.pestId > 0) {
this.setShowQuantification(false);
} else if (this.showQuantificationForm) {
this.setShowQuantification(false); this.setShowQuantification(false);
} else { } else {
this.setShowQuantification(true); this.setShowQuantification(true);
...@@ -827,6 +833,7 @@ export default { ...@@ -827,6 +833,7 @@ export default {
// Special treatment if observation belongs to an observation time series // Special treatment if observation belongs to an observation time series
if (this.paramObservationTimeSeries) { if (this.paramObservationTimeSeries) {
console.info("this.paramObservationTimeSeries", this.paramObservationTimeSeries)
this.observation.observationTimeSeries = this.paramObservationTimeSeries; this.observation.observationTimeSeries = this.paramObservationTimeSeries;
this.observation.observationTimeSeriesId = this.paramObservationTimeSeries.observationTimeSeriesId; this.observation.observationTimeSeriesId = this.paramObservationTimeSeries.observationTimeSeriesId;
...@@ -859,7 +866,8 @@ export default { ...@@ -859,7 +866,8 @@ export default {
this.observationForStore.polygonService = this.observation.polygonService; this.observationForStore.polygonService = this.observation.polygonService;
} }
this.backToTimeSeries = this.paramObservationTimeSeries; this.backToTimeSeries = this.paramObservationTimeSeries;
this.isPartOfTimeSeries = this.observation.observationTimeSeries !== undefined && this.observation.observationTimeSeries !== null;
this.isPartOfTimeSeries = (this.observation.observationTimeSeries !== undefined && this.observation.observationTimeSeries !== null) || (this.observation.observationTimeSeriesId !== undefined && this.observation.observationTimeSeriesId !== null);
this.showQuantificationForm = this.observation.observationData && this.observation.observationData !== '' this.showQuantificationForm = this.observation.observationData && this.observation.observationData !== ''
}, },
......
...@@ -23,19 +23,19 @@ ...@@ -23,19 +23,19 @@
<template> <template>
<div class="form-group mb-3 row"> <div class="form-group mb-3 row">
<div class="col-1 d-flex align-items-center"> <div class="col-6 d-flex align-items-center">
<font-awesome-icon class="form-icon" icon="camera" /> <a class="vips-btn large" id="cameraLauncher" ref='cameraLauncher'
@click="launchCamera">
<font-awesome-icon class="form-icon" icon="camera" />
{{ $t("photo.label.takephoto") }}
</a>
</div> </div>
<div class="col-5"> <div class="col-6 d-flex align-items-center">
<a class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher' <a type="button" class="vips-btn large" id="cameraLauncher" ref='cameraLauncher'
@click="launchCamera">{{ $t("photo.label.takephoto") }}</a> @click="launchGallery">
</div> <font-awesome-icon class="form-icon" icon="file-image" />
<div class="col-1 d-flex align-items-center"> {{ $t("photo.label.selectphoto") }}
<font-awesome-icon class="form-icon" icon="file-image" /> </a>
</div>
<div class="col-5">
<a type="button" class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher'
@click="launchGallery">{{ $t("photo.label.selectphoto") }}</a>
</div> </div>
<div class="container"> <div class="container">
<div class="row" v-for="observationIllustrationPair in observationIllustrationPairs"> <div class="row" v-for="observationIllustrationPair in observationIllustrationPairs">
......
...@@ -34,9 +34,10 @@ a.nav-link{ ...@@ -34,9 +34,10 @@ a.nav-link{
} }
.form-icon { .form-icon {
font-size: x-large; font-size: large;
width: 50px;
vertical-align:middle; vertical-align:middle;
margin-right: 5px;
margin-bottom: 4px;
} }
a.vips-btn { a.vips-btn {
...@@ -58,7 +59,7 @@ a.vips-btn.danger { ...@@ -58,7 +59,7 @@ a.vips-btn.danger {
} }
a.vips-btn.large { a.vips-btn.large {
width: 150px; width: 170px;
} }
a.vips-btn.medium { a.vips-btn.medium {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment