Work Item and Activity screens mostly complete

mobile/src/WorkItem/WorkItem.js

@@ -1,32 +1,113 @@
 import React from 'react'
-import { StyleSheet, View, TouchableOpacity, Image, ScrollView, Picker, Text } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Image,
+  ScrollView,
+  Text,
+  TextInput,
+  KeyboardAvoidingView,
+  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 autobind from 'autobind-decorator'
+import { ifIphoneX, isIphoneX } from 'react-native-iphone-x-helper'
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: '#DDDDDD',
+  },
+  panel: {
+    width: '94%',
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    marginTop: '3%',
+    shadowColor: 'gray',
+    shadowOffset: { width: 2, height: 2 },
+    shadowRadius: 2,
+    shadowOpacity: .5,
+    padding: 10,
+  },
+  label: {
+    fontSize: 14,
+    marginBottom: 4,
+  }
+})
 
 export class WorkItem extends React.Component {
-  static styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      width: '100%',
-      backgroundColor: '#DDDDDD',
+  static bindings = {
+    location: {
+      isValid: true,
     },
-  })
+    details: {
+      isValid: true,
+    }
+  }
 
   constructor(props) {
     super(props)
+    this.state = {
+      binder: new FormBinder({}, WorkItem.bindings),
+      messageModal: null,
+    }
+  }
+
+  @autobind
+  handleBackPress() {
+    const { history } = this.props
+
+    if (history.length > 1) {
+      history.goBack()
+    } else {
+      history.replace('/home')
+    }
   }
 
   render() {
+    const { binder } = this.state
+
     return (
-      <ScrollView style={WorkItem.styles.container}>
-        <View style={{ width: '94%', backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }}>
-          <Text>Work Item</Text>
-          <Picker selectedValue={this.props.item.type}>
-            <Picker.Item label='Work Item' value='work' />
-            <Picker.Item label='Inspection' value='inspection' />
-            <Picker.Item label='Complaint' value='complaint' />
-          </Picker>
-        </View>
-        <View style={{ width: '94%', height: 300, backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }} />
-      </ScrollView>
-    );
+      <KeyboardAvoidingView
+        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' }} />
+        <ScrollView style={styles.container}>
+          <View style={styles.panel}>
+            <MapView
+              style={{
+                width: '100%',
+                height: 400,
+                marginBottom: 10,
+              }}
+              zoomControlEnabled
+              initialRegion={{
+                latitude: 43.653908,
+                longitude: -79.384293,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }} />
+            <BoundInput binder={binder} name='location' label='Location:' />
+          </View>
+          <View style={styles.panel}>
+            <Text style={styles.label}>Pictures:</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <PhotoButton />
+              <PhotoButton />
+              <PhotoButton />
+            </View>
+          </View>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='details' label='Details:' message='You must supply details for the work item' />
+          </View>
+          { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
+        </ScrollView>
+      </KeyboardAvoidingView>
+    )
   }
 }

mobile/src/WorkItem/WorkItemList.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, TouchableOpacity, Image, FlatList, Text} from 'react-native'
+import { Icon, Header } from '../ui'
 import autobind from 'autobind-decorator'
 
 const styles = StyleSheet.create({
@@ -37,35 +38,51 @@ const inspectionTypes = {
 export class WorkItemList extends React.Component {
   constructor(props) {
     super(props)
-    this._handleItemSelect = this._handleItemSelect.bind(this)
   }
 
   @autobind
-  _handleItemSelect(item, index) {
+  handleItemSelect(item, index) {
     this.props.history.push('/activity')
   }
 
+  @autobind
+  handleAddPress(item, index) {
+    this.props.history.push('/workitem')
+  }
+
+  @autobind
+  handleBackPress() {
+    const { history } = this.props
+
+    if (history.length > 1) {
+      history.goBack()
+    } else {
+      history.replace('/home')
+    }
+  }
+
   render() {
     return (
       <View style={styles.container}>
-      <FlatList
-        style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
-        data={data}
-        renderItem={({item, index}) => {
-          return (
-            <View style={{ flexDirection: 'row', height: 50 }}>
-              <Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
-              <View style={{ flexDirection: 'column', width: '75%' }}>
-                <Text style={{ fontSize: 20 }}>{Admin.inspectionTypes[item.type].title}</Text>
-                <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
+        <Header title='Work Items' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'add', onPress: this.handleAddPress }} />
+        <FlatList
+          style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
+          data={data}
+          renderItem={({item, index}) => {
+            return (
+              <View style={{ flexDirection: 'row', height: 50 }}>
+                <Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
+                <View style={{ flexDirection: 'column', width: '75%' }}>
+                  <Text style={{ fontSize: 20 }}>{inspectionTypes[item.type].title}</Text>
+                  <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
+                </View>
+                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
+                  <Icon name='rightArrow' size={16} />
+                </TouchableOpacity>
               </View>
-              <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
-                <Image source={rightArrowImage} style={{ width: 16, height: 16 }} />
-              </TouchableOpacity>
-            </View>
-          )
-        }} />
+            )
+          }} />
       </View>
-    );
+    )
   }
 }