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"
},
{
"revision": "ea991ffce2185e4cc072abf683bedd86",
"revision": "196d8a285c086a57132534b24c1135a0",
"url": "/index.html"
},
{
@ -80,8 +80,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/admin.c784857e.css"
},
{
"revision": "7f1bfdb54f95f3215297",
"url": "/static/css/app.24ba011a.css"
"revision": "7b174df05f6f7a9edd0f",
"url": "/static/css/app.5efeb1fe.css"
},
{
"revision": "82c1118c918377daaa71a320ab8eea42",
@ -92,11 +92,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/leaflet.css"
},
{
"revision": "05c628021239246381f3",
"url": "/static/css/main.4b6a4ae2.css"
"revision": "1af89ab12eabaa087e43",
"url": "/static/css/main.967c2c29.css"
},
{
"revision": "7cbc2a35623621321963",
"revision": "6134dd1635749b25d931",
"url": "/static/css/main~workouts.c12079e7.css"
},
{
@ -108,8 +108,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/reset.5eaa1e50.css"
},
{
"revision": "afbde641dcb3d7f75c9f",
"url": "/static/css/workouts.a9a41b99.css"
"revision": "11fdb71c08ef58de3405",
"url": "/static/css/workouts.72b1c915.css"
},
{
"revision": "e719f9244c69e28e7d00e725ca1e280e",
@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/admin.b2c267a7.js"
},
{
"revision": "7f1bfdb54f95f3215297",
"url": "/static/js/app.1d2a8a56.js"
"revision": "7b174df05f6f7a9edd0f",
"url": "/static/js/app.9069e434.js"
},
{
"revision": "bd7d183c9f68e5f4027d",
@ -224,12 +224,12 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/chunk-vendors.61765c73.js"
},
{
"revision": "05c628021239246381f3",
"url": "/static/js/main.96af01eb.js"
"revision": "1af89ab12eabaa087e43",
"url": "/static/js/main.8f9faede.js"
},
{
"revision": "7cbc2a35623621321963",
"url": "/static/js/main~workouts.44a477db.js"
"revision": "6134dd1635749b25d931",
"url": "/static/js/main~workouts.896585f2.js"
},
{
"revision": "c3fbb4741fcfd33236fb",
@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/reset.60cf3dbf.js"
},
{
"revision": "afbde641dcb3d7f75c9f",
"url": "/static/js/workouts.4a8b05f4.js"
"revision": "11fdb71c08ef58de3405",
"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(
"/precache-manifest.59ca4201c0d0fa2f3034655a073d8255.js"
"/precache-manifest.df69f746e04ed0c0a73cbef257234d2c.js"
);
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>
<div class="static-map" :class="{ 'display-hover': displayHover }">
<img
v-if="displayHover"
:src="`${getApiUrl()}workouts/map/${workout.map}`"
alt=""
/>
<img v-if="displayHover" :src="imageUrl" alt="" />
<div
v-else
class="bg-map-image"
:style="{
backgroundImage: `url(${getApiUrl()}workouts/map/${workout.map})`,
backgroundImage: `url(${imageUrl})`,
}"
/>
<div class="map-attribution">
@ -44,8 +40,9 @@
default: false,
},
},
setup() {
return { getApiUrl }
setup(props) {
const imageUrl = `${getApiUrl()}workouts/map/${props.workout.map}`
return { imageUrl }
},
})
</script>

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

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