matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-08-26 17:31:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5 from zvx-echo6/feat/auto-mode-frontend

Browse source 
feat(navi/ui): Auto mode chip + selected_mode badge
This commit is contained in:
malice 2026-05-24 03:02:29 -06:00 • committed by GitHub
commit 27a0695e79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/api.js
View file

@ -331,7 +331,7 @@ const MVUM_URL = "/api/mvum"
* Request an offroute route from the pathfinder API. * Request an offroute route from the pathfinder API.
* @param {object} start - { lat, lon } * @param {object} start - { lat, lon }
* @param {object} end - { lat, lon } * @param {object} end - { lat, lon }
* @param {string} mode - foot | mtb | atv | vehicle * @param {string} mode - auto | foot | mtb | atv | vehicle
* @param {string} boundaryMode - strict | pragmatic | emergency * @param {string} boundaryMode - strict | pragmatic | emergency
* @returns {Promise<object>} Offroute response with GeoJSON route * @returns {Promise<object>} Offroute response with GeoJSON route
*/ */

18
frontend/src/components/DirectionsPanel.jsx
View file

@ -8,13 +8,16 @@ import LocationInput from "./LocationInput"
import ManeuverList from "./ManeuverList" import ManeuverList from "./ManeuverList"
const TRAVEL_MODES = [ const TRAVEL_MODES = [
{ id: "auto", label: "Drive", Icon: Car }, { id: "auto", label: "Auto", Icon: Zap },
{ id: "foot", label: "Foot", Icon: Footprints }, { id: "foot", label: "Foot", Icon: Footprints },
{ id: "mtb", label: "MTB", Icon: Bike }, { id: "mtb", label: "MTB", Icon: Bike },
{ id: "atv", label: "ATV", Icon: Car }, { id: "atv", label: "ATV", Icon: Car },
{ id: "vehicle", label: "4x4", Icon: Car }, { id: "vehicle", label: "Drive", Icon: Car },
] ]
// Maps the backend's selected_mode to the chip label shown in the "Auto chose X" badge.
const SELECTED_MODE_LABEL = { vehicle: "Drive", atv: "ATV", mtb: "MTB", foot: "Foot" }
const BOUNDARY_MODES = [ const BOUNDARY_MODES = [
{ id: "strict", label: "Strict", Icon: Shield, title: "Avoid barriers" }, { id: "strict", label: "Strict", Icon: Shield, title: "Avoid barriers" },
{ id: "pragmatic", label: "Cross", Icon: AlertTriangle, title: "Cross with penalty" }, { id: "pragmatic", label: "Cross", Icon: AlertTriangle, title: "Cross with penalty" },
@ -313,6 +316,17 @@ export default function DirectionsPanel({ onClose }) {
})} })}
</div> </div>
{/* Auto mode: show which travel mode feasibility picked */}
{routeMode === "auto" && routeResult?.selected_mode && (
<div
className="flex items-center justify-center gap-1 py-1.5 text-xs rounded-lg"
style={{ background: "var(--accent-muted)", color: "var(--accent)" }}
>
<Zap size={14} />
<span>{`Auto chose ${SELECTED_MODE_LABEL[routeResult.selected_mode] || routeResult.selected_mode}`}</span>
</div>
)}
{/* Boundary mode selector (only for non-auto modes) */} {/* Boundary mode selector (only for non-auto modes) */}
{routeMode !== "auto" && ( {routeMode !== "auto" && (
<div className="flex gap-1"> <div className="flex gap-1">

2
frontend/src/store.js
View file

@ -31,7 +31,7 @@ export const useStore = create((set, get) => ({
routeStart: null, // { lat, lon, name } routeStart: null, // { lat, lon, name }
routeEnd: null, // { lat, lon, name } routeEnd: null, // { lat, lon, name }
stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...] stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
routeMode: "auto", // foot | mtb | atv | vehicle routeMode: "auto", // auto | foot | mtb | atv | vehicle
boundaryMode: "strict", // strict | pragmatic | emergency boundaryMode: "strict", // strict | pragmatic | emergency
routeResult: null, // Response from /api/offroute routeResult: null, // Response from /api/offroute
routeLoading: false, routeLoading: false,