Skip to content

Commit

Permalink
Integrate new buttons into Map.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@sgirvan
sgirvan committed Dec 4, 2017
1 parent 973ff36 commit 0268f79
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 126 deletions.
272 changes: 146 additions & 126 deletions Map.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {Component} from 'react';
import { Platform, StyleSheet, Text, View, Button, Picker, Alert } from 'react-native';
import { Platform, StyleSheet, Text, View, Button, Picker, Alert,
TouchableOpacity } from 'react-native';
import {Permissions, Location, Font} from 'expo';
import MapView from 'react-native-maps';
import PopupDialog from 'react-native-popup-dialog';
Expand All @@ -24,6 +25,10 @@ export class Map extends Component {
constructor(props) {
super(props);

console.ignoredYellowBox = [
'Setting a timer'
]

this.state = {
userRegion: {
latitude: 32.8801,
Expand Down Expand Up @@ -117,9 +122,11 @@ export class Map extends Component {
//calls getLocation method after map is rendered
async componentDidMount() {
this._getLocationAsync();
console.log("Loading Font Awesome...")
await Font.loadAsync({
fontAwesome: require('./fonts/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf'),
FontAwesome: require('./fonts/font-awesome-4.7.0/fonts/FontAwesome.otf')
});
console.log("Font Awesome loaded!")
this.setState({ fontLoaded: true });
}

Expand Down Expand Up @@ -225,70 +232,89 @@ export class Map extends Component {
<View
style={styles.container}
>
<MapView
ref = {(mapView) => { _map = mapView; }}
style={styles.container}
onRegionChange={this._handleMapRegionChange}
region={this.state.mapRegion}
showUserLocation={true}
initialRegion = {{
latitude: 32.8801,
longitude: -117.2340,
latitudeDelta: 0.0422,
longitudeDelta: 0.0221
}}
showsUserLocation={true}
onLongPress={e => this._createMarker(e.nativeEvent.coordinate.latitude, e.nativeEvent.coordinate.longitude, 'marker')
}
>
{this.state.renderedMarkers.map(marker => (
<MapView.Marker
ref={marker => (this.marker = marker)}
key={marker.key}
image={this._setMarkerImg(marker.tag)}
coordinate={marker.coordinate}
onPress={() => {
this.showEventModal(marker);
}} />
))}
</MapView>
<ActionButton buttonColor="rgba(231,76,60,1)"
style={styles.filterButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 25, color: '#fff' }}>
{Icons.list}
</Text>
) : null}
degrees={Number(0)}
onPress= {this.showFilterModal}>
</ActionButton>
<ActionButton buttonColor="rgba(231,76,60,1)"
style={styles.centerButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
{Icons.compass}
</Text>
) : null}
degrees={Number(0)}
onPress= {() =>_map.animateToRegion(this.state.userRegion, 500)}>
</ActionButton>
<Modal isVisible={this.state.filterModal}
onBackdropPress={this.hideFilterModal}
onModalHide={this.getFilteredResults.bind(this)}>
<View style={styles.filterModal}>
<Text stylme={{textAlign:'center'}}>Choose Filter</Text>
<Picker
selectedValue={this.state.tag.toString()}
onValueChange={(itemValue, itemIndex) => this.setState({tag: itemValue})}>
<Picker.Item label="None" value="none" />
<Picker.Item label="Food" value="food" />
<Picker.Item label="Cookie" value="cookie" />
<Picker.Item label="Gluten Free" value="gluten" />
<Picker.Item label="Vegetarian" value="veg" />
<Picker.Item label="Other" value="other" />
</Picker>
</View>
<MapView
ref = {(mapView) => { _map = mapView; }}
style={styles.container}
onRegionChange={this._handleMapRegionChange}
region={this.state.mapRegion}
showUserLocation={true}
initialRegion = {{
latitude: 32.8801,
longitude: -117.2340,
latitudeDelta: 0.0422,
longitudeDelta: 0.0221
}}
showsUserLocation={true}
onLongPress={e => this._createMarker(e.nativeEvent.coordinate.latitude, e.nativeEvent.coordinate.longitude, 'marker')
}
>
{this.state.renderedMarkers.map(marker => (
<MapView.Marker
ref={marker => (this.marker = marker)}
key={marker.key}
image={this._setMarkerImg(marker.tag)}
coordinate={marker.coordinate}
onPress={() => {
this.showEventModal(marker);
}} />
))}
</MapView>

<View style={styles.bottomBar}>

<TouchableOpacity
style={styles.filterButton}
onPress={this.showFilterModal}
>
<Text style={{ fontSize: 30 }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.list}</FontAwesome>
) : null}
</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.centerButton}
onPress={() =>_map.animateToRegion(this.state.userRegion, 499)}
>
<Text style={{ fontSize: 30 }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.compass}</FontAwesome>
) : null}
</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.accountButton}
onPress={this.showAccount.bind(this)}
>
<Text style={{ fontSize: 30 }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.user}</FontAwesome>
) : null}
</Text>
</TouchableOpacity>

