kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
Add button to download photo coordinates as waypoints in .gpx
rodzic
6f23b99afc
commit
c141557dd1
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-for="group in groups" :key="group.key">
|
<div v-for="group in groups" :key="group.key">
|
||||||
<SummitPhotosGroup ref="photosGroup" :photos="group.photos" :title="group.title" :titleLink="group.titleLink" @editPhoto="onEditPhoto" @deletePhoto="onDeletePhoto" @reorderPhotos="onReorderPhotos" />
|
<SummitPhotosGroup ref="photosGroup" :photos="group.photos" :title="group.title" :titleLink="group.titleLink" :summit="summit" @editPhoto="onEditPhoto" @deletePhoto="onDeletePhoto" @reorderPhotos="onReorderPhotos" />
|
||||||
</div>
|
</div>
|
||||||
<b-modal :active.sync="isEditorActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
|
<b-modal :active.sync="isEditorActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
|
||||||
<EditPhoto v-if="editingPhoto" :photo="editingPhoto" :summitCode="summit.code" @photoEdited="$emit('photoEdited')" />
|
<EditPhoto v-if="editingPhoto" :photo="editingPhoto" :summitCode="summit.code" @photoEdited="$emit('photoEdited')" />
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
<span v-else>{{ title }}</span>
|
<span v-else>{{ title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<PictureSwipe ref="pictureSwipe" class="photos" :items="swipeItems" :options="swipeOptions" @mouseoverPicture="mouseoverPicture" @mouseleavePicture="mouseleavePicture" @editPicture="onEditPicture" @deletePicture="onDeletePicture" @movePicture="onMovePicture" />
|
<PictureSwipe ref="pictureSwipe" class="photos" :items="swipeItems" :options="swipeOptions" @mouseoverPicture="mouseoverPicture" @mouseleavePicture="mouseleavePicture" @editPicture="onEditPicture" @deletePicture="onDeletePicture" @movePicture="onMovePicture" />
|
||||||
|
<b-button v-if="waypointPhotos.length > 0 && !$mq.mobile" class="waypoints-button" icon-left="file-download" size="is-small" @click="downloadWaypoints">Photo waypoints (.gpx)</b-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -13,13 +14,15 @@ import PictureSwipe from './PictureSwipe.vue'
|
||||||
import utils from '../mixins/utils.js'
|
import utils from '../mixins/utils.js'
|
||||||
import photos from '../mixins/photos.js'
|
import photos from '../mixins/photos.js'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
import togpx from 'togpx'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SummitPhotosGroup',
|
name: 'SummitPhotosGroup',
|
||||||
props: {
|
props: {
|
||||||
photos: Array,
|
photos: Array,
|
||||||
title: String,
|
title: String,
|
||||||
titleLink: String
|
titleLink: String,
|
||||||
|
summit: Object
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
PictureSwipe
|
PictureSwipe
|
||||||
|
@ -60,6 +63,11 @@ export default {
|
||||||
history: false,
|
history: false,
|
||||||
closeOnScroll: false
|
closeOnScroll: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
waypointPhotos () {
|
||||||
|
return this.photos.filter(photo => {
|
||||||
|
return (photo.coordinates && (!photo.positioningError || photo.positioningError <= 100))
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -120,6 +128,37 @@ export default {
|
||||||
let filenames = this.photos.map(photo => photo.filename)
|
let filenames = this.photos.map(photo => photo.filename)
|
||||||
filenames.splice(newIndex, 0, filenames.splice(oldIndex, 1)[0])
|
filenames.splice(newIndex, 0, filenames.splice(oldIndex, 1)[0])
|
||||||
this.$emit('reorderPhotos', filenames)
|
this.$emit('reorderPhotos', filenames)
|
||||||
|
},
|
||||||
|
downloadWaypoints () {
|
||||||
|
let features = this.waypointPhotos.map(photo => {
|
||||||
|
let feature = {
|
||||||
|
'type': 'Feature',
|
||||||
|
'geometry': {
|
||||||
|
'type': 'Point',
|
||||||
|
'coordinates': [photo.coordinates.longitude, photo.coordinates.latitude]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (photo.title) {
|
||||||
|
feature.properties = {
|
||||||
|
'name': photo.title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return feature
|
||||||
|
})
|
||||||
|
|
||||||
|
let gpx = togpx({
|
||||||
|
'type': 'FeatureCollection',
|
||||||
|
'features': features
|
||||||
|
})
|
||||||
|
let blob = new Blob([gpx], { type: 'application/gpx+xml' })
|
||||||
|
let url = window.URL.createObjectURL(blob)
|
||||||
|
let link = document.createElement('a')
|
||||||
|
link.download = 'photos-' + this.summit.code.replace('/', '_') + '-' + this.title + '.gpx'
|
||||||
|
link.href = url
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
window.URL.revokeObjectURL(url)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -167,4 +206,7 @@ export default {
|
||||||
.photo-group-title a:hover {
|
.photo-group-title a:hover {
|
||||||
color: #3273dc;
|
color: #3273dc;
|
||||||
}
|
}
|
||||||
|
.waypoints-button {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Ładowanie…
Reference in New Issue