Version 1.4.3-20180708.0

mobile/.babelrc

@@ -6,7 +6,6 @@
     "development": {
       "plugins": [
         "transform-react-jsx-source",
-        "transform-decorators-legacy"
       ]
     }
   }

mobile/android/DeightonAR.iml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="DeightonAR" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$/app" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+<module external.linked.project.id="DeightonAR" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="java-gradle" name="Java-Gradle">
       <configuration>

mobile/android/app/app.iml

@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id=":app" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$/.." external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="android-gradle" name="Android-Gradle">
+      <configuration>
+        <option name="GRADLE_PROJECT_PATH" value=":app" />
+      </configuration>
+    </facet>
+    <facet type="android" name="Android">
+      <configuration>
+        <option name="SELECTED_BUILD_VARIANT" value="debug" />
+        <option name="ASSEMBLE_TASK_NAME" value="assembleDebug" />
+        <option name="COMPILE_JAVA_TASK_NAME" value="compileDebugSources" />
+        <afterSyncTasks>
+          <task>generateDebugSources</task>
+        </afterSyncTasks>
+        <option name="ALLOW_USER_CONFIGURATION" value="false" />
+        <option name="MANIFEST_FILE_RELATIVE_PATH" value="/src/main/AndroidManifest.xml" />
+        <option name="RES_FOLDER_RELATIVE_PATH" value="/src/main/res" />
+        <option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res" />
+        <option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7">
+    <output url="file://$MODULE_DIR$/build/intermediates/classes/debug" />
+    <output-test url="file://$MODULE_DIR$/build/intermediates/classes/test/debug" />
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/debug" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/debug" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/androidTest/debug" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/test/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/res" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/resources" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/assets" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/aidl" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/rs" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/shaders" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/res" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/assets" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/aidl" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/rs" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/shaders" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/shaders" isTestSource="true" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/assets" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/blame" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/check-manifest" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/classes" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/javaPrecompile" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/jniLibs" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/manifests" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/prebuild" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/res" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/rs" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/shaders" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/splits-support" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/symbols" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/transforms" />
+      <excludeFolder url="file://$MODULE_DIR$/build/outputs" />
+      <excludeFolder url="file://$MODULE_DIR$/build/reports" />
+      <excludeFolder url="file://$MODULE_DIR$/build/tmp" />
+    </content>
+    <orderEntry type="jdk" jdkName="Android API 27 Platform" jdkType="Android SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-fragment-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fbcore-1.3.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.exoplayer:exoplayer-r2.2.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-media-compat-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:drawee-1.3.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3-1.3.0" level="project" />
+    <orderEntry type="library" name="Gradle: artifacts:arcore_client" level="project" />
+    <orderEntry type="library" name="Gradle: com.parse.bolts:bolts-tasks:1.4.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okio:okio:1.13.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:appcompat-v7-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-ddb:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.code.gson:gson:2.2.4@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:animated-vector-drawable-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fresco-1.3.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-compat-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.code.findbugs:jsr305:3.0.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: org.webkit:android-jsc-r174650" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-s3:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-core-utils-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: javax.inject:javax.inject:1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-core:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.soloader:soloader-0.1.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-core-ui-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-vector-drawable-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fbui.textlayoutbuilder:textlayoutbuilder-1.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-base-1.3.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp:3.6.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-v4-25.0.0" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fbui.textlayoutbuilder:staticlayout-proxy:1.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: artifacts:react_viro" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.react:react-native-0.55.4" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-annotations:25.0.1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-cognito:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp-urlconnection:3.6.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: artifacts:viro_renderer" level="project" />
+    <orderEntry type="library" name="Gradle: com.amazonaws:aws-android-sdk-ddb-mapper:2.2.22@jar" level="project" />
+    <orderEntry type="library" name="Gradle: artifacts:gvr_common" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-1.3.0" level="project" />
+    <orderEntry type="module" module-name="react-native-fs" />
+    <orderEntry type="module" module-name="react-native-maps" />
+    <orderEntry type="module" module-name="react-native-image-resizer" />
+    <orderEntry type="module" module-name="react-native-image-picker" />
+  </component>
+</module>

mobile/android/app/build.gradle

@@ -101,8 +101,8 @@ android {
         applicationId "com.deightonar"
         minSdkVersion 24
         targetSdkVersion 27
-        versionCode 4
+        versionCode 16
-        versionName "1.0.1"
+        versionName "1.4.3"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

mobile/android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.deightonar"
-    android:versionCode="4"
+    android:versionCode="16"
-    android:versionName="1.0.1">
+    android:versionName="1.4.3">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

mobile/ios/DeightonAR.xcodeproj/project.pbxproj

@@ -140,6 +140,11 @@
 				TargetAttributes = {
 					13B07F861A680F5B00A75B9A = {
 						DevelopmentTeam = 523GZPCZ3X;
+						SystemCapabilities = {
+							com.apple.BackgroundModes = {
+								enabled = 1;
+							};
+						};
 					};
 				};
 			};

mobile/ios/DeightonAR/Info.plist

@@ -2,8 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-	<key>NSMicrophoneUsageDescription</key>
+	<key>NSLocationAlwaysUsageDescription</key>
-	<string>$(PRODUCT_NAME) camera use</string>
+	<string>$(PRODUCT_NAME) background location use</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -19,11 +19,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.1</string>
+	<string>1.4.3</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>20180518.0</string>
+	<string>20180708.0</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -33,8 +33,16 @@
 	</dict>
 	<key>NSCameraUsageDescription</key>
 	<string>$(PRODUCT_NAME) camera use</string>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string>$(PRODUCT_NAME) location use</string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>$(PRODUCT_NAME) camera use</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>$(PRODUCT_NAME) photo use</string>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>location</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -46,8 +54,6 @@
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
-	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
-	<string>$(PRODUCT_NAME) location use</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

mobile/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-react-native-stage-0": "^1.0.1",
     "jest-react-native": "^18.0.0",
     "react-test-renderer": "16.2.0"
@@ -18,7 +17,7 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "autobind-decorator": "^2.1.0",
+    "auto-bind2": "^1.0.3",
     "eventemitter3": "^3.1.0",
     "moment": "^2.22.1",
     "react": "^16.3.2",

mobile/src/API.js

@@ -1,9 +1,9 @@
 import EventEmitter from "eventemitter3"
 import io from "socket.io-client"
 import { AsyncStorage } from "react-native"
-import autobind from "autobind-decorator"
 import { config } from "./config"
 import RNFS from "react-native-fs"
+import { autoBind } from "auto-bind2"
 
 const authTokenKeyName = "AuthToken"
 const backendKeyName = "Backend"
@@ -33,7 +33,6 @@ class APIError extends Error {
   }
 }
 
