gpx.studio/website/src/lib/components/WithUnits.svelte

<script lang="ts">
	import { settings } from '$lib/db';
	import {
		celsiusToFahrenheit,
		getConvertedDistance,
		getConvertedElevation,
		getConvertedVelocity,
		getDistanceUnits,
		getElevationUnits,
		getVelocityUnits,
		secondsToHHMMSS
	} from '$lib/units';

	import { _ } from 'svelte-i18n';

	export let value: number;
	export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
	export let showUnits: boolean = true;
	export let decimals: number | undefined = undefined;

	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
</script>

<span class={$$props.class}>
	{#if type === 'distance'}
		{getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
		{showUnits ? getDistanceUnits($distanceUnits) : ''}
	{:else if type === 'elevation'}
		{getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
		{showUnits ? getElevationUnits($distanceUnits) : ''}
	{:else if type === 'speed'}
		{#if $velocityUnits === 'speed'}
			{getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
			{showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
		{:else}
			{secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
			{showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
		{/if}
	{:else if type === 'temperature'}
		{#if $temperatureUnits === 'celsius'}
			{value} {showUnits ? $_('units.celsius') : ''}
		{:else}
			{celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
		{/if}
	{:else if type === 'time'}
		{secondsToHHMMSS(value)}
	{/if}
</span>