add app/pages/vehicles/EditVehicle.js

Strides-SPAPP/app/pages/vehicles/EditVehicle.js

@@ -0,0 +1,206 @@
+/**
+ * Edit Vehicle页面
+ * @邠心vbe on 2021/06/08
+ */
+import React, { Component } from 'react';
+import { View, Text, Pressable, Image, TextInput } from 'react-native';
+import apiUser from '../../api/apiUser';
+import BadgeSelectItem from '../../components/BadgeSelectItem';
+import Dialog from '../../components/Dialog';
+import ChargeItemSelect from '../../icons/ChargeItemSelect';
+import { TypeImageList } from '../charge/Charging';
+import { VehicleStyles } from './AddVehicle';
+
+export default class EditVehicle extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      vehicleInfo: {},
+      connectorIndex: 0,
+      connectorType: TypeImageList
+    };
+    this.form = {}
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.id) {
+      Dialog.showProgressDialog();
+      this.getVehicleData(params.id);
+    }
+  }
+
+  getVehicleData(id) {
+    apiUser.getVehicleById({
+      vehiclePk: id
+    }).then(res => {
+      Dialog.dismissLoading();
+      if (res.data) {
+        const info = res.data;
+        var typeIndex = 0
+        TypeImageList.forEach((item, index) => {
+          if (item.key == info.connectorType) {
+            typeIndex = index;
+          }
+        })
+        this.setState({
+          vehicleInfo: info,
+          connectorIndex: typeIndex
+        });
+        this.form = info;
+      }
+    }).catch(err => {
+      Dialog.dismissLoading();
+      toastShort(err)
+    });
+  }
+
+  selectConnector(index) {
+    this.setState({
+      connectorIndex: index
+    });
+  }
+
+  validate() {
+    if (!this.form.brand) {
+      toastShort('Please type brand');
+      return;
+    }
+    if (!this.form.model) {
+      toastShort('Please type model');
+      return;
+    }
+    if (!this.form.licensePlate) {
+      toastShort('Please type license plate');
+      return;
+    }
+    const params = this.form;
+    params.connectorType = this.state.connectorType[this.state.connectorIndex].key
+    this.updateVehicle(params)
+  }
+
+  updateVehicle(params) {
+    Dialog.showProgressDialog();
+    apiUser.updateVehicle(params).then(res => {
+      Dialog.dismissLoading();
+      toastShort('Update successfully');
+      goBack();
+    }).catch(err => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  deleteVehicle() {
+    Dialog.showProgressDialog();
+    apiUser.deleteVehicle({
+      vehiclePk: this.form.vehiclePk
+    }).then(res => {
+      Dialog.dismissLoading();
+      toastShort('Delete successfully');
+      goBack();
+    }).catch(err => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  removeVehicle() {
+    Dialog.showDialog({
+      title: 'Remove Vehicle',
+      message: 'Are you sure you want to remove this vehicle?',
+      callback: btn => {
+        if (btn == 'ok') {
+          Dialog.dismissLoading();
+          this.deleteVehicle();
+        }
+      }
+    })
+  }
+
+  render() {
+    return (
+      this.state.vehicleInfo.vehiclePk
+      ? <View style={styles.container}>
+          <View style={styles.formView}>
+            <Text style={styles.label}>Brand</Text>
+            <TextInput
+              style={styles.formInput}
+              defaultValue={this.state.vehicleInfo.brand}
+              placeholder='Add text'
+              placeholderTextColor={textPlacehoder}
+              maxLength={25}
+              onChangeText={text => this.form.brand = text}
+            />
+          </View>
+          <View style={styles.formView}>
+            <Text style={styles.label}>Model</Text>
+            <TextInput
+              style={styles.formInput}
+              defaultValue={this.state.vehicleInfo.model}
+              placeholder='Add text'
+              placeholderTextColor={textPlacehoder}
+              maxLength={50}
+              onChangeText={text => this.form.model = text}
+            />
+          </View>
+          <View style={styles.formView}>
+            <Text style={styles.label}>License Plate</Text>
+            <TextInput
+              style={styles.formInput}
+              defaultValue={this.state.vehicleInfo.licensePlate}
+              placeholder='Add text'
+              placeholderTextColor={textPlacehoder}
+              maxLength={20}
+              onChangeText={text => this.form.licensePlate = text}
+            />
+          </View>
+          <View style={styles.formView}>
+            <Text style={styles.label}>Choose Connecter Type</Text>
+            <View style={styles.connectorView}>
+              { this.state.connectorType.map((item, index) => {
+                  return (
+                    <BadgeSelectItem
+                      key={index}
+                      style={styles.ctypeView}
+                      borderColor={textCancel}
+                      checked={index==this.state.connectorIndex}
+                      onPress={() => this.selectConnector(index)}>
+                      <Image
+                        style={styles.typeIcon}
+                        source={item.icon}/>
+                      <Text style={styles.typeName}>{item.name}</Text>
+                      {/* index==this.state.connectorIndex &&
+                        <View style={styles.checkedIcon}>
+                          <ChargeItemSelect size={12} selected={true}/>
+                        </View>
+                      */}
+                    </BadgeSelectItem>
+                  )
+                })
+              }
+            </View>
+          </View>
+          <Text style={ui.flex1}></Text>
+          <View style={styles.buttonView}>
+            <Button
+              style={styles.removeButton}
+              text='Remove'
+              elevation={1.5}
+              onClick={() => {
+                this.removeVehicle();
+              }}/>
+            <Button
+              text='Update'
+              elevation={1.5}
+              onClick={() => {
+                this.validate();
+              }}/>
+          </View>
+        </View>
+      : <View></View>
+    );
+  }
+}
+
+const styles = VehicleStyles