Real-time fleet tracking dashboard nad veřejným API GPS Dozor.
Live demo: https://gps-dozor-production.up.railway.app/
Appka je určená dispečerům a fleet managerům, kteří potřebují mít přehled o celé flotile na jednom místě. Dispečer vidí živé pozice všech vozidel na mapě, pravým klikem na cílovou adresu najde nejbližší vozidlo po silnici, jedním klikem otevře navigaci v Google Maps a vyšle ho. Má k dispozici historii jízd, senzorová data (otáčky, spotřeba, rychlost), kilometrový kalendář, eco-driving hodnocení řidičů a export dat do PDF/CSV/JSON.
| # | GPS Dozor endpoint | Účel |
|---|---|---|
| 1 | GET /groups |
Organizační skupiny vozidel |
| 2 | GET /vehicles/{group} |
Seznam vozidel (pozice, rychlost, baterie, tachometr) |
| 3 | GET /vehicle/{code} |
Detail konkrétního vozidla |
| 4 | GET /vehicle/{code}/trips |
Jízdy za zvolený den (trasa, vzdálenost, řidič, spotřeba) |
| 5 | GET /vehicle/{code}/sensors |
Senzorová data (Speed, Rpm, FuelConsumedTotal) |
| 6 | GET /vehicle/{code}/history |
Historie pozic pro vykreslení trasy |
| 7 | GET /vehicles/history |
Hromadná historie pro trail vizualizaci celé flotily |
Další veřejná API: Mapbox GL JS (mapový podklad, 4 styly, 3D budovy a terén), Mapbox Directions Matrix API (silniční vzdálenosti ke všem vozidlům), Mapbox Directions API (geometrie trasy k nejbližšímu vozidlu), Mapbox Geocoding API (reverzní geokódování pozic na adresy), Mapbox Traffic API (dopravní vrstva v reálném čase).
- Živá mapa — markery vozidel s trail historií, dopravní vrstva, 3D terén, 4 mapové styly
- Grafy senzorů — Chart.js vizualizace rychlosti, otáček a spotřeby v čase
- Kilometrový kalendář — heat-mapa najetých km po dnech (týden/měsíc), s barevnou intenzitou a souhrny
- Eco-driving skóre — hodnocení řidičů A–F (rychlost, překročení, spotřeba), best/worst žebříčky
- Filtry — vyhledávání vozidel, filtr poboček, řazení podle libovolného sloupce, přepínání datových rozsahů
- Export — PDF (s logem firmy a plnou češtinou), CSV (BOM pro Excel), JSON — z kalendáře i eco-drivingu
| Vrstva | Technologie |
|---|---|
| Frontend | Vue 3 (Composition API, <script setup>), Pinia, Vite, Tailwind CSS |
| Mapy | Mapbox GL JS — markery, trasy, trail history, traffic, 3D terén |
| Grafy | Chart.js + vue-chartjs — senzorová data |
| Realtime | SignalR WebSocket — push notifikace změn pozic |
| Backend | .NET 8 Minimal API — BFF proxy, in-memory cache, background polling |
| Export | jsPDF + jspdf-autotable — PDF s českými znaky (Roboto font) |
Celý vývoj probíhal v Claude Code (CLI) s modelem Claude Opus 4. Workflow:
- Nastudování GPS Dozor API dokumentace, návrh architektury (BFF pattern kvůli skrytí credentials)
- Scaffolding backendu (.NET 8) a frontendu (Vue 3 + Vite) přes Claude Code
- Iterativní vývoj feature po feature — mapa, markery, detaily, jízdy, senzory, filtry, trail history, kalendář, eco-driving, export
- Průběžné testování — každá změna se ověřila buildem, Claude Code automaticky kontroloval kompilaci
- SignalR reconnect — WebSocket se občas odpojil při delší neaktivitě. Řešení: automatický reconnect s exponential backoff na backendu.
- Race conditions při překlikávání — Rychlé přepínání vozidel způsobovalo záměnu dat. Řešení: generation counter na každý request, odpovědi ze starších generací se zahazují.
- PDF české znaky — jsPDF defaultní Helvetica nepodporuje diakritiku. Řešení: runtime načtení Roboto TTF fontů (z pdfmake CDN, kompatibilních s jsPDF parserem) a registrace přes
addFileToVFS+addFont. - SVG logo v PDF — jsPDF nepodporuje SVG v
addImage. Řešení: rasterizace SVG → PNG přes offscreen canvas před vložením. - Request deduplication — Více komponent volalo stejný endpoint současně. Řešení: Axios wrapper sdílí in-flight requesty, odejde jeden HTTP požadavek.
- Geofence notifikace — definovat zóny na mapě, upozornění při vjezdu/výjezdu vozidla
- Dashboard s KPI — celková denní vzdálenost flotily, průměrná spotřeba, vytíženost
- ETA výpočet — odhadovaný čas příjezdu nejbližšího vozidla z Directions API
- Multi-tenant auth — přihlášení dispečerů s rolemi a oprávněními
- Mobilní optimalizace — responsive layout pro tablety v kabinách dispečinku