TOM-Client-Web

Web dashboard for TOM, developed with Vue 3 in Vite, frontend with naive-ui.

Project links

• Documentation: --
• Version info

Requirements

• Use yarn for package management.

Installation

• Run yarn install on the root directory to install dependencies
• Create the required credential files inside src/credential folder
  • Create a file src/credential/google_maps_credential.json with Google Maps credentials such as {"map_api_key": "KEY"}
    • Current Google Maps APIs used:
      • Places API
      • Directions API
      • Static Maps API

Application Execution

• Start the TOM-Server-Python to establish a socket and database connection
• Modify the config to the add IP address (i.e., WEBSOCKET_HOST_IP) of the python-server. Use 127.0.0.1 when both python-server and web-client are running on the same machine.
• Run yarn run dev to start the application

Development

Recommended IDE Setup

• VSCode

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Production: Type-Check, Compile and Minify for Deployment

yarn run build

Run Unit Tests with Vitest

yarn run test:unit

Lint with ESLint

yarn run lint