Merge commit 'cbcb0dc9c2fec766f563559a7d9303fb8d402e9a' into develop

components/ActionSheetComponents/EachTrainInfo.js

@@ -7,7 +7,6 @@ import {
   Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  TouchableHighlight,
   Platform,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
@@ -15,9 +14,7 @@ import ActionSheet, {
   SheetManager,
   useScrollHandlers,
 } from "react-native-actions-sheet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AS } from "../../storageControl";
-import LottieView from "lottie-react-native";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
 import {
@@ -31,7 +28,6 @@ import dayjs from "dayjs";
 import { getTrainType } from "../../lib/getTrainType";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
-import { Swipeable } from "react-native-gesture-handler";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -44,123 +40,110 @@ export const EachTrainInfo = (props) => {
   } = props.payload;
   const [trainData, setTrainData] = useState([]);
   const [currentPosition, setCurrentPosition] = useState([]);
-
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
 
   const { currentTrain } = useCurrentTrain();
-  const { initializeTrainPairList } = useBusAndTrainData();
+  const { getInfluencedTrainData } = useBusAndTrainData();
 
   const [currentTrainData, setCurrentTrainData] = useState([]);
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
   const [showNearTrain, setShowNearTrain] = useState([]);
   const [isConcatNear, setIsConcatNear] = useState(false);
+  const [tailStation, setTailStation] = useState();
+  const [headStation, setHeadStation] = useState();
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   //裏列車探索
   useEffect(() => {
-    const trainPairList = initializeTrainPairList();
-
-    const returnArray = [];
     if (!data.trainNum) return;
-    if (trainPairList[data.trainNum]) {
+    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
-      returnArray.push(Object.keys(trainPairList[data.trainNum])[0]);
-    }
-    if (
-      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
-      new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) ||
-      new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum)
-    ) {
-      if (trainList[data.trainNum.substring(1)]) {
-        returnArray.push(data.trainNum.substring(1));
-      }
-    }
-    if (new RegExp(/^[1-9]\d\d[DM]$/).test(data.trainNum)) {
-      // 列番がxxDの場合は4xxDと5xxDの列番を検索
-      if (trainList["4" + data.trainNum]) returnArray.push("4" + data.trainNum);
-      if (trainList["5" + data.trainNum]) returnArray.push("5" + data.trainNum);
-    }
     setNearTrainIDList(returnArray);
-    if (!returnArray[0]) return;
-    const TD = trainList[returnArray[0]];
-    if (!TD) return;
-    const TDArray = TD.split("#").filter((d) => d != "");
     setShowNearTrain(TDArray);
   }, [data]);
 
