Closing many tickets

mobile/src/Home/Home.js

@@ -11,18 +11,25 @@ import {
   PermissionsAndroid,
   Platform,
 } from "react-native"
-import MapView, { Marker } from "react-native-maps"
+import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header } from "../ui"
 import { MessageModal } from "../Modal"
 import { api } from "../API"
 import autobind from "autobind-decorator"
 import { ifIphoneX } from "react-native-iphone-x-helper"
-import { workItemTypeText, pad, regionContainingPoints } from "../util"
+import {
+  geoDistance,
+  workItemTypeText,
+  pad,
+  regionContainingPoints,
+} from "../util"
 import { ensurePermissions } from "../App"
 import { versionInfo } from "../version"
-import { minGPSAccuracy } from "../config"
+import { config } from "../config"
 import KeyboardSpacer from "react-native-keyboard-spacer"
-import pinImage from "./images/pin.png"
+import hardhatPinImage from "./images/hardhat.png"
+import clipboardPinImage from "./images/clipboard.png"
+import questionPinImage from "./images/question.png"
 
 const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
 const neverAskForCameraKeyName = "NeverAskForCameraPermission"
@@ -40,7 +47,8 @@ export class Home extends React.Component {
         longitudeDelta: 0.0922,
       },
       positionInfo: null,
-      disableARViewer: true,
+      haveCameraPermission: false,
+      workItemDistance: -1,
     }
 
     ensurePermissions(
@@ -71,7 +79,7 @@ export class Home extends React.Component {
           results[PermissionsAndroid.PERMISSIONS.CAMERA] ===
           PermissionsAndroid.RESULTS.GRANTED
         ) {
-          this.setState({ disableARViewer: false })
+          this.setState({ haveCameraPerm: true })
         }
       },
       () => {
@@ -80,9 +88,9 @@ export class Home extends React.Component {
             icon: "hand",
             message:
               "You have denied the app access to phone features it needs to function. " +
-              "Some parts of the app are disabled. To enable these features in future " +
-              "please go to Settings.",
-            detail: "",
+              "Some parts of the app are disabled.",
+            detail:
+              "To enable these features in future " + "please go to Settings.",
           },
         })
       }
@@ -130,11 +138,37 @@ export class Home extends React.Component {
         viewOffset: 45,
       })
     }
+
+    if (this.state.positionInfo) {
+      const coords = this.state.positionInfo.coords
+      const workItem = sections[sectionIndex]
+      const [lng, lat] = workItem.location.coordinates
+
+      this.setState({
+        workItemDistance: geoDistance(
+          coords.latitude,
+          coords.longitude,
+          lat,
+          lng,
+          "K"
+        ).toFixed(2),
+      })
+    }
   }
 
   @autobind
   handleWorkItemsListPress() {
-    this.props.history.push("/workitemlist")
+    const { positionInfo } = this.state
+    this.props.history.push(
+      `/workItemList${
+        positionInfo
+          ? "?latLng=" +
+            coords.latitude.toString() +
+            "," +
+            coords.longitude.toString()
+          : ""
+      }`
+    )
   }
 
   @autobind
@@ -149,7 +183,30 @@ export class Home extends React.Component {
 
   @autobind
   handleGlassesPress() {
-    this.props.history.push("/arviewer")
+    const { lat: lat1, lng: lng1 } = this.state.positionInfo.coords
+    const closestWorkItem = null
+    const shortestDistance = config.minDistanceToItem
+
+    this.state.sections.forEach((workItem) => {
+      const [lng2, lat2] = workItem.location.coordinates
+      const distance = geoDistance(lat1, lng1, lat2, lng2, "K") * 1000
+
+      if (distance <= shortestDistance) {
+        closestWorkItem = workItem
+        shortestDistance = distance
+      }
+    })
+
+    this.props.history.push(
+      `/arviewer${
+        closestWorkItem
+          ? "?workItemId=" +
+            closestWorkItem._id +
+            "&workItemType=" +
+            closestWorkItem.workItemType
+          : ""
+      }`
+    )
   }
 
   @autobind
@@ -176,7 +233,8 @@ export class Home extends React.Component {
       region,
       positionInfo,
       messageModal,
-      disableARViewer,
+      haveCameraPermission,
+      workItemDistance,
     } = this.state
 
     return (
@@ -191,8 +249,10 @@ export class Home extends React.Component {
           leftButton={{ icon: "logout", onPress: this.handleLogoutPress }}
           rightButton={{ icon: "glasses", onPress: this.handleGlassesPress }}
           disabled={
-            !(positionInfo && positionInfo.coords.accuracy <= minGPSAccuracy) ||
-            disableARViewer
+            !(
+              positionInfo &&
+              positionInfo.coords.accuracy <= config.minGPSAccuracy
+            ) || !haveCameraPermission
           }
         />
         <MapView
@@ -216,16 +276,31 @@ export class Home extends React.Component {
             <Marker
               key={index}
               coordinate={workItem.coordinate}
-              title={
-                pad(workItem.ticketNumber, 4) +
-                ": " +
-                workItemTypeText[workItem.workItemType]
-              }
-              description={workItem.address}
               anchor={{ x: 0.5, y: 1.0 }}
-              image={pinImage}
-              onPress={(e) => this.handleMarkerPress(e, index)}
-            />
+              image={
+                workItem.workItemType === "inspection"
+                  ? clipboardPinImage
+                  : workItem.workItemType === "complaint"
+                    ? questionPinImage
+                    : hardhatPinImage
+              }
+              onPress={(e) => this.handleMarkerPress(e, index)}>
+              <Callout>
+                <View>
+                  <Text>
+                    {pad(workItem.ticketNumber, 4) +
+                      ": " +
+                      workItemTypeText[workItem.workItemType]}
+                  </Text>
+                  <Text>
+                    {workItem.address} ({this.workItemDistance > 0
+                      ? this.workItemDistance.toString()
+                      : "?"}{" "}
+                    km)
+                  </Text>
+                </View>
+              </Callout>
+            </Marker>
           ))}
         </MapView>
         <View
@@ -329,7 +404,7 @@ export class Home extends React.Component {
                         {activity.resolution}
                       </Text>
                       <Text style={{ fontSize: 14, color: "gray" }}>
-                        {activity.address || "..."}
+                        {activity.when}
                       </Text>
                     </View>
                     <Icon