-
Notifications
You must be signed in to change notification settings - Fork 9
Frontend
The frontend uses Angular and TypeScript. Angular was chosen over other frameworks like React and Flutter due to it being the more opinionated framework.
- Angular: A TypeScript/JavaScript based web application platform
- TypeScript: A typed super set of JavaScript
- Angular Material Design: Angular pre-built UI components
- SASS: CSS pre-processor
The following libraries are utilized by Planscape frontend:
- Leaflet Geoman: An updated LeafletJS plugin for using interactive maps, drawing, and editing geometry layers. Mostly used for the drawing capabilities because Leaflet.Draw hasn't been updated for years.
- Leaflet: Open source JS library for building web mapping applications.
- Leaflet Sync: To sync the multiple maps in the explore map view.
- Turf JS: For geospatial calculations
- Shapefile JS: For converting shapefile to geoJSON
- Karma: Angular test runner
- Jasmine: Behavior-driven development framework for testing JavaScript code
Either instructions at Development Getting Started or alternatively follow these steps to setup Angular.
Install with npm package manager from a terminal window
npm install -g @angular/cli
To build and serve the app on localhost:4200, rebuilding on file changes:
ng serve
To run unit tests, run:
ng test
"f" can be appended to any describe block ("fdescribe") to focus on specific tests when running the tests.
We use ESLint and Prettier for code formatting and linting.
The configuration files can be found on src/interface/.eslintrc.json and src/interface/.prettierrc.
To lint and format your code you can run
To check for errors you can run on your terminal:
npm run lint
To fix lint and format automatically
npm run lint:fix
Additionally this can be configured to be run at save in your IDE/Editor. Here is a guide on how to do it on VScode or Webstorm.
An Angular service broadly encompasses any value, function, or feature that the app needs. Our services make calls to the backend, store state of the application (such as the current user, which region is selected, and which plan is currently being viewed), and share data between components. The frontend communicates with the backend using the Backend APIs. These methods live in the the services (../Planscape/src/interface/src/app/services)