-  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
+  useEffect(() => {
+    if (trainData.length == 0) return;
+    if (showNearTrain.length == 0) return;
+    showNearTrain.forEach((d) => {
+      const [station, se, time] = d.split(",");
+
       console.log(trainData); //trainDataは現在の列車の停車駅リスト
-    console.log(showNearTrain); //showNearTrainは裏列車の停車駅リスト
+      console.log(station); //showNearTrainは裏列車の停車駅リスト
+      console.log(trainData[0]);
+      if (station == trainData[0].split(",")[0])
+        setHeadStation(trainData[0].split(",")[0]);
+      if (station == trainData[trainData.length - 1].split(",")[0])
+        setTailStation(trainData[trainData.length - 1].split(",")[0]);
+    });
+  }, [trainData, showNearTrain]);
+
+  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
+    const migrationArray = (stationInfo) => {
       const mainTrainStationPosition = trainData.findIndex(
         (d) => d.split(",")[0] == stationInfo
       );
-    const relationMain =
+
-      mainTrainStationPosition == 0
+      const relationMain = (() => {
-        ? "head"
+        if (mainTrainStationPosition == 0) return "head";
-        : mainTrainStationPosition == trainData.length - 1
+        if (mainTrainStationPosition == trainData.length - 1) return "tail";
-        ? "tail"
+        return "middle";
-        : "middle";
+      })();
-    console.log(relationMain);
 
       const subTrainStationPosition = showNearTrain.findIndex(
         (d) => d.split(",")[0] == stationInfo
       );
-    const relationSub =
+      const relationSub = (() => {
-      subTrainStationPosition == 0
+        if (subTrainStationPosition == 0) return "head";
-        ? "head"
+        if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
-        : subTrainStationPosition == showNearTrain.length - 1
+        return "middle";
-        ? "tail"
+      })();
-        : "middle";
+
-    console.log(relationSub);
       switch (relationMain) {
         case "head":
           if (relationSub == "head") {
-          break;
+            return;
           } else if (relationSub == "tail") {
-          const migrationTrainData = [
+            return [
               ...showNearTrain.slice(0, subTrainStationPosition),
               ...trainData,
             ];
-          setTrainData(migrationTrainData);
           } else if (relationSub == "middle") {
-          const migrationTrainData = [
+            return [
               ...showNearTrain.slice(0, subTrainStationPosition),
               ...trainData,
             ];
-          setTrainData(migrationTrainData);
+          } else return;
-        }
-        break;
         case "tail":
           if (relationSub == "head") {
-          const migrationTrainData = [
+            return [
               ...trainData.slice(0, mainTrainStationPosition),
               ...showNearTrain,
             ];
-          setTrainData(migrationTrainData);
           } else if (relationSub == "tail") {
-          break;
+            return;
           } else if (relationSub == "middle") {
-          const migrationTrainData = [
+            return [
               ...trainData.slice(0, mainTrainStationPosition),
               ...showNearTrain.slice(subTrainStationPosition),
             ];
-          setTrainData(migrationTrainData);
+          } else return;
-        }
-        break;
         case "middle":
           if (relationSub == "head") {
-          const migrationTrainData = [
+            return [
               ...trainData.slice(0, mainTrainStationPosition),
               ...showNearTrain,
             ];
-          setTrainData(migrationTrainData);
           } else if (relationSub == "tail") {
-          const migrationTrainData = [
+            return [
               ...showNearTrain.slice(0, subTrainStationPosition),
               ...trainData.slice(mainTrainStationPosition),
             ];
-          setTrainData(migrationTrainData);
+          } else return;
-        }
-        break;
       }
+    };
+    const array = migrationArray(stationInfo);
+    if (!array) return;
+    setTrainData(array);
     setIsConcatNear(true);
   };
 
@@ -183,7 +166,12 @@ export const EachTrainInfo = (props) => {
       originalStationList,
       from: "AllTrainDiagramView",
     };
-    //SheetManager.show("EachTrainInfo", { payload });
+    SheetManager.hide("EachTrainInfo").then(() => {
+      //0.1秒待機してから開く
+      setTimeout(() => {
+        SheetManager.show("EachTrainInfo", { payload });
+      }, 1);
+    });
   };
   useEffect(() => {
     setCurrentTrainData(
@@ -399,6 +387,7 @@ export const EachTrainInfo = (props) => {
   return (
     <ActionSheet
       gestureEnabled={true}
+      //gestureEnabled={!actionSheetHorizonalScroll}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
@@ -466,6 +455,9 @@ export const EachTrainInfo = (props) => {
         </View>
         {from == "AllTrainDiagramView" || (
           <ScrollView
+            //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+            //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+            //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
             style={{
               flexDirection: "row",
               //width: widthPercentageToDP("200%"),
@@ -478,6 +470,8 @@ export const EachTrainInfo = (props) => {
             <TrainDataView
               currentTrainData={currentTrainData}
               currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
             />
             {/* <View
               style={{
@@ -622,6 +616,26 @@ export const EachTrainInfo = (props) => {
             backgroundColor: "white",
           }}
         >
+          {headStation && !isConcatNear && (
+            <TouchableOpacity
+              onPress={() => openBackTrainInfo(headStation)}
+              style={{
+                padding: 10,
+                flexDirection: "row",
+                borderColor: "blue",
+                borderWidth: 1,
+                margin: 10,
+                borderRadius: 5,
+                alignItems: "center",
+              }}
+            >
+              <Text
+                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+              >
+                「本当の始発駅」を表示
+              </Text>
+            </TouchableOpacity>
+          )}
           {/* <LottieView
                 autoPlay
                 loop
@@ -630,7 +644,10 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) => (i.split(",")[1] == "提" ? <DataFromButton i={i} /> :
+          {trainData.map((i, index) =>
+            i.split(",")[1] == "提" ? (
+              <DataFromButton i={i} />
+            ) : (
               <StationButton
                 i={i}
                 index={index}
@@ -638,11 +655,29 @@ export const EachTrainInfo = (props) => {
                 points={points}
                 currentTrainData={currentTrainData}
                 openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-              headAndTail={showNearTrain.map((d) => d.split(",")[0])}
-              openBackTrainInfo={openBackTrainInfo}
-              isConcatNear={isConcatNear}
               />
-          ))}
+            )
+          )}
+          {tailStation && !isConcatNear && (
+            <TouchableOpacity
+              onPress={() => openBackTrainInfo(tailStation)}
+              style={{
+                padding: 10,
+                flexDirection: "row",
+                borderColor: "blue",
+                borderWidth: 1,
+                margin: 10,
+                borderRadius: 5,
+                alignItems: "center",
+              }}
+            >
+              <Text
+                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+              >
+                「本当の終着駅」を表示
+              </Text>
+            </TouchableOpacity>
+          )}
 
           <View style={{ flexDirection: "row" }}>
             <View
@@ -684,14 +719,18 @@ const DataFromButton  = ({i}) => {
           <Text style={{ fontSize: 20 }}>{station}</Text>
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: 18 }}>
-            提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
           </Text>
-          
         </View>
       </View>
     </TouchableWithoutFeedback>
   );
-}
+};
 
 const StationButton = ({
   i,
@@ -700,9 +739,6 @@ const StationButton = ({
   points,
   currentTrainData,
   openStationACFromEachTrainInfo,
-  headAndTail,
-  openBackTrainInfo,
-  isConcatNear,
 }) => {
   const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
@@ -738,28 +774,7 @@ const StationButton = ({
     .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
   const timeString = dates.format("HH:mm").split(":");
 
-  const StationNames = Stations && Stations[0]?.StationName;
-  const [isConnected, setIsConnected] = useState(
-    headAndTail.includes(StationNames)
-  );
-  const swipagleRef = useRef(null);
   return (
-    <Swipeable
-      ref={swipagleRef}
-      key={station}
-      onSwipeableOpen={() => {
-        openBackTrainInfo(station, index);
-        swipagleRef.current.close();
-      }}
-      renderRightActions={
-        isConnected && !isConcatNear
-          ? (progress, dragX) => {
-              //openBackTrainInfo(station, index);
-              return <View style={{ flex: 1, backgroundColor: "red" }}></View>;
-            }
-          : null
-      }
-    >
     <TouchableWithoutFeedback
       onPress={() => openStationACFromEachTrainInfo(station)}
       key={station}
@@ -805,9 +820,6 @@ const StationButton = ({
             flexDirection: "row",
             borderBottomWidth: 1,
             borderBottomColor: "#f0f0f0",
-              borderRightColor: isConnected && !isConcatNear ? "red" : "white",
-              borderRightWidth: 10,
-              paddingRight: 10,
             flex: 1,
           }}
         >
@@ -816,8 +828,7 @@ const StationButton = ({
           {points && points.findIndex((d) => d == index) >= 0 ? (
             <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
           ) : null}
-            {!isNaN(currentTrainData?.delay) &&
+          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
-              currentTrainData?.delay != 0 && (
             <Text
               style={{
                 fontSize: 15,
@@ -851,11 +862,15 @@ const StationButton = ({
         </View>
       </View>
     </TouchableWithoutFeedback>
-    </Swipeable>
   );
 };
 
-const TrainDataView = ({ currentTrainData, currentPosition }) => {
+const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
   return (
     <View
       style={{
@@ -882,23 +897,46 @@ const TrainDataView = ({ currentTrainData, currentPosition }) => {
         }
       />
       <View style={{ flex: 1, flexDirection: "column" }}>
+        <View style={{ flex: 1, flexDirection: "row" }}>
           <StateBox
             title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
             text={`${currentTrainData?.delay}${
               isNaN(currentTrainData?.delay) ? "" : "分"
             }`}
           />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
             <StateBox title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
       </View>
     </View>
   );
 };
 
-const StateBox = ({ text, title }) => (
+const StateBox = ({ text, title, style }) => (
-  <View style={boxStyle}>
+  <View style={{ ...boxStyle, ...style }}>
-    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
+    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
       {text?.match("～") ? (
         <>
           <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
@@ -919,7 +957,7 @@ const boxStyle = {
   margin: 10,
 };
 const boxTextStyle = {
-  fontSize: 28,
+  fontSize: 25,
   color: "#0099CC",
   textAlign: "right",
 };

stateBox/useBusAndTrainData.js

@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useState } from "react";
+import trainList from "../assets/originData/trainList";
 const initialState = {
   busAndTrainData: [],
   setBusAndTrainData: () => {},
   trainPairData: [],
   setTrainPairData: () => {},
   initializeTrainPairList: () => {},
+  getInfluencedTrainData: () => {},
 };
 
 const BusAndTrainDataContext = createContext(initialState);
@@ -23,6 +25,34 @@ export const BusAndTrainDataProvider = ({ children }) => {
     });
     return trainPairList;
   };
+  const getInfluencedTrainData = (trainNum) => {
+    const trainPairList = initializeTrainPairList();
+
+    const returnArray = [];
+    if (!trainNum) return;
+    if (trainPairList[trainNum]) {
+      returnArray.push(Object.keys(trainPairList[trainNum])[0]);
+    }
+    if (
+      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
+      new RegExp(/^4[1-9]\d\d[DM]$/).test(trainNum) ||
+      new RegExp(/^5[1-7]\d\d[DM]$/).test(trainNum)
+    ) {
+      if (trainList[trainNum.substring(1)]) {
+        returnArray.push(trainNum.substring(1));
+      }
+    }
+    if (new RegExp(/^[1-9]\d\d[DM]$/).test(trainNum)) {
+      // 列番がxxDの場合は4xxDと5xxDの列番を検索
+      if (trainList["4" + trainNum]) returnArray.push("4" + trainNum);
+      if (trainList["5" + trainNum]) returnArray.push("5" + trainNum);
+    }
+    if (!returnArray[0]) return [[], []];
+    const TD = trainList[returnArray[0]];
+    if (!TD) return [[], []];
+    const TDArray = TD.split("#").filter((d) => d != "");
+    return [returnArray, TDArray];
+  };
   return (
     <BusAndTrainDataContext.Provider
       value={{
@@ -31,6 +61,7 @@ export const BusAndTrainDataProvider = ({ children }) => {
         trainPairData,
         setTrainPairData,
         initializeTrainPairList,
+        getInfluencedTrainData,
       }}
     >
       {children}