tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds geocoordinate metadatum select to map vie mode #693.

This commit is contained in:
mateuswetah 2022-12-23 16:02:54 -03:00
parent f1884239a3
commit 1c9069736d
4 changed files with 63 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/admin/components/lists/items-list.vue
View File

@ -1354,8 +1354,7 @@
:center="[-14.4086569, -51.31668]"
:zoom-animation="true"
:options="{
name: 'tainacan-admin-view-mode-map',
trackResize: false // We handle this manually in the component
name: 'tainacan-admin-view-mode-map'
}">
<l-tile-layer
:url="url"
@ -1363,8 +1362,24 @@
<l-marker
v-for="(itemLocation, index) of itemsLocations"
:key="index"
:draggable="true"
:lat-lng="itemLocation.location" />
<l-control position="topright">
<div class="geocoordinate-input-panel">
<b-select
:placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
id="tainacan-select-geocoordinate-metatum"
v-model="selectedGeocoordinateMetadatum">
<option
v-for="geocoordinateMetadatum of geocoordinateMetadata"
:key="geocoordinateMetadatum.id"
role="button"
:class="{ 'is-active': selectedGeocoordinateMetadatum == geocoordinateMetadatum.slug }"
:value="geocoordinateMetadatum.slug">
{{ geocoordinateMetadatum.name }}
</option>
</b-select>
</div>
</l-control>
</l-map>
<ul
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
@ -1605,7 +1620,7 @@ export default {
// LTooltip,
LTileLayer,
LMarker,
// LControl
LControl
},
mixins: [ dateInter ],
props: {
@ -1628,7 +1643,7 @@ export default {
singleItemSelection: false,
masonry: false,
shouldUseLegacyMasonyCols: false,
selectedGeocoordinateMetadatum: 'geocoordinate',
selectedGeocoordinateMetadatum: false,
latitude: -14.4086569,
longitude: -51.31668,
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@ -1681,33 +1696,38 @@ export default {
},
itemsLocations() {
let locations = [];
if ( this.viewMode == 'map' && this.selectedGeocoordinateMetadatum && this.items ) {
for (let item of this.items) {
if (
item.metadata[this.selectedGeocoordinateMetadatum] &&
item.metadata[this.selectedGeocoordinateMetadatum].value.length
Array.isArray(item.metadata[this.selectedGeocoordinateMetadatum].value)
) {
for (let value of item.metadata[this.selectedGeocoordinateMetadatum].value) {
if (value.split(',').length == 2) {
locations.push({
item: item,
location: value.split(',')
location: latLng(value.split(','))
});
}
}
} else if (
item.metadata[this.selectedGeocoordinateMetadatum] &&
typeof item.metadata[this.selectedGeocoordinateMetadatum].split == 'function' &&
item.metadata[this.selectedGeocoordinateMetadatum].split(',') == 2
typeof item.metadata[this.selectedGeocoordinateMetadatum].value.split == 'function' &&
item.metadata[this.selectedGeocoordinateMetadatum].value.split(',').length == 2
) {
locations.push({
item: item,
location: item.metadata[this.selectedGeocoordinateMetadatum].split(',')
location: latLng(item.metadata[this.selectedGeocoordinateMetadatum].value.split(','))
});
}
}
}
return locations;
},
geocoordinateMetadata() {
return this.displayedMetadata && this.displayedMetadata.length ? this.displayedMetadata.filter((aMetadatum) => aMetadatum['display'] && aMetadatum['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate') : [];
}
},
watch: {
@ -1749,6 +1769,16 @@ export default {
}
},
immediate: true
},
itemsLocations() {
setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true });
else
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true });
}
}, 500)
}
},
mounted() {

8
src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
View File

@ -166,8 +166,12 @@
selectedLatLng() {
this.$nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true });
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) {
if (this.selectedLatLng.length == 1)
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true });
else
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true });
}
});
}
},

21
src/views/admin/scss/_view-mode-map.scss
View File

@ -1,20 +1,31 @@
.tainacan-leaflet-map-container {
position: relative;
#tainacan-admin-view-mode-map {
float: right;
.geocoordinate-input-panel {
/deep/ select {
background-color: var(--tainacan-input-background-color);
}
}
}
.tainacan-records-container--map {
right: 0;
left: 0;
top: 0;
position: relative;
float: left;
width: 25%;
height: 100%;
position: absolute;
height: 60vh;
overflow-y: auto;
overflow-x: hidden;
&>li {
width: 100%;
max-width: 100%;
.tainacan-record {
margin-bottom: 0.125rem;
background-color: var(--tainacan-item-background-color);
.tainacan-record-item-thumbnail,
img {

1
src/views/tainacan-i18n.php
View File

@ -742,6 +742,7 @@ return apply_filters( 'tainacan-i18n', [
'instruction_press_enter_to_search_for' => __( 'Press <kbd>ENTER</kbd> to search for', 'tainacan' ),
'instruction_type_geocoordinate' => __( 'Type a geo coordinate in the form of lat,lng', 'tainacan' ),
'instruction_click_to_add_a_point' => __( 'Drag to reposition or click to insert a marker', 'tainacan' ),
'instruction_select_geocoordinate_metadatum' => __( 'Select a geocoordinate metadatum', 'tainacan' ),
// Info. Other feedback to user.
'info_items_tab_all' => __( 'Every item, except by those sent to trash.', 'tainacan' ),