ChargEco/Strides-SPAPP/app/pages/charge/Reserve.js

/**
 * Reserve页面
 * @邠心vbe on 2021/03/24
 */
import React, { Component } from 'react'
import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
import Button from '../../components/Button';
import { ChargeStyle, EnterStationDialog, SelectableIcon, TypeImage } from './Charging';
import Payment from '../wallet/Payment';
import apiCharge from '../../api/apiCharge';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
import { CancelReserveDialog } from './InfoDialog';
import TextView from '../../components/TextView';

export default class Reserve extends Component {

  constructor(props) {
    super(props);
    this.state= {
      total: 0,
      leftId: 0,
      refreshId: 0,
      checkIndex: -1,
      available: false,
      showReserve: false,
      stationInfo: {},
      checkConnector: {},
      userReserve: {},
      timeLeft: '',
      showCancelDialog: false,
      showStationDialog: false
    }
  }

  componentDidMount() {
    this.setState({
      stationInfo: this.props.stationInfo
    }, () => this.init());
  }

  componentDidUpdate() {
    if (this.props.visible && this.props.refreshId != this.state.refreshId) {
      this.stopCountdown(true);
      this.setState({
        refreshId: this.props.refreshId,
        stationInfo: this.props.stationInfo
      }, () => this.init());
    }
  }

  init() {
    if (this.state.stationInfo.rateList && this.state.stationInfo.rateList.length > 0) {
      for (var i = 0; i < this.state.stationInfo.rateList.length; i++) {
        const item = this.state.stationInfo.rateList[i]
        if (item.available) {
          this.setState({
            checkIndex: i,
            checkConnector: item,
          })
          break;
        }
      }
      this.setState({
        total: this.props.stationInfo.rateList.length,
        showReserve: this.props.stationInfo.enableReservation ? true : false
      })
      this.getReserve();
      //this.refreshAvailable();
    } else {
      this.setState({
        showReserve: false
      })
    }
  }

  //刷新可用充电接口
  refreshAvailable() {
    const info = this.state.stationInfo
    const all = info?.allConnector;
    /*if (info.siteType == 'Private') {
      this.setState({
        isPrivate: true
      })
    }*/
    if (all) {
      this.setState({
        available: !all.available > 0
      });
    }
  }

  checkChange(index) {
    if (this.state.checkIndex !== index) {
      this.setState({
        checkIndex: index,
        checkConnector: this.props.stationInfo.rateList[index],
      })
    }
  }

  getAvailable(type) {
    let count = type;
    if (typeof type === 'string') {
      count = type == "AC" ? this.state.stationInfo.acConnector :  this.state.stationInfo.dcConnector;
    }
    if (count) {
      return count.available + '/' + count.all;
    } else {
      return '0/0';
    }
  }

  getReserve() {
    apiCharge.getUserReserve(this.state.stationInfo.id).then(res => {
      if (res.data.reservePk && res.data.reserveEndTimeTimestamp > 0) {
        this.setState({
          userReserve: res.data
        }, () => this.startCountdown());
      } else {
        this.stopCountdown();
      }
    }).catch((err) => {
      this.stopCountdown();
    });
  }

