ChargEco/Strides-APP/app/pages/home/maps/TopInfo.js

/**
 * 首页顶部充电站信息组件
 * @邠心vbe on 2021/08/13
 */
import React from 'react';
import { Pressable, StyleSheet, View, Text, Image } from 'react-native';
import { ElevationObject } from '../../../components/Button';
import utils from '../../../utils/utils';
import { ChargeStyle } from '../../charge/Charging';
import { PageList } from '../../Router';


export default TopInfo = ({stationInfo = {}}) => {
  const getAvailable = (type) => {
    const all = stationInfo.allConnector;
    if (all) {
      if (type == 'box') {
        return all.boxAvailable + '/' + all.boxAll;
      } else {
        return all.available + '/' + all.all;
      }
    } else {
      return '0/0';
    }
  }

  if (stationInfo.id) {
    return (
      <View style={styles.stationBarView}>
        <Pressable
          style={styles.stationInfo}
          onPress={() => startPage(PageList.chargeDetail, {stationInfo: stationInfo, action: 'view'})}>
          <Text
            ellipsizeMode='tail'
            numberOfLines={1}
            style={styles.stationTitle}>{stationInfo.name}</Text>
          <Text
            style={styles.stationAddress}
            ellipsizeMode='tail'
            numberOfLines={2}>{stationInfo.address}</Text>
        </Pressable>
        <View style={styles.stationStatusView}>
          { stationInfo.allConnector && stationInfo.allConnector.available > 0 &&
            <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable, styles.stationStatus]}>Available</Text>
          }
          <Text style={[ChargeStyle.infoStatus, stationInfo.siteType == 'Public' ? ChargeStyle.statusAvailable : ChargeStyle.statusWarning, styles.siteTypes]}>{stationInfo.siteType}</Text>
        </View>
        <View style={styles.stationAvailable}>
          <Image
            style={styles.availableIcon}
            source={require('../../../images/charge/icon-type-stops.png')}/>
          <Text style={styles.availableText}>{getAvailable('box')}</Text>
        </View>
        <View style={styles.stationAvailable}>
          <Image
            style={styles.availableIcon}
            source={require('../../../images/charge/icon-type-interfaces.png')}/>
          <Text style={styles.availableText}>{getAvailable('inc')}</Text>
        </View>
        <Pressable
          style={styles.directView}
          onPress={() => {
            utils.directMaps(stationInfo.latitude, stationInfo.longitude, stationInfo.address);
          }}>
          <MaterialIcons
            name='directions'
            size={27}
            color={colorAccent}/>
          <Text style={styles.distanceText}>{stationInfo.distance}</Text>
        </Pressable>
      </View>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  stationBarView: {
    top: 16,
    left: 16,
    right: 16,
    height: 69,
    zIndex: 10,
    borderRadius: 6,
    ...$padding(12, 9),
    position: 'absolute',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'white',
    ...ElevationObject(1.5)
  },
  stationInfo: {
    flex: 1,
    height: 45,
    paddingLeft: 4,
    paddingRight: 8,
    justifyContent: 'space-around'
  },
  stationTitle: {
    color: '#000',
    fontSize: 16,
    paddingBottom: 2
  },
  stationAddress: {
    color: '#999',
    fontSize: 12,
  },
  stationAvailable: {
    height: 45,
    paddingLeft: 8,
    paddingRight: 8,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  stationStatusView: {
    marginRight: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  stationStatus: {
    fontSize: 10,
    ...$padding(2, 6)
  },
  siteTypes: {
    fontSize: 10,
    marginTop: 4,
    ...$padding(2, 6)
  },
  availableIcon: {
    width: 23,
    height: 23,
  },
  availableText: {
    color: '#333',
    fontSize: 13,
    textAlign: 'center'
  },
  directView: {
    zIndex: 1,
    height: 45,
    marginLeft: 8,
    marginRight: 4,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  distanceText: {
    color: '#333',
    fontSize: 12,
  }
})