From f12a3bccd8c726e59e92123a3d8ef1f5a73d7253 Mon Sep 17 00:00:00 2001 From: Alexander NeonXP Kiryukhin Date: Tue, 11 Jun 2019 02:51:30 +0300 Subject: Fixes --- src/Components/Map.tsx | 17 +++- src/Components/MapObjects.tsx | 32 ++++---- src/Components/MapOverlay.tsx | 177 ++++++++++++++++++++++++++--------------- src/Components/PortalPanel.tsx | 1 - src/Components/Settings.tsx | 49 +++++++----- 5 files changed, 170 insertions(+), 106 deletions(-) (limited to 'src/Components') diff --git a/src/Components/Map.tsx b/src/Components/Map.tsx index db0bed9..6c3ebab 100644 --- a/src/Components/Map.tsx +++ b/src/Components/Map.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { StyleSheet, View, Dimensions, ActivityIndicator } from 'react-native'; +import { StyleSheet, View, Dimensions, ActivityIndicator, StatusBar } from 'react-native'; import MapView, { Marker, Region } from 'react-native-maps'; import { connect } from 'redux-su'; import { NavigationActions } from 'react-navigation'; @@ -7,7 +7,7 @@ import { NavigationActions } from 'react-navigation'; import MapOverlay from './MapOverlay'; import MapObjects from './MapObjects'; import PortalPanel from './PortalPanel'; -import { getBottomSpace } from '../helper'; +import debounce, { getBottomSpace } from '../helper'; import actions from '../Actions/actions'; import { LatLng } from '../Api/interfaces'; import { getZoomByRegion, getDataZoomForMapZoom } from '../Api/api'; @@ -35,6 +35,7 @@ class Map extends Component { region: null, dataZoom: 15, } + this.load = debounce(this.load, 300) } componentDidMount() { this.refreshTimer = setInterval(() => { @@ -68,6 +69,7 @@ class Map extends Component { const zoom = getZoomByRegion(width, region) const dataZoom = getDataZoomForMapZoom(zoom); this.setState({ region, dataZoom }) + this.props.actions.setRegion(region) setImmediate(() => this.load(false)) } @@ -110,9 +112,13 @@ class Map extends Component { if (!this.state.user) { return } - const initialRegion = { ...this.state.user, latitudeDelta: 0.002, longitudeDelta: 0.002 } + const initialRegion = this.props.settings.region || { ...this.state.user, latitudeDelta: 0.002, longitudeDelta: 0.002 } return ( <> + (r != null) ? this.map = r : null} style={styles.container} @@ -121,6 +127,7 @@ class Map extends Component { showsCompass={false} showsScale showsUserLocation + userLocationAnnotationTitle="" showsMyLocationButton loadingEnabled type={'hybrid'} @@ -131,9 +138,9 @@ class Map extends Component { onPortalClick={this.onPortalClick} region={this.state.region || initialRegion} levels={this.props.settings.filterLevel} + selectedPortal={this.state.selectedPortal} zoom={this.state.dataZoom} /> - {this.state.selectedPortal && } { loading={this.props.entities.loadQueue.length} selectedPortal={this.state.selectedPortal} onOpenPortal={this.onOpenPortal} + getPortalDetails={this.props.actions.getPortalDetails} + portal={this.state.selectedPortal && this.props.entities.portals[this.state.selectedPortal.guid]} /> ); diff --git a/src/Components/MapObjects.tsx b/src/Components/MapObjects.tsx index 2a5e1df..6e9b053 100644 --- a/src/Components/MapObjects.tsx +++ b/src/Components/MapObjects.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View, StyleSheet, Text } from 'react-native'; +import { View, StyleSheet, Text, Image } from 'react-native'; import { Polyline, Polygon, Marker, Region } from 'react-native-maps'; import Icon from 'react-native-vector-icons/FontAwesome'; import { Link, Portal, Field } from '../Api/types'; @@ -43,27 +43,28 @@ type Props = { class MapObjects extends PureComponent { render() { - const region = this.props.region - const lat1 = region.latitude - region.latitudeDelta / 2 - const lat2 = region.latitude + region.latitudeDelta / 2 - const lng1 = region.longitude - region.longitudeDelta / 2 - const lng2 = region.longitude + region.longitudeDelta / 2 const portals = this.props.portals const fields = this.props.fields const links = this.props.links - const zoom = this.props.zoom - const renderPortal = this.props.renderPortal.map(guid => this.drawPortal(guid, portals[guid], this.props.onPortalClick)) + const renderPortal = this.props.renderPortal.map(guid => guid && this.drawPortal(guid, portals[guid], this.props.onPortalClick)) const renderLink = this.props.renderLink.map(guid => this.drawLink(guid, links[guid])) const renderField = this.props.renderField.map(guid => this.drawField(guid, fields[guid])) return [...renderField, ...renderLink, ...renderPortal] } drawPortal = (guid: string, entity: Portal, onPortalClick: Function) => { + const selected = this.props.selectedPortal && this.props.selectedPortal.guid == guid return ( onPortalClick(guid, entity.coords)} - image={PORTALS[entity.fraction + entity.level]} - />); + style={[selected ? { borderColor: 'red', borderWidth: 4, borderRadius: 13 } : null, { height: 26, width: 26, flex: 1, justifyContent: "center", alignItems: 'center' }]} + zIndex={selected ? 10 : entity.level} + > + + ); } drawField = (guid: string, entity: Field) => { return { const lng2 = region.longitude + region.longitudeDelta / 2 const minlvl = DEFAULT_ZOOM_TO_LEVEL[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LEVEL.length - 1)] const minlen = DEFAULT_ZOOM_TO_LINK_LENGTH[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LINK_LENGTH.length - 1)] / 1000 - const renderPortal = Object - .keys(store.entities.portals) - .filter(guid => store.entities.portals[guid].level >= props.levels[0] && store.entities.portals[guid].level <= props.levels[1]) - .filter(guid => store.entities.portals[guid].coords.latitude > lat1 && store.entities.portals[guid].coords.latitude < lat2 && store.entities.portals[guid].coords.longitude > lng1 && store.entities.portals[guid].coords.longitude < lng2) - + const renderPortal = props.zoom > 14 + ? Object + .keys(store.entities.portals) + .filter(guid => store.entities.portals[guid].level >= props.levels[0] && store.entities.portals[guid].level <= props.levels[1]) + .filter(guid => store.entities.portals[guid].coords.latitude > lat1 && store.entities.portals[guid].coords.latitude < lat2 && store.entities.portals[guid].coords.longitude > lng1 && store.entities.portals[guid].coords.longitude < lng2) + : [props.selectedPortal ? props.selectedPortal.guid : null] const renderLink = Object .keys(store.entities.links) .filter(guid => { 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) => ( - <> - - {props.selectedPortal ? ( - <> +export default class extends React.Component { + 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 ( + <> + + {props.loading > 0 ? ( + + + + ) : null} + + + { - props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) - }} + name={'crosshairs'} + onPress={props.goToMe} iconStyle={styles.icon} color={"#000"} size={25} - backgroundColor={"#e3e3e3"} + backgroundColor={"#fff"} /> - {/* + 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"} /> - */} - - ) : null} - {props.loading > 0 ? ( - - + - ) : null} - - - - - - - - - - - {props.selectedPortal ? ( - - {JSON.stringify(props.selectedPortal)} - - ) : null} - -); - + {props.selectedPortal ? ( + + + + {portal.name} + Уровeнь: {portal.level}, здоровье: {portal.power} + Владелец: {portal.owner || 'нет'} + Резонаторы: + + {portal.resonators && portal + .resonators + .filter(r => !!r) + .map((r, idx) => ([{r[1]}]))} + + + {/* { + props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) + }} + iconStyle={styles.icon} + color={"#000"} + size={32} + backgroundColor={"transparent"} + /> */} + { + props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords) + }} + iconStyle={styles.icon} + color={"#000"} + size={32} + backgroundColor={"transparent"} + /> + + ) : 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 diff --git a/src/Components/PortalPanel.tsx b/src/Components/PortalPanel.tsx index e372259..30564ca 100644 --- a/src/Components/PortalPanel.tsx +++ b/src/Components/PortalPanel.tsx @@ -43,7 +43,6 @@ class PortalPanel extends PureComponent { Уровeнь: {portal.level}, здоровье: {portal.power} Владелец: {portal.owner || 'нет'} Дата: {portal.timestamp && (new Date(portal.timestamp)).toLocaleString()} - Адрес: {portal.address || 'загрузка...'} Резонаторы diff --git a/src/Components/Settings.tsx b/src/Components/Settings.tsx index ca481a9..ffc176c 100644 --- a/src/Components/Settings.tsx +++ b/src/Components/Settings.tsx @@ -23,28 +23,30 @@ class Settings extends PureComponent { const { filterLevel } = this.props.settings return ( - Мин. Ур.: {filterLevel[0]} - - Макс. Ур.: {filterLevel[1]} - + + Мин. Ур.: {filterLevel[0]} + + Макс. Ур.: {filterLevel[1]} + + ); } @@ -57,6 +59,9 @@ const styles = StyleSheet.create({ flex: 1, padding: 8, }, + container: { + margin: 8, + }, title: { fontWeight: 'bold', fontSize: 22, -- cgit v1.2.3