SafeCall Docs

Appearance

Pages ​

Each page in the web frontend is a TypeScript module that exports a single function (e.g. dashboard_page()). Pages use HTML templates from the templates/ directory and interact with the server API via fetch with JWT auth.

Login ​

File: web/src/pages/login.ts

  • Renders the login form with hero section
  • Validates credentials against POST /login
  • Stores JWT in localStorage on success
  • Redirects to dashboard

Dashboard ​

File: web/src/pages/dashboard.ts

The main page after login. Provides:

  • System Logs: Fetches from GET /logs and displays recent entries
  • Events: Fetches from GET /events and displays beacon events (panic, SOS)
  • MQTT Status: Connection status via GET /status/mqtt
  • KISS Status: KISS service status via GET /status/kiss
  • Navigation QR Codes: Generates QR codes for mobile app connection (location + token)
  • Event Export: CSV export via GET /events/export
  • Menu Navigation: Routes to all other pages

Beacons ​

File: web/src/pages/beacons.ts

CRUD management for BLE beacons:

  • List all beacons with search/filter
  • Create new beacons (MAC, name, type, location)
  • Edit beacon properties
  • Delete beacons
  • View beacon info and tracking intervals

Gateways ​

File: web/src/pages/gateways.ts

CRUD management for BLE gateways:

  • List all gateways
  • Create new gateways (MAC, name, IP, location)
  • Edit gateway properties
  • Delete gateways

Users ​

File: web/src/pages/users.ts

User account management (admin only):

  • List all users
  • Create new users
  • Change passwords
  • Delete users

Locations ​

File: web/src/pages/locations.ts

Location/building management:

  • List all locations
  • Create, edit, delete locations
  • Used as foreign keys by maps, beacons, gateways

Maps ​

File: web/src/pages/maps.ts

Floor map image management (admin only):

  • Upload map images with metadata (name, location)
  • Edit map metadata or replace images
  • Delete maps
  • Maps are referenced by zones and the navigation system

Zones ​

File: web/src/pages/zones.ts

Zone management and live tracking with tabbed interface:

Overview Tab ​

  • Tracking status (running/stopped, current algorithm)
  • Start/stop tracking controls
  • Algorithm selection

Track Tab ​

  • Select a beacon to track
  • Live position updates via WebSocket
  • Pixi.js canvas showing beacon position on map

Manage Maps Tab ​

  • Interactive zone editor using Pixi.js canvas
  • Draw, resize, and position zone rectangles on map images
  • Place and move gateway markers
  • Define zone connections (adjacency graph)

Debug Tab ​

  • Live WebSocket stream of RSSI data for a beacon
  • Shows raw signal strength from each gateway
  • Useful for debugging tracking accuracy

File: web/src/pages/navigation.ts

Navigation graph editor with tabbed interface:

Overview Tab ​

  • Floor listing and navigation token management

Manage Floors Tab ​

  • Interactive graph editor using Pixi.js
  • Tools: Select, Add Node, Connect Nodes, Ruler (distance measurement)
  • Add/move/delete nodes on floor maps
  • Connect nodes with weighted edges
  • Assign beacons to positions on the graph
  • Save graph to server via POST /floor/:id/graph

Manage Beacons Tab ​

  • Assign beacons to navigation floors
  • Configure POI (Point of Interest) beacons
  • Set static vs mobile beacon flags