Target tracking location, BoundHeader, WorkItem page done.

mobile/src/WorkItem/WorkItem.js

@@ -10,10 +10,17 @@ import {
   Platform,
   TouchableOpacity
 } from 'react-native'
-import { Icon, Header, PhotoButton } from '../ui'
 import MapView, { Marker } from 'react-native-maps'
 import { FormBinder } from 'react-form-binder'
-import { BoundInput, BoundButton } from '../ui'
+import {
+  BoundInput,
+  BoundButton,
+  BoundHeader,
+  Icon,
+  Header,
+  PhotoButton,
+  BoundOptionStrip,
+} from '../ui'
 import autobind from 'autobind-decorator'
 import { ifIphoneX, isIphoneX } from 'react-native-iphone-x-helper'
 
@@ -39,12 +46,26 @@ const styles = StyleSheet.create({
   }
 })
 
+const workItemOptions = [
+  { value: 'workOrder', text: 'Work Order' },
+  { value: 'inspection', text: 'Inspection' },
+  { value: 'complaint', text: 'Complaint' }
+]
+
 export class WorkItem extends React.Component {
   static bindings = {
+    header: {
+      noValue: true,
+      isDisabled: (r) => (!(r.anyModified && r.allValid)),
+    },
     location: {
       isValid: true,
+      isDisabled: true,
     },
     details: {
+      isValid: (r, v) => (v !== ''),
+    },
+    workItemType: {
       isValid: true,
     }
   }
@@ -68,6 +89,22 @@ export class WorkItem extends React.Component {
     }
   }
 
+  @autobind
+  handleDonePress() {
+
+  }
+
+  @autobind
+  handleRegionChange(region) {
+    const { binder } = this.state
+    // NOTE: For some reason, object destructuring does not work here :(
+    const lon = region.longitude
+    const lat = region.latitude
+
+    this.setState(binder.updateFieldValue('location',
+      `${Math.abs(lon).toFixed(4)}°${lon > 0 ? 'S' : 'N'}, ${Math.abs(lat).toFixed(4)}°${lat > 0 ? 'W' : 'E'}`))
+  }
+
   render() {
     const { binder } = this.state
 
@@ -76,11 +113,21 @@ export class WorkItem extends React.Component {
         style={{ width: '100%', height: '100%' }}
         behavior='padding'
         keyboardVerticalOffset={Platform.select({ios: 0, android: -220})}>
-        <Header title='Work Item' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'done' }} />
+        <BoundHeader
+          binder={binder}
+          name='header'
+          title='Work Item'
+          leftButton={{ icon: 'back', onPress: this.handleBackPress }}
+          rightButton={{ icon: 'done', onPress: this.handleDonePress }} />
         <ScrollView style={styles.container}>
+          <View style={styles.panel}>
+            <BoundOptionStrip binder={binder} name='workItemType' label='Work Item Type:' options={workItemOptions} />
+          </View>
           <View style={styles.panel}>
             <MapView
               style={{
+                flexDirection: 'column',
+                justifyContent: 'center',
                 width: '100%',
                 height: 400,
                 marginBottom: 10,
@@ -91,7 +138,10 @@ export class WorkItem extends React.Component {
                 longitude: -79.384293,
                 latitudeDelta: 0.0922,
                 longitudeDelta: 0.0421,
-              }} />
+              }}
+              onRegionChange={this.handleRegionChange}>
+              <Icon name='target' size={24} style={{ alignSelf: 'center' }} pointerEvents={false} />
+            </MapView>
             <BoundInput binder={binder} name='location' label='Location:' />
           </View>
           <View style={styles.panel}>
@@ -103,7 +153,7 @@ export class WorkItem extends React.Component {
             </View>
           </View>
           <View style={styles.panel}>
-            <BoundInput binder={binder} name='details' label='Details:' message='You must supply details for the work item' />
+            <BoundInput binder={binder} name='details' lines={4} label='Details:' message='You must supply details for the work item' />
           </View>
           { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
         </ScrollView>