</View>

<Modal isVisible={this.state.filterModal}
onBackdropPress={this.hideFilterModal}
onModalHide={this.getFilteredResults.bind(this)}>
<View style={styles.filterModal}>
<Text stylme={{textAlign:'center'}}>Choose Filter</Text>
<Picker
selectedValue={this.state.tag.toString()}
onValueChange={(itemValue, itemIndex) => this.setState({tag: itemValue})}>
<Picker.Item label="None" value="none" />
<Picker.Item label="Food" value="food" />
<Picker.Item label="Cookie" value="cookie" />
<Picker.Item label="Gluten Free" value="gluten" />
<Picker.Item label="Vegetarian" value="veg" />
<Picker.Item label="Other" value="other" />
</Picker>
</View>
</Modal>

<Modal isVisible={this.state.eventModal}
onBackdropPress={this.hideEventModal}>
<View style={styles.eventModal}>
Expand All @@ -297,59 +323,53 @@ export class Map extends Component {
<Text style={styles.eventDetails}>Tag: {this.state.selectedEvent.tag}</Text>
<Text style={styles.eventDetails}>Score: {this.state.selectedEvent.score}</Text>
<View style={styles.buttons}>
<View style={{width: 60 }}>
<ActionButton
style={styles.thumbsUpButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
{Icons.thumbsUp}

<View style={{width: 80 }}>
<TouchableOpacity
style={styles.thumbsUpButton}
onPress={() => this.thumbsUpEvent()}
>
<Text style={{ fontSize: 35, color: '#00FF00' }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.thumbsUp}</FontAwesome>
) : null}
</Text>
) : null}
degrees={Number(0)}
buttonColor="#0F0"
onPress={() => this.thumbsUpEvent()}>
</ActionButton>
</TouchableOpacity>
</View>
<View style={{width: 60}}>
<ActionButton
style={styles.thumbsDownButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
{Icons.thumbsDown}

<View style={{width: 40}}>
<TouchableOpacity
style={styles.thumbsDownButton}
onPress={() => this.thumbsDownEvent()}
>
<Text style={{ fontSize: 35, color: '#FF0000' }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.thumbsDown}</FontAwesome>
) : null}
</Text>
) : null}
buttonColor="#F00"
degrees={Number(0)}
onPress={() => this.thumbsDownEvent()}>
</ActionButton>
</TouchableOpacity>
</View>
<View style={{width: 150}}>
<ActionButton
style={styles.reportButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 30, color: '#fff' }}>
{Icons.exclamation}
</Text>
) : null}
buttonColor="gray"
degrees={Number(0)}
onPress={() => this.report()}>
</ActionButton>
</View>

</View>

<View style={{top: '3%', right: '4%', position: 'absolute'}}>
<TouchableOpacity
style={styles.reportButton}
onPress={() => this.report()}
>
<Text style={{ fontSize: 35, color: '#404040' }}>
{this.state.fontLoaded ? (
<FontAwesome>{Icons.exclamation}</FontAwesome>
) : null}
</Text>
</TouchableOpacity>
</View>

</View>
</Modal>

<Popup ref={(popup) => {this._popup = popup;}} db={firebase}/>
<ActionButton buttonColor="rgba(231,76,60,1)"
style={styles.accountButton}
icon={this.state.fontLoaded ? (
<Text style={{ fontFamily: 'fontAwesome', fontSize: 35, color: '#fff' }}>
{Icons.user}
</Text>
) : null}
degrees={Number(0)}
onPress= {this.showAccount.bind(this)}>
</ActionButton>

</View>
);
}
Expand All @@ -359,26 +379,30 @@ export class Map extends Component {

const styles = StyleSheet.create({
container: {
position: 'absolute',
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
},
centerButton: {
bottomBar: {
position: 'absolute',
width: 20,
height: 20,
top: '80%',
left: '80%',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
bottom: '2%'
},
centerButton: {
position: 'relative',
borderRadius: 20,
margin: 5
},
filterButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: '80%',
position: 'relative',
borderRadius: 20,
margin: 5
},
thumbsUpButton: {
width: 20,
Expand Down Expand Up @@ -406,11 +430,8 @@ const styles = StyleSheet.create({
backgroundColor: '#fff',
},
accountButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: '10%',
borderRadius:20,
margin: 5
},
eventName: {
fontSize: 30,
Expand All @@ -419,7 +440,6 @@ const styles = StyleSheet.create({
marginTop: 15,
},
eventDetails: {
fontFamily: 'Helvetica',
fontSize: 20,
color: '#616a77',
fontWeight: '300',
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-popup-dialog": "^0.9.39",
"react-native-router-flux": "^4.0.0-beta.24",
"react-native-web": "^0.1.13",
"watchman": "^0.1.8"
}
Expand Down

0 comments on commit 0268f79

Please sign in to comment.