john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added swipable list to work items list

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-06 11:35:23 -07:00
parent aec39ae17d
commit d646b9477b
9 changed files with 394 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
mobile/src/WorkItem/WorkItem.js
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React from "react"
import {
StyleSheet,
View,
@@ -9,9 +9,9 @@ import {
KeyboardAvoidingView,
Platform,
TouchableOpacity
} from 'react-native'
import MapView, { Marker } from 'react-native-maps'
import { FormBinder } from 'react-form-binder'
} from "react-native"
import MapView, { Marker } from "react-native-maps"
import { FormBinder } from "react-form-binder"
import {
BoundInput,
BoundButton,
@@ -19,51 +19,54 @@ import {
Icon,
Header,
PhotoButton,
BoundOptionStrip,
} from '../ui'
import { MessageModal } from '../Modal'
import autobind from 'autobind-decorator'
import { ifIphoneX, isIphoneX } from 'react-native-iphone-x-helper'
import KeyboardSpacer from 'react-native-keyboard-spacer'
import { api } from '../API'
BoundOptionStrip
} from "../ui"
import { MessageModal } from "../Modal"
import autobind from "autobind-decorator"
import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
import KeyboardSpacer from "react-native-keyboard-spacer"
import { api } from "../API"
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flexDirection: "column",
flexGrow: 1,
backgroundColor: '#DDDDDD',
backgroundColor: "#DDDDDD"
},
panel: {
width: '94%',
backgroundColor: 'white',
alignSelf: 'center',
marginTop: '3%',
shadowColor: 'gray',
width: "94%",
backgroundColor: "white",
alignSelf: "center",
marginTop: "3%",
shadowColor: "gray",
shadowOffset: { width: 2, height: 2 },
shadowRadius: 2,
shadowOpacity: .5,
padding: 10,
shadowOpacity: 0.5,
padding: 10
},
label: {
fontSize: 14,
marginBottom: 4,
marginBottom: 4
}
})
const workItemOptions = [
{ value: 'order', text: 'Work Order' },
{ value: 'inspection', text: 'Inspection' },
{ value: 'complaint', text: 'Complaint' }
{ value: "order", text: "Work Order" },
{ value: "inspection", text: "Inspection" },
{ value: "complaint", text: "Complaint" }
]
const latLngToString = (lat, lng) => (`${Math.abs(lng).toFixed(4)}°${lng > 0 ? 'S' : 'N'}, ${Math.abs(lat).toFixed(4)}°${lat > 0 ? 'W' : 'E'}`)
const latLngStringToPoint = (str) => {
const parts = str.split(', ')
const latLngToString = (lat, lng) =>
`${Math.abs(lng).toFixed(4)}°${lng > 0 ? "S" : "N"}, ${Math.abs(lat).toFixed(
4
)}°${lat > 0 ? "W" : "E"}`
const latLngStringToPoint = str => {
const parts = str.split(", ")
return {
type: 'Point',
type: "Point",
coordinates: [
new Number(parts[0].substring(0, parts[0].length - 2)),
new Number(parts[1].substring(0, parts[1].length - 2)),
new Number(parts[1].substring(0, parts[1].length - 2))
]
}
}
@@ -72,19 +75,19 @@ export class WorkItem extends React.Component {
static bindings = {
header: {
noValue: true,
isDisabled: (r) => (!(r.anyModified && r.allValid)),
isDisabled: r => !(r.anyModified && r.allValid)
},
location: {
isValid: true,
isDisabled: true,
isDisabled: true
},
details: {
isValid: (r, v) => (v !== ''),
isValid: (r, v) => v !== ""
},
workItemType: {
isValid: true,
initValue: 'order',
alwaysGet: true,
initValue: "order",
alwaysGet: true
}
}
@@ -92,7 +95,7 @@ export class WorkItem extends React.Component {
super(props)
this.state = {
binder: new FormBinder({}, WorkItem.bindings),
messageModal: null,
messageModal: null
}
}
@@ -103,7 +106,7 @@ export class WorkItem extends React.Component {
if (history.length > 1) {
history.goBack()
} else {
history.replace('/home')
history.replace("/home")
}
}
@@ -115,25 +118,35 @@ export class WorkItem extends React.Component {
obj.location = latLngStringToPoint(obj.location)
if (!obj._id) {
api.createWorkItem(obj).then((workItem) => {
this.handleBackPress()
}).catch((error) => {
this.setState({ messageModal: {
icon: 'hand',
message: 'Unable to create work item',
detail: error.message,
}})
})
api
.createWorkItem(obj)
.then(workItem => {
this.handleBackPress()
})
.catch(error => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to create work item",
detail: error.message
}
})
})
} else {
api.updateWorkItem(obj).then((workItem) => {
this.handleBackPress()
}).catch((error) => {
this.setState({ messageModal: {
icon: 'hand',
message: 'Unable to update work item',
detail: error.message,
}})
})
api
.updateWorkItem(obj)
.then(workItem => {
this.handleBackPress()
})
.catch(error => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to update work item",
detail: error.message
}
})
})
}
}
@@ -146,7 +159,12 @@ export class WorkItem extends React.Component {
handleRegionChange(region) {
const { binder } = this.state
this.setState(binder.updateFieldValue('location', latLngToString(region.latitude, region.longitude)))
this.setState(
binder.updateFieldValue(
"location",
latLngToString(region.latitude, region.longitude)
)
)
}
render() {
@@ -156,54 +174,75 @@ export class WorkItem extends React.Component {
<View style={{ flex: 1 }}>
<BoundHeader
binder={binder}
name='header'
title='Work Item'
leftButton={{ icon: 'back', onPress: this.handleBackPress }}
rightButton={{ icon: 'done', onPress: this.handleDonePress }} />
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} />
<BoundOptionStrip
binder={binder}
name="workItemType"
label="Work Item Type:"
options={workItemOptions}
/>
</View>
<View style={styles.panel}>
<BoundInput binder={binder} name='details' lines={4} 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>
<View style={styles.panel}>
<MapView
style={{
flexDirection: 'column',
justifyContent: 'center',
width: '100%',
flexDirection: "column",
justifyContent: "center",
width: "100%",
height: 400,
marginBottom: 10,
marginBottom: 10
}}
zoomControlEnabled
initialRegion={{
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
longitudeDelta: 0.0421
}}
onRegionChange={this.handleRegionChange}>
<Icon name='target' size={24} style={{ alignSelf: 'center' }} pointerEvents={false} />
onRegionChange={this.handleRegionChange}
>
<Icon
name="target"
size={24}
style={{ alignSelf: "center" }}
pointerEvents={false}
/>
</MapView>
<BoundInput binder={binder} name='location' label='Location:' />
<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' }}>
<View
style={{ flexDirection: "row", justifyContent: "space-between" }}
>
<PhotoButton />
<PhotoButton />
<PhotoButton />
</View>
</View>
{ isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
{isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
</ScrollView>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
detail={messageModal ? messageModal.detail : ''}
onDismiss={messageModal && this.handleMessageDismiss} />
icon={messageModal ? messageModal.icon : ""}
message={messageModal ? messageModal.message : ""}
detail={messageModal ? messageModal.detail : ""}
onDismiss={messageModal && this.handleMessageDismiss}
/>
<KeyboardSpacer />
</View>
)