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

Implementing work item map screen

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-13 10:53:21 -07:00
parent 9dc783efef
commit 7bd5c64f21
17 changed files with 552 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
mobile/src/screens/Home.js
View File

@@ -1,6 +1,11 @@
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { StyleSheet, Text, TextInput, FlatList, Image, View } from 'react-native'
import MapView, { Marker } from 'react-native-maps'
import { api } from '../API'
import centerImage from './images/center.png'
import settingsImage from './images/settings.png'
import searchImage from './images/search.png'
import cancelImage from './images/cancel.png'
export class Home extends React.Component {
static navigatorButtons = {
@@ -22,11 +27,22 @@ export class Home extends React.Component {
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
alignItems: 'flex-start',
justifyContent: 'flex-start',
}
})
static data = [
{key: '1', title: 'Remove Animal Carcass', location: 'Ossington Ave. | 0.2 mi.', state: 'planned', latlng: { latitude: 43.653226, longitude: -79.383184 } },
{key: '2', title: 'Fix sign post', location: 'Alexandre St. | 0.7 mi.', state: 'open', latlng: { latitude: 43.648118, longitude: 79.392636 }},
{key: '3', title: 'Overflowing trash', location: 'Bay St. | 0.8 mi.', state: 'open', latlng: { latitude: 43.640168, longitude: -79.409373 }},
{key: '4', title: 'Leaking water pipe', location: 'Bloor St. | 1.2 mi.', state: 'planned', latlng: { latitude: 43.633110, longitude: -79.415880 }},
{key: '5', title: 'Tree branch in road', location: 'Blue Jays Way | 2.2 mi.', state: 'open', latlng: { latitude: 43.653526, longitude: -79.361385 }},
{key: '6', title: 'Washing machine on sidewalk', location: 'Christie St. | 3.0 mi.', state: 'open', latlng: { latitude: 43.663870, longitude: -79.383705 }},
{key: '7', title: 'Dead moose', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
{key: '8', title: 'Glass in street', location: 'Danforth Ave. | 4.7 mi.', state: 'open', latlng: { latitude: 43.663538, longitude: -79.423212 }},
]
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this))
@@ -57,6 +73,56 @@ export class Home extends React.Component {
render() {
return (
<View style={Home.styles.container}>
<MapView
style={{ width: '100%', height: '50%' }}
zoomControlEnabled
initialRegion={{
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{
Home.data.map(marker => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.location} />
))
}
</MapView>
<View style={{ flexDirection: 'row', alignItems: 'center', width: '100%', height: 40, backgroundColor: '#F4F4F4' }}>
<Image source={searchImage} style={{ width: 16, height: 16, tintColor: 'gray', marginLeft: 10, marginRight: 5 }} />
<TextInput style={{ flexGrow: 1, height: '100%' }} placeholder='Search' />
<Image source={cancelImage} style={{ width: 16, height: 16, marginLeft: 5, marginRight: 10 }} />
</View>
<FlatList
style={{ width: '100%', flexGrow: 1 }}
data={Home.data}
renderItem={({item}) => {
return (
<View style={{ flexDirection: 'row', height: 50 }}>
<Text style={{ fontSize: 8, width: 45, marginLeft: 5, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 20 }}>{item.title}</Text>
<Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
</View>
</View>
)
}} />
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: 45,
backgroundColor: '#F4F4F4',
}}>
<Image source={centerImage} style={{ height: 24, width: 24, marginLeft: 15, tintColor: 'gray' }} />
<Text style={{ color: 'gray', fontSize: 20, }}>Hide List</Text>
<Image source={settingsImage} style={{ height: 24, width: 24, marginRight: 15, tintColor: 'gray' }} />
</View>
</View>
);
}