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

Client - dowload workout static map only when hover workout

Browse Source
This commit is contained in:
Sam 2021-11-03 08:52:03 +01:00
parent a8d0680457
commit d4efb061a3
26 changed files with 59 additions and 46 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.c784857e.css" rel="prefetch"><link href="/static/css/main.4b6a4ae2.css" rel="prefetch"><link href="/static/css/main~workouts.c12079e7.css" rel="prefetch"><link href="/static/css/profile.a602fc10.css" rel="prefetch"><link href="/static/css/reset.5eaa1e50.css" rel="prefetch"><link href="/static/css/workouts.a9a41b99.css" rel="prefetch"><link href="/static/js/admin.b2c267a7.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/main.96af01eb.js" rel="prefetch"><link href="/static/js/main~workouts.44a477db.js" rel="prefetch"><link href="/static/js/profile.291e07db.js" rel="prefetch"><link href="/static/js/reset.60cf3dbf.js" rel="prefetch"><link href="/static/js/workouts.4a8b05f4.js" rel="prefetch"><link href="/static/css/app.24ba011a.css" rel="preload" as="style"><link href="/static/js/app.1d2a8a56.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.61765c73.js" rel="preload" as="script"><link href="/static/css/app.24ba011a.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.61765c73.js"></script><script src="/static/js/app.1d2a8a56.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.c784857e.css" rel="prefetch"><link href="/static/css/main.967c2c29.css" rel="prefetch"><link href="/static/css/main~workouts.c12079e7.css" rel="prefetch"><link href="/static/css/profile.a602fc10.css" rel="prefetch"><link href="/static/css/reset.5eaa1e50.css" rel="prefetch"><link href="/static/css/workouts.72b1c915.css" rel="prefetch"><link href="/static/js/admin.b2c267a7.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/main.8f9faede.js" rel="prefetch"><link href="/static/js/main~workouts.896585f2.js" rel="prefetch"><link href="/static/js/profile.291e07db.js" rel="prefetch"><link href="/static/js/reset.60cf3dbf.js" rel="prefetch"><link href="/static/js/workouts.c5b00439.js" rel="prefetch"><link href="/static/css/app.5efeb1fe.css" rel="preload" as="style"><link href="/static/js/app.9069e434.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.61765c73.js" rel="preload" as="script"><link href="/static/css/app.5efeb1fe.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.61765c73.js"></script><script src="/static/js/app.9069e434.js"></script></body></html>

32
fittrackee/dist/precache-manifest.59ca4201c0d0fa2f3034655a073d8255.js → fittrackee/dist/precache-manifest.df69f746e04ed0c0a73cbef257234d2c.js vendored
View File

@ -64,7 +64,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/img/workouts/mountains.svg" "url": "/img/workouts/mountains.svg"
}, },
{ {
"revision": "ea991ffce2185e4cc072abf683bedd86", "revision": "196d8a285c086a57132534b24c1135a0",
"url": "/index.html" "url": "/index.html"
}, },
{ {
@ -80,8 +80,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/admin.c784857e.css" "url": "/static/css/admin.c784857e.css"
}, },
{ {
"revision": "7f1bfdb54f95f3215297", "revision": "7b174df05f6f7a9edd0f",
"url": "/static/css/app.24ba011a.css" "url": "/static/css/app.5efeb1fe.css"
}, },
{ {
"revision": "82c1118c918377daaa71a320ab8eea42", "revision": "82c1118c918377daaa71a320ab8eea42",
@ -92,11 +92,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/leaflet.css" "url": "/static/css/leaflet.css"
}, },
{ {
"revision": "05c628021239246381f3", "revision": "1af89ab12eabaa087e43",
"url": "/static/css/main.4b6a4ae2.css" "url": "/static/css/main.967c2c29.css"
}, },
{ {
"revision": "7cbc2a35623621321963", "revision": "6134dd1635749b25d931",
"url": "/static/css/main~workouts.c12079e7.css" "url": "/static/css/main~workouts.c12079e7.css"
}, },
{ {
@ -108,8 +108,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/reset.5eaa1e50.css" "url": "/static/css/reset.5eaa1e50.css"
}, },
{ {
"revision": "afbde641dcb3d7f75c9f", "revision": "11fdb71c08ef58de3405",
"url": "/static/css/workouts.a9a41b99.css" "url": "/static/css/workouts.72b1c915.css"
}, },
{ {
"revision": "e719f9244c69e28e7d00e725ca1e280e", "revision": "e719f9244c69e28e7d00e725ca1e280e",
@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/admin.b2c267a7.js" "url": "/static/js/admin.b2c267a7.js"
}, },
{ {
"revision": "7f1bfdb54f95f3215297", "revision": "7b174df05f6f7a9edd0f",
"url": "/static/js/app.1d2a8a56.js" "url": "/static/js/app.9069e434.js"
}, },
{ {
"revision": "bd7d183c9f68e5f4027d", "revision": "bd7d183c9f68e5f4027d",
@ -224,12 +224,12 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/chunk-vendors.61765c73.js" "url": "/static/js/chunk-vendors.61765c73.js"
}, },
{ {
"revision": "05c628021239246381f3", "revision": "1af89ab12eabaa087e43",
"url": "/static/js/main.96af01eb.js" "url": "/static/js/main.8f9faede.js"
}, },
{ {
"revision": "7cbc2a35623621321963", "revision": "6134dd1635749b25d931",
"url": "/static/js/main~workouts.44a477db.js" "url": "/static/js/main~workouts.896585f2.js"
}, },
{ {
"revision": "c3fbb4741fcfd33236fb", "revision": "c3fbb4741fcfd33236fb",
@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/reset.60cf3dbf.js" "url": "/static/js/reset.60cf3dbf.js"
}, },
{ {
"revision": "afbde641dcb3d7f75c9f", "revision": "11fdb71c08ef58de3405",
"url": "/static/js/workouts.4a8b05f4.js" "url": "/static/js/workouts.c5b00439.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("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts( importScripts(
"/precache-manifest.59ca4201c0d0fa2f3034655a073d8255.js" "/precache-manifest.df69f746e04ed0c0a73cbef257234d2c.js"
); );
workbox.core.setCacheNameDetails({prefix: "fittrackee_client"}); workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});

