add app/pages/charge/Rating.js

Strides-SPAPP/app/pages/charge/Rating.js

@@ -0,0 +1,218 @@
+/**
+ * 充电评价页面
+ * @邠心vbe on 2021/04/30
+ */
+import React from 'react';
+import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import apiUser from '../../api/apiUser';
+import Button from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import { PageList } from '../Router';
+
+export default class Rating extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      amenitiesNearby: 0,
+      chargingExperience: 0,
+      locationOfStation: 0,
+      other: '',
+      sitePk: 0,
+      stationInfo: this.props.route.params
+    }
+  }
+
+  componentDidMount() {
+    if (this.state.stationInfo.id) {
+      this.setState({
+        sitePk: this.state.stationInfo.id
+      });
+    }
+  }
+
+  submit() {
+    //console.log(this.state);
+    if (this.state.locationOfStation == 0) {
+      toastShort('Please rate \'Location of Station\'');
+      return;
+    }
+    if (this.state.amenitiesNearby == 0) {
+      toastShort('Please rate \'Amenities Nearby\'');
+      return;
+    }
+    if (this.state.chargingExperience == 0) {
+      toastShort('Please rate \'Charging Experience\'');
+      return;
+    }
+    this.rating();
+  }
+
+  rating() {
+    Dialog.showProgressDialog();
+    apiUser.rateCharge(this.state).then(res => {
+      Dialog.dismissLoading();
+      startPage(PageList.home)
+    }).catch((err) => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
+        contentInsetAdjustmentBehavior={'automatic'}>
+        <View style={styles.stationInfoView}>
+          <Image
+            style={styles.stationIcon}
+            source={require('../../images/charge/icon-station-no.png')}/>
+          <View style={styles.stationInfo}>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={styles.stationName}>{this.state.stationInfo?.name}</Text>
+            <Text style={styles.stationAddress}>{this.state.stationInfo?.address}</Text>
+          </View>
+        </View>
+        <View style={styles.ratingView}>
+          <Text style={styles.ratingTitle}>Location of Station</Text>
+          <StarView 
+            rating={this.state.locationOfStation}
+            onChange={value => {
+              this.setState({
+                locationOfStation: value
+              });
+            }}
+          />
+          <Text style={styles.ratingTitle}>Amenities Nearby</Text>
+          <StarView 
+            rating={this.state.amenitiesNearby}
+            onChange={value => {
+              this.setState({
+                amenitiesNearby: value
+              });
+            }}
+          />
+          <Text style={styles.ratingTitle}>Charging Experience</Text>
+          <StarView 
+            rating={this.state.chargingExperience}
+            onChange={value => {
+              this.setState({
+                chargingExperience: value
+              });
+            }}
+          />
+          <Text style={styles.ratingTitle}>Others</Text>
+          <TextInput
+            style={styles.otherText}
+            multiline={true}
+            maxLength={500}
+            numberOfLines={4}
+            scrollEnabled={true}
+            textAlignVertical='top'
+            onChangeText={t => {
+              this.setState({
+                other: t
+              });
+            }}
+          />
+        </View>
+        <Button
+          style={styles.button}
+          text='Submit Rating'
+          onClick={() => {
+            this.submit();
+          }}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const StarView = ({rating, onChange}) => {
+  const arr = [1,2,3,4,5];
+  return (
+    <View style={styles.starGroupView}>
+      { arr.map((item, index) => {
+          return (
+            <AntDesign
+              key={index}
+              style={styles.starView}
+              name={'star'}
+              size={34}
+              color={rating >= item ? colorAccent : '#eee'}
+              onPress={() => {
+                onChange(item);
+              }}/>
+          );
+        })
+      }
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  stationInfoView: {
+    padding: 16,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: colorLight
+  },
+  stationIcon: {
+    width: 40,
+    height: 40
+  },
+  stationInfo: {
+    flex: 1,
+    paddingLeft: 16
+  },
+  stationName: {
+    color: '#000',
+    fontSize: 16
+  },
+  stationAddress: {
+    color: '#999',
+    fontSize: 12
+  },
+  ratingView: {
+    padding: 16,
+    marginTop: 16,
+    backgroundColor: colorLight
+  },
+  ratingTitle: {
+    color: '#000',
+    fontSize: 14
+  },
+  starGroupView: {
+    paddingTop: 16,
+    paddingBottom: 20,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  starView: {
+    marginRight: 10
+  },
+  otherText: {
+    color: textPrimary,
+    minHeight: 120,
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#999',
+    borderRadius: 6,
+    paddingLeft: 10,
+    paddingRight: 10,
+    backgroundColor: '#F5F5F5'
+  },
+  button: {
+    elevation: 1.5,
+    marginTop: 32,
+    marginLeft: 16,
+    marginRight: 16,
+    marginBottom: 32
+  }
+});