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

New updates to geo coordinate input. #692.

This commit is contained in:
mateuswetah 2022-12-20 12:13:48 -03:00
parent 1b6a02b8b3
commit 6739c755eb
3 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,16 +22,18 @@
<b-input <b-input
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
expanded expanded
type="number" :placeholder="-14.408656999999"
type="text"
:step="0.000000000001" :step="0.000000000001"
@input="onUpdateFromLatitudeInput" @input.native="onUpdateFromLatitudeInput"
:value="latitude" /> :value="latitude" />
<b-input <b-input
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
expanded expanded
type="number" :placeholder="-51.316689999999"
type="text"
:step="0.000000000001" :step="0.000000000001"
@input="onUpdateFromLongitudeInput" @input.native="onUpdateFromLongitudeInput"
:value="longitude" /> :value="longitude" />
<b-button <b-button
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
@ -62,11 +64,14 @@
@dragend="($event) => onDragMarker($event, index)" @dragend="($event) => onDragMarker($event, index)"
@click="($event) => onMarkerEditingClick($event)" /> @click="($event) => onMarkerEditingClick($event)" />
<l-marker <l-marker
v-if="editingMarkerIndex < 0 && shouldAddMore" v-if="editingLatLng && editingMarkerIndex < 0 && shouldAddMore"
:draggable="true" :draggable="true"
:lat-lng="editingLatLng" :lat-lng="editingLatLng"
@dragend="($event) => onDragEditingMarker($event)" @dragend="($event) => onDragEditingMarker($event)"
@click="addLocation(latitude + ',' + longitude)"> @click="addLocation(latitude + ',' + longitude)">
<l-tooltip :options="{ offset: [16, 0] }">
{{ $i18n.get('instruction_click_to_add_a_point') }}
</l-tooltip>
<l-icon class-name="tainacan-location-marker-add"> <l-icon class-name="tainacan-location-marker-add">
<span class="icon"> <span class="icon">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
@ -78,7 +83,7 @@
</template> </template>
<script> <script>
import { LMap, LIcon, LTileLayer, LMarker, LControl } from 'vue2-leaflet'; import { LMap, LIcon, LTooltip, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import { Icon, latLng } from 'leaflet'; import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png';
@ -97,6 +102,7 @@
components: { components: {
LMap, LMap,
LIcon, LIcon,
LTooltip,
LTileLayer, LTileLayer,
LMarker, LMarker,
LControl LControl
@ -124,7 +130,10 @@
}, },
selectedLatLng() { selectedLatLng() {
if ( this.selected && Array.isArray(this.selected) ) { if ( this.selected && Array.isArray(this.selected) ) {
return this.selected.map((aSelected) => { return this.selected.filter((aSelected) => {
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
return ( !isNaN(Number(coordinates[0])) && !isNaN(Number(coordinates[1])) );
}).map((aSelected) => {
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668]; const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
return latLng(Number(coordinates[0]), Number(coordinates[1])); return latLng(Number(coordinates[0]), Number(coordinates[1]));
}); });
@ -132,7 +141,10 @@
return []; return [];
}, },
editingLatLng() { editingLatLng() {
return latLng(Number(this.latitude), Number(this.longitude)); if ( !isNaN(this.latitude) && !isNaN(this.longitude) )
return latLng(Number(this.latitude), Number(this.longitude));
else
return null;
}, },
maxMultipleValues() { maxMultipleValues() {
return ( return (
@ -155,7 +167,7 @@
this.$nextTick(() => { this.$nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true }); this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true });
}); });
} }
}, },
@ -182,20 +194,51 @@
eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef)); eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
}, },
methods: { methods: {
onUpdateFromLatitudeInput: _.debounce( function(newLatitude) { onUpdateFromLatitudeInput: _.debounce( function($event) {
this.latitude = newLatitude; let newLatitude = $event.target.value;
if (this.editingMarkerIndex >= 0) { if ( !isNaN(newLatitude) ) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude); this.latitude = newLatitude;
this.$emit('input', this.selected); this.onUpdateFromLatitudeAndLongitude();
} } else {
}, 350), const splitValue = newLatitude.split(',');
onUpdateFromLongitudeInput: _.debounce( function(newLongitude) { if (
this.longitude = newLongitude; splitValue &&
if (this.editingMarkerIndex >= 0) { splitValue.length == 2 &&
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude); !isNaN(splitValue[0]) &&
this.$emit('input', this.selected); !isNaN(splitValue[1])
) {
this.latitude = splitValue[0];
this.longitude = splitValue[1];
this.onUpdateFromLatitudeAndLongitude();
}
} }
}, 250), }, 250),
onUpdateFromLongitudeInput: _.debounce( function($event) {
let newLongitude = $event.target.value;
if ( !isNaN(newLongitude) ) {
this.longitude = newLongitude;
this.onUpdateFromLatitudeAndLongitude();
} else {
const splitValue = newLongitude.split(',');
if (
splitValue &&
splitValue.length == 2 &&
!isNaN(splitValue[0]) &&
!isNaN(splitValue[1])
) {
this.latitude = splitValue[0];
this.longitude = splitValue[1];
this.onUpdateFromLatitudeAndLongitude();
}
}
}, 250),
onUpdateFromLatitudeAndLongitude() {
if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected);
}
},
onDragMarker($event, index) { onDragMarker($event, index) {
if ( $event.target && $event.target['_latlng'] ) { if ( $event.target && $event.target['_latlng'] ) {
if (this.editingMarkerIndex == index) { if (this.editingMarkerIndex == index) {
@ -249,7 +292,7 @@
}, },
onMarkerRemove(index) { onMarkerRemove(index) {
this.editingMarkerIndex = -1; this.editingMarkerIndex = -1;
console.log(this.selectedLatLng[index])
this.latitude = this.selectedLatLng[index].lat; this.latitude = this.selectedLatLng[index].lat;
this.longitude = this.selectedLatLng[index].lng; this.longitude = this.selectedLatLng[index].lng;

5
src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php
View File

@ -36,6 +36,9 @@ class GeoCoordinate extends Metadata_Type {
* @return bool `true` if the coordinate is valid, `false` if not * @return bool `true` if the coordinate is valid, `false` if not
*/ */
private function validateLatLong($lat, $long) { private function validateLatLong($lat, $long) {
if ( !is_numeric($lat) || !is_numeric($long) )
return false;
$validataLat = ($lat + 0) >= -90.0 && ($lat + 0) <= 90.0; $validataLat = ($lat + 0) >= -90.0 && ($lat + 0) <= 90.0;
$validataLong = ($long + 0) >= -180.0 && ($long + 0) <= 180.0; $validataLong = ($long + 0) >= -180.0 && ($long + 0) <= 180.0;
return $validataLat & $validataLong; return $validataLat & $validataLong;
@ -46,7 +49,7 @@ class GeoCoordinate extends Metadata_Type {
$value = is_array($value) ? $value : [$value]; $value = is_array($value) ? $value : [$value];
foreach ($value as $coordinate) { foreach ($value as $coordinate) {
$arr_coordinate = explode(",", $coordinate); $arr_coordinate = explode(",", $coordinate);
if( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) { if ( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) {
$this->add_error( sprintf(__('The value (%s) is not a valid geo coordinate', 'tainacan'), $coordinate ) ); $this->add_error( sprintf(__('The value (%s) is not a valid geo coordinate', 'tainacan'), $coordinate ) );
return false; return false;
} }

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

@ -740,6 +740,7 @@ return apply_filters( 'tainacan-i18n', [
/* translators: At the end of this sentence there will be a search query typed by the user wrapped in quotes. */ /* translators: At the end of this sentence there will be a search query typed by the user wrapped in quotes. */
'instruction_press_enter_to_search_for' => __( 'Press <kbd>ENTER</kbd> to search for', 'tainacan' ), '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_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' ),
// Info. Other feedback to user. // Info. Other feedback to user.
'info_items_tab_all' => __( 'Every item, except by those sent to trash.', 'tainacan' ), 'info_items_tab_all' => __( 'Every item, except by those sent to trash.', 'tainacan' ),