389 lines
9.9 KiB
JavaScript
Executable File
389 lines
9.9 KiB
JavaScript
Executable File
// plug in
|
|
import React, { Component } from "react";
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
ImageBackground,
|
|
NetInfo,
|
|
Alert,
|
|
StatusBar,
|
|
Keyboard,
|
|
TouchableWithoutFeedback,
|
|
AppState,
|
|
BackHandler
|
|
} from "react-native";
|
|
import { observable, transaction } from "mobx";
|
|
import Text from "react-native-text";
|
|
import { observer, inject } from "mobx-react/native";
|
|
import Icon from "react-native-vector-icons/dist/Ionicons";
|
|
import Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
|
import { SearchBar } from "react-native-elements";
|
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
|
import debounce from "lodash.debounce";
|
|
import Toast, { DURATION } from "react-native-easy-toast";
|
|
import PopupDialog, { SlideAnimation } from "react-native-popup-dialog";
|
|
import firebase from "react-native-firebase";
|
|
import Autocomplete from "react-native-autocomplete-input";
|
|
import { ifIphoneX } from 'react-native-iphone-x-helper'
|
|
// component
|
|
import TopMessageText from "../../components/Menu/topMessageText";
|
|
import MenuFlatList from "../../components/Menu/menuFlatList";
|
|
import TotalPriceView from "../../components/Menu/totalPriceView";
|
|
import MenuDetailsView from "../../components/Menu/menuDetailsView";
|
|
import GoogleAutoComplete from "../../components/Menu/googleAutoComplete";
|
|
import Map from "../../components/Menu/map";
|
|
// function
|
|
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
|
import Log from '../../config/log'
|
|
import Size from "../../config/size";
|
|
import { width, height } from "../../config/screen";
|
|
import api from "../../stores/api";
|
|
import theme from "../../config/colors";
|
|
import MyStatusBar from "../../components/Public/statusBar";
|
|
import Language from "../../config/language"
|
|
import language from "../../config/language";
|
|
const log = new Log()
|
|
const size = new Size();
|
|
const asyncStorageHelper = new AsyncStorageHelper();
|
|
|
|
const slideAnimation = new SlideAnimation({
|
|
slideFrom: "bottom"
|
|
});
|
|
const endDate = new Date();
|
|
endDate.setHours(endDate.getHours() + 1);
|
|
|
|
@inject(["menuStore"], ["userStore"])
|
|
@observer
|
|
export default class Menu extends Component {
|
|
data = {};
|
|
@observable
|
|
menuDetails = {
|
|
id: 0,
|
|
count: 0,
|
|
price: 0,
|
|
name: "",
|
|
nameEn: "",
|
|
imageURL: "",
|
|
intro_ch: "",
|
|
intro_en: "",
|
|
restaurant: {
|
|
name: "",
|
|
nameEn: "",
|
|
addrEn: "",
|
|
addr: ""
|
|
}
|
|
};
|
|
|
|
@observable
|
|
query = "";
|
|
|
|
@observable
|
|
autoPlaceFocus = false;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = this.props.menuStore;
|
|
this.userStore = this.props.userStore;
|
|
}
|
|
|
|
static navigationOptions = {
|
|
drawerLabel: "Menu of the Day",
|
|
swipeEnabled: false,
|
|
tabBarLabel: language.en.menu,
|
|
};
|
|
|
|
|
|
async componentDidMount() {
|
|
this.checkPermission();
|
|
|
|
// this.createNotificationListeners();
|
|
|
|
}
|
|
|
|
|
|
async checkPermission() {
|
|
const enabled = await firebase.messaging().hasPermission();
|
|
if (enabled) {
|
|
this.getToken();
|
|
} else {
|
|
this.requestPermission();
|
|
}
|
|
}
|
|
|
|
onClickAction(data, details) {
|
|
this.map.goPosition(data, details)
|
|
}
|
|
|
|
add(id) {
|
|
this.store.addCount(id);
|
|
}
|
|
|
|
sum(id) {
|
|
this.store.sumCount(id);
|
|
}
|
|
|
|
//3
|
|
async getToken() {
|
|
let fcmToken = await AsyncStorage.getItem("fcmToken", value);
|
|
if (!fcmToken) {
|
|
fcmToken = await firebase.messaging().getToken();
|
|
if (fcmToken) {
|
|
// user has a device token
|
|
await AsyncStorage.setItem("fcmToken", fcmToken);
|
|
}
|
|
}
|
|
}
|
|
|
|
//2
|
|
async requestPermission() {
|
|
try {
|
|
await firebase.messaging().requestPermission();
|
|
// User has authorised
|
|
this.getToken();
|
|
} catch (error) {
|
|
// User has rejected permissions
|
|
console.log("permission rejected");
|
|
}
|
|
}
|
|
|
|
|
|
componentWillMount() {
|
|
BackHandler.addEventListener('hardwareBackPress', function () {
|
|
return true
|
|
})
|
|
}
|
|
getIndex(id) {
|
|
var index = this.userStore.pickupPointLabel.findIndex(function(item, i) {
|
|
return item.id == parseInt(id);
|
|
});
|
|
|
|
return index;
|
|
}
|
|
|
|
confirmAction(id) {
|
|
Alert.alert(
|
|
"",
|
|
"Select " +
|
|
this.userStore.pickupPointLabel[this.getIndex(id)].value +
|
|
"?",
|
|
[
|
|
{ text: "Cancel", onPress: () => console.log("Cancel") },
|
|
{ text: "Yes", onPress: () => this.update(id) }
|
|
]
|
|
);
|
|
}
|
|
|
|
componentDidMount(){
|
|
|
|
|
|
// console.log('token: '+ this.userStore.userData.data.token)
|
|
//this.store.userCoupon(this,this.userStore.userData.data.token,true)
|
|
|
|
AppState.addEventListener('change', (state) => {
|
|
if (state === 'active') {
|
|
console.log('state active');
|
|
this.store.updateMenu()
|
|
}
|
|
if(state === 'background'){
|
|
console.log('background');
|
|
}
|
|
})
|
|
this.props.navigation.addListener('willFocus', (route) => {this.store.updateMenu()});
|
|
}
|
|
|
|
async createNotificationListeners() {
|
|
/*
|
|
* Triggered when a particular notification has been received in foreground
|
|
* */
|
|
this.notificationListener = firebase
|
|
.notifications()
|
|
.onNotification(notification => {
|
|
const { title, body } = notification;
|
|
this.showAlert(title, body);
|
|
});
|
|
|
|
/*
|
|
* If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
|
|
* */
|
|
this.notificationOpenedListener = firebase
|
|
.notifications()
|
|
.onNotificationOpened(notificationOpen => {
|
|
const { title, body } = notificationOpen.notification;
|
|
this.showAlert(title, body);
|
|
});
|
|
|
|
/*
|
|
* If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
|
|
* */
|
|
const notificationOpen = await firebase
|
|
.notifications()
|
|
.getInitialNotification();
|
|
if (notificationOpen) {
|
|
const { title, body } = notificationOpen.notification;
|
|
this.showAlert(title, body);
|
|
}
|
|
/*
|
|
* Triggered for data only payload in foreground
|
|
* */
|
|
this.messageListener = firebase.messaging().onMessage(message => {
|
|
//process data message
|
|
console.log(JSON.stringify(message));
|
|
});
|
|
}
|
|
|
|
showAlert(title, body) {
|
|
Alert.alert(
|
|
title,
|
|
body,
|
|
[{ text: "OK", onPress: () => console.log("OK Pressed") }],
|
|
{ cancelable: false }
|
|
);
|
|
}
|
|
|
|
navigatieAction(page, Param) {
|
|
this.props.navigation.navigate(page, Param);
|
|
}
|
|
|
|
searchClear() {}
|
|
|
|
searchChangeText() {}
|
|
|
|
foodInformationPagePopUp() {
|
|
|
|
this.popupDialog.show();
|
|
}
|
|
|
|
foodInformationPageDismiss() {
|
|
this.popupDialog.dismiss();
|
|
}
|
|
|
|
foodInformationPageDismissedCallBack() {
|
|
console.log("dismiss dialog");
|
|
}
|
|
|
|
update(id){
|
|
// this.autoPlaceFocus = false;
|
|
console.log('update')
|
|
this.googleInput.blur()
|
|
asyncStorageHelper.saveData("pickupPointId", id);
|
|
this.store.pickupPointId = id;
|
|
this.userStore.pickupPointId = id;
|
|
log.firebaseLog('change_pickuppoint_from_menu',{logined:this.userStore.logined,pickupPointId:id})
|
|
this.store.updateMenuByMap(this,id);
|
|
this.googleInput.onTextChange(id);
|
|
asyncStorageHelper.getData("userInfo", userInfo => {
|
|
if (userInfo != null) {
|
|
this.userStore.savePickUpPointToServer(id);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
render() {
|
|
log.firebaseClass('menu')
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
|
|
|
<MyStatusBar
|
|
backgroundColor={theme.mainColor}
|
|
barStyle="light-content"
|
|
/>
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
|
|
<View style={styles.container}>
|
|
|
|
<View style={[this.autoPlaceFocus? styles.topContainerForIphoneX:styles.topContainer]} />
|
|
|
|
{this.autoPlaceFocus == false ? (
|
|
<View style={styles.titleAndDateContainer}>
|
|
<TopMessageText date={this.store.cutoffDateTime} />
|
|
</View>
|
|
|
|
) : (
|
|
<View/>
|
|
)}
|
|
|
|
{this.autoPlaceFocus == false ? (
|
|
<View style={styles.flatViewContainer}>
|
|
<MenuFlatList data={this.store.menu} menu={this} />
|
|
</View>
|
|
) : (
|
|
<Map perfdefinedPlaces = {this.userStore.perdefinedPlaces} onRef={ref => (this.map = ref)} onPress ={(id)=>{
|
|
this.confirmAction(id)
|
|
}}/>
|
|
)}
|
|
<View style={{ position: "absolute", top: verticalScale(1) }}>
|
|
<GoogleAutoComplete
|
|
onRef={ref => (this.googleInput = ref)}
|
|
perdefinedPlaces={this.userStore.perdefinedPlaces}
|
|
onFocus={() => {
|
|
this.autoPlaceFocus = true;
|
|
}}
|
|
onPress = {(data,details)=>{this.onClickAction(data,details)}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
|
|
<PopupDialog
|
|
ref={popupDialog => {
|
|
this.popupDialog = popupDialog;
|
|
}}
|
|
dialogAnimation={slideAnimation}
|
|
height={height - moderateScale(90)}
|
|
onDismissed={() => this.foodInformationPageDismissedCallBack()}
|
|
>
|
|
<MenuDetailsView self={this} />
|
|
</PopupDialog>
|
|
<TotalPriceView self={this} />
|
|
<Toast ref="toast" />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
backgroundColor: "white"
|
|
},
|
|
|
|
topContainer: {
|
|
height: "8%",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: theme.mainColor
|
|
},
|
|
|
|
topContainerForIphoneX:{
|
|
...ifIphoneX({
|
|
height: "12%",
|
|
},
|
|
{
|
|
height: "8%",
|
|
}),
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: theme.mainColor
|
|
},
|
|
|
|
|
|
titleAndDateContainer: {
|
|
height: "9%",
|
|
width: "100%",
|
|
backgroundColor: theme.mainColor,
|
|
justifyContent: "center"
|
|
},
|
|
|
|
flatViewContainer: {
|
|
height: "85%",
|
|
width: "100%",
|
|
marginTop: 10,
|
|
alignItems: "center",
|
|
}
|
|
});
|