  onReserve() {
    Dialog.showProgressDialog();
    apiCharge.reserveCharge({
      sitePk: this.state.stationInfo.id,
      chargeTypePk: this.state.checkConnector.chargeTypePk
    }).then(res => {
      Dialog.dismissLoading();
      toastShort('Reserved successfully!');
      this.props.onRefresh();
      this.getReserve();
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err)
    });
  }

  onCancel() {
    if (this.state.userReserve.reservePk) {
      Dialog.showProgressDialog();
      apiCharge.cancelReserve(this.state.userReserve.reservePk).then(res => {
        Dialog.dismissLoading();
        this.props.onRefresh();
        toastShort($t('common.cancelSuccess'));
        this.getReserve();
      }).catch((err) => {
        Dialog.dismissLoading();
        toastShort(err)
      });
    }
  }

  cancelReserve() {
    this.setState({
      showCancelDialog: true
    });
    /*Dialog.showDialog({
      title: 'Cancel Reservation',
      message: 'Are you sure you want to cancel reservation?',
      ok: 'CONFIRM',
      callback: (btn => {
        if (btn == "ok") {
          this.onCancel();
        }
      })
    })*/
  }

  startCountdown() {
    if (this.state.userReserve.reserveEndTimeTimestamp > 0) {
      if (!this.props.visible && this.props.onReserve)
        this.props.onReserve()
      const leftId = this.state.leftId;
      this.countdown(leftId);
    } else {
      this.stopCountdown(false, true);
    }
  }

  countdown(leftId) {
    if (leftId != this.state.leftId) {
      console.log(leftId, this.state.leftId);
      return;
    }
    const now = new Date().getTime();
    let left = this.state.userReserve.reserveEndTimeTimestamp - now;
    let s = 0, m = 0, h = 0;
    if (left > 1000) {
      s = left / 1000;
      if (s > 60) {
        m = s / 60;
        s = s % 60;
        if (m > 60) {
          h = m / 60;
          m = m % 60;
        }
      }
    } else {
      this.stopCountdown(false, true)
    }
    this.setState({
      timeLeft: this.formatNumber(h) + ' : ' + this.formatNumber(m) + ' : ' + this.formatNumber(s)
    });
    setTimeout(() => {
      this.countdown(leftId);
    }, 1000);
  }

  formatNumber(ins) {
    const num = parseInt(ins)
    if (num > 0) {
      if (num < 10) {
        return '0' + num;
      } else {
        return num;
      }
    } else {
      return '00';
    }
  }

  stopCountdown(just, refresh) {
    if (just) {
      this.setState({
        leftId: this.state.leftId + 1
      });
    } else {
      this.setState({
        leftId: this.state.leftId + 1,
        userReserve: {}
      });
    }
    if (refresh) {
      this.props.onRefresh();
    }
  }

  enterStatioinId() {
    if (this.props.onEnterStation) {
      this.props.onEnterStation();
    }
  }

  render() {
    return (
      <View
        style={{
          paddingLeft: 16,
          paddingRight: 16,
          ...(this.props.style || {})
        }}>
        { this.state.showReserve
          ? (
            this.state.userReserve.reservePk
              ? this.countdownView()
              : this.reserveView()
            )
          : <View style={[{height: $vh(50)}, ui.flexvc]}>
              <Text style={{color: textPrimary, fontSize: 14}}>Reservation is not available for this site.</Text>
            </View>
        }
        <CancelReserveDialog
          visible={this.state.showCancelDialog}
          onClose={confirm => {
            this.setState({
              showCancelDialog: false
            });
            if (confirm) {
              this.onCancel();
            }
          }}/>
        <EnterStationDialog
          visible={this.state.showStationDialog}
          stationId={this.state.stationInfo.id}
          onConfirm={() => this.enterStatioinId()}
          onClose={() => {
            this.setState({
              showStationDialog: false
            });
          }}
        />
      </View>
    )
  }

  //预定页面
  reserveView() {
    return (
      <>
      <Text style={styles.title}>Choose Connector</Text>
      <View style={styles.listView}>
        { this.state.total > 0
          ? this.state.stationInfo.rateList.map((item, index) => {
            const _type = item.type?.indexOf('AC') >= 0 ? 'AC' : 'DC';
            return (
              <Pressable
                key={index}
                style={[ChargeStyle.stationInfoView, index > 0 ? ChargeStyle.itemDivide : {}]}
                onPress={() => {
                    if (item.available) {
                      this.checkChange(index)
                    }
                  }
                }>
                <SelectableIcon selected={index == this.state.checkIndex}>
                  <Image
                    style={ChargeStyle.infoIcon}
                    source={_type == "AC" ? TypeImage.AC : TypeImage.DC}/>
                </SelectableIcon>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoTitle}>Type</Text>
                  <Text style={ChargeStyle.infoText}>{item.type}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoTitle}>Power</Text>
                  <Text style={ChargeStyle.infoText}>{item.power}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoTitle}>Available/Total</Text>
                  <Text style={ChargeStyle.infoBoldNumber}>{this.getAvailable(_type)}</Text>
                </View>
                { index == this.state.checkIndex
                  ? <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusSelected]}>Selected</Text>
                  : (item.available
                    ? <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>Available</TextView>
                    : <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>Unavailable</TextView>
                  )
                }
              </Pressable>
            )
          }) : null
        }
      </View>
      { this.state.checkConnector.available
        ? <>
            <Text style={styles.title}>Choose Rate</Text>
            <View style={styles.listView}>
              <View style={ChargeStyle.stationInfoView}>
                <SelectableIcon selected={true}>
                  <Image 
                    style={ChargeStyle.infoIcon}
                    source={require('../../images/charge/ic-type-rate.png')}/>
                </SelectableIcon>
                <Text style={ChargeStyle.rateText}>Rate</Text>
                <Text style={[ChargeStyle.ratePrice]}>{this.state.checkConnector.rates}</Text>
                <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusSelected]}>Selected</Text>
              </View>
            </View>
          </>
        : <View style={{height: 60}}></View>
      }

      <Text style={styles.title}>Choose Payment Method</Text>
      <Payment refreshId={this.state.refreshId}/>

      <Button
        style={styles.buttonView}
        elevation={1.5}
        text='Reserve'
        disabled={this.state.available}
        onClick={() => this.onReserve()}
      />
      </>
    )
  }

  //倒计时页面
  countdownView() {
    let info = this.state.userReserve.siteRate
    return (
      <>
        <Text style={styles.title}>Your Selection</Text>
        { info &&
          <View style={styles.listView}>
            <View style={ChargeStyle.stationInfoView}>
              <Image
                style={ChargeStyle.infoIcon}
                source={info.type?.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
              <View style={ChargeStyle.infoGroup}>
                <Text style={ChargeStyle.infoTitle}>Type</Text>
                <Text style={ChargeStyle.infoText}>{info.type}</Text>
              </View>
              <View style={ChargeStyle.infoGroup}>
                <Text style={ChargeStyle.infoTitle}>Power</Text>
                <Text style={ChargeStyle.infoText}>{info.power}</Text>
              </View>
              <View style={ChargeStyle.infoGroup}>
                <Text style={ChargeStyle.infoTitle}>Available/Total</Text>
                <Text style={ChargeStyle.infoBoldNumber}>{this.getAvailable(info.connectorCount)}</Text>
              </View>
              <SelectableIcon selected={true}/>
            </View>
            <View style={[ChargeStyle.stationInfoView, ChargeStyle.itemDivide]}>
              <Image 
                style={ChargeStyle.infoIcon}
                source={require('../../images/charge/ic-type-rate.png')}/>
              <Text style={ChargeStyle.rateText}>Rate</Text>
              <Text style={[ChargeStyle.ratePrice]}>{info.rates}</Text>
              <SelectableIcon selected={true}/>
            </View>
          </View>
        }
        <Text style={styles.timeleftText}>Reservation time left</Text>
        <View style={styles.timeleftView}>
          <Text style={styles.timeleft}>{this.state.timeLeft}</Text>
        </View>
        <View style={styles.cancelView}>
          <Button
            text='Cancel Reservation'
            textColor={textButton}
            style={styles.cancelButton}
            viewStyle={styles.cancelButtonView}
            onClick={() => this.cancelReserve()}
          />
        </View>

        <Text style={styles.title}>Choose Payment Method</Text>
        <Payment refreshId={this.state.refreshId}/>

        <View style={styles.buttonGroup}>
          <Button
            style={styles.buttonLeft}
            text='Scan QR'
            disabled={this.state.available}
            onClick={() => {
              startPage(PageList.scanqr, {actionDetail: false, id: this.state.stationInfo.id});
            }}/>
          <Button
            style={styles.buttonRight}
            text='Enter Station ID'
            disabled={this.state.available}
            onClick={() => {
              this.setState({
                showStationDialog: true
              });
              //startPage(PageList.summary)
            }
          }/>
        </View>
      </> 
    )
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#000',
    fontSize: 15,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 16
  },
  listView: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: '#F5F5F5'
  },
  buttonView: {
    marginTop: 32,
    marginBottom: 32
  },
  timeleftText: {
    color: '#000',
    fontSize: 16,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8,
    textAlign: 'center'
  },
  timeleftView: {
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16
  },
  timeleft: {
    color: '#FF2E00',
    fontSize: 18,
    fontWeight: 'bold'
  },
  cancelView: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 8,
    paddingBottom: 8
  },
  cancelButton: {
    borderRadius: 10,
    backgroundColor: '#ED4A4A'
  },
  cancelButtonView: {
    height: 48,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonGroup: {
    marginTop: 16,
    marginBottom: 24,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonLeft: {
    flex: 1,
    elevation: 1.5,
  },
  buttonRight: {
    flex: 1,
    marginLeft: 16,
    elevation: 1.5
  },
})