diff options
Diffstat (limited to 'src/Components/MapOverlay.tsx')
| -rw-r--r-- | src/Components/MapOverlay.tsx | 177 |
1 files changed, 113 insertions, 64 deletions
diff --git a/src/Components/MapOverlay.tsx b/src/Components/MapOverlay.tsx index 0e3624b..28da324 100644 --- a/src/Components/MapOverlay.tsx +++ b/src/Components/MapOverlay.tsx @@ -1,87 +1,108 @@ import React from 'react'; -import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking, TextInput, Slider } from 'react-native'; +import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking, TextInput, Slider, Image, Dimensions } from 'react-native'; import { FontAwesome } from '@expo/vector-icons'; import { getStatusBarHeight, getBottomSpace } from '../helper'; import { LatLng } from '../Api/interfaces'; +import { COLORS_FRACTION, COLORS_LVL, RESO_NRG } from '../constants'; + +const { width, height } = Dimensions.get("screen") type Props = { goToMe: (e: GestureResponderEvent) => void; refresh: (e: GestureResponderEvent) => void; onOpenPortal: (guid: string, coords: LatLng) => void; + getPortalDetails: (guid: string) => void; loading: Number; selectedPortal: any; + portal: any; } -export default (props: Props) => ( - <> - <View style={styles.overlayLeft}> - {props.selectedPortal ? ( - <> +export default class extends React.Component<Props> { + componentWillReceiveProps(next) { + if (this.props.selectedPortal !== next.selectedPortal && next.selectedPortal && next.selectedPortal.guid) { + this.props.getPortalDetails(next.selectedPortal.guid) + } + } + render() { + const props = this.props + const portal = this.props.portal + return ( + <> + <View style={styles.overlayLeft}> + {props.loading > 0 ? ( + <View style={styles.loader}> + <ActivityIndicator color={"#000"} /> + </View> + ) : null} + </View> + + <View style={styles.overlayRight}> <View style={styles.buttonWrapper}> <FontAwesome.Button style={styles.button} - name={'info'} - onPress={() => { - props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) - }} + name={'crosshairs'} + onPress={props.goToMe} iconStyle={styles.icon} color={"#000"} size={25} - backgroundColor={"#e3e3e3"} + backgroundColor={"#fff"} /> </View> - {/* <View style={styles.buttonWrapper}> + <View style={styles.buttonWrapper}> <FontAwesome.Button style={styles.button} - name={'location-arrow'} - onPress={() => Linking.openURL(`geo:${props.selectedPortal.coords.latitude},${props.selectedPortal.coords.longitude}`)} + name={'refresh'} + onPress={props.refresh} iconStyle={styles.icon} color={"#000"} size={25} - backgroundColor={"#e3e3e3"} + backgroundColor={"#fff"} /> - </View> */} - </> - ) : null} - {props.loading > 0 ? ( - <View style={styles.loader}> - <ActivityIndicator color={"#000"} /> + </View> </View> - ) : null} - </View> - - <View style={styles.overlayRight}> - <View style={styles.buttonWrapper}> - <FontAwesome.Button - style={styles.button} - name={'crosshairs'} - onPress={props.goToMe} - iconStyle={styles.icon} - color={"#000"} - size={25} - backgroundColor={"#e3e3e3"} - /> - </View> - <View style={styles.buttonWrapper}> - <FontAwesome.Button - style={styles.button} - name={'refresh'} - onPress={props.refresh} - iconStyle={styles.icon} - color={"#000"} - size={25} - backgroundColor={"#e3e3e3"} - /> - </View> - </View> - {props.selectedPortal ? ( - <View style={styles.panel}> - <Text>{JSON.stringify(props.selectedPortal)}</Text> - </View> - ) : null} - </> -); - + {props.selectedPortal ? ( + <View style={styles.panel} tint={'default'} intensity={90}> + <Image style={styles.photo} source={{ uri: portal.photo }} /> + <View style={styles.column}> + <Text style={[styles.title, { color: COLORS_FRACTION[portal.fraction] }]} ellipsizeMode={'tail'} numberOfLines={1}>{portal.name}</Text> + <Text style={styles.subtitle}>Уровeнь: {portal.level}, здоровье: {portal.power}</Text> + <Text style={styles.subtitle}>Владелец: <Text style={[styles.user, { color: COLORS_FRACTION[portal.fraction] }]}>{portal.owner || 'нет'}</Text></Text> + <Text style={styles.subtitle}>Резонаторы:</Text> + <Text style={styles.subtitle}> + {portal.resonators && portal + .resonators + .filter(r => !!r) + .map((r, idx) => (<Text key={idx} style={[styles.subtitle, { color: COLORS_LVL[r[1]] }]}>[{r[1]}]</Text>))} + </Text> + </View> + {/* <FontAwesome.Button + style={styles.panelButton} + name={'star-o'} + onPress={() => { + props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) + }} + iconStyle={styles.icon} + color={"#000"} + size={32} + backgroundColor={"transparent"} + /> */} + <FontAwesome.Button + style={styles.panelButton} + name={'angle-right'} + onPress={() => { + props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) + }} + iconStyle={styles.icon} + color={"#000"} + size={32} + backgroundColor={"transparent"} + /> + </View> + ) : null} + </> + ); + } +} const styles = StyleSheet.create({ overlayLeft: { position: 'absolute', @@ -98,7 +119,12 @@ const styles = StyleSheet.create({ alignItems: 'center', height: 48, width: 48, - + }, + panelButton: { + justifyContent: 'center', + alignItems: 'center', + height: 100, + width: 64, }, buttonWrapper: { margin: 8, @@ -114,15 +140,20 @@ const styles = StyleSheet.create({ }, panel: { position: 'absolute', - bottom: getBottomSpace(), - left: 8, - right: 8, - borderRadius: 8, - padding: 8, + bottom: 0, + left: 0, + right: 0, backgroundColor: '#fff', + flexDirection: 'row', + alignItems: 'center', + overflow: 'hidden', + borderTopWidth: StyleSheet.hairlineWidth, + borderTopColor: '#000', + padding: 0, + height: 100, //ios - shadowOpacity: 0.3, - shadowRadius: 3, + shadowOpacity: 0.6, + shadowRadius: 6, shadowOffset: { height: 0, width: 0 @@ -130,11 +161,29 @@ const styles = StyleSheet.create({ //android elevation: 1 }, + column: { + flexGrow: 1, + padding: 8, + width: (width - 124) + }, icon: { marginRight: 0, }, loader: { margin: 8, paddingHorizontal: 8, + }, + title: { + fontWeight: 'bold', + }, + subtitle: { + fontWeight: 'normal', + }, + user: { + fontWeight: 'bold', + }, + photo: { + width: 55, + height: 100, } });
\ No newline at end of file |