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: Auto-checks GET /status/mqtt when the page loads, renders icon + status text, and supports manual recheck.
  • KISS Status: Auto-checks GET /status/kiss when the page loads, renders icon + status text, and supports manual recheck.
  • 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

Settings ​

File: web/src/pages/settings.ts

Admin-only runtime configuration editor for selected main.config.json keys (phase 1):

  • server_id
  • server_mode
  • server_kiss_url_base
  • server_kiss_credentials_username
  • server_kiss_credentials_password
  • server_devices_cache_sync_interval
  • server_perf_memory_threshold
  • server_debug_snapshot_interval
  • server_debug_log_dir
  • server_debug_max_files
  • server_ntfy_enabled
  • server_log_verbosity

Behavior notes:

  • Opened from the navbar gear icon next to logout.
  • Loads values from GET /settings.
  • Saves via PATCH /settings.
  • Shows a warning before save: service restart will regenerate secrets and invalidate JWT sessions, so users must log in again.
  • Save success reminder includes restart/re-login guidance.

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

Sensors ​

File: web/src/pages/sensors.ts

Environmental sensor monitoring dashboard (admin only). Only visible when the "sensors" feature is enabled in the server configuration.

Out-of-Range Alerts ​

  • Fetches from GET /sensors/alerts
  • Displays the 10 most recent sensor readings that fall outside their configured ranges (humidity_range / temperature_range on each beacon)
  • Table columns: Beacon Name, Sensor MAC, Type, Value, Expected Range, Last Occurred
  • Rows highlighted in red for visual emphasis

Sensor Charts ​

  • Fetches from GET /sensors/history (past 12 hours)
  • One Chart.js line chart per sensor type (Temperature, Humidity, Battery)
  • Each beacon is a separate line on the chart, labeled by beacon name
  • X-axis: time, Y-axis: reading value with unit

External Grafana Integration ​

  • SafeCall exposes a Grafana JSON datasource API (/grafana/*) so Grafana can query sensor data directly.
  • For setup instructions, see Grafana Setup.