kianiadee 3d420fa82e feat: FleetNow merged live+trips map SPA (nginx/Coolify)

Single-file MapLibre SPA merging live vehicle positions and historical
trips into one console. Reads the existing dashboard read-API
(fleetapi.rahamafresh.com); served as a static nginx image for Coolify.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-05 21:56:01 +03:00

2.6 KiB

Raw Blame History

FleetNow

A single-file map console that merges live vehicle positions and historical trips into one view for the Fireside Communications / Tracksolid fleet.

Land on the live fleet (cost-centre-coloured pins, heading arrows, hover popups with reverse-geocoded address).
Pick a vehicle (click its dot → Show trips, or the plate dropdown) or apply cost centre + time period → the map switches to seq-coloured trip routes with start/end markers and a click-to-animate replay.
The ● Live pill returns to the live snapshot.

Live: https://fleetnow.rahamafresh.com

Architecture

The whole app is one self-contained index.html (inline CSS + JS; MapLibre GL JS loaded from a CDN). It has no build step and no local assets. It reads from the existing dashboard read-API — it does not talk to the database directly.

index.html      → the entire SPA
Dockerfile      → bakes index.html into an nginx:alpine image (port 80)
nginx.conf      → static serve + /healthz + no-cache on index.html

Backend it depends on

const API_BASE = 'https://fleetapi.rahamafresh.com'; (top of the <script> in index.html). That service (dashboard_api_rev.py in the tracksolid repo) exposes:

Endpoint	Use
`GET /webhook/live-positions`	live snapshot `{summary, geojson}`
`GET /webhook/live-positions/track?vehicle_number=&hours=`	1 h trail
`GET /webhook/fleet-dashboard`	filter options (plates, cost centres)
`POST /webhook/fleet-dashboard`	trips for a selection `{summary, geojson}`

CORS: the API must allow the https://fleetnow.rahamafresh.com origin (DASHBOARD_CORS_ORIGINS). It is in the code default; make sure the deployed dashboard_api container's env includes it, then restart that container.

Deploy (Coolify, git-based)

In Coolify, create a new Application from this git repo (https://repo.rahamafresh.com/kianiadee/fleetnow.git), branch main, build pack Dockerfile.
Set the port to 80.
Add the domain fleetnow.rahamafresh.com (HTTPS / Let's Encrypt). Coolify wires Traefik on the coolify network automatically.
Point DNS fleetnow.rahamafresh.com → the VPS (31.97.44.246) if not already.
Deploy. Every push to main redeploys; index.html is served no-cache so changes appear immediately.

Local preview

docker build -t fleetnow . && docker run --rm -p 8080:80 fleetnow
# open http://localhost:8080

Loading from localhost will be CORS-blocked by the live API unless that origin is allow-listed. For pure UI work, run a same-origin proxy that forwards /webhook/* to fleetapi.rahamafresh.com.