Add PWA web app#2
Open
Spiruel wants to merge 2 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Introduces a new FindMyCat browser-based PWA served from the Traccar instance, including UI screens (login/home), map + drawer components, Traccar/Hologram API clients, offline caching via service worker, and deployment tooling/config updates.
Changes:
- Added a full static web app under
web-app/(screens, components, APIs, PWA manifest/service worker, styling). - Added local + production deployment support (nginx local proxy config, deploy script, Traccar volume mount).
- Updated Traccar server configuration to extend session lifetime for better web UX.
Reviewed changes
Copilot reviewed 27 out of 30 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| web-app/src/utils.js | Adds a small fetch wrapper with AbortController timeout. |
| web-app/src/store.js | Introduces a minimal reactive state store for the web app. |
| web-app/src/screens/login.js | Adds login screen rendering + async login handling. |
| web-app/src/screens/home.js | Adds main map + drawer screen orchestration, sockets, history, zones. |
| web-app/src/components/map.js | Adds MapLibre-based map wrapper (markers, geofences, history track, placement). |
| web-app/src/components/geofence-modal.js | Adds modal to create/edit zones and assign to devices. |
| web-app/src/components/drawer.js | Adds device/zones drawer UI + reverse-geocode enrichment and actions. |
| web-app/src/components/device-modal.js | Adds modal to create/edit devices with emoji picker. |
| web-app/src/app.js | Adds hash-based routing and startup session bootstrap. |
| web-app/src/api/traccar.js | Adds Traccar REST client + WebSocket client with reconnect. |
| web-app/src/api/hologram.js | Adds Hologram command client (lookup + send message). |
| web-app/src/api/geocode.js | Adds Nominatim reverse geocoding helper with cache/rate limiting. |
| web-app/service-worker.js | Adds offline caching strategy for app assets and some network-first routes. |
| web-app/nginx-local.conf | Adds local nginx config to serve /cat/ and proxy /api + /hologram. |
| web-app/manifest.json | Adds PWA manifest for installability and scoped start URL. |
| web-app/index.html | Adds app shell with MapLibre CDN and module entrypoint. |
| web-app/dev.sh | Adds simple local static dev server for UI-only testing. |
| web-app/css/app.css | Adds full dark-theme styling for screens, drawer, modals, toasts. |
| web-app/config.js | Adds runtime config file (currently committed) for host/keys/tiles. |
| web-app/config.example.js | Adds template config intended for copying into config.js. |
| web-app/PLAN.md | Adds extensive design/architecture/deployment plan documentation. |
| web-app/DEPLOY.md | Adds step-by-step deployment guide for production and local modes. |
| traccar.xml | Extends Traccar session timeout to 7 days. |
| docker-compose.webapp.yml | Adds local nginx container for web-app + proxying to traccar/hologram. |
| docker-compose.traccar.yml | Mounts web app into Traccar web root so it can serve /cat/. |
| deploy-webapp.sh | Adds rsync-based deployment script to push web assets to server. |
| README.md | Expands repo README with stack/deploy/local-dev instructions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+169
to
+176
| const reconnect = () => { | ||
| if (!closed && !unloading) { | ||
| timer = setTimeout(connect, 3000); | ||
| } | ||
| }; | ||
|
|
||
| ws.onclose = reconnect; | ||
| ws.onerror = reconnect; |
Comment on lines
+167
to
+169
| export function showTrack(positions) { | ||
| if (!_map || !positions?.length) return | ||
| const sorted = [...positions].sort((a, b) => new Date(a.fixTime) - new Date(b.fixTime)) |
Comment on lines
+1
to
+7
| window.FINDMYCAT_CONFIG = { | ||
| traccarHost: "", | ||
| hologramApiKey: "", | ||
| hologramOrgId: 0, | ||
| tileUrl: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", | ||
| tileAttribution: "© <a href='https://openstreetmap.org'>OpenStreetMap</a> contributors", | ||
| }; |
Comment on lines
+30
to
+40
| * Return the current state object. | ||
| * @returns {{ devices: Device[], positions: Position[] }} | ||
| */ | ||
| export function getState() { | ||
| return state; | ||
| } | ||
|
|
||
| /** | ||
| * Merge patch into state and notify all listeners. | ||
| * @param {Partial<{ devices: Device[], positions: Position[] }>} patch | ||
| */ |
Comment on lines
+6
to
+7
| const host = window.FINDMYCAT_CONFIG?.traccarHost; | ||
| const API = host ? "https://" + host + "/api" : "/api"; |
Comment on lines
+198
to
+203
| export function toggleMapStyle() { | ||
| isSatellite = !isSatellite | ||
| const tileUrl = window.FINDMYCAT_CONFIG?.tileUrl || DEFAULT_TILE_URL | ||
| _map?.getSource("raster-tiles")?.setTiles([isSatellite ? SAT_TILE_URL : tileUrl]) | ||
| return isSatellite | ||
| } |
Comment on lines
+230
to
+233
| export function updateZones(geofences, geofenceDevices, devices, callbacks) { | ||
| if (geofences !== undefined) lastGeofences = geofences | ||
| if (geofenceDevices !== undefined) lastGeofenceDevices = geofenceDevices | ||
| if (devices !== undefined && callbacks !== undefined) lastCallbacks = callbacks |
| return | ||
| } | ||
|
|
||
| const deviceById = new Map(lastDevices.map(d => [d.id, d])) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a Progressive Web App to the cloud repo, served at /cat/ by the existing Traccar instance. It is the path of least resistance in replicating iOS app functionality, and producing a front-end that works on all devices.
No changes to the EMQX or Nginx Proxy Manager configuration. The only changes to the existing stack are one added volume mount in docker-compose.traccar.yml (already present in main) and an extended session timeout in traccar.xml.
Additions:
Web app (web-app/)
Live tracking
Device management
Commands
Zones (geofences)
Location history
PWA / offline
UX
What is not implemented
Test plan