89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
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({
|
|
container: {
|
|
height: '100%',
|
|
width: '100%',
|
|
justifyContent: 'flex-start',
|
|
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.633110, longitude: -79.415880 }},
|
|
{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.663870, longitude: -79.383705 }},
|
|
{key: '7', type: 'work', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
|
|
{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',
|
|
}
|
|
}
|
|
|
|
export class WorkItemList extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
@autobind
|
|
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}>
|
|
<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>
|
|
)
|
|
}} />
|
|
</View>
|
|
)
|
|
}
|
|
}
|