Work Item and Activity screens mostly complete

mobile/src/Activity/Activity.js

@@ -1,30 +1,142 @@
 import React from 'react'
-import { StyleSheet, View, TouchableOpacity, Image, ScrollView } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Image,
+  ScrollView,
+  Text,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity
+} from 'react-native'
+import MapView, { Marker } from 'react-native-maps'
+import { FormBinder } from 'react-form-binder'
+import { Icon, Header, PhotoButton, BoundInput, BoundButton, BoundOptionStrip } 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 Activity extends React.Component {
-  static styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      width: '100%',
-      backgroundColor: '#AAAAAA',
+  static bindings = {
+    dateTime: {
+      isValid: true,
     },
-  })
+    location: {
+      isValid: true,
+    },
+    details: {
+      isValid: true,
+    },
+    resolution: {
+      isValid: true,
+    },
+    notes: {
+      isValid: true,
+    },
+    status: {
+      isValid: true,
+    }
+  }
 
   constructor(props) {
     super(props)
+    this.state = {
+      binder: new FormBinder({}, Activity.bindings),
+      messageModal: null,
+    }
   }
 
-  _handlePushButton(event) {
-    this.props.history.goBack()
+  @autobind
+  handleBackPress() {
+    const { history } = this.props
+
+    if (history.length > 1) {
+      history.goBack()
+    } else {
+      history.replace('/home')
+    }
   }
 
   render() {
+    const { binder } = this.state
+
     return (
-      <ScrollView style={Activity.styles.container}>
-        <View style={{ width: '94%', height: 300, backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }} />
-        <View style={{ width: '94%', height: 300, backgroundColor: 'white', alignSelf: 'center', marginTop: '3%', shadowColor: 'gray', shadowOffset: { width: 2, height: 2 }, shadowRadius: 2, shadowOpacity: .5 }} />
-      </ScrollView>
+      <View style={{ width: '100%', height: '100%' }}>
+        <Header title='Activity' leftButton={{ icon: 'back', onPress: this.handleBackPress }} />
+        <ScrollView style={styles.container}>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='resolution' label='Resolution:' />
+          </View>
+          <View style={styles.panel}>
+            <BoundOptionStrip
+              binder={binder}
+              options={[
+                { value: 'planned', text: 'Planned' },
+                { value: 'open', text: 'Open' },
+                { value: 'onHold', text: 'On Hold' },
+                { value: 'closed', text: 'Closed' },
+              ]}
+              label='Status:'
+              name='status' />
+          </View>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='notes' label='Notes:' />
+          </View>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='dateTime' label='Date &amp; Time:' />
+            <BoundInput binder={binder} name='location' label='Location:' />
+            <MapView
+              style={{
+                width: '100%',
+                height: 400,
+                marginTop: 10,
+              }}
+              zoomControlEnabled
+              initialRegion={{
+                latitude: 43.653908,
+                longitude: -79.384293,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }} />
+          </View>
+          <View style={styles.panel}>
+            <Text style={styles.label}>Pictures:</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
+              <PhotoButton />
+              <PhotoButton />
+              <PhotoButton />
+            </View>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+              <PhotoButton />
+              <PhotoButton />
+              <PhotoButton />
+            </View>
+          </View>
+          { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
+        </ScrollView>
+      </View>
     );
   }
 }