ChargEco/Strides-APP/app/pages/my/VehicleList.js

/**
 * 车辆列表
 * @邠心vbe on 2021/06/08
 */
import React, { Component } from 'react';
import { View, Text, ImageBackground, Image, StyleSheet, Pressable } from 'react-native';
import apiUser from '../../api/apiUser';
import { ElevationObject } from '../../components/Button';
import Dialog from '../../components/Dialog';
import VehicleType from '../../icons/VehicleType';
import { getConnectTypeByKey } from '../charge/Charging';
import { PageList } from '../Router';

export default class VehicleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicleList: [],
      refreshId: 0,
    };
  }

  componentDidMount() {
    this.getVehicleList();
    this.props.navigation.addListener('focus', () => {
      this.getVehicleList();
    })
  }

  componentDidUpdate() {
    if (this.state.refreshId != this.props.refreshId) {
      this.setState({
        refreshId: this.props.refreshId,
      });
      this.getVehicleList();
    }
  }

  getVehicleList() {
    apiUser.getVehicles().then(res => {
      if (res.data) {
        this.setState({
          vehicleList: res.data
        });
        if (this.props.onResult) {
          this.props.onResult(res.data.length)
        }
      }
    }).catch(err => {
      this.setState({
        vehicleList: []
      });
      if (this.props.onResult) {
        this.props.onResult(0)
      }
    });
  }

  removeVehicle(id) {
    Dialog.showDialog({
      title: 'Remove Vehicle',
      message: 'Are you sure you want to remove this vehicle?',
      callback: btn => {
        if (btn == 'ok') {
          Dialog.dismissLoading();
          this.deleteVehicle(id);
        }
      }
    })
  }

  deleteVehicle(id) {
    Dialog.showProgressDialog();
    apiUser.deleteVehicle({
      vehiclePk: id
    }).then(res => {
      Dialog.dismissLoading();
      toastShort('Delete successfully');
      this.getVehicleList();
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      this.state.vehicleList.length > 0
      ? this.state.vehicleList.map((item, index) => {
        //const type = getConnectTypeByKey(item.connectorType)
        return (
          <Pressable
            key={index}
            onPress={() => {
              startPage(PageList.editVehicle, {id: item.vehiclePk});
            }}
            onLongPress={() => {
              if (this.props.onDelete) {
                this.props.onDelete(item.vehiclePk)
              } else {
                this.removeVehicle(item.vehiclePk)
              }
            }}
            style={$padding(16, 16, 0)}>
            <ImageBackground
              style={styles.vehicleView}
              resizeMode="contain"
              source={require('../../images/user/bg-vehicles.png')}>
              <View style={styles.vehicleRow}>
                <Image
                  style={styles.vehicleIcon}
                  source={require('../../images/user/ic-vehicle-model.png')}/>
                <Text style={styles.vehicleName}>{item.brand} {item.model}</Text>
              </View>
              <Text style={styles.vehicleModle}>{item.licensePlate}</Text>
              <View style={styles.vehicleRow}>
                <View style={styles.vehicleTypeRow}>
                  <View style={styles.vehicleTypeIcon}>
                    <VehicleType size={10}/>
                  </View>
                  <Text style={styles.vehicleType}>TYPE {item.connectorType}</Text>
                </View>
                {/* <Image
                  style={styles.vehicleIcon}
                  source={type?.icon}/>
                <Text style={styles.vehicleName}>{type?.name}</Text> */}
              </View>
              <Pressable
                style={styles.closeIcon}
                android_ripple={rippleLess}
                onPress={() => this.removeVehicle(item.vehiclePk)}>
                <MaterialCommunityIcons
                  name="close"
                  size={20}
                  color={textCancel}
                />
              </Pressable>
            </ImageBackground>
          </Pressable>
        );
      })
      : <Text style={ui.noData}>No Vehicles</Text>
    );
  }
}

const styles = StyleSheet.create({
  vehicleView: {
    ...$padding(12, 16, 20),
    borderRadius: 8,
    overflow: 'hidden',
    ...ElevationObject(5)
  },
  vehicleRow: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  vehicleIcon: {
    width: 32,
    height: 32,
  },
  vehicleName: {
    color: textDark,
    fontSize: 20,
    paddingLeft: 12,
    fontWeight: 'bold'
  },
  vehicleModle: {
    color: textPrimary,
    fontSize: 16,
    paddingLeft: 44,
    paddingTop: 2,
    paddingBottom: 7
  },
  vehicleTypeRow: {
    height: 20,
    marginLeft: 44,
    borderRadius: 4,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#E5EFDE'
  },
  vehicleTypeIcon: {
    width: 20,
    height: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
  vehicleType: {
    color: colorAccent,
    fontSize: 13,
    paddingLeft: 6,
    paddingRight: 8,
  },
  closeIcon: {
    top: 0,
    right: 0,
    padding: 12,
    position: 'absolute'
  }
});