通知機能の仮実装

App.js

@@ -1,8 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Platform, UIManager } from "react-native";
+import { Platform, UIManager, Text, Clipboard } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import * as Device from "expo-device";
+import * as Notifications from "expo-notifications";
+import Constants from "expo-constants";
 import { UpdateAsync } from "./UpdateAsync.js";
 import { AS } from "./storageControl";
 import TNDView from "./ndView";
@@ -40,31 +44,104 @@ if (Platform.OS === "android") {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+async function registerForPushNotificationsAsync() {
+  let token;
 
+  if (Platform.OS === "android") {
+    Notifications.setNotificationChannelAsync("default", {
+      name: "default",
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: "#FF231F7C",
+    });
+  }
+
+  if (Device.isDevice) {
+    const { status: existingStatus } =
+      await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+    if (existingStatus !== "granted") {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+    if (finalStatus !== "granted") {
+      alert("Failed to get push token for push notification!");
+      return;
+    }
+    token = await Notifications.getExpoPushTokenAsync({
+      projectId: Constants.expoConfig.extra.eas.projectId,
+    });
+    console.log(token);
+  } else {
+    alert("Must use physical device for Push Notifications");
+  }
+
+  return token.data;
+}
 export default function App() {
+  const [expoPushToken, setExpoPushToken] = useState("");
+  const [notification, setNotification] = useState(false);
+  const notificationListener = useRef();
+  const responseListener = useRef();
+
+  useEffect(() => {
+    registerForPushNotificationsAsync().then((token) =>
+      setExpoPushToken(token)
+    );
+
+    notificationListener.current =
+      Notifications.addNotificationReceivedListener((notification) => {
+        setNotification(notification);
+      });
+
+    responseListener.current =
+      Notifications.addNotificationResponseReceivedListener((response) => {
+        console.log(response);
+      });
+
+    return () => {
+      Notifications.removeNotificationSubscription(
+        notificationListener.current
+      );
+      Notifications.removeNotificationSubscription(responseListener.current);
+    };
+  }, []);
   useEffect(() => UpdateAsync(), []);
+
   return (
     <SafeAreaProvider>
-      <FavoriteStationProvider>
-        <TrainDelayDataProvider>
-          <CurrentTrainProvider>
-            <AreaInfoProvider>
-              <AllTrainDiagramProvider>
-                <BusAndTrainDataProvider>
-                  <SheetProvider>
-                    <AppContainer />
-                  </SheetProvider>
-                </BusAndTrainDataProvider>
-              </AllTrainDiagramProvider>
-            </AreaInfoProvider>
-          </CurrentTrainProvider>
-        </TrainDelayDataProvider>
-      </FavoriteStationProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <FavoriteStationProvider>
+          <TrainDelayDataProvider>
+            <CurrentTrainProvider>
+              <AreaInfoProvider>
+                <AllTrainDiagramProvider>
+                  <BusAndTrainDataProvider>
+                    <SheetProvider>
+                      <Text onPress={() => Clipboard.setString(expoPushToken)}>
+                        {expoPushToken}
+                      </Text>
+                      <AppContainer />
+                    </SheetProvider>
+                  </BusAndTrainDataProvider>
+                </AllTrainDiagramProvider>
+              </AreaInfoProvider>
+            </CurrentTrainProvider>
+          </TrainDelayDataProvider>
+        </FavoriteStationProvider>
+      </GestureHandlerRootView>
     </SafeAreaProvider>
   );
 }
 export function AppContainer() {
-  const { setBusAndTrainData } = useBusAndTrainData();
+  const { setBusAndTrainData, setTrainPairData } = useBusAndTrainData();
   useEffect(() => {
     AS.getItem("busAndTrain")
       .then((d) => {
@@ -82,6 +159,23 @@ export function AppContainer() {
           });
       });
   }, []);
+  useEffect(() => {
+    AS.getItem("trainPairData")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setTrainPairData(returnData);
+      })
+      .catch(() => {
+        fetch(
+          "https://script.google.com/macros/s/AKfycbyoBH7_rBwzPmhU1ghRBNTAVuvGltIrZtWxE07gDdhGGlDL9Ip2qk3pFM5u2xtRBl8/exec"
+        )
+          .then((d) => d.json())
+          .then((d) => {
+            setTrainPairData(d);
+            AS.setItem("trainPairData", JSON.stringify(d));
+          });
+      });
+  }, []);
 
   const { areaInfo, setAreaInfo } = useAreaInfo();
   const getAreaData = () =>

