Real Time Map Standalone version (#12)

- Auto switch between standalone and add-in based on existence of geotab object.

- Center map on user location instead of company address

- Login screen linked to https://github.com/Geotab/mg-api-js

.vscode/settings.json

@@ -4,6 +4,12 @@
 	"editor.tabSize": 2,
 	"search.exclude": {
 		"**/node_modules": true,
-		"**/dist": true
-	}
+    "**/dist": true,
+    // "package-lock.json": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

README.md

@@ -1,7 +1,6 @@
-# READ ME
 
-## How to Install The Real Time Map Add-in:
-### Getting the Add-in:
+# Installation
+## Getting the Add-in:
 
 * Download the latest release from the release page https://github.com/Geotab/real-time-map/releases.
 
@@ -12,21 +11,21 @@
 * Execute `npm run build`, to build the add-in.
 * After the build succeeds, you can find the MyGeotab compatible add-in inside the "dist" folder!
 
-### Installation into MyGeotab:
+## Installation into MyGeotab:
 
 1. Navigate to MyGeotab/systemSettings/Add-Ins, and click new Add-in.
 2. Fill in the configuration field, or copy the values from configuration.json from this project.
 3. Proceed to click the "add" button in files, and upload the entire dist folder to Mygeotab.
-4. Navigate to the Real Time Map addin page (which should be under "Activity" if you used the provided configuration file)
+4. Navigate to the Real Time Map addin page (which should be on the sidebar if you used the provided configuration file)
 
-### For Developers
+# Development:
 
 1. Execute `npm install` to install all dependencies.
-2. Execute `npm run devBuild && npm run devServer` to start the dev server (or execute dev.sh). This creates a server that can be tested in a MyGeotab test enviroment.
+2. Execute `npm run devBuild && npm run devServer` to start the dev server (or execute dev.sh).
 
-Real Time Map is not meant to be used or developed standalone! Please ensure you are running this application inside of a proper MyGeotab environment.
+### This creates a server (http://localhost:9000/) that can be ran and tested locally as long as you have an account with mygeotab api access.
 
-### Official documentation
+# Using The Real Time Map Add-in:
 
 Upon starting the map, you will be greeted with the following landing page:
 
@@ -36,7 +35,7 @@ On the top left hand side is the zoom controls.
 
 <kbd><img src="readme-images/zoomIcon.png"></kbd>
 
-### Configuration Panel
+## Configuration Panel
 
 The arrow icon on the right will expand to open the configuration panel on click.
 
@@ -54,7 +53,7 @@ Configuration settings persist along sessions with the same user name, they're l
 
 Clicking on the Vehicle Icon in the Vehicle Tab will set the view to the car on the Map.
 
-### Control Bar
+## Control Bar
 
 On the bottom of the page is the control bar, with the following features:
 
@@ -74,7 +73,7 @@ A date at bottom center, that also functions as an input, allowing users to sele
 
 Two time inputs on the bottom center. The Start Time input allows users to set the start time for the Vehicle Paths and the Current time input sets the Current Time on the Map.
 
-### Additional Features
+## Additional Features
 
 Every vehicle marker, path and exception path will have a popup that is opened on click. It will look similar to this:
 
@@ -93,16 +92,16 @@ If get status feed is enabled, then diagnostic status data would be displayed in
 
 <kbd><img src="readme-images/CarStatusMarkerPopup.png"></kbd>
 
-### Additional resources
+## Additional resources
 
 https://my.geotab.com/sdk/api/apiReference.html
 
 https://leafletjs.com/index.html
 
 For more information or inquiries please contact [email protected]
 
-### License
+# License
 
-MIT License
+## MIT License
 
-Copyright (c) 2020 Geotab Inc.
+## Copyright (c) 2020 Geotab Inc.

configuration.json

@@ -1,12 +1,12 @@
 {
   "name": "Real Time Map",
   "supportEmail": "[email protected], [email protected]",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "items": [
     {
       "icon": "dist/img/icon.png",
       "url": "dist/index.html",
-      "path": "ActivityLink/",
+      "path": "",
       "menuName": {
         "en": "Real Time Map"
       }

package.json

@@ -1,13 +1,13 @@
 {
 	"name": "real-time-map",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "The Real Time Dashboard project is an open source foundation for real time GPS, exception, and status tracking that will allow an organization to track their fleet data in real time or playback historical data on the map.",
 	"main": "server.js",
 	"scripts": {
 		"test": "jest --config=jest.config.json --coverage",
 		"devServer": "nodemon ./server.js",
 		"devBuild": "webpack --config webpack.dev.js --watch",
-		"build": "webpack --config webpack.prod.js",
+		"build": "echo Building Version 2.3.0 && webpack --config webpack.prod.js && echo Version 2.3.0 built in dist folder.",
 		"start": "node ./server.js"
 	},
 	"repository": {
@@ -42,6 +42,7 @@
 		"leaflet-rotatedmarker": "^0.2.0",
 		"localforage": "^1.7.3",
 		"material-components-web": "^3.2.0",
+		"mg-api-js": "^1.0.0",
 		"moment": "^2.24.0",
 		"normalize.css": "^8.0.1",
 		"nouislider": "^14.1.1",

src/app-helper.js

@@ -14,48 +14,48 @@ import { mapModel } from "../src/components/map/map-model";
 import storage from "./dataStore";
 import { initView } from "./index";
 import {
-	apiConfig,
-	userInfo
+  apiConfig,
+  userInfo
 }
-from "./dataStore/api-config";
+  from "./dataStore/api-config";
 import {
-	resetAnimationOnFocus,
-	resetTransitionAnimation
+  resetAnimationOnFocus,
+  resetTransitionAnimation
 }
-from "./utils/helper";
+  from "./utils/helper";
 
 export function initBeforeLogin() {
-	initDateKeeper();
+  initDateKeeper();
 }
 
 export function loginToSession(api) {
-	apiConfig.api = api;
-	return new Promise(resolve => {
-		apiConfig.api.getSession(session => {
-			userInfo.setUserInfo(session.userName, session.database, session.sessionId);
-			resolve();
-		});
-	});
+  apiConfig.api = api;
+  return new Promise(resolve => {
+    apiConfig.api.getSession(session => {
+      userInfo.setUserInfo(session.userName, session.database, session.sessionId);
+      resolve();
+    });
+  });
 };
 
 export function initAfterLogin() {
-	storage.dateKeeper$.resume();
-	initView();
-	layerModel.initLayers();
-	mapModel.setMapToCompanyAddress();
-	resetAnimationOnFocus();
+  storage.dateKeeper$.resume();
+  initView();
+  layerModel.initLayers();
+  mapModel.locateUserAndSetView();
+  resetAnimationOnFocus();
 
-	initRealTimeFeedRunner();
-	initHistoricalFeedRunner();
+  initRealTimeFeedRunner();
+  initHistoricalFeedRunner();
 }
 
 export function handleBlur() {
-	storage.dateKeeper$.pause();
-	console.log("Blurred!");
+  storage.dateKeeper$.pause();
+  console.log("Blurred!");
 }
 
 export function handleFocus() {
-	storage.dateKeeper$.resume();
-	resetTransitionAnimation();
-	console.log("Focused!");
+  storage.dateKeeper$.resume();
+  resetTransitionAnimation();
+  console.log("Focused!");
 }

src/app.js

@@ -1,32 +1,39 @@
 import {
-	initBeforeLogin,
-	initAfterLogin,
-	loginToSession,
-	handleFocus,
-	handleBlur
+  initBeforeLogin,
+  initAfterLogin,
+  loginToSession,
+  handleFocus,
+  handleBlur
+} from "./app-helper";
+
+import {
+  geotabStandAlone
+} from "./utils/stand-alone/geotab";
+
+if (typeof geotab === "undefined") {
+  window.geotab = geotabStandAlone;
 }
-from "./app-helper";
 
-geotab.addin.realTimeMap = function(api, state) {
-	return {
-		initialize(api, state, callback) {
+geotab.addin.realTimeMap = function realTimeMapAddIn() {
+  return {
+    initialize(api, state, callback) {
 
-			initBeforeLogin();
+      initBeforeLogin();
 
-			loginToSession(api).then(() => {
+      loginToSession(api).then(() => {
 
-				initAfterLogin();
-				callback();
+        initAfterLogin();
+        callback();
 
-			});
-		},
+      });
+    },
 
-		focus() {
-			handleFocus();
-		},
+    focus() {
+      handleFocus();
+    },
 
-		blur() {
-			handleBlur();
-		}
-	};
-};
+    blur() {
+      handleBlur();
+    }
+  };
+};