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

/**
 * 地图底部充电站信息组件
 * @邠心vbe on 2022/12/23
 */
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';
import { ConnectType } from '../Search';
 
 
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';
    }
  }

  const getOperatingHours = () => {
    if (stationInfo.endlessService) {
      return "24/7";
    } else if (stationInfo.operatingHours) {
      return stationInfo.operatingHours;
    } else {
      return 'To be updated';
    }
  }

  const getParkingFee = () => {
    if (stationInfo.parkingFeeFree) {
      return "Free";
    } else if (stationInfo.parkingFee) {
      return stationInfo.parkingFee;
    } else {
      return 'To be updated';
    }
  }

  if (stationInfo.id) {
    return (
      <View style={styles.stationBarView}>
        <View style={ui.flexc}>
          <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.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={28}
              color={colorAccent}/>
            <Text style={styles.distanceText}>{stationInfo.distance}</Text>
          </Pressable>
        </View>
        <View style={ui.flex}>
          <View style={styles.connectView}>
            <ConnectType {...stationInfo.acConnector}/>
            <ConnectType {...stationInfo.dcConnector}/>
          </View>
          <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>
        <View style={styles.divideLine}></View>
        <Pressable
          style={styles.infoDetailsView}
          onPress={() => startPage(PageList.chargeDetail, {stationInfo: stationInfo, action: 'view'})}>
          <View style={ui.flex1}>
            <Text style={styles.infoTitle}>Operating Hours</Text>
            <View style={styles.infoView}>
              <Text style={styles.infoText}>{getOperatingHours()}</Text>
            </View>
          </View>
          <View style={{width: 4}}></View>
          <View style={ui.flex1}>
            <Text style={styles.infoTitle}>Parking Charges</Text>
            <View style={styles.infoView}>
              <Text style={styles.infoText}>{getParkingFee()}</Text>
            </View>
          </View>
          <View style={{width: 4}}></View>
          <View style={ui.flex1}>
            <Text style={styles.infoTitle}>Additional Info</Text>
            <View style={styles.infoView}>
              <Text style={styles.infoText}>{stationInfo.additionalNotes}</Text>
            </View>
          </View>
        </Pressable>
      </View>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  stationBarView: {
    left: 16,
    right: 16,
    bottom: 48,
    zIndex: 10,
    borderRadius: 6,
    ...$padding(12, 9),
    position: 'absolute',
    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',
    flexDirection: 'row-reverse'
  },
  stationStatus: {
    fontSize: 10,
    ...$padding(2, 6)
  },
  siteTypes: {
    fontSize: 10,
    marginTop: 0,
    marginRight: 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,
  },
  connectView: {
    flex: 1,
    paddingTop: 12,
    paddingBottom: 12,
    alignItems: 'center',
    flexDirection: 'row'
  },
  divideLine: {
    height: 1,
    backgroundColor: '#AEAEAE'
  },
  infoDetailsView: {
    flexDirection: 'row'
  },
  infoTitle: {
    color: '#000',
    fontSize: 12,
    fontWeight: 'bold',
    ...$padding(8, 0, 8)
  },
  infoView: {
    paddingBottom: 8
  },
  infoText: {
    color: '#444',
    fontSize: 10
  }
})