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

236
mobile/src/Home/Home.js
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React from "react"
import {
StyleSheet,
Text,
@@ -7,32 +7,80 @@ import {
Image,
View,
TouchableOpacity,
} from 'react-native'
import MapView, { Marker } from 'react-native-maps'
import { Icon, Header } from '../ui'
import { api } from '../API'
import autobind from 'autobind-decorator'
import pinImage from './images/pin.png'
import { ifIphoneX } from 'react-native-iphone-x-helper'
} from "react-native"
import MapView, { Marker } from "react-native-maps"
import { Icon, Header } from "../ui"
import { api } from "../API"
import autobind from "autobind-decorator"
import pinImage from "./images/pin.png"
import { ifIphoneX } from "react-native-iphone-x-helper"
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
alignItems: 'flex-start',
justifyContent: 'flex-start',
}
backgroundColor: "#FFFFFF",
alignItems: "flex-start",
justifyContent: "flex-start",
},
})
const 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 }},
{
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.63311, longitude: -79.41588 },
},
{
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.66387, longitude: -79.383705 },
},
{
key: "7",
title: "Dead moose",
location: "Cummer Ave. | 4.2 mi.",
state: "open",
latlng: { latitude: 43.659166, longitude: -79.39135 },
},
{
key: "8",
title: "Glass in street",
location: "Danforth Ave. | 4.7 mi.",
state: "open",
latlng: { latitude: 43.663538, longitude: -79.423212 },
},
]
export class Home extends React.Component {
@@ -43,42 +91,45 @@ export class Home extends React.Component {
@autobind
_handleNavigatorEvent(event) {
switch (event.id) {
case 'logout':
case "logout":
api.logout().then(() => {
this.props.history.replace('/login')
this.props.history.replace("/login")
})
break
case 'viewer':
this.props.push('/viewer')
case "viewer":
this.props.push("/viewer")
break
}
}
@autobind
handleWorkItemsListPress() {
this.props.history.push('/workitemlist')
this.props.history.push("/workitemlist")
}
@autobind
handleItemSelect(item, index) {
this.props.history.push('/activity')
this.props.history.push("/activity")
}
@autobind
handleLogoutPress() {
this.props.history.replace('/logout')
this.props.history.replace("/logout")
}
@autobind
handleGlassesPress() {
this.props.history.push('/arviewer')
this.props.history.push("/arviewer")
}
@autobind
handleMyLocationPress() {
navigator.geolocation.getCurrentPosition((info) => {
if (this.map) {
this.map.animateToCoordinate({latitude: info.coords.latitude, longitude: info.coords.longitude})
this.map.animateToCoordinate({
latitude: info.coords.latitude,
longitude: info.coords.longitude,
})
}
})
}
@@ -87,13 +138,17 @@ export class Home extends React.Component {
return (
<View style={styles.container}>
<Header
title='Work Item Map'
leftButton={{ icon: 'logout', onPress: this.handleLogoutPress }}
rightButton={{ icon: 'glasses', onPress: this.handleGlassesPress }} />
title="Work Item Map"
leftButton={{ icon: "logout", onPress: this.handleLogoutPress }}
rightButton={{ icon: "glasses", onPress: this.handleGlassesPress }}
/>
<MapView
ref={ref => { this.map = ref }}
ref={(ref) => {
this.map = ref
}}
style={{
width: '100%', height: '50%',
width: "100%",
height: "50%",
}}
showsUserLocation
showsBuildings={false}
@@ -106,58 +161,97 @@ export class Home extends React.Component {
latitudeDelta: 0.0922,
longitudeDelta: 0.0922,
}}>
{
data.map(marker => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.location}
image={pinImage}
anchor={{x: 0.5, y: 1.0}} />
))
}
{data.map((marker) => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.location}
image={pinImage}
anchor={{ x: 0.5, y: 1.0 }}
/>
))}
</MapView>
<View style={{ flexDirection: 'row', alignItems: 'center', width: '100%', height: 40, backgroundColor: '#F4F4F4' }}>
<Icon name='search' size={16} style={{marginLeft: 10, marginRight: 5, tintColor: 'gray' }} />
<TextInput style={{ flexGrow: 1, height: '100%' }} placeholder='Search' />
<Icon name='cancel' size={16} style={{marginLeft: 5, marginRight: 10, tintColor: 'gray' }} />
<View
style={{
flexDirection: "row",
alignItems: "center",
width: "100%",
height: 40,
backgroundColor: "#F4F4F4",
}}>
<Icon
name="search"
size={16}
style={{ marginLeft: 10, marginRight: 5, tintColor: "gray" }}
/>
<TextInput
style={{ flexGrow: 1, height: "100%" }}
placeholder="Search"
/>
<Icon
name="cancel"
size={16}
style={{ marginLeft: 5, marginRight: 10, tintColor: "gray" }}
/>
</View>
<FlatList
style={{ width: '100%', flexGrow: 1 }}
style={{ width: "100%", flexGrow: 1 }}
data={data}
renderItem={({item, index}) => {
renderItem={({ item, index }) => {
return (
<View style={{ flexDirection: 'row', height: 50 }}>
<Text style={{ fontSize: 8, width: 45, marginLeft: 5, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
<View style={{ width: '75%', flexDirection: 'column' }}>
<View style={{ flexDirection: "row", height: 50 }}>
<Text
style={{
fontSize: 8,
width: 45,
marginLeft: 5,
alignSelf: "center",
}}>
{item.state.toUpperCase()}
</Text>
<View style={{ width: "75%", flexDirection: "column" }}>
<Text style={{ fontSize: 20 }}>{item.title}</Text>
<Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</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
style={{ alignSelf: "center" }}
onPress={() => this.handleItemSelect(item, index)}>
<Icon name="rightArrow" size={16} />
</TouchableOpacity>
</View>
)
}} />
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: 45,
backgroundColor: '#F4F4F4',
...ifIphoneX({ marginBottom: 22 }, {}),
}}>
}}
/>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
height: 45,
backgroundColor: "#F4F4F4",
...ifIphoneX({ marginBottom: 22 }, {}),
}}>
<TouchableOpacity onPress={this.handleMyLocationPress}>
<Icon name='center' size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
<Icon
name="center"
size={24}
style={{ marginLeft: 15, tintColor: "gray" }}
/>
</TouchableOpacity>
<Text style={{ color: 'gray', fontSize: 20, }}>Hide List</Text>
<Text style={{ color: "gray", fontSize: 20 }}>Hide List</Text>
<TouchableOpacity onPress={this.handleWorkItemsListPress}>
<Icon name='settings' size={24} style={{ marginRight: 15, tintColor: 'gray' }} />
<Icon
name="settings"
size={24}
style={{ marginRight: 15, tintColor: "gray" }}
/>
</TouchableOpacity>
</View>
</View>
);
)
}
}