Client - dowload workout static map only when hover workout

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

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>

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"
} }
]); ]);

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"});

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

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

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

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

File diff suppressed because one or more lines are too long

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>

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;
}
} }
} }
} }