Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - add control to reset map to initial position - fix #138

Browse Source
This commit is contained in:
Sam 2022-01-15 18:06:34 +01:00
parent 482004926a
commit 2242525b39
12 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee/dist/index.html vendored
View File

@ -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.366d01bb.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.04bf083b.js" rel="prefetch"><link href="/static/css/app.b54fa5fe.css" rel="preload" as="style"><link href="/static/js/app.25744daa.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.25744daa.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.df61eaf2.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.a478f15b.js" rel="prefetch"><link href="/static/css/app.b54fa5fe.css" rel="preload" as="style"><link href="/static/js/app.51ee7901.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.51ee7901.js"></script></body></html>

16
fittrackee/dist/precache-manifest.29b36534ab2908487719832360637bc8.js → fittrackee/dist/precache-manifest.6828a0593e300b9de34b9b69d8067b94.js vendored
View File

@ -72,7 +72,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/img/workouts/start.svg"
},
{
"revision": "a65535e36703fffd4fb7c3cf35dfcc65",
"revision": "04ac08405aad030634bae2b25dca6f01",
"url": "/index.html"
},
{
@ -88,7 +88,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/admin.e77f8b26.css"
},
{
"revision": "5258a0fd7a39724bcd8d",
"revision": "ae3dd7a64c0096f9d697",
"url": "/static/css/app.b54fa5fe.css"
},
{
@ -112,8 +112,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/statistics.2afdc8a9.css"
},
{
"revision": "563d753f0aed9f2c73cc",
"url": "/static/css/workouts.366d01bb.css"
"revision": "f29654976a994f39722c",
"url": "/static/css/workouts.df61eaf2.css"
},
{
"revision": "e719f9244c69e28e7d00e725ca1e280e",
@ -200,8 +200,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/admin.5f46d0fe.js"
},
{
"revision": "5258a0fd7a39724bcd8d",
"url": "/static/js/app.25744daa.js"
"revision": "ae3dd7a64c0096f9d697",
"url": "/static/js/app.51ee7901.js"
},
{
"revision": "bd7d183c9f68e5f4027d",
@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/statistics.d03ca304.js"
},
{
"revision": "563d753f0aed9f2c73cc",
"url": "/static/js/workouts.04bf083b.js"
"revision": "f29654976a994f39722c",
"url": "/static/js/workouts.a478f15b.js"
}
]);

2
fittrackee/dist/service-worker.js vendored
View File

@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts(
"/precache-manifest.29b36534ab2908487719832360637bc8.js"
"/precache-manifest.6828a0593e300b9de34b9b69d8067b94.js"
);
workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});

2
fittrackee/dist/static/css/workouts.366d01bb.css → fittrackee/dist/static/css/workouts.df61eaf2.css vendored
View File

File diff suppressed because one or more lines are too long

4
fittrackee/dist/static/js/app.25744daa.js → fittrackee/dist/static/js/app.51ee7901.js vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/app.25744daa.js.map → fittrackee/dist/static/js/app.51ee7901.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/workouts.04bf083b.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/workouts.04bf083b.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/workouts.a478f15b.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/workouts.a478f15b.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
View File

@ -13,6 +13,9 @@
@ready="fitBounds(bounds)"
>
<LControlLayers />
<LControl position="topleft" class="reset-button" @click="resetZoom">
<i class="fa fa-refresh" aria-hidden="true"></i>
</LControl>
<LTileLayer
:url="`${getApiUrl()}workouts/map_tile/{s}/{z}/{x}/{y}.png`"
:attribution="appConfig.map_attribution"
@ -48,12 +51,13 @@
<script setup lang="ts">
import { gpx } from '@tmcw/togeojson'
import {
LControl,
LControlLayers,
LGeoJson,
LLayerGroup,
LMap,
LMarker,
LTileLayer,
LControlLayers,
LLayerGroup,
} from '@vue-leaflet/vue-leaflet'
import { ComputedRef, computed, ref, toRefs, withDefaults } from 'vue'
import 'leaflet/dist/leaflet.css'
@ -80,20 +84,7 @@
const workoutMap = ref<null | {
leafletObject: { fitBounds: (bounds: number[][]) => null }
}>(null)
const bounds = computed(() =>
props.workoutData
? [
[
props.workoutData.workout.bounds[0],
props.workoutData.workout.bounds[1],
],
[
props.workoutData.workout.bounds[2],
props.workoutData.workout.bounds[3],
],
]
: []
)
const bounds = computed(() => getBounds())
const appConfig: ComputedRef<TAppConfig> = computed(
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
)
@ -149,6 +140,23 @@
workoutMap.value?.leafletObject.fitBounds(bounds)
}
}
function getBounds() {
return props.workoutData
? [
[
props.workoutData.workout.bounds[0],
props.workoutData.workout.bounds[1],
],
[
props.workoutData.workout.bounds[2],
props.workoutData.workout.bounds[3],
],
]
: []
}
function resetZoom() {
workoutMap.value?.leafletObject.fitBounds(getBounds())
}
</script>
<style lang="scss" scoped>
@ -163,6 +171,13 @@
.no-map {
line-height: 400px;
}
.reset-button {
background: #ffffff;
padding: 5px 10px;
border: 2px solid #bfc0ab;
border-radius: 3px;
color: #000000;
}
@media screen and (max-width: $small-limit) {
padding: 0;

1
fittrackee_client/src/vue-leaflet.d.ts vendored
View File

@ -7,4 +7,5 @@ declare module '@vue-leaflet/vue-leaflet' {
export const LGeoJson: DefineComponent
export const LControlLayers: DefineComponent
export const LLayerGroup: DefineComponent
export const LControl: DefineComponent
}