Manually place user location on main map

mobile/android/app/build.gradle

@@ -101,8 +101,8 @@ android {
         applicationId "com.deightonar"
         minSdkVersion 24
         targetSdkVersion 27
-        versionCode 11
+        versionCode 12
-        versionName "1.2.1"
+        versionName "1.3.0"
         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="11"
-    android:versionName="1.2.1">
+    android:versionName="1.3.0">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

mobile/ios/DeightonAR/Info.plist

@@ -19,11 +19,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.1</string>
+	<string>1.3.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>20180531.0</string>
+	<string>20180604.0</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

mobile/src/Activity/Activity.js

@@ -267,7 +267,7 @@ export class Activity extends React.Component {
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(
-          uploadData.uploadedChunks / uploadData.numberOfChunks * 100
+          (uploadData.uploadedChunks / uploadData.numberOfChunks) * 100
         ),
       })
       return true

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"
@@ -18,7 +15,6 @@ import { BoundSwitch, BoundInput, BoundButton } from "../ui"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { versionInfo } from "../version"
 import { reactAutoBind } from "auto-bind2"
-import { isIphoneX } from "react-native-iphone-x-helper"
 import { config } from "../config"
 
 export class Login extends React.Component {

mobile/src/Home/Home.js

@@ -31,6 +31,7 @@ import KeyboardSpacer from "react-native-keyboard-spacer"
 import hardhatPinImage from "./images/hardhat-pin.png"
 import clipboardPinImage from "./images/clipboard-pin.png"
 import questionPinImage from "./images/question-pin.png"
+import locationImage from "./images/location.png"
 import moment from "moment"
 
 const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
@@ -175,8 +176,8 @@ export class Home extends React.Component {
   }
 
   handleWorkItemsListPress() {
-    if (this.currentPosition) {
+    if (this.state.currentPosition) {
-      const { coords } = this.currentPosition
+      const { coords } = this.state.currentPosition
 
       this.props.history.push(
         `/workItemList?latLng=${coords.latitude},${coords.longitude}`
@@ -209,13 +210,13 @@ export class Home extends React.Component {
   }
 
   handleGlassesPress() {
-    const { sections: workItems } = this.state
+    const { sections: workItems, currentPosition } = this.state
 
-    if (this.currentPosition) {
+    if (currentPosition) {
       const {
         latitude: latitude1,
         longitude: longitude1,
-      } = this.currentPosition.coords
+      } = currentPosition.coords
       let closestWorkItem = config.alwaysShowWorkItemInAR ? workItems[0] : null
       let shortestDistance = config.minDistanceToItem
 
@@ -247,8 +248,10 @@ export class Home extends React.Component {
   }
 
   handleMyLocationPress() {
-    if (this.currentPosition && this.isMapReady) {
+    const { currentPosition } = this.state
-      const coords = this.currentPosition.coords
+
+    if (currentPosition && this.isMapReady) {
+      const { coords } = currentPosition
 
       this.mapView.animateToCoordinate({
         latitude: coords.latitude,
@@ -278,12 +281,14 @@ export class Home extends React.Component {
   }
 
   handlePositionUpdate(position) {
-    this.currentPosition = position
+    this.setState({ currentPosition: position })
   }
 
   getCoordinateDistance(coordinate) {
-    if (this.currentPosition) {
+    const { currentPosition } = this.state
-      const coords = this.currentPosition.coords
+
+    if (currentPosition) {
+      const { coords } = currentPosition
       const { latitude, longitude } = coordinate
 
       return (
@@ -308,6 +313,7 @@ export class Home extends React.Component {
       waitModal,
       haveCameraPermission,
       haveLocationPermission,
+      currentPosition,
     } = this.state
 
     return (
@@ -334,7 +340,7 @@ export class Home extends React.Component {
             showWorkItems && { height: "40%" },
             !showWorkItems && { flexGrow: 1 },
           ]}
-          showsUserLocation
+          showsUserLocation={false}
           showsBuildings={false}
           showsTraffic={false}
           showsIndoors={false}
@@ -370,6 +376,14 @@ export class Home extends React.Component {
               </Callout>
             </Marker>
           ))}
+          {currentPosition && (
+            <Marker
+              key={sections.length}
+              coordinate={currentPosition.coords}
+              anchor={{ x: 0.5, y: 0.5 }}
+              image={locationImage}
+            />
+          )}
         </MapView>
         <View
           style={{
@@ -459,7 +473,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

mobile/src/WorkItem/WorkItem.js

@@ -284,7 +284,7 @@ export class WorkItem extends React.Component {
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(
-          uploadData.uploadedChunks / uploadData.numberOfChunks * 100
+          (uploadData.uploadedChunks / uploadData.numberOfChunks) * 100
         ),
       })
       return true

mobile/src/config.js

@@ -1,6 +1,3 @@
-import React from "react"
-import { Platform } from "react-native"
-
 export const config = {
   localIPAddr: "192.168.1.175",
   //localIPAddr: "192.168.1.14",
@@ -35,4 +32,6 @@ export const config = {
   // },
 
   // alwaysShowWorkItemInAR: true,
+
+  geoSampleDelay: 3000,
 }

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.0,
               duration: 800,
               delay: 200 * i,
               easing: Easing.out(Easing.sin),

mobile/src/ui/Geolocation.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
-import { Image, View } from "react-native"
 import PropTypes from "prop-types"
+import { config } from "../config"
+import { reactAutoBind } from "auto-bind2"
 
 export class Geolocation extends Component {
   static propTypes = {
@@ -14,29 +15,36 @@ export class Geolocation extends Component {
 
   constructor(props) {
     super(props)
-    this.watchId = -1
+    reactAutoBind(this)
+
+    if (props.watch) {
+      this.intervalId = setInterval(this.updateLocation, config.geoSampleDelay)
+    } else {
+      this.intervalId = -1
+    }
   }
 
   componentDidMount() {
-    navigator.geolocation.getCurrentPosition((position) => {
+    this.updateLocation()
-      this.props.onUpdate(position)
-
-      if (this.props.watch) {
-        this.watchId = navigator.geolocation.watchPosition((position) =>
-          this.props.onUpdate(position)
-        )
-      }
-    })
   }
 
   componentWillUnmount() {
-    if (this.watchId !== -1) {
+    if (this.intervalId !== -1) {
-      navigator.geolocation.clearWatch(this.watchId)
+      clearInterval(this.intervalId)
-      navigator.geolocation.stopObserving()
+      this.intervalId = -1
-      this.watchId = -1
     }
   }
 
+  updateLocation() {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        this.props.onUpdate(position)
+      },
+      null,
+      { distanceFilter: 5, maximumAge: 0, enableHighAccuracy: true }
+    )
+  }
+
   render() {
     return null
   }

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.2.1',
+  version: '1.3.0',
-  fullVersion: '1.2.1-20180531.0',
+  fullVersion: '1.3.0-20180604.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.2.1",
+  "version": "1.3.0",
   "description": "Deighton AR Training System",
   "main": "index.js",
   "repository": {

server/src/api/routes/UserRoutes.js

@@ -112,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()
     }
@@ -185,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
@@ -199,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()

server/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.2.1',
+  version: '1.3.0',
-  fullVersion: '1.2.1-20180531.0',
+  fullVersion: '1.3.0-20180604.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: 2,
+    minor: 3,
-    patch: 1,
+    patch: 0,
-    build: 20180531,
+    build: 20180604,
     revision: 0,
-    sequence: 11,
+    sequence: 12,
     tz: "America/Los_Angeles",
     title: "Deighton AR System",
     copyright: "© 2018, Kingston Software Solutions.",

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>

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/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}
-              style={{
+            ref={(elem) => addAnimation(elem, i)}
-                display: 'inline-block',
+            style={{
-                marginLeft: i > 0 ? spacing : 0,
+              display: "inline-block",
-                width: size,
+              marginLeft: i > 0 ? spacing : 0,
-                height: size,
+              width: size,
-                background: colorInfo.textInverse,
+              height: size,
-                borderSize: 0,
+              background: colorInfo.textInverse,
-                borderRadius: '100%'
+              borderSize: 0,
-              }} />
+              borderRadius: "100%",
-          ))
+            }}
-        }
+          />
+        ))}
       </div>
     )
   }

website/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.2.1',
+  version: '1.3.0',
-  fullVersion: '1.2.1-20180531.0',
+  fullVersion: '1.3.0-20180604.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',