diff --git a/frontend/index.html b/frontend/index.html index dff4f82..ff93803 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - GoAgro + Tauri + React + Typescript diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg deleted file mode 100644 index a06c1e2..0000000 --- a/frontend/public/logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/public/menu.svg b/frontend/public/menu.svg deleted file mode 100644 index 9c02950..0000000 --- a/frontend/public/menu.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/frontend/public/tauri.svg b/frontend/public/tauri.svg new file mode 100644 index 0000000..31b62c9 --- /dev/null +++ b/frontend/public/tauri.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/frontend/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css index 697fb92..dd7d863 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,121 +1,78 @@ :root { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; - color-scheme: dark; - --bg: #050816; - --gradient-a: none; - --gradient-b: none; - --text: #f4f7fb; - --muted: #94a3b8; - --surface: rgba(255, 255, 255, 0.03); - --surface-strong: rgba(255, 255, 255, 0.04); - --border: rgba(255, 255, 255, 0.08); - --border-strong: rgba(255, 255, 255, 0.1); - --pill-bg: rgba(255, 255, 255, 0.06); - --pill-border: rgba(255, 255, 255, 0.1); - --panel-shadow: none; - --input-bg: rgba(255, 255, 255, 0.05); - --input-border: rgba(255, 255, 255, 0.08); - --btn-ghost-bg: rgba(255, 255, 255, 0.05); - --btn-ghost-border: rgba(255, 255, 255, 0.08); - --primary: #2563eb; - --glass: rgba(255, 255, 255, 0.04); - --glass-border: rgba(255, 255, 255, 0.08); -} - -:root[data-theme="light"] { - color-scheme: light; - --bg: #f6f8ff; - --gradient-a: none; - --gradient-b: none; - --text: #0f172a; - --muted: #64748b; - --surface: rgba(255, 255, 255, 0.92); - --surface-strong: #ffffff; - --border: rgba(15, 23, 42, 0.08); - --border-strong: rgba(15, 23, 42, 0.12); - --pill-bg: rgba(15, 23, 42, 0.05); - --pill-border: rgba(15, 23, 42, 0.1); - --panel-shadow: none; - --input-bg: rgba(255, 255, 255, 0.98); - --input-border: rgba(15, 23, 42, 0.14); - --btn-ghost-bg: rgba(255, 255, 255, 0.94); - --btn-ghost-border: rgba(15, 23, 42, 0.12); - --glass: rgba(255, 255, 255, 0.9); - --glass-border: rgba(15, 23, 42, 0.08); - --primary: #3B82F6; + background: #050816; + color: #e8ecf4; } * { box-sizing: border-box; } -.maplibre .maplibregl-ctrl-attrib { - display: none !important; -} body, #root { margin: 0; min-height: 100vh; - background: var(--bg); - color: var(--text); } .layout { min-height: 100vh; - height: 100vh; - background: var(--bg); - color: var(--text); + background: radial-gradient(circle at 20% 20%, rgba(126, 221, 252, 0.08), transparent 25%), + radial-gradient(circle at 80% 0%, rgba(255, 135, 252, 0.08), transparent 22%), + #050816; + color: #f4f7fb; display: flex; flex-direction: column; - transition: background 0.2s ease, color 0.2s ease; } -.content { - width: 100%; - max-width: none; - margin: 0; +.topbar { display: flex; - flex-direction: column; - overflow: hidden; - flex: 1 1 auto; - min-height: 0; + justify-content: space-between; + align-items: center; + padding: 18px 22px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.04); } -.status-strip { - flex: 0 0 auto; - padding: 6px 10px; - background: var(--surface); - border-bottom: 1px solid var(--border); - font-size: 12px; -} - -.mini-info { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 8px; - padding: 0; -} - -.mini-info.compact { - align-items: stretch; -} - -.chip { - padding: 4px 10px; - border-radius: 10px; - background: var(--surface-strong); +.brand { display: flex; - flex-direction: column; - gap: 2px; -} -.leaflet-container{ - height: 100% !important; -} -.chip.small span { - font-size: 12px; + gap: 12px; + align-items: center; } -.chip.small strong { - font-size: 16px; +.pulse { + width: 12px; + height: 12px; + border-radius: 50%; + background: #f59e0b; + box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.2); + animation: pulse 2.4s infinite; +} + +.pulse.ok { + background: #34d399; + box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.18); +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +.title { + font-weight: 700; + letter-spacing: 0.4px; +} + +.subtitle { + color: #94a3b8; + font-size: 13px; } .pill { @@ -124,13 +81,14 @@ body, #root { align-items: center; padding: 8px 12px; border-radius: 999px; - background: var(--pill-bg); - border: 1px solid var(--pill-border); + background: linear-gradient(135deg, rgba(125, 211, 252, 0.18), rgba(252, 165, 255, 0.18)); + border: 1px solid rgba(255, 255, 255, 0.1); } .pill-label { - color: var(--muted); + color: #cbd5e1; font-size: 13px; + text-transform: uppercase; letter-spacing: 0.6px; } @@ -138,35 +96,37 @@ body, #root { font-weight: 700; } +.content { + display: grid; + grid-template-rows: auto 1fr auto; + gap: 14px; + padding: 14px 18px 18px; + flex: 1; +} + .panel { - background: var(--surface); - border: 1px solid var(--border); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 14px; padding: 14px; - box-shadow: var(--panel-shadow); - transition: background 0.2s ease, border-color 0.2s ease; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); } .info-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; - padding-bottom: 32px; } .card { - width: 141px; - height: 141px; + padding: 12px; border-radius: 12px; - background: var(--surface-strong); - border: 1px solid var(--border); - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); } .card-label { - color: var(--muted); + color: #94a3b8; font-size: 13px; margin-bottom: 4px; } @@ -174,52 +134,38 @@ body, #root { .card-value { font-size: 20px; font-weight: 700; - color: var(--text); -} - -.map-shell { - flex: 1 1 auto; - min-height: 0; - padding: 0; } .map-panel { padding: 0; - display: flex; - flex-direction: column; - gap: 0; - flex: 1 1 auto; - min-height: 0; - background: transparent; - border: none; } .map { - height: 100%; - min-height: 0; - border-radius: 0; + height: 70vh; + border-radius: 12px; overflow: hidden; - border: none; - width: 100%; } .maplibre { - height: 100%; - min-height: 0; - border-radius: 0; + height: 70vh; + border-radius: 12px; overflow: hidden; - border: none; - width: 100%; +} + +.map-switch { + display: flex; + gap: 10px; + padding: 12px; } .empty { padding: 24px; text-align: center; - color: var(--muted); + color: #94a3b8; } .leaflet-control-container { - filter: none; + filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)); } .slice-panel { @@ -232,8 +178,6 @@ body, #root { display: flex; justify-content: space-between; align-items: center; - padding: 32px 0; - border-top: 1px solid var(--border); } .panel-title { @@ -242,15 +186,15 @@ body, #root { } .panel-subtitle { - color: var(--muted); + color: #94a3b8; font-size: 13px; } .badge { padding: 6px 10px; border-radius: 999px; - background: var(--btn-ghost-bg); - border: 1px solid var(--border-strong); + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); text-transform: uppercase; font-size: 12px; letter-spacing: 0.6px; @@ -267,44 +211,29 @@ body, #root { } .slice-grid { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; - padding-bottom: 80px; } .field { - display: grid; - grid-template-columns: 180px 1fr; - align-items: center; - gap: 12px; - padding: 10px 12px; - border-radius: 12px; - background: var(--surface-strong); - border: 1px solid var(--border); -} - -.field.compact { - grid-template-columns: 160px 1fr; - padding: 8px 10px; - background: var(--surface); + display: flex; + flex-direction: column; + gap: 6px; } .field span { - color: var(--muted); + color: #94a3b8; font-size: 13px; - font-weight: 600; } .field input, -.field select, -.tileset-row select { +.field select { padding: 10px 12px; border-radius: 10px; - border: 1px solid var(--input-border); - background: var(--input-bg); - color: var(--text); - width: 100%; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.05); + color: #f4f7fb; } .tileset-row { @@ -317,16 +246,9 @@ body, #root { flex: 1; } -.tileset-row.stacked { - flex-direction: row; - align-items: center; -} - .file-row { display: flex; gap: 8px; - align-items: center; - width: 100%; } .file-row input { @@ -334,51 +256,14 @@ body, #root { } .muted { - color: var(--muted); + color: #94a3b8; font-size: 12px; } -.field .muted { - grid-column: 2; -} - -.actions-row { +.actions { display: flex; gap: 10px; - flex-wrap: wrap; - align-items: center; - justify-content: end; -} - -.field.actions { - grid-template-columns: 1fr 1fr; - background: var(--surface); -} - -.field.actions span { - color: var(--muted); -} - -@media (max-width: 720px) { - .field, - .field.compact, - .field.actions { - grid-template-columns: 1fr; - align-items: flex-start; - } - - .field span { - margin-bottom: 6px; - } - - .field .muted { - grid-column: 1; - } - - .tileset-row.stacked { - flex-direction: column; - align-items: stretch; - } + align-items: flex-end; } .btn { @@ -387,119 +272,29 @@ body, #root { border: 1px solid transparent; cursor: pointer; font-weight: 700; - transition: transform 0.12s ease, border 0.12s ease, background 0.2s ease; - color: var(--text); - background: transparent; -} - -.btn.small { - padding: 8px 12px; - font-size: 14px; + transition: transform 0.12s ease, border 0.12s ease, box-shadow 0.12s ease; } .btn.primary { - background: var(--primary); - color: var(--bg); + background: linear-gradient(135deg, #38bdf8, #8b5cf6); + color: #0b1020; + box-shadow: 0 10px 30px -12px rgba(56, 189, 248, 0.8); } .btn.ghost { - background: var(--btn-ghost-bg); - color: var(--text); - border-color: var(--btn-ghost-border); + background: rgba(255, 255, 255, 0.05); + color: #e8ecf4; + border-color: rgba(255, 255, 255, 0.08); } -.bottom-actions { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0; - width: 100%; - height: 10vh; - min-height: 64px; - max-height: 120px; -} -.bottom-settings{ - display: grid; - grid-template-columns: 1fr; - gap: 0; - width: 100%; - height: 10vh; - min-height: 64px; - max-height: 120px; - position: absolute; - bottom: 0; - left: 0; -} -.bottom-settings .btn.block { - width: 100%; - height: 100%; - border-radius: 0; - font-size: 16px; -} -.bottom-actions .btn.block { - width: 100%; - height: 100%; - border-radius: 0; - font-size: 16px; -} - -.bottom-actions .btn.ghost { - border-right: 1px solid var(--border); -} - -.settings-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.3); - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease; - z-index: 30; -} - -.settings-backdrop.open { - opacity: 1; - pointer-events: auto; - z-index: 999; -} - -.settings-panel { - position: fixed; - top: 0; - right: 0; - width: 100vw; - height: 100vh; - background: var(--bg); - border-left: 1px solid var(--border); - transform: translateX(100%); - transition: transform 0.25s ease; - z-index: 40; - display: flex; - flex-direction: column; - padding: 18px 0; - gap: 12px; -} - -.settings-panel.open { - transform: translateX(0); - z-index: 1000; -} - -.settings-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 18px; -} - -.settings-content { - overflow: auto; - padding: 0; - display: flex; - flex-direction: column; - gap: 12px; +.btn:hover { + transform: translateY(-1px); } @media (max-width: 900px) { + .content { + grid-template-rows: auto 1fr auto; + } .map { height: 60vh; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d389fdb..8cd777a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,237 +1,139 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; +import { MapContainer, Marker, Polyline, TileLayer, useMap } from "react-leaflet"; +import L, { LatLngExpression } from "leaflet"; import "./App.css"; import "leaflet/dist/leaflet.css"; import "maplibre-gl/dist/maplibre-gl.css"; -import { MapPanel } from "./components/MapPanel"; -import { SettingsPanel } from "./components/SettingsPanel"; -import { TrackSummary } from "./components/TrackSummary"; -import { useVectorMap } from "./hooks/useVectorMap"; -import { getInitialTheme } from "./utils/theme"; -import type { AppConfig, IncomingMessage, MapMode, SliceParams, TrackPoint, TrackPositions } from "./types"; +type FixMessage = { + type: "fix"; + lat: number; + lon: number; + alt: number | null; + timestamp: string; + source: string; + fresh: boolean; + detail?: string; +}; +type StatusMessage = { + type: "status"; + status: string; + timestamp: string; + detail?: string; +}; + +type IncomingMessage = FixMessage | StatusMessage; + +type AppConfig = { + tiles_url: string; + tiles_url_tms?: string; + vector_tiles_url?: string; + vector_metadata_url?: string; + tilesets_url?: string; + tilesets_activate_url?: string; + ws_url: string; + gnss_source: string; +}; + +type TrackPoint = { + lat: number; + lon: number; + timestamp: string; + fresh: boolean; +}; + +const defaultCenter: LatLngExpression = [55.751244, 37.618423]; const backendBase = (import.meta.env.VITE_BACKEND_URL as string | undefined) ?? "http://localhost:8000"; -const initialSliceParams: SliceParams = { - source: "", - destination: "", - tileset: "", - min_zoom: 10, - max_zoom: 16, - tile_format: "png", - scheme: "xyz", - source_format: "geotiff", -}; +const markerIcon = new L.Icon({ + iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png", + shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png", + iconSize: [25, 41], + iconAnchor: [12, 41], +}); + +function FlyTo({ point }: { point: TrackPoint | null }) { + const map = useMap(); + useEffect(() => { + if (point) { + map.flyTo([point.lat, point.lon], Math.max(map.getZoom(), 14), { duration: 0.6 }); + } + }, [point, map]); + return null; +} + +function formatTime(ts?: string) { + if (!ts) return "—"; + try { + return new Date(ts).toLocaleTimeString(); + } catch { + return ts; + } +} export default function App() { - const [theme, setTheme] = useState<"dark" | "light">(getInitialTheme); - const [settingsOpen, setSettingsOpen] = useState(false); const [config, setConfig] = useState(null); const [status, setStatus] = useState("connecting"); const [track, setTrack] = useState([]); const wsRef = useRef(null); - const [mapMode, setMapMode] = useState("raster"); + const [mapMode, setMapMode] = useState<"raster" | "vector">("raster"); const [tilesets, setTilesets] = useState([]); const [activeTileset, setActiveTileset] = useState(""); const [selectedFileName, setSelectedFileName] = useState(""); const fileInputRef = useRef(null); - const [sliceParams, setSliceParams] = useState(initialSliceParams); + const [sliceParams, setSliceParams] = useState({ + source: "", + destination: "", + tileset: "", + min_zoom: 10, + max_zoom: 16, + tile_format: "png", + scheme: "xyz" as "xyz" | "tms", + source_format: "geotiff" as "geotiff" | "mbtiles" | "tms" | "xyz", + }); const [sliceStatus, setSliceStatus] = useState("idle"); + const maplibreContainerRef = useRef(null); + const maplibreRef = useRef(null); - const sendFrontLog = useCallback((message: string, level: "info" | "warn" | "error" = "info") => { - fetch(`${backendBase}/logs`, { + const uploadFileBlob = async (file: File) => { + setSliceStatus("uploading"); + const form = new FormData(); + form.append("file", file); + return fetch(`${backendBase}/tiles/upload`, { method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ message, level, source: "frontend" }), - }).catch(() => {}); - }, []); - - useEffect(() => { - if (typeof document === "undefined") return; - document.documentElement.setAttribute("data-theme", theme); - try { - localStorage.setItem("theme", theme); - } catch { - // ignore storage errors (e.g. private mode) - } - }, [theme]); - - useEffect(() => { - fetch(`${backendBase}/config`, { cache: "no-store" }) - .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`status ${r.status}`)))) - .then((cfg) => { - setConfig(cfg); - return cfg; + body: form, + }) + .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(j.detail || r.status)))) + .then((res) => { + setSliceParams((p) => ({ ...p, source: res.path })); + setSelectedFileName(res.filename); + setSliceParams((p) => { + if (p.tileset) return p; + const proposed = String(res.filename || "") + .replace(/\.[^.]+$/, "") + .toLowerCase() + .replace(/[^a-z0-9._-]+/g, "-") + .replace(/^-+|-+$/g, "") + .slice(0, 64); + return proposed ? { ...p, tileset: proposed } : p; + }); + setSliceStatus("idle"); + sendFrontLog(`uploaded source ${res.filename}`, "info"); + if (res.filename?.toLowerCase?.().endsWith(".mbtiles")) { + activateVectorMbtiles(res.path).catch((err) => { + sendFrontLog(`vector activate failed: ${err}`, "warn"); + }); + } }) .catch((err) => { - sendFrontLog(`config fetch failed: ${err}`, "error"); - setStatus("config-error"); + setSliceStatus("error"); + sendFrontLog(`upload error: ${err}`, "error"); }); - }, [sendFrontLog]); + }; - const refreshTilesets = useCallback(async () => { - const url = config?.tilesets_url ? `${backendBase}${config.tilesets_url}` : `${backendBase}/tilesets`; - const res = await fetch(url, { cache: "no-store" }); - const data = await res.json(); - if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); - setTilesets(data.tilesets || []); - setActiveTileset(data.active || ""); - }, [config]); - - useEffect(() => { - if (!config) return; - refreshTilesets().catch((err) => sendFrontLog(`tilesets refresh failed: ${err}`, "warn")); - }, [config, refreshTilesets, sendFrontLog]); - - const activateTileset = useCallback( - async (name: string) => { - const url = config?.tilesets_activate_url - ? `${backendBase}${config.tilesets_activate_url}` - : `${backendBase}/tilesets/activate`; - const res = await fetch(url, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name }), - }); - const data = await res.json(); - if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); - setActiveTileset(data.active || name); - sendFrontLog(`tileset activated: ${data.active || name}`, "info"); - }, - [config, sendFrontLog], - ); - - const createTileset = useCallback( - async (name: string) => { - const res = await fetch(`${backendBase}/tilesets`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name }), - }); - const data = await res.json(); - if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); - await refreshTilesets(); - setSliceParams((p) => ({ ...p, tileset: data.name || name })); - sendFrontLog(`tileset created: ${data.name || name}`, "info"); - }, - [refreshTilesets, sendFrontLog], - ); - - useEffect(() => { - if (!config) return; - const base = backendBase.replace(/\/+$/, ""); - const wsUrl = `${base}${config.ws_url}`.replace(/^http/, "ws"); - setStatus("connecting"); - const socket = new WebSocket(wsUrl); - wsRef.current = socket; - - socket.onmessage = (event) => { - try { - const msg: IncomingMessage = JSON.parse(event.data); - if (msg.type === "fix") { - const fix = msg; - setTrack((prev) => { - const next = [...prev, { lat: fix.lat, lon: fix.lon, timestamp: fix.timestamp, fresh: fix.fresh }]; - return next.slice(-500); - }); - setStatus(fix.fresh ? "ok" : "stale"); - } else { - setStatus(msg.status); - } - } catch (err) { - sendFrontLog(`ws parse error: ${err}`, "error"); - } - }; - - socket.onclose = () => { - setStatus("disconnected"); - sendFrontLog("ws disconnected", "warn"); - }; - socket.onerror = () => { - setStatus("ws-error"); - sendFrontLog("ws error", "error"); - }; - - return () => socket.close(); - }, [config, sendFrontLog]); - - const lastPoint = useMemo(() => (track.length ? track[track.length - 1] : null), [track]); - const positions: TrackPositions = useMemo( - () => track.map((p) => [p.lat, p.lon]) as TrackPositions, - [track], - ); - - const tileUrl = - config && - `${backendBase.replace(/\/+$/, "")}${ - sliceParams.scheme === "tms" - ? config.tiles_url_tms || "/tiles/tms/{z}/{x}/{y}.png" - : config.tiles_url || "/tiles/{z}/{x}/{y}.png" - }`; - - const vectorTileUrl = - config && `${backendBase.replace(/\/+$/, "")}${config.vector_tiles_url || "/tiles/vector/{z}/{x}/{y}.pbf"}`; - - const vectorMetaUrl = - config && `${backendBase.replace(/\/+$/, "")}${config.vector_metadata_url || "/tiles/vector/metadata"}`; - - const activateVectorMbtiles = useCallback( - async (path: string) => { - const res = await fetch(`${backendBase}/tiles/vector/activate`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ path }), - }); - const data = await res.json(); - if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); - sendFrontLog(`vector mbtiles activated: ${path}`, "info"); - setMapMode("vector"); - return data; - }, - [sendFrontLog], - ); - - const uploadFileBlob = useCallback( - async (file: File) => { - setSliceStatus("uploading"); - const form = new FormData(); - form.append("file", file); - return fetch(`${backendBase}/tiles/upload`, { - method: "POST", - body: form, - }) - .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(j.detail || r.status)))) - .then((res) => { - setSliceParams((p) => ({ ...p, source: res.path })); - setSelectedFileName(res.filename); - setSliceParams((p) => { - if (p.tileset) return p; - const proposed = String(res.filename || "") - .replace(/\.[^.]+$/, "") - .toLowerCase() - .replace(/[^a-z0-9._-]+/g, "-") - .replace(/^-+|-+$/g, "") - .slice(0, 64); - return proposed ? { ...p, tileset: proposed } : p; - }); - setSliceStatus("idle"); - sendFrontLog(`uploaded source ${res.filename}`, "info"); - if (res.filename?.toLowerCase?.().endsWith(".mbtiles")) { - activateVectorMbtiles(res.path).catch((err) => { - sendFrontLog(`vector activate failed: ${err}`, "warn"); - }); - } - }) - .catch((err) => { - setSliceStatus("error"); - sendFrontLog(`upload error: ${err}`, "error"); - }); - }, - [activateVectorMbtiles, sendFrontLog], - ); - - const triggerFileSelect = useCallback(async () => { + const triggerFileSelect = async () => { try { if ((window as any).__TAURI__) { const { open } = await import("@tauri-apps/plugin-dialog"); @@ -249,117 +151,582 @@ export default function App() { } fileInputRef.current?.click(); } catch (err) { - sendFrontLog(`file dialog error: ${err}`, "warn"); + console.error("file dialog error", err); } - }, [sendFrontLog]); + }; - const handleFileSelected = useCallback( - async (file: File | null | undefined) => { - if (!file) return; - setSelectedFileName(file.name); - await uploadFileBlob(file); - }, - [uploadFileBlob], - ); - - const handleSliceSubmit = useCallback(() => { - setSliceStatus("running"); - fetch(`${backendBase}/tiles/slice`, { + const sendFrontLog = (message: string, level: string = "info") => { + fetch(`${backendBase}/logs`, { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - source: sliceParams.source, - destination: sliceParams.destination || undefined, - tileset: sliceParams.tileset || undefined, - min_zoom: Number(sliceParams.min_zoom), - max_zoom: Number(sliceParams.max_zoom), - tile_format: sliceParams.tile_format, - scheme: sliceParams.scheme, - source_format: sliceParams.source_format, - }), - }) - .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(j.detail || r.status)))) - .then((res) => { - setSliceStatus("ok"); - sendFrontLog(`tiles sliced to ${res.tiles_dir}`, "info"); - refreshTilesets().catch(() => {}); - if (res.tileset) setActiveTileset(res.tileset); - if (res.tileset) activateTileset(res.tileset).catch(() => {}); + body: JSON.stringify({ message, level, source: "frontend" }), + }).catch((err) => console.error("log push failed", err)); + }; + + useEffect(() => { + fetch(`${backendBase}/config`, { cache: "no-store" }) + .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`status ${r.status}`)))) + .then((cfg) => { + setConfig(cfg); + return cfg; }) .catch((err) => { - setSliceStatus("error"); - sendFrontLog(`tile slice error: ${err}`, "error"); + console.error("Config error", err); + sendFrontLog(`config fetch failed: ${err}`, "error"); + setStatus("config-error"); }); - }, [activateTileset, refreshTilesets, sendFrontLog, sliceParams]); - - const handleSliceReset = useCallback(() => { - setSliceParams(initialSliceParams); - setSelectedFileName(""); }, []); - const { mapContainerRef } = useVectorMap({ - mapMode, - vectorMetaUrl, - vectorTileUrl, - positions, - lastPoint, - onLog: sendFrontLog, - }); + const refreshTilesets = async () => { + const url = config?.tilesets_url ? `${backendBase}${config.tilesets_url}` : `${backendBase}/tilesets`; + const res = await fetch(url, { cache: "no-store" }); + const data = await res.json(); + if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); + setTilesets(data.tilesets || []); + setActiveTileset(data.active || ""); + }; + + useEffect(() => { + if (!config) return; + refreshTilesets().catch((err) => sendFrontLog(`tilesets refresh failed: ${err}`, "warn")); + }, [config]); + + const activateTileset = async (name: string) => { + const url = config?.tilesets_activate_url ? `${backendBase}${config.tilesets_activate_url}` : `${backendBase}/tilesets/activate`; + const res = await fetch(url, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ name }), + }); + const data = await res.json(); + if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); + setActiveTileset(data.active || name); + sendFrontLog(`tileset activated: ${data.active || name}`, "info"); + }; + + const createTileset = async (name: string) => { + const res = await fetch(`${backendBase}/tilesets`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ name }), + }); + const data = await res.json(); + if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); + await refreshTilesets(); + setSliceParams((p) => ({ ...p, tileset: data.name || name })); + sendFrontLog(`tileset created: ${data.name || name}`, "info"); + }; + + useEffect(() => { + if (!config) return; + const base = backendBase.replace(/\/+$/, ""); + const wsUrl = `${base}${config.ws_url}`.replace(/^http/, "ws"); + setStatus("connecting"); + const socket = new WebSocket(wsUrl); + wsRef.current = socket; + + socket.onmessage = (event) => { + try { + const msg: IncomingMessage = JSON.parse(event.data); + if (msg.type === "fix") { + const fix = msg as FixMessage; + setTrack((prev) => { + const next = [...prev, { lat: fix.lat, lon: fix.lon, timestamp: fix.timestamp, fresh: fix.fresh }]; + return next.slice(-500); + }); + setStatus(fix.fresh ? "ok" : "stale"); + } else { + setStatus((msg as StatusMessage).status); + } + } catch (err) { + console.error("WS parse error", err); + sendFrontLog(`ws parse error: ${err}`, "error"); + } + }; + + socket.onclose = () => { + setStatus("disconnected"); + sendFrontLog("ws disconnected", "warn"); + }; + socket.onerror = () => { + setStatus("ws-error"); + sendFrontLog("ws error", "error"); + }; + + return () => socket.close(); + }, [config]); + + const lastPoint = track.length ? track[track.length - 1] : null; + const positions = useMemo( + () => track.map((p) => [p.lat, p.lon]) as LatLngExpression[], + [track], + ); + + const tileUrl = + config && + `${backendBase.replace(/\/+$/, "")}${ + sliceParams.scheme === "tms" + ? config.tiles_url_tms || "/tiles/tms/{z}/{x}/{y}.png" + : config.tiles_url || "/tiles/{z}/{x}/{y}.png" + }`; + + const vectorTileUrl = + config && `${backendBase.replace(/\/+$/, "")}${config.vector_tiles_url || "/tiles/vector/{z}/{x}/{y}.pbf"}`; + + const vectorMetaUrl = + config && `${backendBase.replace(/\/+$/, "")}${config.vector_metadata_url || "/tiles/vector/metadata"}`; + + const activateVectorMbtiles = async (path: string) => { + const res = await fetch(`${backendBase}/tiles/vector/activate`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ path }), + }); + const data = await res.json(); + if (!res.ok) throw new Error(data?.detail || `status ${res.status}`); + sendFrontLog(`vector mbtiles activated: ${path}`, "info"); + setMapMode("vector"); + }; + + useEffect(() => { + if (mapMode !== "vector") return; + if (!maplibreContainerRef.current) return; + if (!vectorMetaUrl || !vectorTileUrl) return; + + let canceled = false; + (async () => { + const metaRes = await fetch(vectorMetaUrl, { cache: "no-store" }); + if (!metaRes.ok) return; + const meta = await metaRes.json(); + const vectorLayersRaw = meta.vector_layers || meta["json"] || null; + let sourceLayers: string[] = []; + try { + const parsed = typeof vectorLayersRaw === "string" ? JSON.parse(vectorLayersRaw) : vectorLayersRaw; + const layers = parsed?.vector_layers ?? parsed?.layers ?? parsed ?? []; + if (Array.isArray(layers)) { + sourceLayers = layers.map((l: any) => l.id).filter(Boolean); + } + } catch { + sourceLayers = []; + } + + const { default: maplibregl } = await import("maplibre-gl"); + if (canceled) return; + + if (maplibreRef.current) { + try { + maplibreRef.current.remove(); + } catch {} + maplibreRef.current = null; + } + + const style: any = { + version: 8, + sources: { + osm: { + type: "vector", + tiles: [vectorTileUrl], + minzoom: Number(meta.minzoom ?? 0), + maxzoom: Number(meta.maxzoom ?? 14), + }, + track: { + type: "geojson", + data: { type: "FeatureCollection", features: [] }, + }, + }, + layers: [ + { id: "bg", type: "background", paint: { "background-color": "#050816" } }, + ], + glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", + }; + + for (const id of sourceLayers) { + style.layers.push({ + id: `fill-${id}`, + type: "fill", + source: "osm", + "source-layer": id, + filter: ["==", ["geometry-type"], "Polygon"], + paint: { "fill-color": "#1f2937", "fill-opacity": 0.35 }, + }); + style.layers.push({ + id: `linepoly-${id}`, + type: "line", + source: "osm", + "source-layer": id, + filter: ["==", ["geometry-type"], "Polygon"], + paint: { "line-color": "#334155", "line-width": 1 }, + }); + style.layers.push({ + id: `line-${id}`, + type: "line", + source: "osm", + "source-layer": id, + filter: ["==", ["geometry-type"], "LineString"], + paint: { "line-color": "#475569", "line-width": 1.2 }, + }); + style.layers.push({ + id: `point-${id}`, + type: "circle", + source: "osm", + "source-layer": id, + filter: ["==", ["geometry-type"], "Point"], + paint: { "circle-radius": 2, "circle-color": "#94a3b8", "circle-opacity": 0.8 }, + }); + } + + style.layers.push( + { + id: "track-line", + type: "line", + source: "track", + paint: { "line-color": "#7dd3fc", "line-width": 4, "line-opacity": 0.9 }, + }, + { + id: "track-point", + type: "circle", + source: "track", + paint: { "circle-radius": 6, "circle-color": "#a78bfa", "circle-stroke-color": "#ffffff", "circle-stroke-width": 1 }, + }, + ); + + const map = new maplibregl.Map({ + container: maplibreContainerRef.current!, + style, + center: [37.618423, 55.751244], + zoom: 11, + }); + map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), "top-right"); + + map.on("load", () => { + const bounds = meta.bounds; + if (typeof bounds === "string") { + const parts = bounds.split(",").map((p: string) => Number(p.trim())); + if (parts.length === 4 && parts.every((n: number) => Number.isFinite(n))) { + map.fitBounds( + [ + [parts[0], parts[1]], + [parts[2], parts[3]], + ], + { padding: 30, duration: 0 }, + ); + } + } + }); + + maplibreRef.current = map; + })().catch((err) => { + sendFrontLog(`maplibre init error: ${err}`, "error"); + }); + + return () => { + canceled = true; + }; + }, [mapMode, vectorMetaUrl, vectorTileUrl]); + + useEffect(() => { + if (mapMode !== "vector") return; + const map = maplibreRef.current; + if (!map) return; + const geojson = { + type: "FeatureCollection", + features: [ + positions.length + ? { type: "Feature", geometry: { type: "LineString", coordinates: positions.map((p: any) => [p[1], p[0]]) } } + : null, + lastPoint ? { type: "Feature", geometry: { type: "Point", coordinates: [lastPoint.lon, lastPoint.lat] } } : null, + ].filter(Boolean), + }; + try { + const src = map.getSource("track"); + if (src && src.setData) { + src.setData(geojson); + } + } catch {} + }, [mapMode, positions, lastPoint]); return (
-
- -
+
+
+
+
+
GNSS Offline Map
+
FastAPI · WebSocket · Tauri
+
+
+
+ Status + {status} +
+
-
-
- +
+
+
+
+
GNSS source
+
{config?.gnss_source ?? "—"}
+
+
+
Tileset
+
+
+ + +
+
+
+
+
Last fix
+
{formatTime(lastPoint?.timestamp)}
+
+
+
Track points
+
{track.length}
+
+
+
+ +
+
+ + +
+ {mapMode === "raster" ? ( + tileUrl ? ( + + + {positions.length > 0 && ( + <> + + + + )} + + + ) : ( +
Нет конфигурации тайлов
+ ) + ) : ( +
+ )} +
+ +
+
+
+
Нарезка тайлов
+
Запускает gdal2tiles на бэкенде
+
+
+ {sliceStatus} +
+
+
{ + e.preventDefault(); + setSliceStatus("running"); + fetch(`${backendBase}/tiles/slice`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + source: sliceParams.source, + destination: sliceParams.destination || undefined, + tileset: sliceParams.tileset || undefined, + min_zoom: Number(sliceParams.min_zoom), + max_zoom: Number(sliceParams.max_zoom), + tile_format: sliceParams.tile_format, + scheme: sliceParams.scheme, + source_format: sliceParams.source_format, + }), + }) + .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(j.detail || r.status)))) + .then((res) => { + setSliceStatus("ok"); + sendFrontLog(`tiles sliced to ${res.tiles_dir}`, "info"); + refreshTilesets().catch(() => {}); + if (res.tileset) setActiveTileset(res.tileset); + if (res.tileset) activateTileset(res.tileset).catch(() => {}); + }) + .catch((err) => { + setSliceStatus("error"); + sendFrontLog(`tile slice error: ${err}`, "error"); + }); + }} + > + + + + + + + + +
+ + +
+
- -
- - -
- - setSettingsOpen(false)} - config={config} - status={status} - theme={theme} - onToggleTheme={() => setTheme((t) => (t === "dark" ? "light" : "dark"))} - tilesets={tilesets} - activeTileset={activeTileset} - onActivateTileset={(name) => activateTileset(name).catch((err) => sendFrontLog(`${err}`, "error"))} - onRefreshTilesets={() => refreshTilesets().catch((err) => sendFrontLog(`${err}`, "warn"))} - onCreateTileset={(name) => createTileset(name).catch((err) => sendFrontLog(`tileset create failed: ${err}`, "error"))} - sliceParams={sliceParams} - onSliceParamsChange={setSliceParams} - sliceStatus={sliceStatus} - onSliceSubmit={handleSliceSubmit} - onSliceReset={handleSliceReset} - selectedFileName={selectedFileName} - onTriggerFileSelect={triggerFileSelect} - onFileSelected={handleFileSelected} - fileInputRef={fileInputRef} - />
); } diff --git a/frontend/src/components/MapPanel.tsx b/frontend/src/components/MapPanel.tsx deleted file mode 100644 index cecd936..0000000 --- a/frontend/src/components/MapPanel.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { MapContainer, Marker, Polyline, TileLayer, useMap } from "react-leaflet"; -import L from "leaflet"; -import type { MapMode, TrackPoint, TrackPositions } from "../types"; -import { useEffect } from "react"; -import type { MutableRefObject, RefObject } from "react"; - -const defaultCenter: [number, number] = [55.751244, 37.618423]; - -const markerIcon = new L.Icon({ - iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png", - shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png", - iconSize: [25, 41], - iconAnchor: [12, 41], -}); - -type MapPanelProps = { - mapMode: MapMode; - tileUrl?: string | null; - positions: TrackPositions; - lastPoint: TrackPoint | null; - sliceScheme: "xyz" | "tms"; - vectorContainerRef: RefObject | MutableRefObject; -}; - -const FlyTo = ({ point }: { point: TrackPoint | null }) => { - const map = useMap(); - useEffect(() => { - if (point) { - map.flyTo([point.lat, point.lon], Math.max(map.getZoom(), 14), { duration: 0.6 }); - } - }, [point, map]); - return null; -}; - -export const MapPanel = ({ mapMode, tileUrl, positions, lastPoint, sliceScheme, vectorContainerRef }: MapPanelProps) => { - if (mapMode === "raster") { - return tileUrl ? ( - - - {positions.length > 0 && ( - <> - - - - )} - - - ) : ( -
Нет конфигурации тайлов
- ); - } - - return
; -}; diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx deleted file mode 100644 index 24852df..0000000 --- a/frontend/src/components/SettingsPanel.tsx +++ /dev/null @@ -1,278 +0,0 @@ -import type { MutableRefObject, RefObject } from "react"; -import { FormEvent } from "react"; -import type { AppConfig, SliceParams } from "../types"; - -type SettingsPanelProps = { - open: boolean; - onClose: () => void; - config: AppConfig | null; - status: string; - theme: "dark" | "light"; - onToggleTheme: () => void; - tilesets: string[]; - activeTileset: string; - onActivateTileset: (name: string) => void; - onRefreshTilesets: () => void; - onCreateTileset: (name: string) => void; - sliceParams: SliceParams; - onSliceParamsChange: (params: SliceParams) => void; - sliceStatus: string; - onSliceSubmit: (event?: FormEvent) => void; - onSliceReset: () => void; - selectedFileName: string; - onTriggerFileSelect: () => void; - onFileSelected: (file: File | null | undefined) => void; - fileInputRef: RefObject | MutableRefObject; -}; - -export const SettingsPanel = ({ - open, - onClose, - config, - status, - theme, - onToggleTheme, - tilesets, - activeTileset, - onActivateTileset, - onRefreshTilesets, - onCreateTileset, - sliceParams, - onSliceParamsChange, - sliceStatus, - onSliceSubmit, - onSliceReset, - selectedFileName, - onTriggerFileSelect, - onFileSelected, - fileInputRef, -}: SettingsPanelProps) => ( - <> -
- - -); diff --git a/frontend/src/components/TrackSummary.tsx b/frontend/src/components/TrackSummary.tsx deleted file mode 100644 index a2f1e85..0000000 --- a/frontend/src/components/TrackSummary.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { formatTime } from "../utils/time"; -import type { TrackPoint } from "../types"; - -type TrackSummaryProps = { - lastPoint: TrackPoint | null; - pointsCount: number; - compact?: boolean; -}; - -export const TrackSummary = ({ lastPoint, pointsCount, compact }: TrackSummaryProps) => ( -
-
- Последняя фиксация - {formatTime(lastPoint?.timestamp)} -
-
- Точек трека - {pointsCount} -
-
- Статус - ок -
-
-); diff --git a/frontend/src/hooks/useVectorMap.ts b/frontend/src/hooks/useVectorMap.ts deleted file mode 100644 index 45df673..0000000 --- a/frontend/src/hooks/useVectorMap.ts +++ /dev/null @@ -1,202 +0,0 @@ -import { useEffect, useRef } from "react"; -import type { MapMode, TrackPoint, TrackPositions } from "../types"; - -type UseVectorMapOptions = { - mapMode: MapMode; - vectorTileUrl?: string | null; - vectorMetaUrl?: string | null; - positions: TrackPositions; - lastPoint: TrackPoint | null; - onLog?: (message: string, level?: "info" | "warn" | "error") => void; -}; - -export const useVectorMap = ({ - mapMode, - vectorMetaUrl, - vectorTileUrl, - positions, - lastPoint, - onLog, -}: UseVectorMapOptions) => { - const mapContainerRef = useRef(null); - const mapRef = useRef(null); - - useEffect(() => { - if (mapMode !== "vector" && mapRef.current) { - try { - mapRef.current.remove(); - } catch { - // ignore - } finally { - mapRef.current = null; - } - } - }, [mapMode]); - - useEffect(() => { - if (mapMode !== "vector") return; - if (!mapContainerRef.current) return; - if (!vectorMetaUrl || !vectorTileUrl) return; - - let canceled = false; - (async () => { - const metaRes = await fetch(vectorMetaUrl, { cache: "no-store" }); - if (!metaRes.ok) return; - const meta = await metaRes.json(); - const vectorLayersRaw = meta.vector_layers || meta["json"] || null; - let sourceLayers: string[] = []; - try { - const parsed = typeof vectorLayersRaw === "string" ? JSON.parse(vectorLayersRaw) : vectorLayersRaw; - const layers = parsed?.vector_layers ?? parsed?.layers ?? parsed ?? []; - if (Array.isArray(layers)) { - sourceLayers = layers.map((l: any) => l.id).filter(Boolean); - } - } catch { - sourceLayers = []; - } - - const { default: maplibregl } = await import("maplibre-gl"); - if (canceled) return; - - if (mapRef.current) { - try { - mapRef.current.remove(); - } catch { - // ignore - } - mapRef.current = null; - } - - const style: any = { - version: 8, - sources: { - osm: { - type: "vector", - tiles: [vectorTileUrl], - minzoom: Number(meta.minzoom ?? 0), - maxzoom: Number(meta.maxzoom ?? 14), - }, - track: { - type: "geojson", - data: { type: "FeatureCollection", features: [] }, - }, - }, - layers: [{ id: "bg", type: "background", paint: { "background-color": "#050816" } }], - glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", - }; - - for (const id of sourceLayers) { - style.layers.push( - { - id: `fill-${id}`, - type: "fill", - source: "osm", - "source-layer": id, - filter: ["==", ["geometry-type"], "Polygon"], - paint: { "fill-color": "#1f2937", "fill-opacity": 0.35 }, - }, - { - id: `linepoly-${id}`, - type: "line", - source: "osm", - "source-layer": id, - filter: ["==", ["geometry-type"], "Polygon"], - paint: { "line-color": "#334155", "line-width": 1 }, - }, - { - id: `line-${id}`, - type: "line", - source: "osm", - "source-layer": id, - filter: ["==", ["geometry-type"], "LineString"], - paint: { "line-color": "#475569", "line-width": 1.2 }, - }, - { - id: `point-${id}`, - type: "circle", - source: "osm", - "source-layer": id, - filter: ["==", ["geometry-type"], "Point"], - paint: { "circle-radius": 2, "circle-color": "#94a3b8", "circle-opacity": 0.8 }, - }, - ); - } - - style.layers.push( - { - id: "track-line", - type: "line", - source: "track", - paint: { "line-color": "#7dd3fc", "line-width": 4, "line-opacity": 0.9 }, - }, - { - id: "track-point", - type: "circle", - source: "track", - paint: { - "circle-radius": 6, - "circle-color": "#a78bfa", - "circle-stroke-color": "#ffffff", - "circle-stroke-width": 1, - }, - }, - ); - - const map = new maplibregl.Map({ - container: mapContainerRef.current!, - style, - center: [37.618423, 55.751244], - zoom: 11, - }); - - map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), "top-right"); - - map.on("load", () => { - const bounds = meta.bounds; - if (typeof bounds === "string") { - const parts = bounds.split(",").map((p: string) => Number(p.trim())); - if (parts.length === 4 && parts.every((n: number) => Number.isFinite(n))) { - map.fitBounds( - [ - [parts[0], parts[1]], - [parts[2], parts[3]], - ], - { padding: 30, duration: 0 }, - ); - } - } - }); - - mapRef.current = map; - })().catch((err) => onLog?.(`maplibre init error: ${err}`, "error")); - - return () => { - canceled = true; - }; - }, [mapMode, vectorMetaUrl, vectorTileUrl, onLog]); - - useEffect(() => { - if (mapMode !== "vector") return; - const map = mapRef.current; - if (!map) return; - const geojson = { - type: "FeatureCollection", - features: [ - positions.length - ? { type: "Feature", geometry: { type: "LineString", coordinates: positions.map((p: any) => [p[1], p[0]]) } } - : null, - lastPoint ? { type: "Feature", geometry: { type: "Point", coordinates: [lastPoint.lon, lastPoint.lat] } } : null, - ].filter(Boolean), - }; - try { - const src = map.getSource("track"); - if (src && src.setData) { - src.setData(geojson); - } - } catch (err) { - onLog?.(`maplibre track update error: ${err}`, "warn"); - } - }, [mapMode, positions, lastPoint, onLog]); - - return { mapContainerRef }; -}; diff --git a/frontend/src/types.ts b/frontend/src/types.ts deleted file mode 100644 index 9d1bcc2..0000000 --- a/frontend/src/types.ts +++ /dev/null @@ -1,54 +0,0 @@ -import type { LatLngExpression } from "leaflet"; - -export type MapMode = "raster" | "vector"; - -export type FixMessage = { - type: "fix"; - lat: number; - lon: number; - alt: number | null; - timestamp: string; - source: string; - fresh: boolean; - detail?: string; -}; - -export type StatusMessage = { - type: "status"; - status: string; - timestamp: string; - detail?: string; -}; - -export type IncomingMessage = FixMessage | StatusMessage; - -export type AppConfig = { - tiles_url: string; - tiles_url_tms?: string; - vector_tiles_url?: string; - vector_metadata_url?: string; - tilesets_url?: string; - tilesets_activate_url?: string; - ws_url: string; - gnss_source: string; -}; - -export type TrackPoint = { - lat: number; - lon: number; - timestamp: string; - fresh: boolean; -}; - -export type SliceParams = { - source: string; - destination: string; - tileset: string; - min_zoom: number; - max_zoom: number; - tile_format: string; - scheme: "xyz" | "tms"; - source_format: "geotiff" | "mbtiles" | "tms" | "xyz"; -}; - -export type TrackPositions = LatLngExpression[]; diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts deleted file mode 100644 index 4b56e1e..0000000 --- a/frontend/src/utils/theme.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const getInitialTheme = (): "dark" | "light" => { - if (typeof window === "undefined") return "dark"; - try { - const stored = localStorage.getItem("theme"); - if (stored === "light" || stored === "dark") return stored; - } catch { - // ignore storage errors - } - return window.matchMedia?.("(prefers-color-scheme: light)")?.matches ? "light" : "dark"; -}; diff --git a/frontend/src/utils/time.ts b/frontend/src/utils/time.ts deleted file mode 100644 index 59799ac..0000000 --- a/frontend/src/utils/time.ts +++ /dev/null @@ -1,8 +0,0 @@ -export function formatTime(ts?: string) { - if (!ts) return "—"; - try { - return new Date(ts).toLocaleTimeString(); - } catch { - return ts; - } -}