-@autobind
 class API extends EventEmitter {
   static urls = {
     normal: "https://dar.kss.us.com/api",
@@ -43,6 +42,7 @@ class API extends EventEmitter {
 
   constructor() {
     super()
+    autoBind(this)
     this.user = { pending: true }
     this._apiURL = null
 

mobile/src/ARViewer/ARViewer.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { StyleSheet, View, TouchableHighlight, Image } from "react-native"
+import { StyleSheet, View, TouchableHighlight, Image, Text } from "react-native"
 import {
   ViroARSceneNavigator,
   ViroARScene,
@@ -13,16 +13,16 @@ import {
   ViroQuad,
   ViroConstants,
 } from "react-viro"
-import autobind from "autobind-decorator"
 import backImage from "./images/back.png"
 import { config } from "../config"
 import "url-search-params-polyfill"
+import { reactAutoBind } from "auto-bind2"
 
 const shapes = {
   order: {
     source: require("./models/hardhat_obj.obj"),
     resources: [require("./models/hardhat.mtl")],
-    scale: [0.5, 0.5, 0.5],
+    scale: [0.3, 0.3, 0.3],
   },
   complaint: {
     source: require("./models/question_obj.obj"),
@@ -47,6 +47,7 @@ const distance = (vectorA, vectorB) => {
 class WorkItemSceneAR extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     this.state = {
       position: [0, 0, 0],
@@ -57,7 +58,6 @@ class WorkItemSceneAR extends React.Component {
     }
   }
 
-  @autobind
   handleLoadEnd() {
     this.arScene.getCameraOrientationAsync().then((orientation) => {
       return this.arScene
@@ -65,8 +65,11 @@ class WorkItemSceneAR extends React.Component {
         .then((results) => {
           const { forward, position } = orientation
           // Default position is just one meter in front of the user
-          const defaultPosition =
+          const defaultPosition = [
-            [forward[0] * 1.0, forward[1] * 1.0, forward[2]] * 1.0
+            forward[0] * 1.0,
+            forward[1] * 1.0,
+            forward[2] * 1.0,
+          ]
           let hitResultPosition = null
 
           // Filter the hit test results based on the position.
@@ -110,7 +113,6 @@ class WorkItemSceneAR extends React.Component {
     })
   }
 
-  @autobind
   updateInitialRotation() {
     this.arNode.getTransformAsync().then((retDict) => {
       let rotation = retDict.rotation
@@ -131,7 +133,6 @@ class WorkItemSceneAR extends React.Component {
     })
   }
 
-  @autobind
   handleTrackingUpdated(state, reason) {
     if (
       !this.state.trackingInitialized &&
@@ -141,12 +142,10 @@ class WorkItemSceneAR extends React.Component {
     }
   }
 
-  @autobind
   handleAnchorFound() {
     this.setState({ haveAnchor: true })
   }
 
-  @autobind
   handleClick(position, source) {
     const { workItemId } = this.props
 
@@ -182,7 +181,7 @@ class WorkItemSceneAR extends React.Component {
             innerAngle={5}
             outerAngle={20}
             direction={[0, -1, 0]}
-            position={[0, 10, 0]}
+            position={[0, 5, 0]}
             color="#ffffff"
             castsShadow={true}
             shadowNearZ={0.1}
@@ -193,7 +192,7 @@ class WorkItemSceneAR extends React.Component {
             trackingInitialized &&
             haveAnchor && (
               <Viro3DObject
-                position={[0, 0, -1]}
+                position={[0, 0, 0]}
                 source={shape.source}
                 resources={shape.resources}
                 scale={shape.scale}
@@ -219,6 +218,7 @@ class WorkItemSceneAR extends React.Component {
 export class ARViewer extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { search } = this.props.location
 
@@ -230,12 +230,15 @@ export class ARViewer extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     this.props.history.replace("/")
   }
 
   render() {
+    const message = this.workItemId
+      ? "Work item nearby. Stand still, point phone at a nearby surface and move it around slowly."
+      : "No work item detected. Wait for GPS signal to stabilize and move closer to a work item."
+
     return (
       <View style={{ width: "100%", height: "100%" }}>
         <ViroARSceneNavigator
@@ -262,6 +265,27 @@ export class ARViewer extends React.Component {
             <Image source={backImage} />
           </TouchableHighlight>
         </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "center",
+            position: "absolute",
+            bottom: 30,
+            left: 0,
+            right: 0,
+            backgroundColor: "#99999980",
+          }}>
+          <Text
+            style={{
+              textAlign: "center",
+              fontSize: 24,
+              padding: 10,
+              color: "#FFFFFF",
+            }}>
+            {message}
+          </Text>
+        </View>
       </View>
     )
   }

mobile/src/Activity/Activity.js

@@ -23,14 +23,15 @@ import {
   FormStaticInput,
 } from "../ui"
 import { MessageModal, WaitModal, ProgressModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
-import { formatLatLng } from "../util"
+import { formatLatLng, workItemTypeEnum } from "../util"
 import moment from "moment"
 import "url-search-params-polyfill"
 import { config } from "../config"
+import { FormStaticOptionStrip, FormStaticPhotoPanel } from "../ui"
 
 const styles = StyleSheet.create({
   container: {
@@ -86,24 +87,30 @@ export class Activity extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       binder: new FormBinder({}, Activity.bindings),
       waitModal: null,
       messageModal: null,
       progressModal: null,
       uploadPercent: 0,
-      region: config.initialRegion,
+    }
+    this.region = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
   }
 
+  componentDidMount() {
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
     const id = params.get("id")
     const workItemId = params.get("workItemId")
-
     const getWorkItem = (id) => {
+      this.setState({ waitModal: { message: "Loading Work Item Details..." } })
       api
         .getWorkItem(id)
         .then((workItem) => {
+          this.setState({ waitModal: null })
           if (workItem) {
             const [lng, lat] = workItem.location.coordinates
 
@@ -116,19 +123,30 @@ export class Activity extends React.Component {
                 },
                 Activity.bindings
               ),
-              region: {
-                latitude: lat,
-                longitude: lng,
-                latitudeDelta: 0.01,
-                longitudeDelta: 0.01,
-              },
               location: formatLatLng(lat, lng),
               dateTime: moment().format(),
+              details: workItem.details,
+              workItemType: workItem.workItemType,
+              workItemPhotos: workItem.photos,
             })
+
+            this.region = {
+              latitude: lat,
+              longitude: lng,
+              latitudeDelta: config.activityRegionDelta,
+              longitudeDelta: config.activityRegionDelta,
+            }
+          }
+
+          if (this.isMapReady) {
+            this.mapView.animateToRegion(this.region)
+          } else {
+            this.goToRegionWhenReady = true
           }
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get work item details",
@@ -140,9 +158,12 @@ export class Activity extends React.Component {
     }
 
     if (id) {
+      this.setState({ waitModal: { message: "Loading Activity..." } })
       api
         .getActivity(id)
         .then((activity) => {
+          this.setState({ waitModal: null })
+
           if (activity) {
             this.setState({
               binder: new FormBinder(activity, Activity.bindings),
@@ -153,6 +174,7 @@ export class Activity extends React.Component {
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get activity details",
@@ -170,7 +192,15 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMessageDismiss() {
     const back = this.state.messageModal.back
     this.setState({ messageModal: null })
@@ -179,7 +209,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 
@@ -190,7 +219,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleDonePress() {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
@@ -228,7 +256,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadStarted() {
     this.setState({
       progressModal: { message: "Uploading Photo..." },
@@ -236,12 +263,11 @@ export class Activity extends React.Component {
     })
   }
 
-  @autobind
   handleUploadProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(
-          uploadData.uploadedChunks / uploadData.numberOfChunks * 100
+          (uploadData.uploadedChunks / uploadData.numberOfChunks) * 100
         ),
       })
       return true
@@ -250,12 +276,10 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadEnded(successful, uploadData) {
     this.setState({ progressModal: null })
   }
 
-  @autobind
   handleUploadCanceled() {
     this.setState({ progressModal: null })
   }
@@ -266,10 +290,12 @@ export class Activity extends React.Component {
       messageModal,
       progressModal,
       waitModal,
-      region,
       dateTime,
       location,
+      details,
+      workItemType,
       uploadPercent,
+      workItemPhotos,
     } = this.state
 
     return (
@@ -282,9 +308,6 @@ export class Activity extends React.Component {
           rightButton={{ icon: "done", onPress: this.handleDonePress }}
         />
         <ScrollView style={styles.container}>
-          <View style={styles.panel}>
-            <BoundInput binder={binder} name="resolution" label="Resolution:" />
-          </View>
           <View style={styles.panel}>
             <BoundOptionStrip
               binder={binder}
@@ -296,16 +319,44 @@ export class Activity extends React.Component {
               ]}
               label="Status:"
               name="status"
+              message="You must supply a status for the activity"
+            />
+            <BoundInput
+              binder={binder}
+              name="resolution"
+              label="Resolution:"
+              message="You must supply a resolution for the activity"
+            />
+            <BoundInput
+              binder={binder}
+              name="notes"
+              label="Notes:"
+              message="You must supply notes for the activity"
+            />
+            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <BoundPhotoPanel
+              name="photos"
+              binder={binder}
+              onUploadStarted={this.handleUploadStarted}
+              onUploadProgress={this.handleUploadProgress}
+              onUploadEnded={this.handleUploadEnded}
             />
           </View>
           <View style={styles.panel}>
-            <BoundInput binder={binder} name="notes" label="Notes:" />
+            <FormStaticOptionStrip
-          </View>
+              label="Work Item Type:"
-          <View style={styles.panel}>
+              options={workItemTypeEnum}
-            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+              value={workItemType}
+            />
+            <FormStaticInput label="Details:" value={details} />
+            <FormStaticPhotoPanel
+              label="Work Item Photos:"
+              value={workItemPhotos}
+            />
             <FormStaticInput label="Location:" value={location} />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
+                ref={(ref) => (this.mapView = ref)}
                 style={{
                   flexDirection: "column",
                   justifyContent: "center",
@@ -324,7 +375,8 @@ export class Activity extends React.Component {
                 showsScale={false}
                 showsUserLocation
                 cacheEnabled
-                region={region}
+                initialRegion={config.initialRegion}
+                onMapReady={this.handleOnMapReady}
               />
               <Icon
                 name="target"
@@ -337,15 +389,6 @@ export class Activity extends React.Component {
               />
             </View>
           </View>
-          <View style={styles.panel}>
-            <BoundPhotoPanel
-              name="photos"
-              binder={binder}
-              onUploadStarted={this.handleUploadStarted}
-              onUploadProgress={this.handleUploadProgress}
-              onUploadEnded={this.handleUploadEnded}
-            />
-          </View>
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
         <ProgressModal

mobile/src/App.js

@@ -56,7 +56,11 @@ export default class App extends React.Component {
             <Route exact path="/login" component={Login} />
             <Route exact path="/logout" component={Logout} />
             <ProtectedRoute exact path="/home" component={Home} />
-            <ProtectedRoute exact path="/arviewer" component={ARViewer} />
+            <ProtectedRoute
+              exact
+              path="/arviewer"
+              render={(props) => <ARViewer {...props} />}
+            />
             <ProtectedRoute exact path="/activity" component={Activity} />
             <ProtectedRoute exact admin path="/workItem" component={WorkItem} />
             <ProtectedRoute

mobile/src/Auth/Login.js

@@ -4,10 +4,7 @@ import {
   StyleSheet,
   Text,
   Image,
-  Switch,
-  TextInput,
   View,
-  Button,
   TouchableWithoutFeedback,
 } from "react-native"
 import { MessageModal, ApiModal, WaitModal } from "../Modal"
@@ -17,8 +14,7 @@ import { api } from "../API"
 import { BoundSwitch, BoundInput, BoundButton } from "../ui"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { versionInfo } from "../version"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
-import { isIphoneX } from "react-native-iphone-x-helper"
 import { config } from "../config"
 
 export class Login extends React.Component {
@@ -74,6 +70,7 @@ export class Login extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       binder: new FormBinder(
         { email: config.defaultUser, rememberMe: true },
@@ -92,7 +89,6 @@ export class Login extends React.Component {
     }
   }
 
-  @autobind
   handleLogin() {
     let obj = this.state.binder.getModifiedBindingValues()
     let { history } = this.props
@@ -117,18 +113,15 @@ export class Login extends React.Component {
     }
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
   handleApiDismiss(backendName) {
     this.setState({ apiModal: null })
     api.backend = backendName
   }
 
-  @autobind
   handleApiPress() {
     this.hiddenTouchCount += 1
 

mobile/src/Auth/ProtectedRoute.js

@@ -1,28 +1,35 @@
-import React from 'react'
+import React from "react"
-import { Route, Redirect } from 'react-router-native'
+import { Route, Redirect } from "react-router-native"
-import { PropTypes } from 'prop-types'
+import { PropTypes } from "prop-types"
-import { api } from '../API'
+import { api } from "../API"
-import autobind from 'autobind-decorator'
+import { reactAutoBind, autoBind } from "auto-bind2"
 
 export class ProtectedRoute extends React.Component {
   static propTypes = {
-    location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+      search: PropTypes.string,
+    }),
     admin: PropTypes.bool,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   updateComponent() {
     this.forceUpdate()
   }
 
   componentDidMount() {
-    api.addListener('login', this.updateComponent)
+    api.addListener("login", this.updateComponent)
-    api.addListener('logout', this.updateComponent)
+    api.addListener("logout", this.updateComponent)
   }
 
   componentWillUnmount() {
-    api.removeListener('login', this.updateComponent)
+    api.removeListener("login", this.updateComponent)
-    api.removeListener('logout', this.updateComponent)
+    api.removeListener("logout", this.updateComponent)
   }
 
   render(props) {
@@ -32,7 +39,7 @@ export class ProtectedRoute extends React.Component {
       return null
     } else {
       if (!user._id || (this.props.admin && !user.administrator)) {
-        return <Redirect to='/login' />
+        return <Redirect to="/login" />
       } else {
         return <Route {...this.props} />
       }

mobile/src/Home/Home.js

@@ -1,10 +1,7 @@
 import React from "react"
 import {
-  StyleSheet,
   Text,
-  TextInput,
   SectionList,
-  Image,
   View,
   TouchableOpacity,
   TouchableHighlight,
@@ -13,9 +10,9 @@ import {
 } from "react-native"
 import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header, Geolocation } from "../ui"
-import { MessageModal } from "../Modal"
+import { MessageModal, WaitModal } from "../Modal"
 import { api } from "../API"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX } from "react-native-iphone-x-helper"
 import {
   geoDistance,
@@ -33,20 +30,22 @@ import clipboardPinImage from "./images/clipboard-pin.png"
 import questionPinImage from "./images/question-pin.png"
 import moment from "moment"
 
-const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
-const neverAskForCameraKeyName = "NeverAskForCameraPermission"
-
 export class Home extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
+      waitModal: null,
+      messageModal: null,
       sections: [],
       showWorkItems: true,
-      region: config.initialRegion,
       haveCameraPermission: false,
       haveLocationPermission: false,
-      currentPosition: null,
     }
+    this.currentPosition = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
+    this.region = null
 
     if (Platform.OS !== "ios") {
       ensurePermissions(
@@ -91,10 +90,18 @@ export class Home extends React.Component {
         }
       )
     } else {
+      navigator.geolocation.requestAuthorization()
       this.state.haveLocationPermission = true
       this.state.haveCameraPermission = true
     }
+  }
 
+  componentDidMount() {
+    this.loadWorkItems()
+  }
+
+  loadWorkItems() {
+    this.setState({ waitModal: { message: "Loading Work Items..." } })
     api
       .listTeams()
       .then((list) => {
@@ -102,6 +109,8 @@ export class Home extends React.Component {
         return api.listWorkItemActivities()
       })
       .then((list) => {
+        this.setState({ waitModal: null })
+
         list.items.forEach((item) => {
           item.data.forEach((datum) => {
             const team = this.teams.find((team) => team._id === datum.team)
@@ -111,15 +120,23 @@ export class Home extends React.Component {
         })
         this.setState({
           sections: list.items,
-          region:
+        })
+
+        this.region =
           regionContainingPoints(
             list.items.map((item) => item.coordinate),
-              0.02
+            config.homeRegionInset
-            ) || this.state.region,
+          ) || config.initialRegion
-        })
+
+        if (this.isMapReady) {
+          this.mapView.animateToRegion(this.region)
+        } else {
+          this.goToRegionWhenReady = true
+        }
       })
       .catch((err) => {
         this.setState({
+          waitModal: null,
           messageModal: {
             icon: "hand",
             message: "Unable to get a list of work items, activities and teams",
@@ -129,12 +146,19 @@ export class Home extends React.Component {
       })
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMarkerPress(e, sectionIndex) {
     if (this.sectionList) {
       this.sectionList.scrollToLocation({
@@ -145,7 +169,6 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleWorkItemsListPress() {
     if (this.currentPosition) {
       const { coords } = this.currentPosition
@@ -156,29 +179,30 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleItemSelect(activity) {
     this.props.history.push(`/activity?id=${activity._id}`)
   }
 
-  @autobind
   handleSectionSelect(workItem) {
-    const { latitude, longitude } = workItem.coordinate
+    if (!this.isMapReady) {
-    const region = {
+      return
-      latitude,
+    }
-      longitude,
+
-      latitudeDelta: 0.01,
+    const { latitude, longitude } = workItem.coordinate
-      longitudeDelta: 0.01,
+
-    }
+    this.region = {
-    this.setState({ region })
+      latitude,
+      longitude,
+      latitudeDelta: config.homeRegionDelta,
+      longitudeDelta: config.homeRegionDelta,
+    }
+    this.mapView.animateToRegion(this.region)
   }
 
-  @autobind
   handleLogoutPress() {
     this.props.history.replace("/logout")
   }
 
-  @autobind
   handleGlassesPress() {
     const { sections: workItems } = this.state
 
@@ -217,24 +241,27 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleMyLocationPress() {
-    if (this.currentPosition) {
+    if (this.currentPosition && this.isMapReady) {
-      const coords = this.currentPosition.coords
+      const { coords } = this.currentPosition
 
-      this.map.animateToCoordinate({
+      this.mapView.animateToCoordinate({
         latitude: coords.latitude,
         longitude: coords.longitude,
       })
     }
   }
 
-  @autobind
   handleToggleWorkItemsList() {
-    this.setState({ showWorkItems: !this.state.showWorkItems })
+    const newShowWorkItems = !this.state.showWorkItems
+
+    this.setState({ showWorkItems: newShowWorkItems })
+
+    if (newShowWorkItems) {
+      this.loadWorkItems()
+    }
   }
 
-  @autobind
   handleCalloutPress(workItem) {
     if (api.loggedInUser.administrator) {
       this.props.history.push(
@@ -245,15 +272,13 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handlePositionUpdate(position) {
     this.currentPosition = position
   }
 
-  @autobind
   getCoordinateDistance(coordinate) {
     if (this.currentPosition) {
-      const coords = this.currentPosition.coords
+      const { coords } = this.currentPosition
       const { latitude, longitude } = coordinate
 
       return (
@@ -274,8 +299,8 @@ export class Home extends React.Component {
     const {
       sections,
       showWorkItems,
-      region,
       messageModal,
+      waitModal,
       haveCameraPermission,
       haveLocationPermission,
     } = this.state
@@ -295,7 +320,7 @@ export class Home extends React.Component {
         />
         <MapView
           ref={(ref) => {
-            this.map = ref
+            this.mapView = ref
           }}
           style={[
             {
@@ -310,7 +335,8 @@ export class Home extends React.Component {
           showsIndoors={false}
           zoomControlEnabled={false}
           showsMyLocationButton={false}
-          region={region}>
+          initialRegion={config.initialRegion}
+          onMapReady={this.handleOnMapReady}>
           {sections.map((workItem, index) => (
             <Marker
               key={index}
@@ -428,7 +454,7 @@ export class Home extends React.Component {
                       <Text style={{ fontSize: 14, color: "gray" }}>
                         {activity.teamName +
                           " | " +
-                          dotify(moment(activity.createdAt).format())}
+                          dotify(moment(activity.createdAt).format(), -15)}
                       </Text>
                     </View>
                     <Icon
@@ -479,6 +505,10 @@ export class Home extends React.Component {
         {haveLocationPermission && (
           <Geolocation onUpdate={this.handlePositionUpdate} />
         )}
+        <WaitModal
+          open={!!waitModal}
+          message={waitModal ? waitModal.message : ""}
+        />
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}

mobile/src/Modal/ApiModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, TouchableOpacity } from "react-native"
 import { Icon, OptionStrip } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { api } from "../API"
 
 export class ApiModal extends Component {
@@ -14,12 +14,12 @@ export class ApiModal extends Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       value: api.backend,
     }
   }
 
-  @autobind
   handleButtonPress() {
     const { onDismiss } = this.props
 
@@ -28,7 +28,6 @@ export class ApiModal extends Component {
     }
   }
 
-  @autobind
   handleValueChanged(newValue) {
     this.setState({ value: newValue })
   }

mobile/src/Modal/ImageViewerModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Image, TouchableOpacity } from "react-native"
 import { Icon } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class ImageViewerModal extends Component {
   static propTypes = {
@@ -12,7 +12,11 @@ export class ImageViewerModal extends Component {
     onDismiss: PropTypes.func,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   handleButtonPress() {
     const { onDismiss } = this.props
 

mobile/src/Modal/MessageModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, TouchableOpacity } from "react-native"
 import { Icon } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class MessageModal extends Component {
   static propTypes = {
@@ -14,7 +14,11 @@ export class MessageModal extends Component {
     onDismiss: PropTypes.func,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   handleButtonPress() {
     if (this.props.onDismiss) {
       this.props.onDismiss()

mobile/src/Modal/ProgressModal.js

@@ -3,7 +3,6 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, ActivityIndicator, TouchableOpacity } from "react-native"
 import { ProgressBar } from "../ui"
-import autobind from "autobind-decorator"
 
 export class ProgressModal extends Component {
   static propTypes = {

mobile/src/WorkItem/WorkItem.js

@@ -23,7 +23,7 @@ import {
   Geolocation,
 } from "../ui"
 import { MessageModal, ProgressModal, WaitModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { api } from "../API"
@@ -93,36 +93,47 @@ export class WorkItem extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     this.state = {
       binder: new FormBinder({}, WorkItem.bindings),
       messageModal: null,
       waitModal: null,
       progressModal: null,
-      region: config.initialRegion,
+      allowLocationUpdates: false,
+    }
+    this.region = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
   }
 
+  componentDidMount() {
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
     const id = params.get("id")
 
     if (id) {
+      this.setState({ waitModal: { message: "Loading Work Item..." } })
+
       api
         .getWorkItem(id)
         .then((workItem) => {
+          this.setState({ waitModal: null })
+
           if (workItem) {
             const [longitude, latitude] = workItem.location.coordinates
-            const region = {
+
+            this.region = {
               latitude,
               longitude,
-              latitudeDelta: 0.01,
+              latitudeDelta: config.workItemRegionDelta,
-              longitudeDelta: 0.01,
+              longitudeDelta: config.workItemRegionDelta,
             }
 
-            if (this.mapView) {
+            if (this.isMapReady) {
-              this.mapView.animateToRegion(region)
+              this.mapView.animateToRegion(this.region)
             } else {
-              this.goToRegion = region
+              this.goToRegionWhenReady = true
             }
 
             this.setState({
@@ -132,6 +143,7 @@ export class WorkItem extends React.Component {
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get work item details",
@@ -140,6 +152,8 @@ export class WorkItem extends React.Component {
             },
           })
         })
+    } else {
+      this.setState({ allowLocationUpdates: true })
     }
   }
 
@@ -149,7 +163,6 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 
@@ -160,19 +173,22 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleDonePress() {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
 
+    this.setState({ waitModal: { message: "Creating Work Item..." } })
+
     if (!obj._id) {
       api
         .createWorkItem(obj)
         .then((workItem) => {
+          this.setState({ waitModal: null })
           this.handleBackPress()
         })
         .catch((error) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to create work item",
@@ -188,6 +204,7 @@ export class WorkItem extends React.Component {
         })
         .catch((error) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to update work item",
@@ -198,7 +215,6 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleMessageDismiss() {
     const back = this.state.messageModal.back
     this.setState({ messageModal: null })
@@ -207,10 +223,17 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleRegionChange(region) {
+    if (!this.state.allowLocationUpdates || !this.isMapReady) {
+      // On iOS we get this after setting the initial region, before the map declared as ready!
+      // Also, if we are only viewing the work item, then don't allow region changes
+      return
+    }
+
     const { latitude, longitude } = region
 
+    this.region = region
+
     if (this.latLngInput) {
       this.latLngInput.handleChangeText(formatLatLng(latitude, longitude))
     }
@@ -226,15 +249,15 @@ export class WorkItem extends React.Component {
     )
   }
 
-  @autobind
   handleOnMapReady() {
-    if (this.goToRegion && this.mapView) {
+    if (this.goToRegionWhenReady) {
-      this.mapView.animateToRegion(this.goToRegion)
+      this.mapView.animateToRegion(this.region)
-      this.goToRegion = null
+      this.goToRegionWhenReady = false
-    }
+    }
+
+    this.isMapReady = true
   }
 
-  @autobind
   handleStartAddressLookup(latLng) {
     api
       .getAddress(latLng)
@@ -250,7 +273,6 @@ export class WorkItem extends React.Component {
       })
   }
 
-  @autobind
   handleUploadStarted() {
     this.setState({
       progressModal: { message: "Uploading Photo..." },
@@ -258,12 +280,11 @@ export class WorkItem extends React.Component {
     })
   }
 
-  @autobind
   handleUploadProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(
-          uploadData.uploadedChunks / uploadData.numberOfChunks * 100
+          (uploadData.uploadedChunks / uploadData.numberOfChunks) * 100
         ),
       })
       return true
@@ -272,35 +293,36 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleUploadEnded(successful, uploadData) {
     this.setState({ progressModal: null })
+    this.mapView.animateToRegion(this.region)
   }
 
-  @autobind
   handleUploadCanceled() {
     this.setState({ progressModal: null })
   }
 
-  @autobind
   handleAddActivity() {
     if (this.props.history) {
       this.props.history.push(`/activity?workItemId=${this.state.binder._id}`)
     }
   }
 
-  @autobind
   handlePositionUpdate(position) {
     const { coords } = position
 
-    this.setState({
+    this.region = {
-      region: {
       latitude: coords.latitude,
       longitude: coords.longitude,
-        latitudeDelta: 0.02,
+      latitudeDelta: config.workItemRegionDelta,
-        longitudeDelta: 0.02,
+      longitudeDelta: config.workItemRegionDelta,
-      },
+    }
-    })
+
+    if (this.isMapReady) {
+      this.mapView.animateToRegion(this.region)
+    } else {
+      this.goToRegionWhenReady = true
+    }
   }
 
   render() {
@@ -310,7 +332,6 @@ export class WorkItem extends React.Component {
       waitModal,
       progressModal,
       uploadPercent,
-      region,
     } = this.state
 
     return (
@@ -331,8 +352,6 @@ export class WorkItem extends React.Component {
               options={workItemTypeEnum}
               message="Select a work item type"
             />
-          </View>
-          <View style={styles.panel}>
             <BoundInput
               binder={binder}
               name="details"
@@ -340,8 +359,6 @@ export class WorkItem extends React.Component {
               label="Details:"
               message="You must supply details for the work item"
             />
-          </View>
-          <View style={styles.panel}>
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
                 ref={(ref) => (this.mapView = ref)}
@@ -358,10 +375,11 @@ export class WorkItem extends React.Component {
                 rotateEnabled={false}
                 pitchEnabled={false}
                 showsUserLocation
+                showsMyLocationButton
                 showsBuildings={false}
                 showsTraffic={false}
                 showsIndoors={false}
-                region={region}
+                initialRegion={config.initialRegion}
                 onRegionChange={this.handleRegionChange}
                 onMapReady={this.handleOnMapReady}
               />
@@ -387,8 +405,6 @@ export class WorkItem extends React.Component {
               name="address"
               label="Address:"
             />
-          </View>
-          <View style={styles.panel}>
             <BoundPhotoPanel
               name="photos"
               binder={binder}
@@ -410,7 +426,9 @@ export class WorkItem extends React.Component {
             )}
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        {!this.state.allowLocationUpdates && (
           <Geolocation onUpdate={this.handlePositionUpdate} watch={false} />
+        )}
         <ProgressModal
           open={!!progressModal}
           message={progressModal ? progressModal.message : ""}

mobile/src/WorkItem/WorkItemList.js

@@ -10,7 +10,7 @@ import {
 } from "react-native"
 import { Icon, Header } from "../ui"
 import { MessageModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { SwipeListView } from "react-native-swipe-list-view"
 import { api } from "../API"
 import {
@@ -36,6 +36,7 @@ const styles = StyleSheet.create({
 export class WorkItemList extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       messageModal: null,
     }
@@ -74,12 +75,10 @@ export class WorkItemList extends React.Component {
       })
   }
 
-  @autobind
   handleItemSelect(item, ref) {
     this.props.history.push(`/workItem?id=${item._id}`)
   }
 
-  @autobind
   handleItemDelete(item, ref) {
     api
       .deleteWorkItem(item._id)
@@ -110,17 +109,14 @@ export class WorkItemList extends React.Component {
       })
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
   handleDonePress() {
     this.props.history.push("/workItem")
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 

mobile/src/config.js

@@ -1,17 +1,20 @@
-import React from "react"
-import { Platform } from "react-native"
-
 export const config = {
-  localIPAddr: "192.168.1.175",
+  // localIPAddr: "192.168.1.175",
-  //localIPAddr: "192.168.1.14",
+  localIPAddr: "192.168.1.14",
   viroAPIKey: "06F37B6A-74DA-4A83-965A-7DE2209A5C46",
   googleGeocodeAPIKey: "AIzaSyCs4JVT6gysnY5dAJ7KjVJYeykLv_xz1GI",
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",
   refererURL: "https://dar.kss.us.com",
   minDistanceToItem: 20,
+  workItemRegionDelta: 0.005,
+  activityRegionDelta: 0.005,
+  homeRegionInset: 0.02,
+  homeRegionDelta: 0.005,
   geocodeDelayMilliseconds: 500,
+
   // defaultUser: "john@lyon-smith.org",
   defaultUser: "",
+
   // This region is downtown Toronto
   initialRegion: {
     latitude: 43.653908,
@@ -19,6 +22,7 @@ export const config = {
     latitudeDelta: 0.0922,
     longitudeDelta: 0.0421,
   },
+
   // This region is Bainbridge Island
   // initialRegion: {
   //   latitude: 47.629536,
@@ -26,5 +30,6 @@ export const config = {
   //   latitudeDelta: 0.0922,
   //   longitudeDelta: 0.0421,
   // },
+
   // alwaysShowWorkItemInAR: true,
 }

mobile/src/ui/BoundButton.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { View, Text, TouchableHighlight } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundButton extends React.Component {
   static propTypes = {
@@ -14,6 +14,7 @@ export class BoundButton extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
@@ -21,7 +22,6 @@ export class BoundButton extends React.Component {
     this.state = binder.getBindingState(name)
   }
 
-  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

mobile/src/ui/BoundHeader.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Header } from "."
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 const headerButtonShape = {
   icon: PropTypes.string.isRequired,
@@ -19,6 +19,7 @@ export class BoundHeader extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
@@ -26,7 +27,6 @@ export class BoundHeader extends React.Component {
     this.state = binder.getBindingState(name)
   }
 
-  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

mobile/src/ui/BoundInput.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { TextInput, Text, View, Platform } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundInput extends React.Component {
   static propTypes = {
@@ -20,11 +20,11 @@ export class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
     this.state = binder.getBindingState(name)
-    this.handleChangeText = this.handleChangeText.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -33,7 +33,6 @@ export class BoundInput extends React.Component {
     }
   }
 
-  // @autobind : There seems to be a bug with using this here, so we just do it the old way
   handleChangeText(newText) {
     const { binder, name } = this.props
 
@@ -86,10 +85,9 @@ export class BoundInput extends React.Component {
         <Text
           style={{
             fontSize: 12,
-            display: valid ? "none" : "flex",
             color: "red",
           }}>
-          {message}
+          {valid ? " " : message}
         </Text>
       </View>
     )

mobile/src/ui/BoundOptionStrip.js

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { View, Text } from "react-native"
 import { OptionStrip } from "."
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundOptionStrip extends React.Component {
   static propTypes = {
@@ -17,10 +17,10 @@ export class BoundOptionStrip extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = props.binder.getBindingState(props.name)
   }
 
-  @autobind
   handleValueChanged(newValue) {
     this.setState(
       this.props.binder.updateBindingValue(this.props.name, newValue)
@@ -55,10 +55,9 @@ export class BoundOptionStrip extends React.Component {
         <Text
           style={{
             fontSize: 12,
-            display: valid ? "none" : "flex",
             color: "red",
           }}>
-          {message}
+          {valid ? " " : message}
         </Text>
       </View>
     )

mobile/src/ui/BoundPhotoPanel.js

@@ -12,19 +12,9 @@ import {
 import { Icon } from "."
 import ImagePicker from "react-native-image-picker"
 import ImageResizer from "react-native-image-resizer"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { api } from "../API"
-
+import { PhotoPanel } from "."
-const getScreenPortraitDimensions = () => {
-  const { width, height } = Dimensions.get("window")
-
-  return {
-    screenWidth: Math.min(width, height),
-    screenHeight: Math.max(width, height),
-  }
-}
-
-const photoSpacing = 10
 
 export class BoundPhotoPanel extends Component {
   static propTypes = {
@@ -35,10 +25,8 @@ export class BoundPhotoPanel extends Component {
 
   constructor(props) {
     super(props)
-
+    reactAutoBind(this)
-    const { name, binder } = this.props
+    this.state = this.props.binder.getBindingState(this.props.name)
-
-    this.state = binder.getBindingState(name)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -47,7 +35,6 @@ export class BoundPhotoPanel extends Component {
     }
   }
 
-  @autobind
   handlePhotoPress(index) {
     const { onUploadStarted, onUploadEnded, onUploadProgress } = this.props
 
@@ -98,57 +85,15 @@ export class BoundPhotoPanel extends Component {
     )
   }
 
-  @autobind
-  handleLayout(e) {
-    if (!this.state.photoSize) {
-      const { layout } = e.nativeEvent
-      const ratio = 3 / 4
-      const width = (layout.width - photoSpacing) / 2
-      const height = width / ratio
-
-      this.setState({ photoSize: { width, height } })
-    }
-  }
-
   render() {
-    const { photoSize, value: assetIds } = this.state
+    const { photoSize, value } = this.state
-
-    const renderPhoto = (index) => {
-      const assetId = assetIds[index]
-
-      return (
-        <TouchableOpacity
-          key={assetId || "blank" + index.toString()}
-          style={{
-            width: photoSize.width,
-            height: photoSize.height,
-            borderWidth: 2,
-            borderColor: "gray",
-            borderRadius: 4,
-            justifyContent: "center",
-          }}
-          onPress={() => this.handlePhotoPress(index)}>
-          {!assetId && (
-            <Icon name="add" size={24} style={{ alignSelf: "center" }} />
-          )}
-          {assetId && (
-            <Image
-              source={{ uri: api.makeImageUrl(assetId) }}
-              style={{ width: "100%", height: "100%" }}
-              resizeMode="contain"
-            />
-          )}
-        </TouchableOpacity>
-      )
-    }
 
     return (
       <View
         style={{
           flexDirection: "column",
           justifyContent: "space-between",
-        }}
+        }}>
-        onLayout={this.handleLayout}>
         <Text
           style={{
             fontSize: 14,
@@ -156,18 +101,7 @@ export class BoundPhotoPanel extends Component {
           }}>
           Pictures:
         </Text>
-        {photoSize && (
+        <PhotoPanel onPhotoPress={this.handlePhotoPress} value={value} />
-          <View style={styles.photoRow}>
-            {renderPhoto(0)}
-            {renderPhoto(1)}
-          </View>
-        )}
-        {photoSize && (
-          <View style={styles.photoRow}>
-            {renderPhoto(2)}
-            {renderPhoto(3)}
-          </View>
-        )}
       </View>
     )
   }

mobile/src/ui/BoundSwitch.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { View, Switch, Text } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundSwitch extends React.Component {
   static propTypes = {
@@ -12,10 +12,10 @@ export class BoundSwitch extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = props.binder.getBindingState(props.name)
   }
 
-  @autobind
   handleValueChange(newValue) {
     const { binder, name } = this.props
     const state = binder.getBindingState(name)

mobile/src/ui/BubbleLoader.js

@@ -20,7 +20,7 @@ export class BubbleLoader extends React.Component {
         this.animatedScales.map((value, i) =>
           Animated.sequence([
             Animated.timing(value, {
-              toValue: 0.2,
+              toValue: 0.01,
               duration: 800,
               delay: 200 * i,
               easing: Easing.out(Easing.sin),

mobile/src/ui/FormStaticInput.js

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { TextInput, Text, View, Platform } from "react-native"
-import autobind from "autobind-decorator"
 
 export class FormStaticInput extends React.Component {
   static propTypes = {
@@ -40,6 +39,7 @@ export class FormStaticInput extends React.Component {
           underlineColorAndroid="white"
           value={value}
         />
+        <Text>&nbsp;</Text>
       </View>
     )
   }

mobile/src/ui/FormStaticOptionStrip.js

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { OptionStrip } from "."
+
+export class FormStaticOptionStrip extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+    ).isRequired,
+    value: PropTypes.string,
+  }
+
+  render() {
+    const { label, value, options } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <OptionStrip value={value} readOnly options={options} />
+        <Text>&nbsp;</Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/FormStaticPhotoPanel.js

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { PhotoPanel } from "."
+
+export class FormStaticPhotoPanel extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    value: PropTypes.arrayOf(PropTypes.string),
+  }
+
+  render() {
+    const { label, value, options } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <PhotoPanel value={value} readOnly />
+        <Text>&nbsp;</Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/Geolocation.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
-import { Image, View } from "react-native"
 import PropTypes from "prop-types"
-import autobind from "autobind-decorator"
+import { config } from "../config"
+import { reactAutoBind } from "auto-bind2"
 
 export class Geolocation extends Component {
   static propTypes = {
@@ -19,15 +19,29 @@ export class Geolocation extends Component {
   }
 
   componentDidMount() {
-    navigator.geolocation.getCurrentPosition((position) => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
         this.props.onUpdate(position)
 
         if (this.props.watch) {
-        this.watchId = navigator.geolocation.watchPosition((position) =>
+          ;(this.watchId = navigator.geolocation.watchPosition((position) =>
             this.props.onUpdate(position)
-        )
+          )),
+            null,
+            {
+              distanceFilter: 5,
+              maximumAge: 0,
+              timeout: 20000,
             }
-    })
+        }
+      },
+      null,
+      {
+        distanceFilter: 5,
+        maximumAge: 0,
+        timeout: 20000,
+      }
+    )
   }
 
   componentWillUnmount() {

mobile/src/ui/OptionStrip.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { View, Text, TouchableHighlight } from "react-native"
 import PropTypes from "prop-types"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class OptionStrip extends Component {
   static propTypes = {
@@ -9,17 +9,18 @@ export class OptionStrip extends Component {
       PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
     ).isRequired,
     value: PropTypes.string,
+    readOnly: PropTypes.bool,
     onValueChanged: PropTypes.func,
   }
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       selectedOption: this.getSelectedOption(props.options, props.value),
     }
   }
 
-  @autobind
   getSelectedOption(options, value) {
     return options.find((option) => value === option.value) || null
   }
@@ -38,18 +39,18 @@ export class OptionStrip extends Component {
     }
   }
 
-  @autobind
   handlePress(option) {
     const { onValueChanged } = this.props
 
-    this.setState({ selectedOption: option })
     if (onValueChanged) {
       onValueChanged(option.value)
+    } else if (!this.props.readOnly) {
+      this.setState({ selectedOption: option })
     }
   }
 
   render() {
-    const { style, options, value } = this.props
+    const { style, options, value, readOnly } = this.props
     const { selectedOption } = this.state
 
     // TODO: Handle visible, disabled & read-only
@@ -59,6 +60,7 @@ export class OptionStrip extends Component {
         {options.map((option, index) => (
           <TouchableHighlight
             key={index}
+            disabled={readOnly}
             underlayColor="#3BB0FD"
             style={[
               {
@@ -66,7 +68,11 @@ export class OptionStrip extends Component {
                 flexBasis: 0,
                 height: 40,
                 backgroundColor:
-                  option === selectedOption ? "#3BB0FD" : "#EEEEEE",
+                  option !== selectedOption
+                    ? "#EEEEEE"
+                    : readOnly
+                      ? "#AAAAAA"
+                      : "#3BB0FD",
               },
               index === 0 && {
                 borderTopLeftRadius: 6,

mobile/src/ui/PhotoPanel.js

@@ -0,0 +1,108 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  ActivityIndicator,
+} from "react-native"
+import { Icon } from "."
+import { reactAutoBind } from "auto-bind2"
+import { api } from "../API"
+
+const photoSpacing = 10
+
+export class PhotoPanel extends Component {
+  static propTypes = {
+    onPhotoPress: PropTypes.func,
+    readOnly: PropTypes.bool,
+    value: PropTypes.arrayOf(PropTypes.string),
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = {
+      photoSize: null,
+    }
+  }
+
+  handleLayout(e) {
+    if (!this.state.photoSize) {
+      const { layout } = e.nativeEvent
+      const ratio = 3 / 4
+      const width = (layout.width - photoSpacing) / 2
+      const height = width / ratio
+
+      this.setState({ photoSize: { width, height } })
+    }
+  }
+
+  render() {
+    const { photoSize } = this.state
+    const { value: assetIds, readOnly, onPhotoPress } = this.props
+    const renderPhoto = (index) => {
+      const assetId = assetIds && assetIds[index]
+
+      return (
+        <TouchableOpacity
+          key={assetId || "blank" + index.toString()}
+          disabled={readOnly}
+          style={{
+            width: photoSize.width,
+            height: photoSize.height,
+            borderWidth: 2,
+            borderColor: "gray",
+            borderRadius: 4,
+            justifyContent: "center",
+          }}
+          onPress={() => onPhotoPress(index)}>
+          {!assetId && (
+            <Icon
+              name={!readOnly ? "add" : "blank"}
+              size={24}
+              style={{ alignSelf: "center" }}
+            />
+          )}
+          {assetId && (
+            <Image
+              source={{ uri: api.makeImageUrl(assetId) }}
+              style={{ width: "100%", height: "100%" }}
+              resizeMode="contain"
+            />
+          )}
+        </TouchableOpacity>
+      )
+    }
+
+    return (
+      <View onLayout={this.handleLayout}>
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(0)}
+            {renderPhoto(1)}
+          </View>
+        )}
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(2)}
+            {renderPhoto(3)}
+          </View>
+        )}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  photoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+})

mobile/src/ui/index.js

@@ -3,10 +3,13 @@ export { Header } from "./Header"
 export { OptionStrip } from "./OptionStrip"
 export { BubbleLoader } from "./BubbleLoader"
 export { ProgressBar } from "./ProgressBar"
+export { PhotoPanel } from "./PhotoPanel"
 export { Geolocation } from "./Geolocation"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"
+export { FormStaticPhotoPanel } from "./FormStaticPhotoPanel"
+export { FormStaticOptionStrip } from "./FormStaticOptionStrip"
 export { BoundButton } from "./BoundButton"
 export { BoundOptionStrip } from "./BoundOptionStrip"
 export { BoundHeader } from "./BoundHeader"

mobile/src/util.js

@@ -1,13 +1,13 @@
 export const geoDistance = (lat1, lng1, lat2, lng2, unit) => {
-  var radlat1 = Math.PI * lat1 / 180
+  var radlat1 = (Math.PI * lat1) / 180
-  var radlat2 = Math.PI * lat2 / 180
+  var radlat2 = (Math.PI * lat2) / 180
   var theta = lng1 - lng2
-  var radtheta = Math.PI * theta / 180
+  var radtheta = (Math.PI * theta) / 180
   var dist =
     Math.sin(radlat1) * Math.sin(radlat2) +
     Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta)
   dist = Math.acos(dist)
-  dist = dist * 180 / Math.PI
+  dist = (dist * 180) / Math.PI
   dist = dist * 60 * 1.1515
   if (unit == "K") {
     dist = dist * 1.609344
@@ -56,13 +56,22 @@ export const pad = (num, size) => {
   return s
 }
 
-export const dotify = (s) => {
+export const dotify = (s, len = 30) => {
+  let pre = false
+
+  if (len < 0) {
+    pre = true
+    len = -len
+  }
+
   if (!s) {
     return "..."
-  } else if (s.length < 30) {
+  } else if (s.length < len) {
     return s
+  } else if (pre) {
+    return "..." + s.slice(s.length - len - 3)
   } else {
-    return s.substring(0, 26) + "..."
+    return s.slice(0, len - 3) + "..."
   }
 }
 

mobile/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.1',
+  version: '1.4.3',
-  fullVersion: '1.0.1-20180518.0',
+  fullVersion: '1.4.3-20180708.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deighton-ar",
-  "version": "1.0.1",
+  "version": "1.4.3",
   "description": "Deighton AR Training System",
   "main": "index.js",
   "repository": {

server/config/default-test.json5

@@ -22,6 +22,7 @@
     maxPasswordTokenAgeInHours: 3,
     sendEmailDelayInSeconds: 3,
     supportEmail: 'support@kss.us.com',
-    sendEmail: true
+    sendEmail: true,
+    appName: "Deighton AR Test",
   }
 }

server/config/default.json5

@@ -22,6 +22,7 @@
     maxPasswordTokenAgeInHours: 3,
     sendEmailDelayInSeconds: 3,
     supportEmail: 'support@kss.us.com',
-    sendEmail: true
+    sendEmail: true,
+    appName: "Deighton AR",
   }
 }

server/nginx.conf

@@ -12,7 +12,7 @@ server {
 
   # Any route that starts with /api/ is for the backend
   location /api/ {
-    error_page 502 503 $scheme://$server_name/500.json;
+    error_page 502 503 504 $scheme://$server_name/500.json;
 
     proxy_pass http://127.0.0.1:3006/;
     proxy_buffering off;

server/out.csv

@@ -0,0 +1,2 @@
+hello,foo
+"x,y","a,b"

server/package-lock.json

@@ -126,7 +126,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -1560,6 +1559,16 @@
         "cssom": "0.3.x"
       }
     },
+    "csv-write-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/csv-write-stream/-/csv-write-stream-2.0.0.tgz",
+      "integrity": "sha1-/C2iGkjW6l+MF/3jnPuRHk8CkrA=",
+      "requires": {
+        "argparse": "^1.0.7",
+        "generate-object-property": "^1.0.0",
+        "ndjson": "^1.3.0"
+      }
+    },
     "d": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
@@ -3270,6 +3279,14 @@
         }
       }
     },
+    "generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "requires": {
+        "is-property": "^1.0.0"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -3674,6 +3691,11 @@
       "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
       "dev": true
     },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -4495,8 +4517,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
-      "dev": true
     },
     "json5": {
       "version": "0.5.1",
@@ -4972,6 +4993,24 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "ndjson": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/ndjson/-/ndjson-1.5.0.tgz",
+      "integrity": "sha1-rmA7NrE0vOw0e0UkIrC/mNWDLsg=",
+      "requires": {
+        "json-stringify-safe": "^5.0.1",
+        "minimist": "^1.2.0",
+        "split2": "^2.1.0",
+        "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -6124,8 +6163,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-      "dev": true
     },
     "sshpk": {
       "version": "1.13.1",

server/package.json

@@ -7,7 +7,7 @@
     "start": "babel-node src/server.js",
     "start:prod": "NODE_ENV=production node dist/server.js",
     "build": "rm -rf dist && babel src -d dist -s",
-    "deploy": "rsync -vr -e ssh --exclude-from .rsync-exclude * $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST:deighton-ar-server/ && ssh $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST 'cd deighton-ar-server; npm install; sudo ./ops restart; sudo ./ops --test restart'",
+    "deploy": "rsync -vr -e ssh --exclude-from .rsync-exclude * $SNAP_DEPLOY_USER_HOST:deighton-ar-server/ && ssh $SNAP_DEPLOY_USER_HOST 'cd deighton-ar-server; npm install; sudo ./ops restart; sudo ./ops --test restart'",
     "test": "jest",
     "actor:api": "monzilla 'src/api/**/*.js:src/database/**/*.js' -- babel-node src/api/index.js",
     "actor:api:debug": "babel-node --inspect-brk src/api/index.js",
@@ -28,6 +28,7 @@
     "config": "^1.25.1",
     "cors": "^2.8.3",
     "credential": "^2.0.0",
+    "csv-write-stream": "^2.0.0",
     "deepmerge": "^2.1.0",
     "express": "^4.15.2",
     "gridfs-stream": "jlyonsmith/gridfs-stream",

server/src/api/routes/ActivityRoutes.js

@@ -6,7 +6,11 @@ import { catchAll, TeamRoutes, BaseRoutes } from "."
 @autobind
 export class ActivityRoutes extends BaseRoutes {
   constructor(container) {
-    super(container, container.db.Activity)
+    super({
+      container,
+      model: container.db.Activity,
+      nonAdmin: { listItems: true, createItem: true, getItem: true },
+    })
 
     const app = container.app
 
@@ -19,6 +23,12 @@ export class ActivityRoutes extends BaseRoutes {
   }
 
   async deleteAllActivities(req, res, next) {
+    const isAdmin = !!req.user.administrator
+
+    if (!isAdmin) {
+      throw createError.Forbidden()
+    }
+
     const Activity = this.db.Activity
     const Team = this.db.Team
 

server/src/api/routes/AssetRoutes.js

@@ -8,22 +8,7 @@ import config from "config"
 import autobind from "autobind-decorator"
 import { PassThrough } from "stream"
 import { catchAll } from "."
-
+import { pipeToPromise } from "../../util"
-function pipeToGridFS(readable, writeable) {
-  const promise = new Promise((resolve, reject) => {
-    readable.on("error", (error) => {
-      reject(error)
-    })
-    writeable.on("error", (error) => {
-      reject(error)
-    })
-    writeable.on("finish", (file) => {
-      resolve(file)
-    })
-  })
-  readable.pipe(writeable)
-  return promise
-}
 
 @autobind
 export class AssetRoutes {
@@ -109,7 +94,7 @@ export class AssetRoutes {
   }
 
   async beginAssetUpload(req, res, next) {
-    const uploadId = this.db.newObjectId()
+    const uploadId = this.db.newObjectId().toString()
     let {
       fileName,
       uploadSize,
@@ -224,12 +209,12 @@ export class AssetRoutes {
       if (uploadedChunks >= uploadData.numberOfChunks) {
         let readable = redisReadStream(this.rs.client, uploadDataId)
         let writeable = this.db.gridfs.openUploadStreamWithId(
-          uploadId,
+          this.db.newObjectId(uploadId),
           uploadData.fileName,
           { contentType: uploadData.contentType }
         )
 
-        const file = await pipeToGridFS(readable, writeable)
+        const file = await pipeToPromise(readable, writeable)
 
         await Promise.all([
           this.rs.del(uploadId),

server/src/api/routes/AuthRoutes.js

@@ -25,6 +25,8 @@ export class AuthRoutes {
     this.sendEmailDelayInSeconds = config.get("email.sendEmailDelayInSeconds")
     this.supportEmail = config.get("email.supportEmail")
     this.sendEmail = config.get("email.sendEmail")
+    this.appName = config.get("email.appName")
+    this.emailServiceName = config.get("serviceName.email")
     app
       .route("/auth/login")
       // Used to login. Email must be confirmed.
@@ -208,11 +210,12 @@ export class AuthRoutes {
           siteUrl.host
         }/confirm-email?email-token%3D${savedUser.emailToken.value}`,
         supportEmail: this.supportEmail,
+        appName: this.appName,
       },
     })
 
     if (this.sendEmail) {
-      await this.mq.request("dar-email", "sendEmail", msgs)
+      await this.mq.request(this.emailServiceName, "sendEmail", msgs)
     }
 
     res.json({})
@@ -393,10 +396,11 @@ export class AuthRoutes {
           siteUrl.host
         }/reset-password?password-token%3D${savedUser.passwordToken.value}`,
         supportEmail: this.supportEmail,
+        appName: this.appName,
       },
     }
     if (this.sendEmail) {
-      await this.mq.request("dar-email", "sendEmail", msg)
+      await this.mq.request(this.emailServiceName, "sendEmail", msg)
     }
 
     res.json({})

server/src/api/routes/BaseRoutes.js

@@ -3,14 +3,23 @@ import createError from "http-errors"
 import autobind from "autobind-decorator"
 import { catchAll } from "."
 
+// The list of functions you can list in options.nonAdmin is:
+//
+// listItems
+// createItem
+// updateItem
+// getItem
+// deleteItem
+
 @autobind
 export class BaseRoutes {
-  constructor(container, model) {
+  constructor(options) {
-    this.model = model
+    const { container } = options
+    this.options = options
     this.log = container.log
     this.db = container.db
 
-    const basePath = "/" + model.collection.collectionName
+    const basePath = "/" + options.model.collection.collectionName
     const app = container.app
 
     app
@@ -41,7 +50,13 @@ export class BaseRoutes {
   }
 
   async listItems(req, res, next) {
-    const ItemModel = this.model
+    const isAdmin = !!req.user.administrator
+
+    if (!this.options.nonAdmin.listItems && !isAdmin) {
+      throw createError.Forbidden()
+    }
+
+    const ItemModel = this.options.model
     const limit = req.query.limit || 20
     const skip = req.query.skip || 0
     const partial = !!req.query.partial
@@ -74,14 +89,14 @@ export class BaseRoutes {
     })
   }
 
-  async createItem(req, res, next) {
+  async createItem(req, res) {
-    const isAdmin = req.user.administrator
+    const isAdmin = !!req.user.administrator
 
-    if (!isAdmin) {
+    if (!this.options.nonAdmin.createItem && !isAdmin) {
-      return new createError.Forbidden()
+      throw createError.Forbidden()
     }
 
-    const ItemModel = this.model
+    const ItemModel = this.options.model
     let item = new ItemModel(req.body)
 
     const newItem = await item.save()
@@ -89,11 +104,11 @@ export class BaseRoutes {
     res.json(newItem.toClient())
   }
 
-  async updateItem(req, res, next) {
+  async updateItem(req, res) {
-    const isAdmin = req.user.administrator
+    const isAdmin = !!req.user.administrator
 
-    if (!isAdmin) {
+    if (!this.options.nonAdmin.updateItem && !isAdmin) {
-      return new createError.Forbidden()
+      throw createError.Forbidden()
     }
 
     // Do this here because Mongoose will add it automatically otherwise
@@ -101,11 +116,11 @@ export class BaseRoutes {
       throw createError.BadRequest("No _id given in body")
     }
 
-    let ItemModel = this.model
+    let ItemModel = this.options.model
     let item = await ItemModel.findById(req.body._id)
 
     if (!item) {
-      return next(createError.NotFound(`Item with _id ${_id} was not found`))
+      throw createError.NotFound(`Item with _id ${_id} was not found`)
     }
 
     item.merge(new ItemModel(req.body))
@@ -115,8 +130,14 @@ export class BaseRoutes {
     res.json(savedItem.toClient())
   }
 
-  async getItem(req, res, next) {
+  async getItem(req, res) {
-    const ItemModel = this.model
+    const isAdmin = !!req.user.administrator
+
+    if (!this.options.nonAdmin.getItem && !isAdmin) {
+      throw createError.Forbidden()
+    }
+
+    const ItemModel = this.options.model
     const _id = req.params._id
     const item = await ItemModel.findById(_id)
 
@@ -127,14 +148,14 @@ export class BaseRoutes {
     res.json(item.toClient())
   }
 
-  async deleteItem(req, res, next) {
+  async deleteItem(req, res) {
-    const isAdmin = req.user.administrator
+    const isAdmin = !!req.user.administrator
 
-    if (!isAdmin) {
+    if (!this.options.nonAdmin.deleteItem && !isAdmin) {
-      return new createError.Forbidden()
+      throw createError.Forbidden()
     }
 
-    const ItemModel = this.model
+    const ItemModel = this.options.model
     const _id = req.params._id
     const item = await ItemModel.remove({ _id })
 

server/src/api/routes/TeamRoutes.js

@@ -4,11 +4,16 @@ import autobind from "autobind-decorator"
 import zlib from "zlib"
 import { Readable } from "stream"
 import { catchAll, BaseRoutes } from "."
+import csvWriter from "csv-write-stream"
 
 @autobind
 export class TeamRoutes extends BaseRoutes {
   constructor(container) {
-    super(container, container.db.Team)
+    super({
+      container,
+      model: container.db.Team,
+      nonAdmin: { listItems: true, getItem: true },
+    })
 
     container.app
       .route("/teams/status")
@@ -19,30 +24,56 @@ export class TeamRoutes extends BaseRoutes {
   }
 
   async getTeamStatus(req, res, next) {
+    const isAdmin = !!req.user.administrator
+
+    if (!isAdmin) {
+      throw createError.Forbidden()
+    }
+
+    res.writeHead(200, {
+      "Content-Type": "application/gzip",
+      "Content-Disposition": 'attachment; filename="team-data.csv.gzip"',
+    })
+    const gzip = zlib.createGzip()
+    const writeable = csvWriter({
+      headers: [
+        "Team Name",
+        "Start Time",
+        "Activity Status",
+        "Activity Created",
+        "WorkItem Ticket",
+        "WorkItem Type",
+        "Activity Resolution",
+        "Activity Notes",
+      ],
+    })
+
+    writeable.pipe(gzip).pipe(res)
+
     const Team = this.db.Team
+    const WorkItem = this.db.WorkItem
     const Activity = this.db.Activity
     let teams = await Team.find({}).exec()
 
-    teams = teams.map((doc) => doc.toObject({ versionKey: false }))
-
     for (let team of teams) {
       let activities = await Activity.find({ team: team._id }).exec()
 
-      team.activities = activities.map((doc) =>
+      for (let activity of activities) {
-        doc.toObject({ versionKey: false })
+        const workItem = await WorkItem.findById(activity.workItem).exec()
-      )
-    }
 
-    const gzip = zlib.createGzip()
+        writeable.write([
-    let readable = new Readable()
+          team.name,
-
+          team.start,
-    readable.push(JSON.stringify(teams, null, "  "))
+          activity.status,
-    readable.push(null)
+          activity.createdAt,
-
+          workItem.ticketNumber,
-    res.writeHead(200, {
+          workItem.workItemType,
-      "Content-Type": "application/gzip",
+          activity.resolution,
-      "Content-Disposition": 'attachment; filename="team-scores.gzip"',
+          activity.notes,
-    })
+        ])
-    readable.pipe(gzip).pipe(res)
+      }
+    }
+
+    writeable.end()
   }
 }

server/src/api/routes/UserRoutes.js

@@ -19,6 +19,8 @@ export class UserRoutes {
     this.ws = container.ws
     this.maxEmailTokenAgeInHours = config.get("email.maxEmailTokenAgeInHours")
     this.sendEmail = config.get("email.sendEmail")
+    this.emailServiceName = config.get("serviceName.email")
+
     app
       .route("/users")
       .get(
@@ -110,7 +112,7 @@ export class UserRoutes {
     const isSelf = _id === req.user._id
     const isAdmin = req.user.administrator
 
-    // User can see themselves, otherwise must be super user
+    // User can see themselves, otherwise must be admin
     if (!isSelf && !isAdmin) {
       throw createError.Forbidden()
     }
@@ -164,7 +166,7 @@ export class UserRoutes {
     res.json(savedUser.toClient())
 
     if (this.sendEmail) {
-      await this.mq.request("dar-email", "sendEmail", msg)
+      await this.mq.request(this.emailServiceName, "sendEmail", msg)
     }
   }
 
@@ -183,8 +185,8 @@ export class UserRoutes {
       throw createError.Forbidden()
     }
 
-    if (isSelf && !isAdmin) {
+    if (isSelf && isAdmin && !req.body.administrator) {
-      throw createError.BadRequest("Cannot modify own administrator level")
+      throw createError.BadRequest("Cannot remove own administrator level")
     }
 
     const User = this.db.User
@@ -197,7 +199,7 @@ export class UserRoutes {
     // We don't allow direct updates to the email field so remove it if present
     const userUpdates = new User(req.body)
 
-    delete userUpdates.email
+    userUpdates.email = undefined
 
     user.merge(userUpdates)
     const savedUser = await user.save()
@@ -244,7 +246,7 @@ export class UserRoutes {
     res.json({})
 
     if (this.sendEmail) {
-      await this.mq.request("dar-email", "sendEmail", msg)
+      await this.mq.request(this.emailServiceName, "sendEmail", msg)
     }
   }
 }

server/src/api/routes/WorkItemRoutes.js

@@ -7,7 +7,11 @@ import { catchAll, BaseRoutes } from "."
 @autobind
 export class WorkItemRoutes extends BaseRoutes {
   constructor(container) {
-    super(container, container.db.WorkItem)
+    super({
+      container,
+      model: container.db.WorkItem,
+      nonAdmin: { listItems: true, getItem: true },
+    })
     const app = container.app
 
     app
@@ -25,6 +29,15 @@ export class WorkItemRoutes extends BaseRoutes {
       )
   }
 
+  async deleteItem(req, res, next) {
+    super.deleteItem(req, res, next)
+
+    const id = req.params._id
+    const Activity = this.db.Activity
+
+    await Activity.remove({ workItem: id })
+  }
+
   async listWorkItemActivities(req, res, next) {
     const WorkItem = this.db.WorkItem
     const aggregate = WorkItem.aggregate()
@@ -54,6 +67,12 @@ export class WorkItemRoutes extends BaseRoutes {
   }
 
   async deleteAllWorkItems(req, res, next) {
+    const isAdmin = !!req.user.administrator
+
+    if (!isAdmin) {
+      throw createError.Forbidden()
+    }
+
     const Activity = this.db.Activity
     const WorkItem = this.db.WorkItem
     const Team = this.db.Team

server/src/util.js

@@ -0,0 +1,39 @@
+import stream from "stream"
+
+export function streamToBuffer(readable) {
+  return new Promise((resolve, reject) => {
+    var chunks = []
+    var writeable = new stream.Writable()
+
+    writeable._write = function(chunk, enc, done) {
+      chunks.push(chunk)
+      done()
+    }
+
+    readable.on("end", function() {
+      resolve(Buffer.concat(chunks))
+    })
+
+    readable.on("error", (err) => {
+      reject(err)
+    })
+
+    readable.pipe(writeable)
+  })
+}
+
+export function pipeToPromise(readable, writeable) {
+  const promise = new Promise((resolve, reject) => {
+    readable.on("error", (error) => {
+      reject(error)
+    })
+    writeable.on("error", (error) => {
+      reject(error)
+    })
+    writeable.on("finish", (file) => {
+      resolve(file)
+    })
+  })
+  readable.pipe(writeable)
+  return promise
+}

server/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.1',
+  version: '1.4.3',
-  fullVersion: '1.0.1-20180518.0',
+  fullVersion: '1.4.3-20180708.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

version.json5

@@ -15,11 +15,11 @@
   buildFormat: "full",
   tags: {
     major: 1,
-    minor: 0,
+    minor: 4,
-    patch: 1,
+    patch: 3,
-    build: 20180518,
+    build: 20180708,
     revision: 0,
-    sequence: 4,
+    sequence: 16,
     tz: "America/Los_Angeles",
     title: "Deighton AR System",
     copyright: "© 2018, Kingston Software Solutions.",
@@ -93,7 +93,7 @@
       glob: "**/AndroidManifest.xml",
       updates: [
         {
-          search: "(?<begin>android:versionCode=\")\\d?(?<end>\")",
+          search: "(?<begin>android:versionCode=\")\\d+(?<end>\")",
           replace: "${begin}${sequence}${end}"
         },
         {

website/package.json

@@ -62,7 +62,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "deploy": "rsync -vr -e ssh build/* $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST:deighton-ar-website/",
+    "deploy": "rsync -vr -e ssh build/* $SNAP_DEPLOY_USER_HOST:deighton-ar-website/",
     "lint": "eslint --ext .js --ext .jsx src/",
     "lint:fix": "eslint --ext .js --ext .jsx --fix src/"
   },

website/src/API.js

@@ -52,12 +52,12 @@ class API extends EventEmitter {
           localStorage.removeItem(authTokenKeyName)
           sessionStorage.removeItem(authTokenKeyName)
           this._token = null
-          this._user = {}
+          this._user = { loggedOut: true }
           this.socket = null
           this.emit("logout")
         })
     } else {
-      this._user = {}
+      this._user = { loggedOut: true }
     }
   }
 
@@ -229,7 +229,7 @@ class API extends EventEmitter {
       localStorage.removeItem(authTokenKeyName)
       sessionStorage.removeItem(authTokenKeyName)
       this._token = null
-      this._user = {}
+      this._user = { loggedOut: true }
       this.disconnectSocket()
       this.emit("logout")
     }

website/src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import {
   Login,
   Logout,
+  Parking,
   ResetPassword,
   ForgotPassword,
   ConfirmEmail,
@@ -12,7 +13,6 @@ import { Home } from "./Home"
 import { Profile } from "./Profile"
 import { Users } from "./Users"
 import { Teams } from "./Teams"
-import { System } from "./System"
 import { Header, Column, Footer } from "ui"
 import { BrowserRouter, Route, Switch } from "react-router-dom"
 import { sizeInfo } from "ui/style"
@@ -29,18 +29,38 @@ export class App extends Component {
       <BrowserRouter>
         <Column minHeight="100vh">
           <Route
-            path="/app"
+            path="/admin"
             render={(props) => (
               <Column.Item height={sizeInfo.headerHeight}>
                 <Header
                   {...props}
                   left={[
-                    { image: require("images/badge.png"), path: "/app/home" },
+                    { image: require("images/badge.png"), path: "/admin/home" },
-                    { text: "Teams", path: "/app/teams" },
+                    { text: "Teams", path: "/admin/teams" },
-                    { text: "Users", path: "/app/users" },
+                    { text: "Users", path: "/admin/users" },
                   ]}
                   right={[
-                    { icon: "profile", path: "/app/profile" },
+                    { icon: "profile", path: "/admin/profile" },
+                    { icon: "logout", path: "/logout" },
+                  ]}
+                />
+              </Column.Item>
+            )}
+          />
+          <Route
+            path="/user"
+            render={(props) => (
+              <Column.Item height={sizeInfo.headerHeight}>
+                <Header
+                  {...props}
+                  left={[
+                    {
+                      image: require("images/badge.png"),
+                      path: "/user/profile",
+                    },
+                  ]}
+                  right={[
+                    { icon: "profile", path: "/user/profile" },
                     { icon: "logout", path: "/logout" },
                   ]}
                 />
@@ -50,18 +70,24 @@ export class App extends Component {
           <Switch>
             <Route exact path="/login" component={Login} />
             <Route exact path="/logout" component={Logout} />
+            <Route exact path="/parking" component={Parking} />
             <Route exact path="/confirm-email" component={ConfirmEmail} />
             <Route exact path="/reset-password" component={ResetPassword} />
             <Route exact path="/forgot-password" component={ForgotPassword} />
-            <ProtectedRoute exact path="/app/profile" component={Profile} />
+            <ProtectedRoute exact path="/user/profile" component={Profile} />
-            <ProtectedRoute exact admin path="/app/home" component={Home} />
+            <ProtectedRoute
-            <ProtectedRoute exact admin path="/app/teams" component={Teams} />
+              exact
-            <ProtectedRoute exact admin path="/app/system" component={System} />
+              admin
-            <ProtectedRoute exact admin path="/app/users" component={Users} />
+              path="/admin/profile"
-            <DefaultRoute redirect="/app/home" />
+              component={Profile}
+            />
+            <ProtectedRoute exact admin path="/admin/home" component={Home} />
+            <ProtectedRoute exact admin path="/admin/teams" component={Teams} />
+            <ProtectedRoute exact admin path="/admin/users" component={Users} />
+            <DefaultRoute user="/user/profile" admin="/admin/home" />
           </Switch>
           <Route
-            path="/app"
+            path="/(user|admin)"
             render={() => (
               <Column.Item>
                 <Footer

website/src/Auth/ConfirmEmail.js

@@ -79,7 +79,7 @@ export class ConfirmEmail extends React.Component {
     return (
       <div>
         <WaitModal
-          active={!!waitModal}
+          open={!!waitModal}
           message={waitModal ? waitModal.message : ""}
         />
 

website/src/Auth/DefaultRoute.js

@@ -1,14 +1,49 @@
 import React, { Component } from "react"
 import { Route, Redirect } from "react-router-dom"
 import PropTypes from "prop-types"
+import { api } from "src/API"
 
 export class DefaultRoute extends Component {
   static propTypes = {
-    redirect: PropTypes.string,
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+      search: PropTypes.string,
+    }),
+    user: PropTypes.string.isRequired,
+    admin: PropTypes.string.isRequired,
   }
 
   render() {
-    // NOTE: When working on the site, Redirect to the page you are working on
+    const user = api.loggedInUser
-    return <Route render={() => <Redirect to={this.props.redirect} />} />
+
+    if (user.loggedOut) {
+      return <Route render={() => <Redirect to="/login" />} />
+    } else if (user.pending) {
+      // If login token has not yet been confirmed, park until it is then come back here
+      return (
+        <Route
+          render={() => (
+            <Redirect
+              to={`/parking?redirect=${this.props.location.pathname}`}
+            />
+          )}
+        />
+      )
+    } else {
+      // Render a redirect to the user or admin default page
+      return (
+        <Route
+          render={() => (
+            <Redirect
+              to={
+                user._id && user.administrator
+                  ? this.props.admin
+                  : this.props.user
+              }
+            />
+          )}
+        />
+      )
+    }
   }
 }

website/src/Auth/ForgotPassword.js

@@ -151,7 +151,7 @@ export class ForgotPassword extends Component {
         </Column.Item>
         <Column.Item grow>
           <WaitModal
-            active={!!waitModal}
+            open={!!waitModal}
             message={waitModal ? waitModal.message : ""}
           />
 

website/src/Auth/Login.js

@@ -75,7 +75,9 @@ export class Login extends Component {
           this.setState({ waitModal: false })
           if (this.props.history) {
             let url =
-              new URLSearchParams(window.location.search).get("redirect") || "/"
+              new URLSearchParams(this.props.history.location.search).get(
+                "redirect"
+              ) || "/"
 
             try {
               this.props.history.replace(url)
@@ -224,7 +226,7 @@ export class Login extends Component {
           </Row>
         </Column.Item>
         <Column.Item grow>
-          <WaitModal active={waitModal} message="Logging in..." />
+          <WaitModal open={waitModal} message="Logging in..." />
           <MessageModal
             error
             open={!!messageModal}

website/src/Auth/Parking.js

@@ -0,0 +1,53 @@
+import React, { Component, Fragment } from "react"
+import PropTypes from "prop-types"
+import { api } from "src/API"
+import { WaitModal } from "../Modal"
+import { Column } from "ui"
+import autobind from "autobind-decorator"
+
+export class Parking extends Component {
+  static propTypes = {
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  }
+
+  componentDidMount() {
+    api.addListener("login", this.goToRedirect)
+    api.addListener("logout", this.goToLogin)
+  }
+
+  componentWillUnmount() {
+    api.removeListener("login", this.goToRedirect)
+    api.removeListener("logout", this.goToLogin)
+  }
+
+  @autobind
+  goToRedirect() {
+    if (this.props.history) {
+      let url =
+        new URLSearchParams(this.props.history.location.search).get(
+          "redirect"
+        ) || "/"
+
+      try {
+        this.props.history.replace(url)
+      } catch (error) {
+        this.props.history.replace("/")
+      }
+    }
+  }
+
+  @autobind
+  goToLogin() {
+    this.props.history.replace("/login")
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <Column.Item grow>
+          <WaitModal open loader={false} message="Authenticating..." />
+        </Column.Item>
+      </Fragment>
+    )
+  }
+}

website/src/Auth/ProtectedRoute.js

@@ -1,8 +1,7 @@
-import React from 'react'
+import React from "react"
-import { Route, Redirect } from 'react-router'
+import { Route, Redirect } from "react-router"
-import { PropTypes } from 'prop-types'
+import { PropTypes } from "prop-types"
-import { api } from 'src/API'
+import { api } from "src/API"
-import autobind from 'autobind-decorator'
 
 export class ProtectedRoute extends React.Component {
   static propTypes = {
@@ -13,34 +12,33 @@ export class ProtectedRoute extends React.Component {
     admin: PropTypes.bool,
   }
 
-  @autobind
-  updateComponent() {
-    this.forceUpdate()
-  }
-
-  componentDidMount() {
-    api.addListener("login", this.updateComponent)
-    api.addListener("logout", this.updateComponent)
-  }
-
-  componentWillUnmount() {
-    api.removeListener("login", this.updateComponent)
-    api.removeListener("logout", this.updateComponent)
-  }
-
   render(props) {
     const user = api.loggedInUser
 
     if (user.pending) {
-      return null
+      // If login token has not yet been confirmed, park until it is and redirect back here
+      return (
+        <Route
+          render={() => (
+            <Redirect
+              to={`/parking?redirect=${this.props.location.pathname}`}
+            />
+          )}
+        />
+      )
     } else {
+      // If we are not a user or an admin go to the login page
       if (!user._id || (this.props.admin && !user.administrator)) {
         return (
+          <Route
+            render={() => (
               <Redirect
                 to={`/login?redirect=${this.props.location.pathname}${
                   this.props.location.search
                 }`}
               />
+            )}
+          />
         )
       } else {
         return <Route {...this.props} />

website/src/Auth/ResetPassword.js

@@ -123,7 +123,7 @@ export class ResetPassword extends Component {
             <Row.Item grow />
             <Row.Item width={sizeInfo.formRowSpacing} />
             <Row.Item width={sizeInfo.modalWidth}>
-              <form onSubmit={this.handleSubmit} id="resetPasswordForm">
+              <form onSubmit={this.handleSubmit} id="ResetPasswordForm">
                 <Box
                   border={{
                     width: sizeInfo.headerBorderWidth,
@@ -178,7 +178,7 @@ export class ResetPassword extends Component {
                               <BoundButton
                                 text="Submit"
                                 name="submit"
-                                submit="resetPasswordForm"
+                                submit="ResetPasswordForm"
                                 binder={binder}
                               />
                             </Row.Item>
@@ -205,7 +205,7 @@ export class ResetPassword extends Component {
           />
 
           <WaitModal
-            active={!!waitModal}
+            open={!!waitModal}
             message={waitModal ? waitModal.message : ""}
           />
         </Column.Item>

website/src/Auth/index.js

@@ -1,7 +1,8 @@
-export { Login } from './Login'
+export { Login } from "./Login"
-export { Logout } from './Logout'
+export { Logout } from "./Logout"
-export { ResetPassword } from './ResetPassword'
+export { Parking } from "./Parking"
-export { ForgotPassword } from './ForgotPassword'
+export { ResetPassword } from "./ResetPassword"
-export { ConfirmEmail } from './ConfirmEmail'
+export { ForgotPassword } from "./ForgotPassword"
-export { DefaultRoute } from './DefaultRoute'
+export { ConfirmEmail } from "./ConfirmEmail"
-export { ProtectedRoute } from './ProtectedRoute'
+export { DefaultRoute } from "./DefaultRoute"
+export { ProtectedRoute } from "./ProtectedRoute"

website/src/Home/Home.js

@@ -1,47 +1,217 @@
 import React, { Component, Fragment } from "react"
 import PropTypes from "prop-types"
-import { Row, Column, PanelButton } from "ui"
+import { Box, Image, Column, Row, Button, Link } from "ui"
-import { sizeInfo } from "ui/style"
+import { MessageModal, WaitModal, YesNoMessageModal } from "../Modal"
+import { sizeInfo, colorInfo } from "ui/style"
+import headerLogo from "images/logo.png"
+import autobind from "autobind-decorator"
+import { api } from "../API"
 
 export class Home extends Component {
   static propTypes = {
-    history: PropTypes.object,
+    changeTitle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      messageModal: null,
+      waitModal: null,
+      yesNoModal: null,
+    }
+  }
+
+  @autobind
+  handleDeleteActivities() {
+    this.setState({
+      yesNoModal: {
+        question:
+          "Are you sure you want to delete all activities in the system?",
+        onDismiss: this.handleDeleteActivitiesDismiss,
+      },
+    })
+  }
+
+  @autobind
+  handleDeleteActivitiesDismiss(yes) {
+    if (yes) {
+      this.setState({ waitModal: { message: "Deleting All Activities..." } })
+      api
+        .deleteAllActivities()
+        .then(() => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "thumb",
+              message: "All logged activities have been deleted",
+            },
+          })
+        })
+        .catch((error) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to request delete activities.",
+              detail: error.message,
+            },
+          })
+        })
+    }
+
+    this.setState({
+      yesNoModal: null,
+    })
+  }
+
+  @autobind
+  handleDeleteWorkItems() {
+    this.setState({
+      yesNoModal: {
+        question:
+          "Are you sure you want to delete all work items & activities in the system?",
+        onDismiss: this.handleDeleteWorkItemsDismiss,
+      },
+    })
+  }
+
+  @autobind
+  handleDeleteWorkItemsDismiss(yes) {
+    if (yes) {
+      this.setState({
+        waitModal: { message: "Deleting All Work Items & Activities..." },
+      })
+      api
+        .deleteAllWorkItems()
+        .then(() => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "thumb",
+              message: "All work items and logged activities have been deleted",
+            },
+          })
+        })
+        .catch((error) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to delete work items and activities.",
+              detail: error.message,
+            },
+          })
+        })
+    }
+
+    this.setState({
+      yesNoModal: null,
+    })
+  }
+
+  @autobind
+  handleMessageModalDismiss() {
+    this.setState({ messageModal: null })
   }
 
   render() {
+    const { messageModal, yesNoModal, waitModal } = this.state
+
     return (
       <Fragment>
         <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <Box
+                border={{
+                  width: sizeInfo.headerBorderWidth,
+                  color: colorInfo.headerBorder,
+                }}
+                radius={sizeInfo.formBoxRadius}>
+                <Column>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                   <Column.Item>
                     <Row>
                       <Row.Item grow />
                       <Row.Item>
-              <PanelButton
+                        <Image
-                icon="users"
+                          source={headerLogo}
-                text="Users"
+                          width={sizeInfo.loginLogoWidth}
-                onClick={() => this.props.history.push("/app/users")}
-              />
-            </Row.Item>
-            <Row.Item width={sizeInfo.panelButtonSpacing} />
-            <Row.Item>
-              <PanelButton
-                icon="teams"
-                text="Teams"
-                onClick={() => this.props.history.push("/app/teams")}
-              />
-            </Row.Item>
-            <Row.Item width={sizeInfo.panelButtonSpacing} />
-            <Row.Item>
-              <PanelButton
-                icon="system"
-                text="System"
-                onClick={() => this.props.history.push("/app/system")}
                         />
                       </Row.Item>
                       <Row.Item grow />
                     </Row>
                   </Column.Item>
-        <Column.Item grow />
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button
+                          text="Delete All Activities"
+                          width={sizeInfo.buttonWideWidth}
+                          onClick={this.handleDeleteActivities}
+                        />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button
+                          text="Delete All Work Items"
+                          width={sizeInfo.buttonWideWidth}
+                          onClick={this.handleDeleteWorkItems}
+                        />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Link to={api.makeTeamStatusUrl()}>
+                          Download Team Data
+                        </Link>
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item height={sizeInfo.formColumnSpacing} />
+                </Column>
+              </Box>
+            </Row.Item>
+            <Row.Item grow />
+          </Row>
+        </Column.Item>
+        <Column.Item grow>
+          <YesNoMessageModal
+            open={!!yesNoModal}
+            question={yesNoModal ? yesNoModal.question : ""}
+            onDismiss={yesNoModal && yesNoModal.onDismiss}
+          />
+
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ""}
+            message={messageModal ? messageModal.message : ""}
+            detail={messageModal ? messageModal.title : ""}
+            onDismiss={this.handleMessageModalDismiss}
+          />
+
+          <WaitModal
+            open={!!waitModal}
+            message={waitModal ? waitModal.message : ""}
+          />
+        </Column.Item>
       </Fragment>
     )
   }

website/src/MasterDetail/MasterDetail.js

@@ -352,7 +352,7 @@ export class MasterDetail extends Component {
           />
 
           <WaitModal
-            active={!!waitModal}
+            open={!!waitModal}
             message={waitModal ? waitModal.message : ""}
           />
 

website/src/MasterDetail/MasterList.js

@@ -47,7 +47,7 @@ export class MasterList extends React.Component {
                 <List.Item
                   key={item._id || "0"}
                   onClick={(e) => this.props.onItemListClick(e, index)}
-                  active={item === this.props.selectedItem}>
+                  open={item === this.props.selectedItem}>
                   <List.Icon name={data.icon} size={sizeInfo.listIcon} />
                   <List.Text>{data.text}</List.Text>
                   {item === selectedItem && selectionModified ? (

website/src/Modal/ChangePasswordModal.js

@@ -49,6 +49,8 @@ export class ChangePasswordModal extends React.Component {
   @autobind
   handleSubmit(e) {
     e.preventDefault()
+    e.stopPropagation()
+
     let passwords = null
     const { binder } = this.state
 
@@ -70,7 +72,7 @@ export class ChangePasswordModal extends React.Component {
 
     return (
       <Modal open={this.props.open} width={sizeInfo.modalWidth}>
-        <form id="changePasswordForm" onSubmit={this.handleSubmit}>
+        <form id="ChangePasswordForm" onSubmit={this.handleSubmit}>
           <Row>
             <Row.Item width={sizeInfo.formRowSpacing} />
             <Row.Item grow>
@@ -122,7 +124,7 @@ export class ChangePasswordModal extends React.Component {
                     <Row.Item>
                       <BoundButton
                         text="Submit"
-                        submit="changePasswordForm"
+                        submit="ChangePasswordForm"
                         name="submit"
                         binder={binder}
                       />

website/src/Modal/MessageModal.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import React from "react"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
-import { Modal, Button, Column, Row, Text, Icon } from 'ui'
+import { Modal, Button, Column, Row, Text, Icon } from "ui"
-import { sizeInfo } from 'ui/style'
+import { sizeInfo } from "ui/style"
-import autobind from 'autobind-decorator'
+import autobind from "autobind-decorator"
 
 export class MessageModal extends React.Component {
   static propTypes = {
@@ -10,7 +10,7 @@ export class MessageModal extends React.Component {
     icon: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     detail: PropTypes.string,
-    onDismiss: PropTypes.func
+    onDismiss: PropTypes.func,
   }
 
   @autobind
@@ -30,26 +30,34 @@ export class MessageModal extends React.Component {
 
     return (
       <Modal open={open} width={sizeInfo.modalWidth}>
-        <form onSubmit={this.onSubmit} id='messageModal'>
+        <form onSubmit={this.onSubmit} id="MessageForm">
           <Row>
             <Row.Item>
               <Icon name={icon} size={sizeInfo.modalMessageIcon} />
             </Row.Item>
             <Row.Item grow>
-              <Column height='100%'>
+              <Column height="100%">
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item grow>
-                  <Text width='100%' align='center'>{message}</Text>
+                  <Text width="100%" align="center">
+                    {message}
+                  </Text>
                 </Column.Item>
                 <Column.Item>
-                  <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
+                  <Text width="100%" align="center" color="dimmed" size="small">
+                    {detail}
+                  </Text>
                 </Column.Item>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item height={sizeInfo.buttonHeight}>
                   <Row>
                     <Row.Item grow />
                     <Row.Item>
-                      <Button submit='messageModal' text='OK' onClick={this.onSubmit} />
+                      <Button
+                        submit="MessageForm"
+                        text="OK"
+                        onClick={this.onSubmit}
+                      />
                     </Row.Item>
                     <Row.Item grow />
                   </Row>

website/src/Modal/WaitModal.js

@@ -4,17 +4,26 @@ import { Dimmer, Loader, Text } from 'ui'
 
 export class WaitModal extends React.Component {
   static propTypes = {
-    active: PropTypes.bool.isRequired,
+    open: PropTypes.bool.isRequired,
     message: PropTypes.string,
+    loader: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    loader: true,
   }
 
   render() {
-    const { active, message } = this.props
+    const { open, message, loader } = this.props
 
     return (
-      <Dimmer active={active}>
+      <Dimmer active={open}>
-        <Loader />
+        {loader && <Loader />}
-        {message && <Text size='huge' color='inverse'>{message}</Text>}
+        {message && (
+          <Text size="huge" color="inverse">
+            {message}
+          </Text>
+        )}
       </Dimmer>
     )
   }

website/src/Profile/Profile.js

@@ -166,7 +166,7 @@ export class Profile extends Component {
           />
 
           <WaitModal
-            active={!!waitModal}
+            open={!!waitModal}
             message={waitModal ? waitModal.message : ""}
           />
 

website/src/System/System.js

@@ -1,218 +0,0 @@
-import React, { Component, Fragment } from "react"
-import PropTypes from "prop-types"
-import { Box, Image, Column, Row, Button, Link } from "ui"
-import { MessageModal, WaitModal, YesNoMessageModal } from "../Modal"
-import { sizeInfo, colorInfo } from "ui/style"
-import headerLogo from "images/logo.png"
-import autobind from "autobind-decorator"
-import { api } from "../API"
-
-export class System extends Component {
-  static propTypes = {
-    changeTitle: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      messageModal: null,
-      waitModal: null,
-      yesNoModal: null,
-    }
-  }
-
-  @autobind
-  handleDeleteActivities() {
-    this.setState({
-      yesNoModal: {
-        question:
-          "Are you sure you want to delete all activities in the system?",
-        onDismiss: this.handleDeleteActivitiesDismiss,
-      },
-    })
-  }
-
-  @autobind
-  handleDeleteActivitiesDismiss(yes) {
-    if (yes) {
-      this.setState({ waitModal: { message: "Deleting All Activities..." } })
-      api
-        .deleteAllActivities()
-        .then(() => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "thumb",
-              message: "All logged activities have been deleted",
-            },
-          })
-        })
-        .catch((error) => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "hand",
-              message: "Unable to request delete activities.",
-              detail: error.message,
-            },
-          })
-        })
-    }
-
-    this.setState({
-      yesNoModal: null,
-    })
-  }
-
-  @autobind
-  handleDeleteWorkItems() {
-    this.setState({
-      yesNoModal: {
-        question:
-          "Are you sure you want to delete all work items & activities in the system?",
-        onDismiss: this.handleDeleteWorkItemsDismiss,
-      },
-    })
-  }
-
-  @autobind
-  handleDeleteWorkItemsDismiss(yes) {
-    if (yes) {
-      this.setState({
-        waitModal: { message: "Deleting All Work Items & Activities..." },
-      })
-      api
-        .deleteAllWorkItems()
-        .then(() => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "thumb",
-              message: "All work items and logged activities have been deleted",
-            },
-          })
-        })
-        .catch((error) => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "hand",
-              message: "Unable to delete work items and activities.",
-              detail: error.message,
-            },
-          })
-        })
-    }
-
-    this.setState({
-      yesNoModal: null,
-    })
-  }
-
-  @autobind
-  handleMessageModalDismiss() {
-    this.setState({ messageModal: null })
-  }
-
-  render() {
-    const { messageModal, yesNoModal, waitModal } = this.state
-
-    return (
-      <Fragment>
-        <Column.Item grow />
-        <Column.Item>
-          <Row>
-            <Row.Item grow />
-            <Row.Item width={sizeInfo.formRowSpacing} />
-            <Row.Item width={sizeInfo.modalWidth}>
-              <Box
-                border={{
-                  width: sizeInfo.headerBorderWidth,
-                  color: colorInfo.headerBorder,
-                }}
-                radius={sizeInfo.formBoxRadius}>
-                <Column>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Image
-                          source={headerLogo}
-                          width={sizeInfo.loginLogoWidth}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Button
-                          text="Delete All Activities"
-                          width={sizeInfo.buttonWideWidth}
-                          onClick={this.handleDeleteActivities}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Button
-                          text="Delete All Work Items"
-                          width={sizeInfo.buttonWideWidth}
-                          onClick={this.handleDeleteWorkItems}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Link to={api.makeTeamStatusUrl()}>
-                          Download Team Data
-                        </Link>
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item height={sizeInfo.formColumnSpacing} />
-                </Column>
-              </Box>
-            </Row.Item>
-            <Row.Item grow />
-          </Row>
-        </Column.Item>
-        <Column.Item grow>
-          <YesNoMessageModal
-            open={!!yesNoModal}
-            question={yesNoModal ? yesNoModal.question : ""}
-            onDismiss={yesNoModal && yesNoModal.onDismiss}
-          />
-
-          <MessageModal
-            open={!!messageModal}
-            icon={messageModal ? messageModal.icon : ""}
-            message={messageModal ? messageModal.message : ""}
-            detail={messageModal ? messageModal.title : ""}
-            onDismiss={this.handleMessageModalDismiss}
-          />
-
-          <WaitModal
-            active={!!waitModal}
-            message={waitModal ? waitModal.message : ""}
-          />
-        </Column.Item>
-      </Fragment>
-    )
-  }
-}

website/src/System/index.js

@@ -1 +0,0 @@
-export { System } from './System'

website/src/ui/Header.js

@@ -127,6 +127,8 @@ Header.TextButton = Radium(
 
     static style = {
       display: "inline-block",
+      position: "relative",
+      top: 3,
       fontSize: fontInfo.size.header,
       fontFamily: fontInfo.family,
       color: fontInfo.color.normal,

website/src/ui/Icon.js

@@ -31,7 +31,6 @@ export class Icon extends Component {
     logout: require("./icons/logout.svg"),
     profile: require("./icons/profile.svg"),
     placeholder: require("./icons/placeholder.svg"),
-    system: require("./icons/system.svg"),
     thumb: require("./icons/thumb.svg"),
     team: require("./icons/team.svg"),
     teams: require("./icons/teams.svg"),

website/src/ui/Loader.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react"
-import Radium from 'radium'
+import Radium from "radium"
-import { colorInfo, sizeInfo } from 'ui/style'
+import { colorInfo, sizeInfo } from "ui/style"
-import anime from 'animejs'
+import anime from "animejs"
 
 @Radium
 export class Loader extends React.Component {
@@ -13,30 +13,31 @@ export class Loader extends React.Component {
       anime({
         targets: elem,
         scale: [
-          { value: 0.2, duration: 800, easing: 'easeOutSine', delay: 200 * i },
+          { value: 0.0, duration: 800, easing: "easeOutSine", delay: 200 * i },
-          { value: 1.0, duration: 800, easing: 'easeOutSine' },
+          { value: 1.0, duration: 800, easing: "easeOutSine" },
-          { value: 1.0, duration: 200 * (2 - i) }
+          { value: 1.0, duration: 200 * (2 - i) },
         ],
-        loop: true
+        loop: true,
       })
     }
 
     return (
       <div style={{ height: size }}>
-        {
+        {[0, 1, 2].map((i) => (
-          [0, 1, 2].map((i) => (
+          <span
-            <span key={i} ref={(elem) => addAnimation(elem, i)}
+            key={i}
+            ref={(elem) => addAnimation(elem, i)}
             style={{
-                display: 'inline-block',
+              display: "inline-block",
               marginLeft: i > 0 ? spacing : 0,
               width: size,
               height: size,
               background: colorInfo.textInverse,
               borderSize: 0,
-                borderRadius: '100%'
+              borderRadius: "100%",
-              }} />
+            }}
-          ))
+          />
-        }
+        ))}
       </div>
     )
   }

website/src/ui/PanelButton.js

@@ -1,65 +0,0 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { Icon } from '.'
-import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
-
-@Radium
-export class PanelButton extends Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-    icon: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  }
-
-  static style = {
-    button: {
-      borderWidth: sizeInfo.panelButtonBorderWidth,
-      borderRadius:  sizeInfo.panelButtonBorderRadius,
-      padding: '0 0 0 0',
-      background: colorInfo.panelButtonBackground,
-      verticalAlign: 'middle',
-      outline: 'none',
-      ':hover': {
-        background: colorInfo.panelButtonBackgroundHover,
-      },
-      ':disabled': {
-        background: colorInfo.panelDisabledButtonBackground,
-      },
-      ':active': {
-        borderWidth: 0,
-        background: colorInfo.panelButtonBackgroundActive,
-      }
-    }
-  }
-
-  render() {
-    const { onClick, icon, text } = this.props
-
-    return (
-      <button type='button'
-        style={[
-          PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
-        ]}
-        onClick={onClick}>
-        <div style={{ position: 'relative' }}>
-          <Icon
-            name={icon} size={sizeInfo.panelButtonIcon}
-            margin={sizeInfo.panelButtonIconMargin}
-            style={{ position: 'relative', top: sizeInfo.panelButtonIconOffset }} />
-          <span style={{
-            position: 'absolute',
-            top: sizeInfo.panelButtonTextOffset,
-            left: 0,
-            display: 'block',
-            fontSize: fontInfo.size.huge,
-            fontFamily: fontInfo.family,
-            color: fontInfo.color.text,
-            textAlign: 'center',
-            width: '100%',
-          }}>{text}</span>
-        </div>
-      </button>
-    )
-  }
-}

website/src/ui/icons/system.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
-    <title>system</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Home" transform="translate(-905.000000, -108.000000)" fill="#000000" fill-rule="nonzero">
-            <g id="System" transform="translate(870.000000, 94.000000)">
-                <g id="settings" transform="translate(35.000000, 14.000000)">
-                    <path d="M101.074434,139.158895 C101.074434,140.19171 101.889968,141 102.932039,141 C103.97411,141 104.789644,140.19171 104.789644,139.158895 L104.789644,102.696028 C107.779935,101.887737 110,99.193437 110,95.9602763 C110,92.1433506 106.873786,89 102.977346,89 C99.0809061,89 96,92.1433506 96,95.9602763 C96,99.148532 98.1747573,101.842832 101.119741,102.651123 L101.119741,139.158895 L101.074434,139.158895 Z M99.6245955,95.9602763 C99.6245955,94.164076 101.119741,92.6822107 102.932039,92.6822107 C104.744337,92.6822107 106.239482,94.164076 106.239482,95.9602763 C106.239482,97.7564767 104.744337,99.238342 102.932039,99.238342 C101.119741,99.238342 99.6245955,97.7564767 99.6245955,95.9602763 Z" id="Shape"></path>
-                    <path d="M122.954839,89 C121.916129,89 121.103226,89.8075928 121.103226,90.8395168 L121.103226,109.77308 C118.167742,110.580673 116,113.272649 116,116.458154 C116,119.643658 118.167742,122.335634 121.103226,123.143227 L121.103226,139.160483 C121.103226,140.192407 121.916129,141 122.954839,141 C123.993548,141 124.806452,140.192407 124.806452,139.160483 L124.806452,123.143227 C127.787097,122.335634 130,119.643658 130,116.413287 C130,113.182916 127.787097,110.49094 124.806452,109.683348 L124.806452,90.8395168 C124.806452,89.8075928 123.993548,89 122.954839,89 Z M126.341935,116.458154 C126.341935,118.252804 124.851613,119.733391 123.045161,119.733391 C121.23871,119.733391 119.748387,118.252804 119.748387,116.458154 C119.748387,114.663503 121.23871,113.182916 123.045161,113.182916 C124.851613,113.182916 126.341935,114.618637 126.341935,116.458154 Z" id="Shape"></path>
-                    <path d="M142.851184,127.348877 L142.851184,90.8411054 C142.851184,89.8082902 142.03832,89 140.999661,89 C139.961001,89 139.148137,89.8082902 139.148137,90.8411054 L139.148137,127.348877 C136.167637,128.157168 134,130.851468 134,134.039724 C134,137.856649 137.115978,141 140.999661,141 C144.883343,141 147.999321,137.901554 147.999321,134.039724 C148.04448,130.851468 145.831684,128.157168 142.851184,127.348877 Z M141.04482,137.317789 C139.238456,137.317789 137.748205,135.835924 137.748205,134.039724 C137.748205,132.243523 139.238456,130.761658 141.04482,130.761658 C142.851184,130.761658 144.341434,132.243523 144.341434,134.039724 C144.341434,135.835924 142.851184,137.317789 141.04482,137.317789 Z" id="Shape"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/src/ui/index.js

@@ -4,7 +4,6 @@ export { Button } from "./Button"
 export { FormIconButton } from "./FormIconButton"
 export { Header } from "./Header"
 export { Footer } from "./Footer"
-export { PanelButton } from "./PanelButton"
 export { Checkbox } from "./Checkbox"
 export { Input } from "./Input"
 export { Image } from "./Image"

website/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.1',
+  version: '1.4.3',
-  fullVersion: '1.0.1-20180518.0',
+  fullVersion: '1.4.3-20180708.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',