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,
);
$: cumulativeElevationLoss = list.expand?.trails?.reduce(
(s, b) => s + b.elevation_loss!,
0,
);
$: cumulativeDuration = list.expand?.trails?.reduce(
(s, b) => s + b.duration!,
0,
);
$: listIsShared = (list.expand?.list_share_via_list?.length ?? 0) > 0;
</script>
<div
@@ -58,20 +62,27 @@
<ShareInfo type="list" subject={list}></ShareInfo>
{/if}
</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
><i class="fa fa-left-right mr-2"></i>{formatDistance(
cumulativeDistance,
)}</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,
)}</span
>
<span
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
cumulativeDuration,
><i class="fa fa-arrow-trend-down mr-2"></i>{formatElevation(
cumulativeElevationLoss,
)}</span
>
</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>` : ""}
<h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5>
</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(
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(
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>
</div>
</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) {
(document?.activeElement as HTMLElement).blur()
(document?.activeElement as HTMLElement).blur();
if (!$form.trails || !$form.expand || !$form.expand.trails) {
return;
@@ -301,20 +301,26 @@
trail.difficulty ?? "?",
)}</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
><i class="fa fa-left-right mr-2"
></i>{formatDistance(trail.distance)}</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(
trail.elevation_gain,
)}</span
>
<span
><i class="fa fa-clock mr-2"
></i>{formatTimeHHMM(trail.duration)}</span
><i class="fa fa-arrow-trend-down mr-2"
></i>{formatElevation(
trail.elevation_loss,
)}</span
>
</div>
</div>

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

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