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

SectionList on home screen with API

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-08 18:33:21 -07:00
parent 5634acb967
commit 7891bb71c9
19 changed files with 1278 additions and 1201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
mobile/src/API.js
View File

@@ -279,6 +279,9 @@ class API extends EventEmitter {
listWorkItems() {
return this.get("/workitems")
}
listWorkItemActivities() {
return this.get("/workitems/activities")
}
createWorkItem(workItem) {
return this.post("/workitems", workItem)
}
@@ -289,6 +292,22 @@ class API extends EventEmitter {
return this.delete("/workitems/" + _id)
}
getActivity(_id) {
return this.get("/activities/" + _id)
}
listActivities() {
return this.get("/activities")
}
createActivity(activity) {
return this.post("/activities", activity)
}
updateActivity(activity) {
return this.put("/activities", activity)
}
deleteActivity(_id) {
return this.delete("/activities/" + _id)
}
upload(file, progressCallback) {
return new Promise((resolve, reject) => {
const chunkSize = 32 * 1024

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

@@ -3,7 +3,7 @@ import {
StyleSheet,
Text,
TextInput,
FlatList,
SectionList,
Image,
View,
TouchableOpacity,
@@ -14,6 +14,7 @@ import { api } from "../API"
import autobind from "autobind-decorator"
import pinImage from "./images/pin.png"
import { ifIphoneX } from "react-native-iphone-x-helper"
import { workItemTypeText, pad } from "../util"
const styles = StyleSheet.create({
container: {
@@ -24,68 +25,20 @@ const styles = StyleSheet.create({
},
})
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.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 {
constructor(props) {
super(props)
this.state = {
sections: [],
}
api
.listWorkItemActivities()
.then((list) => {
this.setState({ sections: list.items })
})
.catch((err) => {
console.error(err)
})
}
@autobind
@@ -135,6 +88,8 @@ export class Home extends React.Component {
}
render() {
const { sections } = this.state
return (
<View style={styles.container}>
<Header
@@ -161,12 +116,12 @@ export class Home extends React.Component {
latitudeDelta: 0.0922,
longitudeDelta: 0.0922,
}}>
{data.map((marker) => (
{sections.map((section, index) => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.location}
key={index}
coordinate={section.coordinate}
title={workItemTypeText[section.workItemType]}
description={section.address}
image={pinImage}
anchor={{ x: 0.5, y: 1.0 }}
/>
@@ -178,7 +133,7 @@ export class Home extends React.Component {
alignItems: "center",
width: "100%",
height: 40,
backgroundColor: "#F4F4F4",
backgroundColor: "white",
}}>
<Icon
name="search"
@@ -187,7 +142,7 @@ export class Home extends React.Component {
/>
<TextInput
style={{ flexGrow: 1, flexBasis: 0, height: "100%" }}
underlineColorAndroid="#F4F4F4"
underlineColorAndroid="white"
placeholder="Search"
/>
<Icon
@@ -196,12 +151,34 @@ export class Home extends React.Component {
style={{ marginLeft: 5, marginRight: 10, tintColor: "gray" }}
/>
</View>
<FlatList
<SectionList
style={{ width: "100%", flexGrow: 1 }}
data={data}
renderItem={({ item, index }) => {
sections={sections}
renderSectionHeader={({ section: workItem }) => (
<View
key={workItem._id}
style={{
flexDirection: "column",
justifyContent: "center",
backgroundColor: "#F4F4F4",
paddingLeft: 8,
height: 45,
}}>
<Text style={{ fontSize: 16 }}>
WORK ORDER {pad(workItem.ticketNumber, 4)}
</Text>
</View>
)}
renderItem={({ item: activity, section }) => {
return (
<View style={{ flexDirection: "row", height: 50 }}>
<View
key={activity._id}
style={{
flexDirection: "row",
height: 50,
marginTop: 3,
marginBottom: 3,
}}>
<Text
style={{
fontSize: 8,
@@ -209,17 +186,19 @@ export class Home extends React.Component {
marginLeft: 5,
alignSelf: "center",
}}>
{item.state.toUpperCase()}
{activity.status.toUpperCase()}
</Text>
<View style={{ width: "75%", flexDirection: "column" }}>
<Text style={{ fontSize: 20 }}>{item.title}</Text>
<Text style={{ fontSize: 20, fontWeight: "bold" }}>
{activity.resolution}
</Text>
<Text style={{ fontSize: 14, color: "gray" }}>
{item.location}
{activity.address || "..."}
</Text>
</View>
<TouchableOpacity
style={{ alignSelf: "center" }}
onPress={() => this.handleItemSelect(item, index)}>
onPress={() => this.handleItemSelect(activity, index)}>
<Icon name="rightArrow" size={16} />
</TouchableOpacity>
</View>

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

@@ -76,6 +76,12 @@ export class WorkItem extends React.Component {
this.state = {
binder: new FormBinder({}, WorkItem.bindings),
messageModal: null,
region: {
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
}
const { search } = this.props.location
@@ -92,6 +98,12 @@ export class WorkItem extends React.Component {
workItem.location = formatLatLng(lat, lng)
this.setState({
binder: new FormBinder(workItem, WorkItem.bindings),
region: {
latitude: lat,
longitude: lng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
})
}
})
@@ -179,7 +191,7 @@ export class WorkItem extends React.Component {
}
render() {
const { binder, messageModal } = this.state
const { binder, messageModal, region } = this.state
return (
<View style={{ flex: 1 }}>
@@ -223,12 +235,7 @@ export class WorkItem extends React.Component {
showsTraffic={false}
showsIndoors={false}
zoomControlEnabled
initialRegion={{
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
region={region}
onRegionChange={this.handleRegionChange}
/>
<Icon

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

@@ -13,7 +13,13 @@ 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, pad } from "../util"
import {
workItemTypeEnum,
workItemTypeText,
formatLatLng,
parseLatLng,
pad,
} from "../util"
const styles = StyleSheet.create({
container: {
@@ -24,11 +30,6 @@ const styles = StyleSheet.create({
},
})
const workItemTypeText = workItemTypeEnum.reduce((result, item) => {
result[item.value] = item.text
return result
}, {})
export class WorkItemList extends React.Component {
constructor(props) {
super(props)

5
mobile/src/util.js
View File

@@ -45,6 +45,11 @@ export const workItemTypeEnum = [
{ value: "complaint", text: "Complaint" },
]
export const workItemTypeText = workItemTypeEnum.reduce((result, item) => {
result[item.value] = item.text
return result
}, {})
export const pad = (num, size) => {
var s = num + ""
while (s.length < size) s = "0" + s