From cbc22469a05fa2ea4bbc94ae6c9cd2d4118ebd5d Mon Sep 17 00:00:00 2001
From: Zeromark30 <kjficht@gmail.com>
Date: Sun, 28 Jun 2026 21:56:46 -0400
Subject: [PATCH] feat(odometer): restrict input to whole numbers and
 dynamically populate placeholder

- Added `step="1"` to enforce native integer validation on the odometer field.
- Prevented keyboard input of decimal points (`.` and `,`) to block typing decimals.
- Updated the placeholder to dynamically fall back to the last recorded odometer reading if available.
---
 src/routes/+page.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 08ff741..59ae2d7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -81,6 +81,12 @@
     if (!Number.isFinite(n)) return '';
     return String(Math.round(n));
   }
+  function placeholderOdometer(): string {
+    if (!data.lastFuelup) return 'No last fuel up';
+    const n = Number(data.lastFuelup.odometer);
+    if (!Number.isFinite(n)) return '';
+    return String(Math.round(n));
+  }
   let odometer: string = $state(initialOdometer());
   let odometerEdited: boolean = $state(false);
   // Local calendar date, NOT toISOString().slice(0, 10): the UTC form is
@@ -833,10 +839,15 @@
       <label for="odometer" class="field-label">Odometer</label>
       <div class="relative">
         <input id="odometer" class="field-input min-w-0" type="number" inputmode="numeric"
-               bind:value={odometer}
-               oninput={() => { odometerEdited = true; clearSmartCheckIssues(); }}
-               class:text-zinc-400={!odometerEdited && odometer !== ''}
-               placeholder="87,432" />
+       step="1"
+       onkeydown={(e) => { if (e.key === '.' || e.key === ',') e.preventDefault(); }}
+       bind:value={odometer}
+       oninput={() => { 
+           odometerEdited = true; 
+           clearSmartCheckIssues(); 
+       }}
+       class:text-zinc-400={!odometerEdited && odometer !== ''}
+       placeholder={placeholderOdometer()} />
         {#if !odometerEdited && odometer !== ''}
           <span class="absolute top-1.5 right-2 text-[10px] uppercase tracking-wider font-semibold text-zinc-500 bg-zinc-700/60 px-1.5 py-0.5 rounded">
             prefilled