diff --git a/mobile/src/Home/Home.js b/mobile/src/Home/Home.js index b2c503b..635dcfa 100644 --- a/mobile/src/Home/Home.js +++ b/mobile/src/Home/Home.js @@ -7,54 +7,66 @@ import { Image, View, TouchableOpacity, + TouchableHighlight, } 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 { ifIphoneX } from "react-native-iphone-x-helper" -import { workItemTypeText, pad } from "../util" +import { workItemTypeText, pad, regionContainingPoints } from "../util" import pinImage from "./images/pin.png" -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#FFFFFF", - alignItems: "flex-start", - justifyContent: "flex-start", - }, -}) +const minGPSAccuracy = 20 export class Home extends React.Component { constructor(props) { super(props) this.state = { sections: [], + showWorkItems: true, + region: { + latitude: 43.653908, + longitude: -79.384293, + latitudeDelta: 0.0922, + longitudeDelta: 0.0922, + }, + positionInfo: null, } + + this.watchId = navigator.geolocation.watchPosition( + this.handlePositionChange, + null, + { distanceFilter: 10 } + ) + api .listWorkItemActivities() .then((list) => { - this.setState({ sections: list.items }) + this.setState({ + sections: list.items, + region: regionContainingPoints( + list.items.map((item) => item.coordinate), + 0.02 + ), + }) }) .catch((err) => { console.error(err) }) } - @autobind - _handleNavigatorEvent(event) { - switch (event.id) { - case "logout": - api.logout().then(() => { - this.props.history.replace("/login") - }) - break - case "viewer": - this.props.push("/viewer") - break + componentWillUnmount() { + if (this.watchId) { + navigator.geolocation.clearWatch(this.watchId) } } + @autobind + handlePositionChange(positionInfo) { + this.setState({ positionInfo }) + } + @autobind handleMarkerPress(e, sectionIndex) { if (this.sectionList) { @@ -88,45 +100,56 @@ export class Home extends React.Component { @autobind handleMyLocationPress() { - navigator.geolocation.getCurrentPosition((info) => { - if (this.map) { - this.map.animateToCoordinate({ - latitude: info.coords.latitude, - longitude: info.coords.longitude, - }) - } - }) + if (this.state.positionInfo) { + const coords = this.state.positionInfo.coords + + this.map.animateToCoordinate({ + latitude: coords.latitude, + longitude: coords.longitude, + }) + } + } + + @autobind + handleToggleWorkItemsList() { + this.setState({ showWorkItems: !this.state.showWorkItems }) } render() { - const { sections } = this.state + const { sections, showWorkItems, region, positionInfo } = this.state return ( - +
{ this.map = ref }} - style={{ - width: "100%", - height: "50%", - }} + style={[ + { + width: "100%", + }, + showWorkItems && { height: "40%" }, + !showWorkItems && { flexGrow: 1 }, + ]} showsUserLocation showsBuildings={false} showsTraffic={false} showsIndoors={false} zoomControlEnabled - initialRegion={{ - latitude: 43.653908, - longitude: -79.384293, - latitudeDelta: 0.0922, - longitudeDelta: 0.0922, - }}> + region={region}> {sections.map((workItem, index) => ( - - - + + + + + (this.sectionList = ref)} + style={{ width: "100%", flexGrow: 1 }} + sections={sections} + stickySectionHeadersEnabled={true} + renderSectionHeader={({ section: workItem }) => ( + + + {workItemTypeText[workItem.workItemType].toUpperCase()}{" "} + {pad(workItem.ticketNumber, 4)} + + + )} + keyExtractor={(item) => item._id} + renderItem={({ item: activity, section }) => { + return ( + this.handleItemSelect(activity, index)}> + + + {activity.status.toUpperCase()} + + + + {activity.resolution} + + + {activity.address || "..."} + + + + + + ) + }} /> - (this.sectionList = ref)} - style={{ width: "100%", flexGrow: 1 }} - sections={sections} - stickySectionHeadersEnabled={true} - renderSectionHeader={({ section: workItem }) => ( - - - {workItemTypeText[workItem.workItemType].toUpperCase()}{" "} - {pad(workItem.ticketNumber, 4)} - - - )} - keyExtractor={(item) => item._id} - renderItem={({ item: activity, section }) => { - return ( - - - {activity.status.toUpperCase()} - - - - {activity.resolution} - - - {activity.address || "..."} - - - this.handleItemSelect(activity, index)}> - - - - ) - }} - /> - + - Hide List + + + {showWorkItems ? "Hide List" : "Show List"} + + {pad(item.ticketNumber, 4)} diff --git a/mobile/src/development.js b/mobile/src/development.js index 9caa2a8..c5ab2d3 100644 --- a/mobile/src/development.js +++ b/mobile/src/development.js @@ -1,3 +1,3 @@ export const localIPAddr = "192.168.1.175" -// export const defaultUser = "john@lyon-smith.org" -export const defaultUser = "" +export const defaultUser = "john@lyon-smith.org" +// export const defaultUser = "" diff --git a/mobile/src/ui/Icon.js b/mobile/src/ui/Icon.js index e63275a..4771f84 100644 --- a/mobile/src/ui/Icon.js +++ b/mobile/src/ui/Icon.js @@ -8,6 +8,7 @@ const images = { back: require("./images/back.png"), hand: require("./images/hand.png"), center: require("./images/center.png"), + cancel: require("./images/cancel.png"), rightArrow: require("./images/right-arrow.png"), search: require("./images/search.png"), settings: require("./images/settings.png"), diff --git a/mobile/src/util.js b/mobile/src/util.js index 5272d13..fd629ef 100644 --- a/mobile/src/util.js +++ b/mobile/src/util.js @@ -55,3 +55,36 @@ export const pad = (num, size) => { while (s.length < size) s = "0" + s return s } + +export const regionContainingPoints = (points, inset) => { + let minX, maxX, minY, maxY + + // init first point + ;((point) => { + minX = point.latitude + maxX = point.latitude + minY = point.longitude + maxY = point.longitude + })(points[0]) + + // calculate rect + points.map((point) => { + minX = Math.min(minX, point.latitude) + maxX = Math.max(maxX, point.latitude) + minY = Math.min(minY, point.longitude) + maxY = Math.max(maxY, point.longitude) + }) + + const midX = (minX + maxX) / 2 + const midY = (minY + maxY) / 2 + const midPoint = [midX, midY] + const deltaX = maxX - minX + inset + const deltaY = maxY - minY + inset + + return { + latitude: midX, + longitude: midY, + latitudeDelta: deltaX, + longitudeDelta: deltaY, + } +}