1
fittrackee/dist/static/css/app.24ba011a.css vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/css/app.5efeb1fe.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/css/main.4b6a4ae2.css → fittrackee/dist/static/css/main.967c2c29.css vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/css/workouts.72b1c915.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/css/workouts.a9a41b99.css vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/app.1d2a8a56.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/app.1d2a8a56.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/app.9069e434.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/app.9069e434.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/main.8f9faede.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/main.8f9faede.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/main.96af01eb.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/main.96af01eb.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/main~workouts.44a477db.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/main~workouts.44a477db.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/main~workouts.896585f2.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/main~workouts.896585f2.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/workouts.4a8b05f4.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/workouts.4a8b05f4.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

13
fittrackee_client/src/components/Common/StaticMap.vue
View File

@ -1,15 +1,11 @@
<template> <template>
<div class="static-map" :class="{ 'display-hover': displayHover }"> <div class="static-map" :class="{ 'display-hover': displayHover }">
<img <img v-if="displayHover" :src="imageUrl" alt="" />
v-if="displayHover"
:src="`${getApiUrl()}workouts/map/${workout.map}`"
alt=""
/>
<div <div
v-else v-else
class="bg-map-image" class="bg-map-image"
:style="{ :style="{
backgroundImage: `url(${getApiUrl()}workouts/map/${workout.map})`, backgroundImage: `url(${imageUrl})`,
}" }"
/> />
<div class="map-attribution"> <div class="map-attribution">
@ -44,8 +40,9 @@
default: false, default: false,
}, },
}, },
setup() { setup(props) {
return { getApiUrl } const imageUrl = `${getApiUrl()}workouts/map/${props.workout.map}`
return { imageUrl }
}, },
}) })
</script> </script>

26
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

@ -5,7 +5,7 @@
<span class="total-label"> <span class="total-label">
{{ $t('common.TOTAL').toLowerCase() }}: {{ $t('common.TOTAL').toLowerCase() }}:
</span> </span>
<span v-if="pagination.total"> <span v-if="pagination.total !== null">
{{ pagination.total }} {{ pagination.total }}
{{ $t('workouts.WORKOUT', pagination.total) }} {{ $t('workouts.WORKOUT', pagination.total) }}
</span> </span>
@ -17,7 +17,7 @@
message="workouts" message="workouts"
@updateSelect="reloadWorkouts" @updateSelect="reloadWorkouts"
/> />
<div class="workouts-table responsive-table"> <div class="workouts-table responsive-table" v-if="workouts.length > 0">
<Pagination <Pagination
class="top-pagination" class="top-pagination"
:pagination="pagination" :pagination="pagination"
@ -50,9 +50,13 @@
:sport-label=" :sport-label="
sports.filter((s) => s.id === workout.sport_id)[0].label sports.filter((s) => s.id === workout.sport_id)[0].label
" "
></SportImage> />
</td> </td>
<td class="workout-title"> <td
class="workout-title"
@mouseover="onHover(workout.id)"
@mouseleave="onHover(null)"
>
<span class="cell-heading"> <span class="cell-heading">
{{ capitalize($t('workouts.WORKOUT', 1)) }} {{ capitalize($t('workouts.WORKOUT', 1)) }}
</span> </span>
@ -68,7 +72,7 @@
{{ workout.title }} {{ workout.title }}
</router-link> </router-link>
<StaticMap <StaticMap
v-if="workout.with_gpx" v-if="workout.with_gpx && hoverWorkoutId === workout.id"
:workout="workout" :workout="workout"
:display-hover="true" :display-hover="true"
/> />
@ -124,8 +128,10 @@
import { import {
ComputedRef, ComputedRef,
PropType, PropType,
Ref,
computed, computed,
defineComponent, defineComponent,
ref,
watch, watch,
capitalize, capitalize,
onBeforeMount, onBeforeMount,
@ -181,6 +187,7 @@
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION] () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION]
) )
let query: TWorkoutsPayload = getWorkoutsQuery(route.query) let query: TWorkoutsPayload = getWorkoutsQuery(route.query)
const hoverWorkoutId: Ref<string | null> = ref(null)
onBeforeMount(() => { onBeforeMount(() => {
loadWorkouts(query) loadWorkouts(query)
@ -216,6 +223,10 @@
return query return query
} }
function onHover(workoutId: string | null) {
hoverWorkoutId.value = workoutId
}
watch( watch(
() => route.query, () => route.query,
async (newQuery) => { async (newQuery) => {
@ -226,6 +237,7 @@
return { return {
query, query,
hoverWorkoutId,
orderByList, orderByList,
pagination, pagination,
sortList, sortList,
@ -233,6 +245,7 @@
capitalize, capitalize,
format, format,
getDateWithTZ, getDateWithTZ,
onHover,
reloadWorkouts, reloadWorkouts,
} }
}, },
@ -309,6 +322,9 @@
.workout-title { .workout-title {
max-width: initial; max-width: initial;
} }
.workout-title:hover .static-map {
display: none;
}
} }
} }
} }