DNA //evolutions

Simplified Angular Demo Client (TypeScript / Angular)

This Angular demo application cliennt is a reference UI for JOpt.TourOptimizer. It demonstrates an end-to-end flow:

  • load or select a scenario,
  • start an optimization via REST,
  • visualize nodes/resources and routes on a map,
  • inspect the latest result.

Important: This is only an end-to-end demo and intentionally exposes only a small subset of JOpt’s overall feature set.
JOpt.TourOptimizer supports many advanced constraints and expert extensions that are not represented in this UI.
Nevertheless, this demo is a strong template for developers: It shows the integration patterns you can reuse for your own product.

How to use/play

The live demo and stackblitz utilizes our open optimization endpoint:

JOpt.TourOptimizer Demo UI

What the demo covers

  • Scenario selection (examples)
  • Optimization run trigger ("Start Optimization")
  • Result access ("Show latest result")
  • Map visualization (nodes/resources and resulting route polylines)
  • Basic parameter tuning (weights/parameters in the UI)

What the demo does not cover

The demo is not a complete UI for the platform. It does not expose the full breadth of features such as:

  • Rich constraint combinations (skills with levels, territories/zone governance, relations, PND variants, etc.)
  • Performance engineering features (AutoFilter, performance mode, clustering strategies)
  • Deep customization layers (OpenAssessor / custom rules)
  • Full reporting, auditing, and diagnostics workflows

For full feature breadth, use the Documentation Hub feature List and the example tracks (Base / Advanced / Expert).

Backend requirement (mandatory)

The Angular app is a client. You must provide a TourOptimizer REST endpoint.

If you are running the Angular client inside Docker (or any container), remember:

  • Use http://host.docker.internal:8081 to reach a TourOptimizer server running on your host
  • Do not use http://localhost:8081 from inside the container
Please use a self-hosted enpoint for testing. If you are overutilizing our open endpoint, we might block your ip.

Architecture (high level)

  1. UI builds a request payload (snapshot + extension settings)
  2. UI calls TourOptimizer REST endpoints (OpenAPI/Swagger contract)
  3. UI receives progress / status (depending on endpoint usage)
  4. UI renders results and KPIs and draws routes on the map

A key benefit: the client is OpenAPI-driven, enabling typed request/response models and stable integration.

OpenAPI client generation (TypeScript)

The repo uses OpenAPI tooling to generate TypeScript/Angular models from the server’s Swagger/OpenAPI schema.

Referenced tooling:

Using this repo as a template

Recommended path for developers:

  1. Replace example scenarios with your domain model (orders/jobs/resources/depots).
  2. Add auth/tenant handling (if required).
  3. Extend UI controls to expose the constraints you actually need.
  4. Keep the OpenAPI generation pipeline to stay aligned with backend schema updates.

Next steps

License

AutoFilter