brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds elevation loss to print

Browse Source
This commit is contained in:
Christian Beutel
2024-11-09 13:36:44 +01:00
parent 36f4ae33b4
commit 529cae0b82
4 changed files with 64 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/lib/components/list/list_card.svelte
View File

@@ -21,13 +21,17 @@
0, 0,
); );
$: cumulativeElevationLoss = list.expand?.trails?.reduce(
(s, b) => s + b.elevation_loss!,
0,
);
$: cumulativeDuration = list.expand?.trails?.reduce( $: cumulativeDuration = list.expand?.trails?.reduce(
(s, b) => s + b.duration!, (s, b) => s + b.duration!,
0, 0,
); );
$: listIsShared = (list.expand?.list_share_via_list?.length ?? 0) > 0; $: listIsShared = (list.expand?.list_share_via_list?.length ?? 0) > 0;
</script> </script>
<div <div
@@ -58,20 +62,27 @@
<ShareInfo type="list" subject={list}></ShareInfo> <ShareInfo type="list" subject={list}></ShareInfo>
{/if} {/if}
</div> </div>
<div class="flex mt-1 gap-x-4 text-sm text-gray-500 whitespace-nowrap flex-wrap"> <div
class="grid grid-cols-2 mt-1 mb-2 gap-x-4 gap-y-1 text-sm text-gray-500 whitespace-nowrap flex-wrap"
>
<span <span
><i class="fa fa-left-right mr-2"></i>{formatDistance( ><i class="fa fa-left-right mr-2"></i>{formatDistance(
cumulativeDistance, cumulativeDistance,
)}</span )}</span
> >
<span <span
><i class="fa fa-up-down mr-2"></i>{formatElevation( ><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
cumulativeDuration,
)}</span
>
<span
><i class="fa fa-arrow-trend-up mr-2"></i>{formatElevation(
cumulativeElevationGain, cumulativeElevationGain,
)}</span )}</span
> >
<span <span
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM( ><i class="fa fa-arrow-trend-down mr-2"></i>{formatElevation(
cumulativeDuration, cumulativeElevationLoss,
)}</span )}</span
> >
</div> </div>

8
web/src/lib/components/trail/map_with_elevation_multiple.svelte
View File

@@ -268,13 +268,15 @@
${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""} ${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""}
<h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5> <h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5>
</div> </div>
<div class="flex mt-2 gap-4 text-sm text-gray-500 flex-wrap"><span class="shrink-0"><i <div class="grid grid-cols-2 mt-2 gap-x-4 gap-y-2 text-sm text-gray-500 flex-wrap"><span class="shrink-0"><i
class="fa fa-left-right mr-2"></i>${formatDistance( class="fa fa-left-right mr-2"></i>${formatDistance(
trail.distance, trail.distance,
)}</span> <span class="shrink-0"><i class="fa fa-up-down mr-2"></i>${formatElevation(
trail.elevation_gain,
)}</span><span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM( )}</span><span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM(
trail.duration, trail.duration,
)}</span><span class="shrink-0"><i class="fa fa-arrow-trend-up mr-2"></i>${formatElevation(
trail.elevation_gain,
)}</span></span> <span class="shrink-0"><i class="fa fa-arrow-trend-down mr-2"></i>${formatElevation(
trail.elevation_loss,
)}</span></div> )}</span></div>
</div> </div>
</li> </li>

16
web/src/routes/lists/edit/[id]/+page.svelte
View File

@@ -179,7 +179,7 @@
} }
function moveTrail(trail: Trail, index: number, direction: 1 | -1) { function moveTrail(trail: Trail, index: number, direction: 1 | -1) {
(document?.activeElement as HTMLElement).blur() (document?.activeElement as HTMLElement).blur();
if (!$form.trails || !$form.expand || !$form.expand.trails) { if (!$form.trails || !$form.expand || !$form.expand.trails) {
return; return;
@@ -301,20 +301,26 @@
trail.difficulty ?? "?", trail.difficulty ?? "?",
)}</span )}</span
> >
<div class="flex mt-1 gap-4 text-sm text-gray-500"> <div class="grid grid-cols-2 mt-1 gap-x-4 gap-y-2 text-sm text-gray-500">
<span <span
><i class="fa fa-left-right mr-2" ><i class="fa fa-left-right mr-2"
></i>{formatDistance(trail.distance)}</span ></i>{formatDistance(trail.distance)}</span
> >
<span <span
><i class="fa fa-up-down mr-2" ><i class="fa fa-clock mr-2"
></i>{formatTimeHHMM(trail.duration)}</span
>
<span
><i class="fa fa-arrow-trend-up mr-2"
></i>{formatElevation( ></i>{formatElevation(
trail.elevation_gain, trail.elevation_gain,
)}</span )}</span
> >
<span <span
><i class="fa fa-clock mr-2" ><i class="fa fa-arrow-trend-down mr-2"
></i>{formatTimeHHMM(trail.duration)}</span ></i>{formatElevation(
trail.elevation_loss,
)}</span
> >
</div> </div>
</div> </div>

