From e89b5c89fff1de8483cdf2b96fc4c1ee36a99139 Mon Sep 17 00:00:00 2001
From: lewa <lene.wasskog@nibio.no>
Date: Thu, 25 Apr 2024 08:43:19 +0200
Subject: [PATCH] feat: Move icons into buttons. Find correct time series name.
Add floating label to date field
---
src/components/Observation.vue | 72 ++++++++++---------
.../ObservationIllustrationBoard.vue | 24 +++----
static/css/vipsobsapp.css | 7 +-
3 files changed, 56 insertions(+), 47 deletions(-)
diff --git a/src/components/Observation.vue b/src/components/Observation.vue
index 182e98b..e069322 100644
--- a/src/components/Observation.vue
+++ b/src/components/Observation.vue
@@ -31,8 +31,8 @@
<router-link v-else class="vips-btn" to="/">{{ $t("back.label") }}</router-link>
</div>
- <div v-if="this.observation.observationTimeSeries" class="mt-3 mb-3">
- <b>{{ $t("observation.for.observationTimeSeries.name") }} <i>{{ this.observation.observationTimeSeries.name }}</i></b>
+ <div v-if="this.observation.observationTimeSeries || this.observation.observationTimeSeriesId" class="mt-3 mb-3">
+ <b>{{ $t("observation.for.observationTimeSeries.name") }} <i>{{timeSeriesName()}}</i></b>
</div>
<div v-if="observation.deleted">
@@ -58,18 +58,20 @@
<label for="pestId">{{ this.$i18n.t("observation.selectpest") }}</label>
</div>
- <div class="form-group mb-3 row">
- <div class="col-1 d-flex align-items-center">
- <font-awesome-icon class="form-icon" icon="map-location"/>
- </div>
- <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-4 d-flex align-items-center float-end" v-html="currentLocationName()"></div>
+ <div v-if="this.observation.observationTimeSeries" class="form-group row">
+ <div class="col-12 d-flex align-items-center">
+ Plassering: <span v-html="currentLocationName()"></span>
+ </div>
+ </div>
+ <div v-else class="form-group mb-3 row">
+ <div class="col-8 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}}">
+ <font-awesome-icon class="form-icon" icon="map-location"/>{{ mapGeoinfo ? $t("observation.map.label.edit") : $t("observation.map.label.new") }}
+ </router-link>
</div>
+ <div class="col-4 d-flex align-items-center" v-html="currentLocationName()"></div>
+ </div>
<div v-if="mapGeoinfo" id="divMapGeoInfo">
<map-observation :disabled="isPartOfTimeSeries" :geoinfo="mapGeoinfo" :isMapPanelVisible="isMapPanelVisible"
@@ -77,18 +79,11 @@
:polygonService="observation.polygonService"
v-on:visibilityObservationAction="visibilityObservationAction"/>
</div>
-
- <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">
+ <div class="form-floating mb-3">
<input id="strDateObservation" class="form-control" ref="strDateObservation" type="date"
:max="maxObservationDate" :min="minObservationDate" v-model="strDateObservation"
- v-on:change="capturedTime($event)"/>
- </div>
+ v-on:change="capturedTime($event)" placeholder="Dato for observasjon" v-on:focus="(this.type='date')" v-on:blur="(this.type='text')"/>
+ <label for="strDateObservation">Dato for observasjon</label>
</div>
<div class="form-check form-switch mb-3 row">
@@ -100,18 +95,18 @@
</div>
<div class="form-group mb-3 row">
- <div class="col-1 d-flex align-items-center">
- <font-awesome-icon class="form-icon" icon="scale-balanced"/>
-
- </div>
- <div class="col-11">
+ <div class="col">
<a v-if="showQuantificationForm"
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 v-else
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>
</div>
</div>
@@ -248,6 +243,15 @@ export default {
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) {
this.observation.observationIllustrationSet = newList;
},
@@ -362,7 +366,9 @@ export default {
}
},
toggleShowQuantification() {
- if (this.showQuantificationForm) {
+ if(!this.formData.pestId > 0) {
+ this.setShowQuantification(false);
+ } else if (this.showQuantificationForm) {
this.setShowQuantification(false);
} else {
this.setShowQuantification(true);
@@ -827,6 +833,7 @@ export default {
// Special treatment if observation belongs to an observation time series
if (this.paramObservationTimeSeries) {
+ console.info("this.paramObservationTimeSeries", this.paramObservationTimeSeries)
this.observation.observationTimeSeries = this.paramObservationTimeSeries;
this.observation.observationTimeSeriesId = this.paramObservationTimeSeries.observationTimeSeriesId;
@@ -859,7 +866,8 @@ export default {
this.observationForStore.polygonService = this.observation.polygonService;
}
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 !== ''
},
diff --git a/src/components/ObservationIllustrationBoard.vue b/src/components/ObservationIllustrationBoard.vue
index 7c9ac45..a34d052 100644
--- a/src/components/ObservationIllustrationBoard.vue
+++ b/src/components/ObservationIllustrationBoard.vue
@@ -23,19 +23,19 @@
<template>
<div class="form-group mb-3 row">
- <div class="col-1 d-flex align-items-center">
- <font-awesome-icon class="form-icon" icon="camera" />
+ <div class="col-6 d-flex align-items-center">
+ <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 class="col-5">
- <a class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher'
- @click="launchCamera">{{ $t("photo.label.takephoto") }}</a>
- </div>
- <div class="col-1 d-flex align-items-center">
- <font-awesome-icon class="form-icon" icon="file-image" />
- </div>
- <div class="col-5">
- <a type="button" class="vips-btn medium" id="cameraLauncher" ref='cameraLauncher'
- @click="launchGallery">{{ $t("photo.label.selectphoto") }}</a>
+ <div class="col-6 d-flex align-items-center">
+ <a type="button" class="vips-btn large" id="cameraLauncher" ref='cameraLauncher'
+ @click="launchGallery">
+ <font-awesome-icon class="form-icon" icon="file-image" />
+ {{ $t("photo.label.selectphoto") }}
+ </a>
</div>
<div class="container">
<div class="row" v-for="observationIllustrationPair in observationIllustrationPairs">
diff --git a/static/css/vipsobsapp.css b/static/css/vipsobsapp.css
index b4ec764..6107118 100644
--- a/static/css/vipsobsapp.css
+++ b/static/css/vipsobsapp.css
@@ -34,9 +34,10 @@ a.nav-link{
}
.form-icon {
- font-size: x-large;
- width: 50px;
+ font-size: large;
vertical-align:middle;
+ margin-right: 5px;
+ margin-bottom: 4px;
}
a.vips-btn {
@@ -58,7 +59,7 @@ a.vips-btn.danger {
}
a.vips-btn.large {
- width: 150px;
+ width: 170px;
}
a.vips-btn.medium {
--
GitLab