steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 08:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix several time input issues, closes #47

Browse Source
This commit is contained in:
vcoppe
2024-08-11 00:02:53 +02:00
parent 0cb74c9a45
commit c600b25921
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
website/src/lib/components/toolbar/tools/Time.svelte
View File

@@ -152,7 +152,11 @@
if (movingTime === undefined) { if (movingTime === undefined) {
return; return;
} }
setSpeed($gpxStatistics.global.distance.moving / (movingTime / 3600)); let distance =
$gpxStatistics.global.distance.moving > 0
? $gpxStatistics.global.distance.moving
: $gpxStatistics.global.distance.total;
setSpeed(distance / (movingTime / 3600));
updateEnd(); updateEnd();
} }
@@ -195,7 +199,7 @@
bind:value={speed} bind:value={speed}
showHours={false} showHours={false}
disabled={!canUpdate} disabled={!canUpdate}
on:change={updateDataFromSpeed} onChange={updateDataFromSpeed}
/> />
<span class="text-sm shrink-0"> <span class="text-sm shrink-0">
{#if $distanceUnits === 'imperial'} {#if $distanceUnits === 'imperial'}
@@ -215,7 +219,7 @@
<TimePicker <TimePicker
bind:value={movingTime} bind:value={movingTime}
disabled={!canUpdate} disabled={!canUpdate}
on:change={updateDataFromTotalTime} onChange={updateDataFromTotalTime}
/> />
</div> </div>
</div> </div>
@@ -235,13 +239,13 @@
updateEnd(); updateEnd();
}} }}
/> />
<Input <input
type="time" type="time"
step={1} step={1}
disabled={!canUpdate} disabled={!canUpdate}
bind:value={startTime} bind:value={startTime}
class="w-fit" class="w-fit"
on:input={updateEnd} on:change={updateEnd}
/> />
</div> </div>
<Label class="flex flex-row"> <Label class="flex flex-row">
@@ -260,7 +264,7 @@
updateStart(); updateStart();
}} }}
/> />
<Input <input
type="time" type="time"
step={1} step={1}
disabled={!canUpdate} disabled={!canUpdate}
@@ -340,3 +344,13 @@
{/if} {/if}
</Help> </Help>
</div> </div>
<style lang="postcss">
div :global(input[type='time']) {
/*
Style copy-pasted from shadcn-svelte Input.
Needed to use native time input to avoid a bug with 2-level bind:value.
*/
@apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
</style>

9
website/src/lib/components/ui/time-picker/TimePicker.svelte
View File

@@ -4,13 +4,14 @@
export let showHours = true; export let showHours = true;
export let value: number | undefined = undefined; export let value: number | undefined = undefined;
export let disabled: boolean = false; export let disabled: boolean = false;
export let onChange = () => {};
let hours: string | number = '--'; let hours: string | number = '--';
let minutes: string | number = '--'; let minutes: string | number = '--';
let seconds: string | number = '--'; let seconds: string | number = '--';
function maybeParseInt(value: string | number): number { function maybeParseInt(value: string | number): number {
if (value === '--') { if (value === '--' || value === '') {
return 0; return 0;
} }
return typeof value === 'string' ? parseInt(value) : value; return typeof value === 'string' ? parseInt(value) : value;
@@ -84,12 +85,12 @@
} else { } else {
hours = 0; hours = 0;
} }
onChange();
}} }}
on:keypress={onKeyPress} on:keypress={onKeyPress}
on:focusin={() => { on:focusin={() => {
countKeyPress = 0; countKeyPress = 0;
}} }}
on:change
/> />
<span class="text-sm">:</span> <span class="text-sm">:</span>
{/if} {/if}
@@ -110,12 +111,12 @@
minutes = 0; minutes = 0;
} }
minutes = minutes.toString().padStart(showHours ? 2 : 1, '0'); minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
onChange();
}} }}
on:keypress={onKeyPress} on:keypress={onKeyPress}
on:focusin={() => { on:focusin={() => {
countKeyPress = 0; countKeyPress = 0;
}} }}
on:change
/> />
<span class="text-sm">:</span> <span class="text-sm">:</span>
<TimeComponentInput <TimeComponentInput
@@ -135,12 +136,12 @@
seconds = 0; seconds = 0;
} }
seconds = seconds.toString().padStart(2, '0'); seconds = seconds.toString().padStart(2, '0');
onChange();
}} }}
on:keypress={onKeyPress} on:keypress={onKeyPress}
on:focusin={() => { on:focusin={() => {
countKeyPress = 0; countKeyPress = 0;
}} }}
on:change
/> />
</div> </div>