components/ActionSheetComponents/EachTrainInfo.js

@@ -27,6 +27,11 @@ import {
 import lineColorList from "../../assets/originData/lineColorList";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+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 <></>;
@@ -38,15 +43,148 @@ export const EachTrainInfo = (props) => {
     from,
   } = props.payload;
   const [trainData, setTrainData] = useState([]);
-  const [isTop, setIsTop] = useState(true);
   const [currentPosition, setCurrentPosition] = useState([]);
 
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
 
   const { currentTrain } = useCurrentTrain();
+  const { initializeTrainPairList } = useBusAndTrainData();
 
   const [currentTrainData, setCurrentTrainData] = useState([]);
+  const [nearTrainIDList, setNearTrainIDList] = useState([]);
+  const [showNearTrain, setShowNearTrain] = useState([]);
+  const [isConcatNear, setIsConcatNear] = useState(false);
 
+  //裏列車探索
+  useEffect(() => {
+    const trainPairList = initializeTrainPairList();
+
+    const returnArray = [];
+    if (!data.trainNum) return;
+    if (trainPairList[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) => {
+    console.log(trainData); //trainDataは現在の列車の停車駅リスト
+    console.log(showNearTrain); //showNearTrainは裏列車の停車駅リスト
+    const mainTrainStationPosition = trainData.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+    const relationMain =
+      mainTrainStationPosition == 0
+        ? "head"
+        : mainTrainStationPosition == trainData.length - 1
+        ? "tail"
+        : "middle";
+    console.log(relationMain);
+
+    const subTrainStationPosition = showNearTrain.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+    const relationSub =
+      subTrainStationPosition == 0
+        ? "head"
+        : subTrainStationPosition == showNearTrain.length - 1
+        ? "tail"
+        : "middle";
+    console.log(relationSub);
+    switch (relationMain) {
+      case "head":
+        if (relationSub == "head") {
+          break;
+        } else if (relationSub == "tail") {
+          const migrationTrainData = [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+          setTrainData(migrationTrainData);
+        } else if (relationSub == "middle") {
+          const migrationTrainData = [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+          setTrainData(migrationTrainData);
+        }
+        break;
+      case "tail":
+        if (relationSub == "head") {
+          const migrationTrainData = [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+          setTrainData(migrationTrainData);
+        } else if (relationSub == "tail") {
+          break;
+        } else if (relationSub == "middle") {
+          const migrationTrainData = [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain.slice(subTrainStationPosition),
+          ];
+          setTrainData(migrationTrainData);
+        }
+        break;
+      case "middle":
+        if (relationSub == "head") {
+          const migrationTrainData = [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+          setTrainData(migrationTrainData);
+        } else if (relationSub == "tail") {
+          const migrationTrainData = [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData.slice(mainTrainStationPosition),
+          ];
+          setTrainData(migrationTrainData);
+        }
+        break;
+    }
+    setIsConcatNear(true);
+  };
+
+  const openTrainInfo = (d) => {
+    const train = customTrainDataDetector(d);
+    let TrainNumber = "";
+    if (train.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: d,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+      },
+      navigate,
+      originalStationList,
+      from: "AllTrainDiagramView",
+    };
+    //SheetManager.show("EachTrainInfo", { payload });
+  };
   useEffect(() => {
     setCurrentTrainData(
       checkDuplicateTrainData(
@@ -66,7 +204,7 @@ export const EachTrainInfo = (props) => {
       })
       .catch((d) => AS.setItem("trainPositionSwitch", "false"));
   }, []);
-  const insets = useSafeAreaInsets();
+  //bconst insets = useSafeAreaInsets();
   const getStationData = (stationName) => {
     const Stations = stationList.map((a) =>
       a.filter((d) => d.StationName == stationName)
@@ -232,7 +370,6 @@ export const EachTrainInfo = (props) => {
     trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
 
   useEffect(() => {
-    setIsTop(true);
     if (!data.trainNum) return;
     const TD = trainList[data.trainNum];
     if (!TD) {
@@ -261,19 +398,12 @@ export const EachTrainInfo = (props) => {
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
-      gestureEnabled={isTop}
+      gestureEnabled={true}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
       isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
-      useBottomSafeAreaPadding={Platform.OS == "android"}
+      //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
         style={{
@@ -312,7 +442,9 @@ export const EachTrainInfo = (props) => {
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
             {data.trainNum}
+            {isConcatNear ? ` + ${nearTrainIDList}` : ""}
           </Text>
+
           {data.limited != undefined &&
             getType(data.limited.split(":")[0]) &&
             !data.limited.split(":")[1].match("サンポート") && (
@@ -343,72 +475,66 @@ export const EachTrainInfo = (props) => {
             horizontal
             pagingEnabled
           >
-            <View
+            <TrainDataView
+              currentTrainData={currentTrainData}
+              currentPosition={currentPosition}
+            />
+            {/* <View
               style={{
-                flexDirection: "row",
-                minHeight: 200,
+                flexDirection: "column",
                 height: heightPercentageToDP("20%"),
+                flex: 1,
                 width: widthPercentageToDP("100%"),
               }}
             >
-              <View
-                style={{
-                  flex: 1,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                  現在地 {currentPosition.toString()}
-                </Text>
-                <View style={{ flex: 1 }} />
-                {currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
-                  <>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[0]
-                      }
-                    </Text>
-                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
-                      ～
-                    </Text>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[1]
-                      }
-                    </Text>
-                  </>
-                ) : (
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                  <View style={{ flex: 1 }} />
                   <Text
                     style={{
-                      fontSize: 28,
+                      fontSize: 20,
                       color: "#0099CC",
                       textAlign: "right",
                     }}
                   >
-                    {currentTrainData?.Pos}
+                    岡山
                   </Text>
-                )}
+                </View>
+
+                <View
+                  style={{
+                    flex: 3,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    宇多津でうずしお号と連結
+                  </Text>
+                </View>
               </View>
-              <View style={{ flex: 1, flexDirection: "column" }}>
+              <View style={{ flex: 1, flexDirection: "row" }}>
                 <View
                   style={{
                     flex: 1,
@@ -419,121 +545,21 @@ export const EachTrainInfo = (props) => {
                   }}
                 >
                   <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    {isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+                    編成(使用車両：2700系)
                   </Text>
                   <View style={{ flex: 1 }} />
                   <Text
                     style={{
-                      fontSize: 32,
+                      fontSize: 20,
                       color: "#0099CC",
-                      textAlign: "right",
+                      textAlign: "left",
                     }}
                   >
-                    {currentTrainData?.delay}
-                    {isNaN(currentTrainData?.delay) ? "" : "分"}
-                  </Text>
-                </View>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
-                  <Text
-                    style={{
-                      fontSize: 32,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.num}
+                    {"[<自][自>][アン自|指>][アン指|G>]"}
                   </Text>
                 </View>
               </View>
-            </View>
-            {/* <View
-            style={{
-              flexDirection: "column",
-              height: heightPercentageToDP("20%"),
-              flex: 1,
-              width: widthPercentageToDP("100%"),
-            }}
-          >
-            <View style={{ flex: 1, flexDirection: "row" }}>
-              <View
-                style={{
-                  flex: 1,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: 20,
-                    color: "#0099CC",
-                    textAlign: "right",
-                  }}
-                >
-                  岡山
-                </Text>
-              </View>
-
-              <View
-                style={{
-                  flex: 3,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: 20,
-                    color: "#0099CC",
-                    textAlign: "right",
-                  }}
-                >
-                  宇多津でうずしお号と連結
-                </Text>
-              </View>
-            </View>
-            <View style={{ flex: 1, flexDirection: "row" }}>
-              <View
-                style={{
-                  flex: 1,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                  編成(使用車両：2700系)
-                </Text>
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: 20,
-                    color: "#0099CC",
-                    textAlign: "left",
-                  }}
-                >
-                  {"[<自][自>][アン自|指>][アン指|G>]"}
-                </Text>
-              </View>
-            </View>
-          </View> */}
+            </View> */}
           </ScrollView>
         )}
         <View
@@ -593,14 +619,10 @@ export const EachTrainInfo = (props) => {
             maxHeight: heightPercentageToDP(
               from == "AllTrainDiagramView" ? "70%" : "50%"
             ),
-          }}
-          onScroll={(e) => {
-            if (!Platform.OS !== "android") return;
-            setIsTop(e.nativeEvent.contentOffset.y < 0);
+            backgroundColor: "white",
           }}
         >
-          <View style={{ backgroundColor: "white", alignItems: "center" }}>
-            {/* <LottieView
+          {/* <LottieView
                 autoPlay
                 loop
                 style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@@ -608,164 +630,32 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-            {trainData.map((i, index) => {
-              const [station, se, time] = i.split(",");
-              const Stations = stationList.map((a) =>
-                a.filter((d) => d.StationName == station)
-              );
-              const StationNumbers =
-                Stations &&
-                Stations.reduce((newArray, e) => {
-                  return newArray.concat(e);
-                }, [])
-                  .filter((d) => d.StationNumber)
-                  .map((d) => d.StationNumber);
+          {trainData.map((i, index) => (
+            <StationButton
+              i={i}
+              index={index}
+              stationList={stationList}
+              points={points}
+              currentTrainData={currentTrainData}
+              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+              headAndTail={showNearTrain.map((d) => d.split(",")[0])}
+              openBackTrainInfo={openBackTrainInfo}
+              isConcatNear={isConcatNear}
+            />
+          ))}
 
-              const colorIDs =
-                StationNumbers != null
-                  ? StationNumbers.map((d) => {
-                      return d.split("").filter((s) => "A" < s && s < "Z");
-                    }).reduce((newArray, e) => {
-                      return newArray.concat(e);
-                    }, [])
-                  : [];
-              const EachIDs =
-                StationNumbers != null
-                  ? StationNumbers.map((d) => {
-                      return d
-                        .split("")
-                        .filter((s) => "0" <= s && s <= "9")
-                        .join("");
-                    })
-                  : [];
-              const date = new Date();
-              if (time) {
-                date.setHours(time.split(":")[0], time.split(":")[1]);
-              }
-              if (!isNaN(currentTrainData?.delay)) {
-                date.setMinutes(date.getMinutes() + currentTrainData?.delay);
-              }
-              const timeString = date.toTimeString().split(" ")[0].split(":");
-              return (
-                <TouchableWithoutFeedback
-                  onPress={() => openStationACFromEachTrainInfo(station)}
-                  key={station}
-                >
-                  <View style={{ flexDirection: "row" }}>
-                    <View
-                      style={{
-                        width: 35,
-                        position: "relative",
-                        marginHorizontal: 15,
-                        flexDirection: "row",
-                        height: "101%",
-                      }}
-                    >
-                      {colorIDs.map((color, index) => (
-                        <View
-                          style={{
-                            backgroundColor: lineColorList[color],
-                            flex: 1,
-                          }}
-                          key={color}
-                        >
-                          <View style={{ flex: 1 }} />
-                          <Text
-                            style={{
-                              color: "white",
-                              textAlign: "center",
-                              fontSize: 10,
-                              fontWeight: "bold",
-                            }}
-                          >
-                            {colorIDs[index]}
-                          </Text>
-                          <Text
-                            style={{
-                              color: "white",
-                              textAlign: "center",
-                              fontSize: 10,
-                              fontWeight: "bold",
-                            }}
-                          >
-                            {EachIDs[index]}
-                          </Text>
-                          <View style={{ flex: 1 }} />
-                        </View>
-                      ))}
-                    </View>
-                    <View
-                      style={{
-                        padding: 8,
-                        flexDirection: "row",
-                        borderBottomWidth: 1,
-                        borderBottomColor: "#f0f0f0",
-                        flex: 1,
-                      }}
-                    >
-                      <Text style={{ fontSize: 20 }}>{station}</Text>
-                      <View style={{ flex: 1 }} />
-                      {points && points.findIndex((d) => d == index) >= 0 ? (
-                        <Text
-                          style={{
-                            fontSize: 20,
-                            marginRight: 70,
-                          }}
-                        >
-                          🚊
-                        </Text>
-                      ) : null}
-                      {!isNaN(currentTrainData?.delay) &&
-                        currentTrainData?.delay != 0 && (
-                          <Text
-                            style={{
-                              fontSize: 15,
-                              color: "black",
-                              width: 60,
-                              position: "absolute",
-                              right: 120,
-                              textAlign: "right",
-                              textDecorationLine: "line-through",
-                            }}
-                          >
-                            {time}
-                          </Text>
-                        )}
-                      <Text
-                        style={{
-                          fontSize: 20,
-                          color: isNaN(currentTrainData?.delay)
-                            ? "black"
-                            : currentTrainData?.delay == 0
-                            ? "black"
-                            : "red",
-                          width: 60,
-                        }}
-                      >
-                        {timeString[0]}:{timeString[1]}
-                      </Text>
-                      <Text style={{ fontSize: 18, width: 50 }}>
-                        {se?.replace("発", "出発").replace("着", "到着")}
-                      </Text>
-                    </View>
-                  </View>
-                </TouchableWithoutFeedback>
-              );
-            })}
-
-            <View style={{ flexDirection: "row" }}>
-              <View
-                style={{
-                  padding: 8,
-                  flexDirection: "row",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#f0f0f0",
-                  flex: 1,
-                }}
-              >
-                <Text style={{ fontSize: 20 }}> </Text>
-                <View style={{ flex: 1 }} />
-              </View>
+          <View style={{ flexDirection: "row" }}>
+            <View
+              style={{
+                padding: 8,
+                flexDirection: "row",
+                borderBottomWidth: 1,
+                borderBottomColor: "#f0f0f0",
+                flex: 1,
+              }}
+            >
+              <Text style={{ fontSize: 20 }}> </Text>
+              <View style={{ flex: 1 }} />
             </View>
           </View>
         </ScrollView>
@@ -773,3 +663,234 @@ export const EachTrainInfo = (props) => {
     </ActionSheet>
   );
 };
+
+const StationButton = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+  headAndTail,
+  openBackTrainInfo,
+  isConcatNear,
+}) => {
+  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
+  const Stations = stationList
+    .map((a) => a.filter((d) => d.StationName == station))
+    .reduce((newArray, e) => newArray.concat(e), []);
+  /*Array [
+      Object {
+        "StationName": "佐古",
+        "StationNumber": "T01",
+      },
+      Object {
+        "StationName": "佐古",
+        "StationNumber": "B01",
+      },
+    ] */
+  const StationNumbers =
+    Stations &&
+    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
+  // Array [  "T01",  "B01",]
+  const lineIDs = [];
+  const EachIDs = [];
+  StationNumbers.forEach((d) => {
+    const textArray = d.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+  // Array [  "T",  "B",]
+  // Array [  "01",  "01",]
+
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .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}
+      >
+        <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+          <View
+            style={{
+              width: 35,
+              position: "relative",
+              marginHorizontal: 15,
+              flexDirection: "row",
+              height: "101%",
+            }}
+          >
+            {lineIDs.map((lineID, index) => (
+              <View
+                style={{
+                  backgroundColor: lineColorList[lineID],
+                  flex: 1,
+                }}
+                key={lineID}
+              >
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    color: "white",
+                    textAlign: "center",
+                    fontSize: 10,
+                    fontWeight: "bold",
+                  }}
+                >
+                  {lineIDs[index]}
+                  {"\n"}
+                  {EachIDs[index]}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ))}
+          </View>
+          <View
+            style={{
+              padding: 8,
+              flexDirection: "row",
+              borderBottomWidth: 1,
+              borderBottomColor: "#f0f0f0",
+              borderRightColor: isConnected && !isConcatNear ? "red" : "white",
+              borderRightWidth: 10,
+              paddingRight: 10,
+              flex: 1,
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>{station}</Text>
+            <View style={{ flex: 1 }} />
+            {points && points.findIndex((d) => d == index) >= 0 ? (
+              <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
+            ) : null}
+            {!isNaN(currentTrainData?.delay) &&
+              currentTrainData?.delay != 0 && (
+                <Text
+                  style={{
+                    fontSize: 15,
+                    color: "black",
+                    width: 60,
+                    position: "absolute",
+                    right: 120,
+                    textAlign: "right",
+                    textDecorationLine: "line-through",
+                  }}
+                >
+                  {time}
+                </Text>
+              )}
+            <Text
+              style={{
+                fontSize: 20,
+                color: isNaN(currentTrainData?.delay)
+                  ? "black"
+                  : currentTrainData?.delay == 0
+                  ? "black"
+                  : "red",
+                width: 60,
+              }}
+            >
+              {timeString[0]}:{timeString[1]}
+            </Text>
+            <Text style={{ fontSize: 18, width: 50 }}>
+              {se?.replace("発", "出発").replace("着", "到着")}
+            </Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </Swipeable>
+  );
+};
+
+const TrainDataView = ({ currentTrainData, currentPosition }) => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        minHeight: 200,
+        height: heightPercentageToDP("20%"),
+        width: widthPercentageToDP("100%"),
+      }}
+    >
+      <StateBox
+        title={`現在地 ${currentPosition.toString()}`}
+        text={
+          currentTrainData?.Pos.match("～")
+            ? `${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[0]
+              }～${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[1]
+              }`
+            : currentTrainData?.Pos
+        }
+      />
+      <View style={{ flex: 1, flexDirection: "column" }}>
+        <StateBox
+          title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+          text={`${currentTrainData?.delay}${
+            isNaN(currentTrainData?.delay) ? "" : "分"
+          }`}
+        />
+        <StateBox title="列番" text={currentTrainData?.num} />
+      </View>
+    </View>
+  );
+};
+
+const StateBox = ({ text, title }) => (
+  <View style={boxStyle}>
+    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <View style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
+      {text?.match("～") ? (
+        <>
+          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
+          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
+        </>
+      ) : (
+        <Text style={boxTextStyle}>{text}</Text>
+      )}
+    </View>
+  </View>
+);
+const boxStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxTextStyle = {
+  fontSize: 28,
+  color: "#0099CC",
+  textAlign: "right",
+};

stateBox/useBusAndTrainData.js

@@ -2,6 +2,9 @@ import React, { createContext, useContext, useState } from "react";
 const initialState = {
   busAndTrainData: [],
   setBusAndTrainData: () => {},
+  trainPairData: [],
+  setTrainPairData: () => {},
+  initializeTrainPairList: () => {},
 };
 
 const BusAndTrainDataContext = createContext(initialState);
@@ -12,10 +15,23 @@ export const useBusAndTrainData = () => {
 
 export const BusAndTrainDataProvider = ({ children }) => {
   const [busAndTrainData, setBusAndTrainData] = useState([]);
-
+  const [trainPairData, setTrainPairData] = useState([]);
+  const initializeTrainPairList = () => {
+    const trainPairList = {};
+    trainPairData.forEach((d) => {
+      trainPairList[Object.keys(d)[0]] = d[Object.keys(d)[0]];
+    });
+    return trainPairList;
+  };
   return (
     <BusAndTrainDataContext.Provider
-      value={{ busAndTrainData, setBusAndTrainData }}
+      value={{
+        busAndTrainData,
+        setBusAndTrainData,
+        trainPairData,
+        setTrainPairData,
+        initializeTrainPairList,
+      }}
     >
       {children}
     </BusAndTrainDataContext.Provider>