sotlas-frontend/src/components/TrackLink.vue

87 wiersze
2.2 KiB
Vue

<template>
<a class="track-link" :href="href" :download="filename"><slot></slot></a>
</template>
<script>
import tracks from '../mixins/tracks.js'
export default {
name: 'TrackLink',
mixins: [tracks],
props: {
route: Object,
summit: Object
},
watch: {
route: {
immediate: true,
handler () {
if (this.route.track.points) {
let trkpts = this.route.track.points.map(point => {
if (point.altitude !== undefined) {
return `<trkpt lat="${point.latitude}" lon="${point.longitude}"><ele>${Math.round(point.altitude)}</ele></trkpt>`
} else {
return `<trkpt lat="${point.latitude}" lon="${point.longitude}"></trkpt>`
}
})
let gpx = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<gpx version="1.1"
creator="SOTLAS"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.topografix.com/GPX/1/1"
xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<metadata>
<name>Track for SOTA Summit ${this.summit.code} - ${this.summit.name}</name>
<desc>Imported from SMP</desc>
<author>
<name>${this.route.author}</name>
</author>
<link href="https://sotl.as/summits/${this.summit.code}">
<text>SOTLAS</text>
</link>
</metadata>
<trk>
<name>${this.route.title}</name>
<src>${this.route.author}</src>
<trkseg>
${trkpts.join('\n')}
</trkseg>
</trk>
</gpx>`
let blob = new Blob([gpx], { type: 'application/gpx+xml' })
if (this.objectUrl) {
URL.revokeObjectURL(this.objectUrl)
}
this.objectUrl = URL.createObjectURL(blob)
}
}
}
},
computed: {
filename () {
return this.summit.code.replace('/', '_') + '_' + this.route.id.substr(-8) + '.gpx'
},
href () {
if (this.route.track.filename) {
return this.trackUrl(this.route.track)
} else {
return this.objectUrl
}
}
},
destroyed () {
if (this.objectUrl) {
URL.revokeObjectURL(this.objectUrl)
this.objectUrl = null
}
},
data () {
return {
objectUrl: null
}
}
}
</script>