canteen-asset-tracker/docs/plans/2026-05-20-six-features.md

Canteen Asset Tracker — Feature Batch Implementation Plan

Date: 2026-05-20 Goal: Six UX improvements for field technicians

---

Feature 1: Scan existing asset → auto check-in

Current: Scanning a known asset shows it with a manual "Check In" button Target: Scanning a known asset immediately checks in with GPS, no extra tap

Files:

• static/index.html — handleBarcode() function (line ~2638)

Change: After showScannedAsset(asset), call autoCheckin(asset.id) + submitCheckin()-equivalent logic. Skip showing the manual checkin card.

---

Feature 2: Auto-generate address from GPS reverse geocode

Current: Address fields are always empty; user must type them manually Target: When creating an asset (all 3 modes), reverse-geocode GPS to populate address fields

Files:

• static/index.html — createScannedAsset(), createOcrAsset(), submitManualAsset()
• server.py — new endpoint GET /api/geocode?lat=&lng= using OpenStreetMap Nominatim

Approach: Add a helper reverseGeocode(lat, lng) that calls Nominatim API, returns address parts. Call it in all three creation paths before submitting. Populate address, building_name, building_number, floor fields from the response.

---

Feature 3: Larger camera viewport

Current: Camera area uses aspect-ratio: 16/12 — decent but could be taller Target: Bigger camera preview for easier barcode/OCR scanning

Files:

• static/index.html — .camera-area CSS (~line 437)

Change: Increase aspect ratio to 4/3 or make it fill more vertical space. Reduce margins. Consider max-height removal.

---

Feature 4: Building # → trailer number sync ✅ DONE

Current: building_number and trailer_number are separate fields Target: When building_number is entered, auto-populate trailer_number with same value

Files:

• static/index.html — manual form event listeners, auto-checkin logic

Change: Added oninput handler on manBuildingNumber → copies to manAddress (address/trailer combo field) and locFormBldgNum → copies to locFormTrailer.

Commit: 02b3ba6

---

Feature 5: Parking location from current GPS

Current: parking_location is a free-text field Target: Add a "📍 Use Current Location" button next to parking location that fills in GPS coords

Files:

• static/index.html — manual form HTML + JS

Change: Add a button next to manParkingLocation that sets its value to ${AppState.gpsLat}, ${AppState.gpsLng} when tapped. Also add this to the scanned/OCR create flows if those forms have parking.

---

Feature 6: Navigation tool

Current: Map shows asset pins with a popup "Directions" link to Google Maps Target: A dedicated navigation tool in the app that shows route from current location to the selected asset

Files:

• static/index.html — new tab/panel or enhancement to map/asset detail

Approach: Add a "🧭 Navigate" button in asset detail view and map popups. Opens a full-screen map with:

• Current GPS position marker (blue dot)
• Asset location marker
• Route line between them (straight line using Leaflet polyline, since Leaflet routing needs external service)
• Distance readout
• "Open in Google Maps" fallback link

Simpler approach: Enhance existing popup "Directions" link to include the user's current GPS as the origin (&origin=lat,lng). Also add a "Navigate" tab that shows current location → selected asset with distance.

---

Execution Order

All 6 features are independent (touch different parts of frontend) except F6 may touch map code that F3 doesn't touch. Safe to parallelize.

• F1, F2, F3, F4, F5, F6 can all be done in parallel
• F2 depends on backend endpoint first

Plan:

1. Write backend endpoint for F2 (reverse geocode)
2. Implement all 6 frontend changes
3. Test end-to-end
4. Commit, push, update docs/wiki/issues