Client - add start and finish markers on workout map - fix #135
+ add max zoom
This commit is contained in:
Sam
parent
52c28f3309
commit
b22c965099
35
fittrackee/dist/img/workouts/finish.svg
vendored
Normal file
35
fittrackee/dist/img/workouts/finish.svg
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="70.24498mm"
|
||||
height="70.24498mm"
|
||||
viewBox="0 0 70.24498 70.24498"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-63.580643,-108.89152)">
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path135"
|
||||
cx="98.703133"
|
||||
cy="144.01401"
|
||||
r="35.12249" />
|
||||
<circle
|
||||
style="fill:#f44336;stroke-width:0.264583"
|
||||
id="path203"
|
||||
cx="98.907257"
|
||||
cy="144.02548"
|
||||
r="32.558632" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="rect602"
|
||||
width="28.563854"
|
||||
height="28.563854"
|
||||
x="84.548706"
|
||||
y="130.45284" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 872 B |
36
fittrackee/dist/img/workouts/start.svg
vendored
Normal file
36
fittrackee/dist/img/workouts/start.svg
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="70.24498mm"
|
||||
height="70.24498mm"
|
||||
viewBox="0 0 70.24498 70.24498"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-63.580643,-108.89152)">
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path135"
|
||||
cx="98.703133"
|
||||
cy="144.01401"
|
||||
r="35.12249" />
|
||||
<circle
|
||||
style="fill:#5f9747;stroke-width:0.264583"
|
||||
id="path203"
|
||||
cx="98.907257"
|
||||
cy="144.02548"
|
||||
r="32.558632" />
|
||||
<path
|
||||
style="fill:#000000"
|
||||
id="path249"
|
||||
d="m 445.04215,547.94558 -120.18382,69.22003 0.14561,-138.69226 z"
|
||||
transform="scale(0.26458333)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 896 B |
2
fittrackee/dist/index.html
vendored
2
fittrackee/dist/index.html
vendored
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.e77f8b26.css" rel="prefetch"><link href="/static/css/profile.8b668068.css" rel="prefetch"><link href="/static/css/reset.fc19709e.css" rel="prefetch"><link href="/static/css/statistics.2afdc8a9.css" rel="prefetch"><link href="/static/css/workouts.45a25b09.css" rel="prefetch"><link href="/static/js/admin.5f46d0fe.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/profile.d25975e2.js" rel="prefetch"><link href="/static/js/reset.ca898ebe.js" rel="prefetch"><link href="/static/js/statistics.d03ca304.js" rel="prefetch"><link href="/static/js/workouts.1b3d1aa1.js" rel="prefetch"><link href="/static/css/app.b54fa5fe.css" rel="preload" as="style"><link href="/static/js/app.92a86e8b.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.d887e943.js" rel="preload" as="script"><link href="/static/css/app.b54fa5fe.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.d887e943.js"></script><script src="/static/js/app.92a86e8b.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.e77f8b26.css" rel="prefetch"><link href="/static/css/profile.8b668068.css" rel="prefetch"><link href="/static/css/reset.fc19709e.css" rel="prefetch"><link href="/static/css/statistics.2afdc8a9.css" rel="prefetch"><link href="/static/css/workouts.174e6470.css" rel="prefetch"><link href="/static/js/admin.5f46d0fe.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/profile.d25975e2.js" rel="prefetch"><link href="/static/js/reset.ca898ebe.js" rel="prefetch"><link href="/static/js/statistics.d03ca304.js" rel="prefetch"><link href="/static/js/workouts.562af40b.js" rel="prefetch"><link href="/static/css/app.b54fa5fe.css" rel="preload" as="style"><link href="/static/js/app.eec8f9f6.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.d887e943.js" rel="preload" as="script"><link href="/static/css/app.b54fa5fe.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.d887e943.js"></script><script src="/static/js/app.eec8f9f6.js"></script></body></html>
|
||||
@ -55,6 +55,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"revision": "d75fbe559220d7b2b9577a98a91f38d0",
|
||||
"url": "/img/weather/wind.svg"
|
||||
},
|
||||
{
|
||||
"revision": "375196b7ade7c07c3b64ac4cb8b850a8",
|
||||
"url": "/img/workouts/finish.svg"
|
||||
},
|
||||
{
|
||||
"revision": "a41d3168615e9c642fe96c36bcca146d",
|
||||
"url": "/img/workouts/map.svg"
|
||||
@ -64,7 +68,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"url": "/img/workouts/mountains.svg"
|
||||
},
|
||||
{
|
||||
"revision": "b148e2458cece523e545d46ecd59f98a",
|
||||
"revision": "97f6a197b6c2869e0cb2ff0e7697af86",
|
||||
"url": "/img/workouts/start.svg"
|
||||
},
|
||||
{
|
||||
"revision": "924f568f416aab39ae0a5c8aff2099e2",
|
||||
"url": "/index.html"
|
||||
},
|
||||
{
|
||||
@ -80,7 +88,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"url": "/static/css/admin.e77f8b26.css"
|
||||
},
|
||||
{
|
||||
"revision": "393bf45f8daf682466f9",
|
||||
"revision": "a45a19cb57e12684f42f",
|
||||
"url": "/static/css/app.b54fa5fe.css"
|
||||
},
|
||||
{
|
||||
@ -104,8 +112,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"url": "/static/css/statistics.2afdc8a9.css"
|
||||
},
|
||||
{
|
||||
"revision": "44dda44e57ecb35de6a3",
|
||||
"url": "/static/css/workouts.45a25b09.css"
|
||||
"revision": "c117380682fdc8558935",
|
||||
"url": "/static/css/workouts.174e6470.css"
|
||||
},
|
||||
{
|
||||
"revision": "e719f9244c69e28e7d00e725ca1e280e",
|
||||
@ -192,8 +200,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"url": "/static/js/admin.5f46d0fe.js"
|
||||
},
|
||||
{
|
||||
"revision": "393bf45f8daf682466f9",
|
||||
"url": "/static/js/app.92a86e8b.js"
|
||||
"revision": "a45a19cb57e12684f42f",
|
||||
"url": "/static/js/app.eec8f9f6.js"
|
||||
},
|
||||
{
|
||||
"revision": "bd7d183c9f68e5f4027d",
|
||||
@ -232,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
"url": "/static/js/statistics.d03ca304.js"
|
||||
},
|
||||
{
|
||||
"revision": "44dda44e57ecb35de6a3",
|
||||
"url": "/static/js/workouts.1b3d1aa1.js"
|
||||
"revision": "c117380682fdc8558935",
|
||||
"url": "/static/js/workouts.562af40b.js"
|
||||
}
|
||||
]);
|
||||
2
fittrackee/dist/service-worker.js
vendored
2
fittrackee/dist/service-worker.js
vendored
@ -14,7 +14,7 @@
|
||||
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
|
||||
|
||||
importScripts(
|
||||
"/precache-manifest.87b903681e5fd0008a691c13c2c38171.js"
|
||||
"/precache-manifest.bd701d249f39f6375883a9a6da0196ff.js"
|
||||
);
|
||||
|
||||
workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
fittrackee/dist/static/js/workouts.562af40b.js
vendored
Normal file
2
fittrackee/dist/static/js/workouts.562af40b.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
fittrackee/dist/static/js/workouts.562af40b.js.map
vendored
Normal file
1
fittrackee/dist/static/js/workouts.562af40b.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
35
fittrackee_client/public/img/workouts/finish.svg
Normal file
35
fittrackee_client/public/img/workouts/finish.svg
Normal file
@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="70.24498mm"
|
||||
height="70.24498mm"
|
||||
viewBox="0 0 70.24498 70.24498"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-63.580643,-108.89152)">
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path135"
|
||||
cx="98.703133"
|
||||
cy="144.01401"
|
||||
r="35.12249" />
|
||||
<circle
|
||||
style="fill:#f44336;stroke-width:0.264583"
|
||||
id="path203"
|
||||
cx="98.907257"
|
||||
cy="144.02548"
|
||||
r="32.558632" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="rect602"
|
||||
width="28.563854"
|
||||
height="28.563854"
|
||||
x="84.548706"
|
||||
y="130.45284" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 872 B |
36
fittrackee_client/public/img/workouts/start.svg
Normal file
36
fittrackee_client/public/img/workouts/start.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="70.24498mm"
|
||||
height="70.24498mm"
|
||||
viewBox="0 0 70.24498 70.24498"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-63.580643,-108.89152)">
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path135"
|
||||
cx="98.703133"
|
||||
cy="144.01401"
|
||||
r="35.12249" />
|
||||
<circle
|
||||
style="fill:#5f9747;stroke-width:0.264583"
|
||||
id="path203"
|
||||
cx="98.907257"
|
||||
cy="144.02548"
|
||||
r="32.558632" />
|
||||
<path
|
||||
style="fill:#000000"
|
||||
id="path249"
|
||||
d="m 445.04215,547.94558 -120.18382,69.22003 0.14561,-138.69226 z"
|
||||
transform="scale(0.26458333)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 896 B |
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<LMarker
|
||||
v-if="markerCoordinates.latitude"
|
||||
:lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
|
||||
>
|
||||
<LIcon
|
||||
:icon-url="`/img/workouts/${isStart ? 'start' : 'finish'}.svg`"
|
||||
:iconSize="[15, 15]"
|
||||
/>
|
||||
</LMarker>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LIcon, LMarker } from '@vue-leaflet/vue-leaflet'
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
import { TCoordinates } from '@/types/workouts'
|
||||
|
||||
interface Props {
|
||||
markerCoordinates: TCoordinates
|
||||
isStart: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { isStart, markerCoordinates } = toRefs(props)
|
||||
</script>
|
||||
@ -6,6 +6,7 @@
|
||||
<LMap
|
||||
v-if="geoJson.jsonData && center && bounds.length === 2"
|
||||
:zoom="13"
|
||||
:maxZoom="19"
|
||||
:center="center"
|
||||
:bounds="bounds"
|
||||
ref="workoutMap"
|
||||
@ -21,6 +22,16 @@
|
||||
v-if="markerCoordinates.latitude"
|
||||
:lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
|
||||
/>
|
||||
<CustomMarker
|
||||
v-if="startMarkerCoordinates.latitude"
|
||||
:markerCoordinates="startMarkerCoordinates"
|
||||
:isStart="true"
|
||||
/>
|
||||
<CustomMarker
|
||||
v-if="endMarkerCoordinates.latitude"
|
||||
:markerCoordinates="endMarkerCoordinates"
|
||||
:isStart="false"
|
||||
/>
|
||||
</LMap>
|
||||
</div>
|
||||
<div v-else class="no-map">{{ $t('workouts.NO_MAP') }}</div>
|
||||
@ -33,6 +44,7 @@
|
||||
import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
|
||||
import { ComputedRef, computed, ref, toRefs, withDefaults } from 'vue'
|
||||
|
||||
import CustomMarker from '@/components/Workout/WorkoutDetail/WorkoutMap/CustomMarker.vue'
|
||||
import { ROOT_STORE } from '@/store/constants'
|
||||
import { TAppConfig } from '@/types/application'
|
||||
import { GeoJSONData } from '@/types/geojson'
|
||||
@ -77,6 +89,26 @@
|
||||
? getGeoJson(props.workoutData.gpx)
|
||||
: {}
|
||||
)
|
||||
const startMarkerCoordinates = computed(() =>
|
||||
props.workoutData && props.workoutData.chartData.length > 0
|
||||
? {
|
||||
latitude: props.workoutData.chartData[0].latitude,
|
||||
longitude: props.workoutData.chartData[0].longitude,
|
||||
}
|
||||
: {}
|
||||
)
|
||||
const endMarkerCoordinates = computed(() =>
|
||||
props.workoutData && props.workoutData.chartData.length > 0
|
||||
? {
|
||||
latitude:
|
||||
props.workoutData.chartData[props.workoutData.chartData.length - 1]
|
||||
.latitude,
|
||||
longitude:
|
||||
props.workoutData.chartData[props.workoutData.chartData.length - 1]
|
||||
.longitude,
|
||||
}
|
||||
: {}
|
||||
)
|
||||
|
||||
function getGeoJson(gpxContent: string): GeoJSONData {
|
||||
if (!gpxContent || gpxContent !== '') {
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
import WorkoutCardTitle from '@/components/Workout/WorkoutDetail/WorkoutCardTitle.vue'
|
||||
import WorkoutData from '@/components/Workout/WorkoutDetail/WorkoutData.vue'
|
||||
import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
|
||||
import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap/index.vue'
|
||||
import { WORKOUTS_STORE } from '@/store/constants'
|
||||
import { ISport } from '@/types/sports'
|
||||
import { IUserProfile } from '@/types/user'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user