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

Debug issues with work item CRUD

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-06 14:59:18 -07:00
parent d646b9477b
commit 57f98ad398
14 changed files with 684 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ import {
TextInput,
KeyboardAvoidingView,
Platform,
TouchableOpacity
TouchableOpacity,
} from "react-native"
import MapView, { Marker } from "react-native-maps"
import { FormBinder } from "react-form-binder"
@@ -19,19 +19,21 @@ import {
Icon,
Header,
PhotoButton,
BoundOptionStrip
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"
import "url-search-params-polyfill"
import { workItemTypeEnum, formatLatLng, parseLatLng } from "../util"
const styles = StyleSheet.create({
container: {
flexDirection: "column",
flexGrow: 1,
backgroundColor: "#DDDDDD"
backgroundColor: "#DDDDDD",
},
panel: {
width: "94%",
@@ -42,60 +44,68 @@ const styles = StyleSheet.create({
shadowOffset: { width: 2, height: 2 },
shadowRadius: 2,
shadowOpacity: 0.5,
padding: 10
padding: 10,
},
label: {
fontSize: 14,
marginBottom: 4
}
marginBottom: 4,
},
})
const workItemOptions = [
{ 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(", ")
return {
type: "Point",
coordinates: [
new Number(parts[0].substring(0, parts[0].length - 2)),
new Number(parts[1].substring(0, parts[1].length - 2))
]
}
}
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
}
alwaysGet: true,
},
}
constructor(props) {
super(props)
this.state = {
binder: new FormBinder({}, WorkItem.bindings),
messageModal: null
messageModal: null,
}
const { search } = this.props.location
if (search) {
const id = new URLSearchParams(search).get("id")
if (id) {
api
.getWorkItem(id)
.then((workItem) => {
if (workItem) {
const [lng, lat] = workItem.location.coordinates
workItem.location = formatLatLng(lat, lng)
this.setState({
binder: new FormBinder(workItem, WorkItem.bindings),
})
}
})
.catch((err) => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to get work item details",
detail: err.message,
back: true,
},
})
})
}
}
}
@@ -115,36 +125,36 @@ export class WorkItem extends React.Component {
const { binder } = this.state
let obj = binder.getModifiedFieldValues()
obj.location = latLngStringToPoint(obj.location)
obj.location = parseLatLng(obj.location)
if (!obj._id) {
api
.createWorkItem(obj)
.then(workItem => {
.then((workItem) => {
this.handleBackPress()
})
.catch(error => {
.catch((error) => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to create work item",
detail: error.message
}
detail: error.message,
},
})
})
} else {
api
.updateWorkItem(obj)
.then(workItem => {
.then((workItem) => {
this.handleBackPress()
})
.catch(error => {
.catch((error) => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to update work item",
detail: error.message
}
detail: error.message,
},
})
})
}
@@ -152,7 +162,11 @@ export class WorkItem extends React.Component {
@autobind
handleMessageDismiss() {
const back = this.state.messageModal.back
this.setState({ messageModal: null })
if (back) {
this.handleBackPress()
}
}
@autobind
@@ -162,7 +176,7 @@ export class WorkItem extends React.Component {
this.setState(
binder.updateFieldValue(
"location",
latLngToString(region.latitude, region.longitude)
formatLatLng(region.latitude, region.longitude)
)
)
}
@@ -185,7 +199,7 @@ export class WorkItem extends React.Component {
binder={binder}
name="workItemType"
label="Work Item Type:"
options={workItemOptions}
options={workItemTypeEnum}
/>
</View>
<View style={styles.panel}>
@@ -204,17 +218,16 @@ export class WorkItem extends React.Component {
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}
>
onRegionChange={this.handleRegionChange}>
<Icon
name="target"
size={24}
@@ -227,8 +240,7 @@ export class WorkItem extends React.Component {
<View style={styles.panel}>
<Text style={styles.label}>Pictures:</Text>
<View
style={{ flexDirection: "row", justifyContent: "space-between" }}
>
style={{ flexDirection: "row", justifyContent: "space-between" }}>
<PhotoButton />
<PhotoButton />
<PhotoButton />

135
mobile/src/WorkItem/WorkItemList.js
View File

@@ -6,122 +6,58 @@ import {
TouchableOpacity,
Image,
FlatList,
Text
Text,
} from "react-native"
import { Icon, Header } from "../ui"
import { MessageModal } from "../Modal"
import autobind from "autobind-decorator"
import { SwipeListView } from "react-native-swipe-list-view"
import { api } from "../API"
import { workItemTypeEnum, formatLatLng, parseLatLng } from "../util"
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
justifyContent: "flex-start",
backgroundColor: "#FFFFFF"
}
backgroundColor: "#FFFFFF",
},
})
const data = [
{
key: "1",
type: "work",
location: "Ossington Ave. | 0.2 mi.",
state: "open",
latlng: { latitude: 43.653226, longitude: -79.383184 }
},
{
key: "2",
type: "inspection",
location: "Alexandre St. | 0.7 mi.",
state: "open",
latlng: { latitude: 43.648118, longitude: 79.392636 }
},
{
key: "3",
type: "complaint",
location: "Bay St. | 0.8 mi.",
state: "open",
latlng: { latitude: 43.640168, longitude: -79.409373 }
},
{
key: "4",
type: "work",
location: "Bloor St. | 1.2 mi.",
state: "open",
latlng: { latitude: 43.63311, longitude: -79.41588 }
},
{
key: "5",
type: "inspection",
location: "Blue Jays Way | 2.2 mi.",
state: "open",
latlng: { latitude: 43.653526, longitude: -79.361385 }
},
{
key: "6",
type: "complaint",
location: "Christie St. | 3.0 mi.",
state: "open",
latlng: { latitude: 43.66387, longitude: -79.383705 }
},
{
key: "7",
type: "work",
location: "Cummer Ave. | 4.2 mi.",
state: "open",
latlng: { latitude: 43.659166, longitude: -79.39135 }
},
{
key: "8",
type: "complaint",
location: "Danforth Ave. | 4.7 mi.",
state: "open",
latlng: { latitude: 43.663538, longitude: -79.423212 }
}
]
const inspectionTypes = {
work: {
title: "Work Order"
},
inspection: {
title: "Inspection"
},
complaint: {
title: "Complaint"
}
}
const workItemTypeText = workItemTypeEnum.reduce((result, item) => {
result[item.value] = item.text
return result
}, {})
export class WorkItemList extends React.Component {
constructor(props) {
super(props)
this.state = {
messageModal: null
messageModal: null,
}
api
.listWorkItems()
.then(list => {})
.then((list) => {
this.setState({ listItems: list.items })
})
.catch(() => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to get list of work items",
detail: error.message
}
detail: error.message,
},
})
})
}
@autobind
handleItemSelect(item, index) {
this.props.history.push("/workitem")
this.props.history.push(`/workitem?id=${item._id}`)
}
@autobind
handleItemDelete(item, index) {
}
handleItemDelete(item, index) {}
@autobind
handleMessageDismiss() {
@@ -145,7 +81,7 @@ export class WorkItemList extends React.Component {
}
render() {
const { messageModal } = this.state
const { listItems, messageModal } = this.state
return (
<View style={styles.container}>
@@ -160,9 +96,10 @@ export class WorkItemList extends React.Component {
width: "100%",
flexGrow: 1,
paddingTop: 20,
paddingBottom: 20
paddingBottom: 20,
}}
data={data}
data={listItems}
keyExtractor={(item) => (item._id)}
renderItem={({ item, index }) => (
<TouchableHighlight
style={{
@@ -171,16 +108,21 @@ export class WorkItemList extends React.Component {
paddingRight: 20,
backgroundColor: "white",
}}
underlayColor='#EEEEEE'
onPress={() => this.handleItemSelect(item, index)}
>
<View style={{ height: '100%', width: '100%', flexDirection: 'row' }}>
<View style={{ flexGrow: 1, flexDirection: "column", justifyContent: 'center' }}>
underlayColor="#EEEEEE"
onPress={() => this.handleItemSelect(item, index)}>
<View
style={{ height: "100%", width: "100%", flexDirection: "row" }}>
<View
style={{
flexGrow: 1,
flexDirection: "column",
justifyContent: "center",
}}>
<Text style={{ fontSize: 20 }}>
{inspectionTypes[item.type].title}
{workItemTypeText[item.workItemType]}
</Text>
<Text style={{ fontSize: 14, color: "gray" }}>
{item.location}
{`${item.address || "..."} | ??? mi`}
</Text>
</View>
<Icon
@@ -199,9 +141,14 @@ export class WorkItemList extends React.Component {
height: 50,
backgroundColor: "red",
}}
onPress={() => this.handleItemDelete(item, index)}
>
<View style={{ flexDirection: 'column', justifyContent: 'center', backgroundColor: "red", width: 75 }}>
onPress={() => this.handleItemDelete(item, index)}>
<View
style={{
flexDirection: "column",
justifyContent: "center",
backgroundColor: "red",
width: 75,
}}>
<Text style={{ fontSize: 20, alignSelf: "center" }}>
Delete
</Text>
@@ -209,7 +156,7 @@ export class WorkItemList extends React.Component {
</TouchableOpacity>
)}
rightOpenValue={-80}
stopLeftSwipe={100}
stopRightSwipe={-120}
disableRightSwipe
/>
<MessageModal