41
web/src/routes/map/trail/[id]/print/+page.svelte
View File

@@ -148,7 +148,7 @@
doc.setTextColor(107, 114, 128); doc.setTextColor(107, 114, 128);
doc.setFont("fa-solid-900", "normal"); doc.setFont("fa-solid-900", "normal");
doc.text("\uf337", currentWidth, currentHeight); doc.text("\uf337", currentWidth, currentHeight);
currentWidth += doc.getTextWidth("\uf337") + 3; currentWidth += doc.getTextWidth("\uf337") + 2;
doc.setFont("IBMPlexSans-Regular", "normal"); doc.setFont("IBMPlexSans-Regular", "normal");
doc.text( doc.text(
formatDistance($trail.distance), formatDistance($trail.distance),
@@ -158,10 +158,23 @@
currentWidth += currentWidth +=
doc.getTextWidth(formatDistance($trail.distance)) + 4; doc.getTextWidth(formatDistance($trail.distance)) + 4;
// Duration
doc.setFont("fa-solid-900", "normal");
doc.text("\uf017", currentWidth, currentHeight);
currentWidth += doc.getTextWidth("\uf337") + 2;
doc.setFont("IBMPlexSans-Regular", "normal");
doc.text(
formatTimeHHMM($trail.duration),
currentWidth,
currentHeight,
);
currentWidth +=
doc.getTextWidth(formatTimeHHMM($trail.duration)) + 4;
// Elevation gain // Elevation gain
doc.setFont("fa-solid-900", "normal"); doc.setFont("fa-solid-900", "normal");
doc.text("\uf338", currentWidth, currentHeight); doc.text("\ue098", currentWidth, currentHeight);
currentWidth += doc.getTextWidth("\uf338") + 3; currentWidth += doc.getTextWidth("\ue098") + 2;
doc.setFont("IBMPlexSans-Regular", "normal"); doc.setFont("IBMPlexSans-Regular", "normal");
doc.text( doc.text(
formatElevation($trail.elevation_gain), formatElevation($trail.elevation_gain),
@@ -173,13 +186,13 @@
formatDistance($trail.elevation_gain), formatDistance($trail.elevation_gain),
) + 4; ) + 4;
// Duration // Elevation loss
doc.setFont("fa-solid-900", "normal"); doc.setFont("fa-solid-900", "normal");
doc.text("\uf017", currentWidth, currentHeight); doc.text("\ue097", currentWidth, currentHeight);
currentWidth += doc.getTextWidth("\uf337") + 3; currentWidth += doc.getTextWidth("\ue098") + 2;
doc.setFont("IBMPlexSans-Regular", "normal"); doc.setFont("IBMPlexSans-Regular", "normal");
doc.text( doc.text(
formatTimeHHMM($trail.duration), formatElevation($trail.elevation_loss),
currentWidth, currentWidth,
currentHeight, currentHeight,
); );
@@ -531,21 +544,27 @@
/> />
<div class="basis-full mx-4"> <div class="basis-full mx-4">
<div <div
class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap" class="flex mt-1 gap-x-4 gap-y-2 text-sm text-gray-500 whitespace-nowrap"
> >
<span <span
><i class="fa fa-left-right mr-2" ><i class="fa fa-left-right mr-2"
></i>{formatDistance($trail.distance)}</span ></i>{formatDistance($trail.distance)}</span
> >
<span <span
><i class="fa fa-up-down mr-2" ><i class="fa fa-clock mr-2"
></i>{formatTimeHHMM($trail.duration)}</span
>
<span
><i class="fa fa-arrow-trend-up mr-2"
></i>{formatElevation( ></i>{formatElevation(
$trail.elevation_gain, $trail.elevation_gain,
)}</span )}</span
> >
<span <span
><i class="fa fa-clock mr-2" ><i class="fa fa-arrow-trend-down mr-2"
></i>{formatTimeHHMM($trail.duration)}</span ></i>{formatElevation(
$trail.elevation_loss,
)}</span
> >
</div> </div>
<svg <svg