Placeline is a ReactJS/NextJS sample application to track the movement of your mobile workforce through the workday. Use this web app to track the live location, activity, device status and places visited by your business assets; track summaries for drives, steps, places and inactive hours; drill down to device locations organized in activity segments for each day, and export selected segments to 3rd party applications such as expense management software.

Placeline is built with HyperTrack APIs, SDKs, webhooks and associated helper libraries (like the sample backend NodeJS project).

• Sample Frontend Integration: Placeline
  • Overview
  • Features
  • How it works
  • Requirements
  • Installation and setup
    • Local setup
    • Heroku setup
  • Backend
  • Usage
  • Related
  • Credits
  • License

Features of this sample application include:

View	Features
Devices Overview	Map the live locations of devices Search and browse live tracking status and days tracked Drill down to live tracking views and day’s history for each device Set geofences for home/work to track arrival/exits at those places of interest
Single Device	Track movement organized in granular segments for selected days Review the location data of each segment on a map Track summaries for the tracked duration, distance, activities, places, steps and more Export driving segments to a 3rd party expense report
Expense Report	Review the detailed location history on one map Review the distance, time, description, and expense amount based on a fixed rate Submit expense report and see a success confirmation

The project uses the NextJS and leverages file-system routing(read more). With that, the project structure looks like this:

• /components: HOC to be used within pages
• /pages: Navigatable pages and general setup for app/document
• /static: Statically served styles and images

The goal of this project is to get you to a deployed integration in minutes. For this to work, you need to have:

• A backend providing accessible REST APIs. Get a sample NodeJS backend here
• A Google Maps API Key for the map component. Read more.
• A Heroku account for deployment

You can install this project on your local machine and deploy it quickly to Heroku for free.

After cloning or forking this repository, you should install all dependencies on your machine:

# with npm
npm install

# or with Yarn
yarn

Next, you need to set your environmental variables. The project uses dotenv, so it's best to create a .env file in the root folder of the project. This file is listed in .gitignore and shall not be checked into public repositories. Below is the content on the file - please ensure to replace the keys with your own:

# Google Maps
GMAPS_KEY = <YOUR_GOOGLE_MAPS_KEY>

# Server
SERVER_URL = <YOUR_SERVER_URL>

With the dependencies and configuration in place, you can start the server in development mode:

# with npm
npm run dev

# or with Yarn
yarn dev

On startup, Localtunnel is used to generate a publicly accessible URL for your local server (https://<unqiue_id>.localtunnel.me). A new browser window will open with your unique, temporary domain. If successful, the browser window will show the device overview.

Congratulations! You just completed a web app for your HyperTrack integration.

This project is set up to be deployed to Heroku within seconds. You need a Heroku account. All you need to do is to click on the one-click-deploy button below. It will provide the following services and add-ons:

• Web Dyno - to run the server on Heroku (free)
• NodeJS buildpack - to run NextJS on Heroku (free)
• PaperTrail - hosted logging system (free)

Similar to the local setup, you need to have your keys ready before the deployment. The Heroku page will ask you for the following:

• GMAPS_KEY: Your HyperTrack AccountId from the HyperTrack Dashboard
• SERVER_URL: Your HyperTrack SecretKey from the HyperTrack Dashboard

You need to enter all of these keys for the project to run successfully. Heroku uses the input to pre-set the environmental variables for the deployment. You can change after the setup as well.

Deploy this project now on Heroku:

For this project to work, it needs to consume REST APIs to display the devices, places, and trips data. You can use the NodeJS Sample Backend Integration project to spin up a backend that works out fo the box.

Here are the API endpoints required:

Note: Each endpoint gets prefixed with the SERVER_URL environmental variable.

Once the main page (index.js) is opened, it will load all devices, places, and trips from the backend and display them in the device list and on the map. A click on the device name will open up the single device view. That view loads all trips (associated with the selected device) for the current week by default. For every single trip, the summary is extracted and presented in a timeline fashion on the left menu. An overview of distance, time, and activities is calculated and displayed on the top. The map will show all polylines from every trip summary. With a click on the add button on one of the driving activities in the timeline will add it to an expense report. You can open up the report and review pre-filled fields based on the summary data form HyperTrack. You can submit the fictional report and a confirmation notification with all report details will apear.

Note: For the sake of simplicity, the expense report function is a fictional method with a slight delay, simulation a real API call you can implement.

This web application is built to work seamlessly with the NodeJS Sample Backend Integration and the Placeline scheduler.

This project uses the following open-source packages:

• nextjs: SSR React Framework
• dotenv: Load environment variables from .env files
• localtunnel: Expose your localhost to the world for testing and sharing
• ant-design: An enterprise-class UI design language and React implementation
• axios: Promise based HTTP client for the browser and node.js
• lodash: A modern JavaScript utility library delivering modularity, performance, & extras
• moment: Parse, validate, manipulate, and display dates in javascript
• nprogress: For slim progress bars like on YouTube, Medium, etc
• react-google-maps: React.js Google Maps integration component
• react-places-autocomplete: A React component for Google Maps Places Autocomplete
• styled-components: Visual primitives for the component age
• randomcolor: A tiny script for generating attractive colors

This project is licensed under the MIT License - see the LICENSE file for details