Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
V
VIPS Observation App DEPRECATED
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
VIPS
VIPS Observation App DEPRECATED
Commits
e89b5c89
Commit
e89b5c89
authored
1 year ago
by
Lene Wasskog
Browse files
Options
Downloads
Patches
Plain Diff
feat: Move icons into buttons. Find correct time series name.
Add floating label to date field
parent
11b3ae88
Branches
Branches containing commit
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/components/Observation.vue
+40
-32
40 additions, 32 deletions
src/components/Observation.vue
src/components/ObservationIllustrationBoard.vue
+12
-12
12 additions, 12 deletions
src/components/ObservationIllustrationBoard.vue
static/css/vipsobsapp.css
+4
-3
4 additions, 3 deletions
static/css/vipsobsapp.css
with
56 additions
and
47 deletions
src/components/Observation.vue
+
40
−
32
View file @
e89b5c89
...
@@ -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
.
observationT
imeSeries
.
n
ame
}}
</i></b>
<b>
{{
$t
(
"
observation.for.observationTimeSeries.name
"
)
}}
<i>
{{
t
imeSeries
N
ame
()
}}
</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-1
2
d-flex align-items-center"
>
<font-awesome-icon
class=
"form-icon"
icon=
"map-location"
/
>
Plassering:
<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
!==
''
},
},
...
...
This diff is collapsed.
Click to expand it.
src/components/ObservationIllustrationBoard.vue
+
12
−
12
View file @
e89b5c89
...
@@ -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"
>
...
...
This diff is collapsed.
Click to expand it.
static/css/vipsobsapp.css
+
4
−
3
View file @
e89b5c89
...
@@ -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
:
1
5
0px
;
width
:
1
7
0px
;
}
}
a
.vips-btn.medium
{
a
.vips-btn.medium
{
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment