Added work item details to activity

mobile/src/Activity/Activity.js

@@ -27,10 +27,11 @@ 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 } from "../ui/FormStaticOptionStrip"
 
 const styles = StyleSheet.create({
   container: {
@@ -124,6 +125,8 @@ export class Activity extends React.Component {
               ),
               location: formatLatLng(lat, lng),
               dateTime: moment().format(),
+              details: workItem.details,
+              workItemType: workItem.workItemType,
             })
 
             this.region = {
@@ -288,6 +291,8 @@ export class Activity extends React.Component {
       waitModal,
       dateTime,
       location,
+      details,
+      workItemType,
       uploadPercent,
     } = this.state
 
@@ -301,14 +306,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:"
-              message="You must supply a resolution for the activity"
-            />
-          </View>
           <View style={styles.panel}>
             <BoundOptionStrip
               binder={binder}
@@ -322,17 +319,34 @@ export class Activity extends React.Component {
               name="status"
               message="You must supply a status for the activity"
             />
-          </View>
+            <BoundInput
-          <View style={styles.panel}>
+              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}>
-            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <FormStaticOptionStrip
+              label="Work Item Type:"
+              options={workItemTypeEnum}
+              value={workItemType}
+            />
+            <FormStaticInput label="Details:" value={details} />
             <FormStaticInput label="Location:" value={location} />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
@@ -369,15 +383,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

@@ -55,7 +55,7 @@ export default class App extends React.Component {
           <Switch>
             <Route exact path="/login" component={Login} />
             <Route exact path="/logout" component={Logout} />
-            <ProtectedRoute exact path="/home" component={Home} />
+            {/* <ProtectedRoute exact path="/home" component={Home} /> */}
             <ProtectedRoute
               exact
               path="/arviewer"
@@ -69,7 +69,8 @@ export default class App extends React.Component {
               path="/workItemList"
               component={WorkItemList}
             />
-            <DefaultRoute redirect="/home" />
+            {/* <DefaultRoute redirect="/home" /> */}
+            <DefaultRoute redirect="/activity?workItemId=5b0c85995ebbed31c323cdf6" />
           </Switch>
         </View>
       </NativeRouter>

mobile/src/WorkItem/WorkItem.js

@@ -100,6 +100,7 @@ export class WorkItem extends React.Component {
       messageModal: null,
       waitModal: null,
       progressModal: null,
+      allowLocationUpdates: false,
     }
     this.region = null
     this.isMapReady = false
@@ -151,6 +152,8 @@ export class WorkItem extends React.Component {
             },
           })
         })
+    } else {
+      this.setState({ allowLocationUpdates: true })
     }
   }
 
@@ -221,7 +224,7 @@ export class WorkItem extends React.Component {
   }
 
   handleRegionChange(region) {
-    if (this.state.binder._id || !this.isMapReady) {
+    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
@@ -349,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"
@@ -358,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)}
@@ -406,8 +405,6 @@ export class WorkItem extends React.Component {
               name="address"
               label="Address:"
             />
-          </View>
-          <View style={styles.panel}>
             <BoundPhotoPanel
               name="photos"
               binder={binder}
@@ -429,7 +426,7 @@ export class WorkItem extends React.Component {
             )}
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
-        {!this.state.binder._id && (
+        {!this.state.allowLocationUpdates && (
           <Geolocation onUpdate={this.handlePositionUpdate} watch={false} />
         )}
         <ProgressModal

mobile/src/ui/BoundInput.js

@@ -85,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

@@ -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/FormStaticInput.js

@@ -39,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/OptionStrip.js

@@ -9,6 +9,7 @@ export class OptionStrip extends Component {
       PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
     ).isRequired,
     value: PropTypes.string,
+    readOnly: PropTypes.bool,
     onValueChanged: PropTypes.func,
   }
 
@@ -41,14 +42,15 @@ export class OptionStrip extends Component {
   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
@@ -58,6 +60,7 @@ export class OptionStrip extends Component {
         {options.map((option, index) => (
           <TouchableHighlight
             key={index}
+            disabled={readOnly}
             underlayColor="#3BB0FD"
             style={[
               {
@@ -65,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/index.js

@@ -7,6 +7,7 @@ export { Geolocation } from "./Geolocation"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"
+export { FormStaticOptionStrip } from "./FormStaticOptionStrip"
 export { BoundButton } from "./BoundButton"
 export { BoundOptionStrip } from "./BoundOptionStrip"
 export { BoundHeader } from "./BoundHeader"