#13608 Map Icon differentiation

Strides-APP/app/pages/alert/Alerts.js

@@ -3,7 +3,7 @@
  * @邠心vbe on 2023/08/17
  */
 import React, { Component } from 'react';
-import { Text, FlatList, StyleSheet, RefreshControl } from 'react-native';
+import { Text, View, FlatList, StyleSheet, RefreshControl, PixelRatio } from 'react-native';
 import apiNotification from '../../api/apiNotification';
 import Dialog from '../../components/Dialog';
 import { MyRefreshProps } from '../../components/ThemesConfig';
@@ -91,12 +91,17 @@ export default class Alerts extends Component {
     )
   }
 
+  divideView = (props) => {
+    return (<View style={{height: 1/PixelRatio.get()}}></View>)
+  }
+
   render() {
     return (
       <FlatList
         style={styles.listView}
         data={this.state.dataList}
         renderItem={this.listItem}
+        ItemSeparatorComponent={this.divideView}
         keyExtractor={item => item.notificationId}
         refreshControl={
           <RefreshControl

Strides-APP/app/pages/alert/ItemView.js

@@ -97,7 +97,7 @@ export default ItemView = ({item, index, separators, onPress, onLongPress}) => {
   }
   return (
     <Pressable
-      style={styles.notyItemView}
+      style={item.readStatus ? styles.notyItemView : styles.unotyItemView}
       onPress={onPress}
       android_ripple={ripple}
       onLongPress={onLongPress}>
@@ -136,6 +136,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row'
   },
+  unotyItemView: {
+    padding: 16,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: "#F0F0F0"
+  },
   iconType: {
     marginRight: 12
   },

Strides-APP/app/pages/chargeV2/ChargeAdapter.js

@@ -90,7 +90,7 @@ export default class ChargeAdapter extends Component {
         this.canShowLoginDialog();
       });
     }
-    //BackHandler.addEventListener('hardwareBackPress', this.backPage)
+    BackHandler.addEventListener('hardwareBackPress', this.backPage)
     PagerUtil.addOnRefresh(this);
     // setTimeout(() => {
     //   this.changeTab(1)
@@ -114,7 +114,7 @@ export default class ChargeAdapter extends Component {
   componentWillUnmount() {
     QRResult.clearResult();
     PagerUtil.onDestory();
-    //BackHandler.removeEventListener("hardwareBackPress", this.backPage)
+    BackHandler.removeEventListener("hardwareBackPress", this.backPage)
   }
 
   backPage = () => {

Strides-APP/app/pages/home/Home.js

@@ -318,7 +318,8 @@ export default class HomePage extends Component {
             latitude: item.locationLatitude,
             longitude: item.locationLongitude,
             favorite: item?.favorite ? true : false,
-            upcoming: false
+            hasLabel: item?.hasLabel,
+            upcoming: item?.upcoming
             /*acConnector: item.acConnector,
             allConnector: item.allConnector,
             dcConnector: item.dcConnector,
@@ -405,6 +406,12 @@ export default class HomePage extends Component {
     });
   }
 
+  onCloseInfo() {
+    this.setState({
+      stationInfo: {}
+    });
+  }
+
   favoriteSite() {
     if (this.state.stationInfo?.id) {
       Dialog.showProgressDialog();
@@ -441,6 +448,7 @@ export default class HomePage extends Component {
           onFilter={data => this.findFilter(data)}
           onMapReady={() => this.onMapReady()}
           onFavorite={() => this.favoriteSite()}
+          onCloseInfo={() => this.onCloseInfo()}
           onLocation={() => this.checkPermission2Geo(true)}
           showUserLocation={this.state.hasPermission && this.settingInfo.alwaysLocation}
           viewChargeStation={id => this.viewChargeStation(id)}

Strides-APP/app/pages/home/MapUI.js

@@ -17,6 +17,7 @@ export default MapUI = ({
   onMapReady,
   onFavorite,
   onLocation,
+  onCloseInfo,
   showUserLocation,
   viewChargeStation
 }) => {
@@ -72,6 +73,7 @@ export default MapUI = ({
         <BottomSiteInfo
           stationInfo={state.stationInfo}
           onFavorite={onFavorite}
+          onClose={onCloseInfo}
         />
       </View>
     </View>

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

@@ -3,7 +3,7 @@
  * @邠心vbe on 2022/12/23
  */
 import React from 'react';
-import { Pressable, StyleSheet, View, Text } from 'react-native';
+import { Pressable, StyleSheet, View, Text, Image } from 'react-native';
 import { ElevationObject } from '../../../components/Button';
 import utils from '../../../utils/utils';
 import { ChargeStyle } from '../../charge/Charging';
@@ -12,7 +12,7 @@ import ConnectType from '../../search/ConnectType';
 import app from '../../../../app.json';
 import TextView from '../../../components/TextView';
 
-export default BottomSiteInfo = ({stationInfo = {}, onFavorite}) => {
+export default BottomSiteInfo = ({stationInfo = {}, onFavorite, onClose}) => {
   const getAvailable = (type) => {
     const all = stationInfo.allConnector;
     if (all) {
@@ -47,65 +47,77 @@ export default BottomSiteInfo = ({stationInfo = {}, onFavorite}) => {
   }
 
   const toChargePage = () => {
-    startPage(PageList.chargeDetailPage, {stationInfo: stationInfo, action: 'view', from: PageList.home})
+    if (stationInfo.upcoming) {
+      toastShort($t("home.upcoming"))
+    } else {
+      startPage(PageList.chargeDetailPage, {stationInfo: stationInfo, action: 'view', from: PageList.home});
+    }
   }
 
   if (stationInfo.id) {
     return (
-      <View style={styles.stationBarView}>
-        <View style={ui.flexc}>
+      <Pressable
+        style={({pressed}) => [styles.stationBarView, pressed ? styles.stationBarPresed : {}]}
+        onPress={() => toChargePage()}>
+        <View style={ui.flexcw}>
+          <TextView
+            ellipsizeMode='tail'
+            numberOfLines={1}
+            style={styles.stationTitle}>{stationInfo.name}</TextView>
           <Pressable
-            style={styles.stationInfo}
-            //onPress={() => startPage(PageList.chargeDetail, {stationInfo: stationInfo, action: 'view'})}}
-            onPress={toChargePage}>
-            <TextView
-              ellipsizeMode='tail'
-              numberOfLines={1}
-              style={styles.stationTitle}>{stationInfo.name}</TextView>
-            <TextView
-              style={styles.stationAddress}
-              ellipsizeMode='tail'
-              numberOfLines={2}>{stationInfo.address}</TextView>
+            style={styles.closeIcon}
+            android_ripple={rippleLess}
+            onPress={onClose}>
+            <MaterialCommunityIcons
+              name="close"
+              size={22}
+              color={textCancel}/>
           </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> */}
-          { app.modules.bookmarks &&
+        </View>
+        <View style={{height: 4}}></View>
+        <View style={ui.flexc}>
+          <TextView
+            style={styles.stationAddress}
+            ellipsizeMode='tail'
+            numberOfLines={3}>{stationInfo.address}</TextView>
+          { stationInfo.upcoming
+          ? <View style={[ui.center, $margin(0, 8)]}>
+              <MaterialIcons
+                name="upcoming"
+                size={42}
+                color={colorAccent}
+                style={styles.upcomingIcon} />
+              <TextView style={styles.upcomingText}>{$t("home.upcoming")}</TextView>
+            </View>
+          : <> 
+            { app.modules.bookmarks &&
+              <Pressable
+                style={[styles.directIconView, {backgroundColor: stationInfo.favorite ? colorPrimary : colorCancel}]}
+                android_ripple={rippleLess}
+                onPress={onFavorite}>
+                <MaterialIcons
+                  name="star"
+                  size={26}
+                  color={colorLight}/>
+              </Pressable>
+            }
             <Pressable
-              style={[styles.directIconView, {backgroundColor: stationInfo.favorite ? colorPrimary : colorCancel}]}
+              style={styles.directIconView}
               android_ripple={rippleLess}
-              onPress={onFavorite}>
-              <MaterialIcons
-                name="star"
-                size={26}
+              onPress={() => {
+                utils.directMaps(stationInfo.latitude, stationInfo.longitude, stationInfo.address);
+              }}>
+              <MaterialCommunityIcons
+                name="navigation-variant"
+                size={25}
                 color={colorLight}/>
+              {/* <MaterialIcons
+                name='directions'
+                size={28}
+                color={colorAccent}/>
+              <Text style={styles.distanceText}>{stationInfo.distance}</Text> */}
             </Pressable>
-          }
-          <Pressable
-            style={styles.directIconView}
-            android_ripple={rippleLess}
-            onPress={() => {
-              utils.directMaps(stationInfo.latitude, stationInfo.longitude, stationInfo.address);
-            }}>
-            <MaterialCommunityIcons
-              name="navigation-variant"
-              size={25}
-              color={colorLight}/>
-            {/* <MaterialIcons
-              name='directions'
-              size={28}
-              color={colorAccent}/>
-            <Text style={styles.distanceText}>{stationInfo.distance}</Text> */}
-          </Pressable>
+          </> }
         </View>
         <View style={ui.flex}>
           <View style={styles.connectView}>
@@ -119,10 +131,22 @@ export default BottomSiteInfo = ({stationInfo = {}, onFavorite}) => {
             <TextView style={[ChargeStyle.infoStatus, stationInfo.siteType == 'Public' ? ChargeStyle.statusAvailable : ChargeStyle.statusWarning, styles.siteTypes]}>{stationInfo.siteType}</TextView>
           </View>
         </View>
+        { stationInfo?.labels?.length > 0 &&
+          <View style={styles.siteLabelsView}>
+            <Image
+              style={styles.labelIcon}
+              source={require('../../../images/maps/ic_marker_additional.png')}/>
+            { stationInfo.labels.map((item, index) => 
+              <TextView
+                key={index}
+                style={styles.textLabel}>
+                {item}
+              </TextView>
+            )}
+          </View>
+        }
         <View style={styles.divideLine}></View>
-        <Pressable
-          style={styles.infoDetailsView}
-          onPress={toChargePage}>
+        <View style={styles.infoDetailsView}>
           <View style={ui.flex1}>
             <TextView style={styles.infoTitle}>{$t("charging.operatingHours")}</TextView>
             <View style={styles.infoView}>
@@ -143,8 +167,8 @@ export default BottomSiteInfo = ({stationInfo = {}, onFavorite}) => {
               <TextView style={styles.infoText}>{stationInfo?.additionalNotes}</TextView>
             </View>
           </View>
-        </Pressable>
-      </View>
+        </View>
+      </Pressable>
     );
   } else {
     return <></>;
@@ -158,11 +182,15 @@ const styles = StyleSheet.create({
     bottom: 48,
     zIndex: 10,
     borderRadius: 6,
-    ...$padding(12, 9),
+    ...$padding(8, 16),
     position: 'absolute',
     backgroundColor: colorLight,
     ...ElevationObject(3)
   },
+  stationBarPresed: {
+    backgroundColor: "#F6F6F6",
+    ...ElevationObject(5)
+  },
   stationInfo: {
     flex: 1,
     height: 45,
@@ -172,12 +200,13 @@ const styles = StyleSheet.create({
   },
   stationTitle: {
     color: '#000',
-    fontSize: 16,
-    paddingBottom: 8
+    fontSize: 17,
+    fontWeight: 'bold'
   },
   stationAddress: {
+    flex: 1,
     color: '#999',
-    fontSize: 12,
+    fontSize: 12
   },
   stationAvailable: {
     height: 45,
@@ -227,7 +256,7 @@ const styles = StyleSheet.create({
     width: 42,
     height: 42,
     marginLeft: 8,
-    marginRight: 8,
+    marginRight: 4,
     borderRadius: 45,
     alignItems: 'center',
     justifyContent: 'center',
@@ -260,5 +289,41 @@ const styles = StyleSheet.create({
   infoText: {
     color: '#444',
     fontSize: 10
+  },
+  closeIcon: {
+    width: 30,
+    height: 30,
+    marginTop: -2,
+    marginRight: -8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  siteLabelsView: {
+    marginBottom: 8,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  labelIcon: {
+    width: 16,
+    height: 16
+  },
+  textLabel: {
+    color: textLight,
+    fontSize: 10,
+    marginLeft: 5,
+    borderRadius: 4,
+    ...$padding(2, 6),
+    backgroundColor: colorPrimary
+  },
+  upcomingIcon: {
+    marginLeft: 8,
+    opacity: .3
+  },
+  upcomingText: {
+    color: colorAccent,
+    fontSize: 10,
+    opacity: .3,
+    marginLeft: 8,
+    marginTop: -3
   }
 })

Strides-APP/app/pages/home/maps/Cluster.js

@@ -14,6 +14,11 @@ export const MyMarker = ({id, coordinate, onPress}) => {
       zIndex={1}
       coordinate={coordinate}
       onPress={onPress}>
+      { coordinate.hasLabel &&
+        <Image
+          style={styles.markerTop}
+          source={require('../../../images/maps/ic_marker_additional.png')}/>
+      }
       { coordinate.favorite
         ? coordinate.available
           ? <Image
@@ -78,6 +83,10 @@ const styles = StyleSheet.create({
     width: 29.52,
     height: 34.28
   },
+  markerTop: {
+    width: 29.52,
+    height: 34.28
+  },
   small: {
     width: 29.52,
     height: 34.28

Strides-APP/app/utils/utils.js

@@ -64,6 +64,8 @@ export default {
         favorite: obj.favorite,
         acRates: acRates,
         dcRates: dcRates,
+        labels: obj.labels,
+        upcoming: obj.upcoming,
         rateList: obj.rates,
         siteType: obj.siteType,
         parkingFee: obj.parkingFee,