列車情報表示機能の詳細デザイン作成

Apps.js

@@ -140,7 +140,7 @@ export default function Apps({
 
         if (returnDataBase.length) {
           setStationBoardData(returnDataBase);
-          StationBoardAcSR.current?.setModalVisible();
+          StationBoardAcSR.current?.show();
         } else {
           setStationBoardData(undefined);
           StationBoardAcSR.current?.hide();
@@ -151,7 +151,7 @@ export default function Apps({
         const { trainNum, limited } = dataSet;
         //alert(trainNum, limited);
         setTrainInfo({ trainNum, limited });
-        EachTrainInfoAsSR.current?.setModalVisible();
+        EachTrainInfoAsSR.current?.show();
         return;
       }
       default: {
@@ -179,7 +179,48 @@ export default function Apps({
       }
     }
   };
+  function sleep(waitSec, callbackFunc) {
+    // 経過時間（秒）
+    var spanedSec = 0;
 
+    // 1秒間隔で無名関数を実行
+    var id = setInterval(function () {
+      spanedSec++;
+
+      // 経過時間 >= 待機時間の場合、待機終了。
+      if (spanedSec >= waitSec) {
+        // タイマー停止
+        clearInterval(id);
+
+        // 完了時、コールバック関数を実行
+        if (callbackFunc) callbackFunc();
+      }
+    }, 1);
+  }
+
+  const openStationACFromEachTrainInfo = (stationName) => {
+    EachTrainInfoAsSR.current?.hide();
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      setStationBoardData(returnDataBase);
+      sleep(8, function () {
+        StationBoardAcSR.current?.show();
+      });
+    } else {
+      setStationBoardData(undefined);
+      StationBoardAcSR.current?.hide();
+    }
+  };
   return (
     <View
       style={{
@@ -235,7 +276,6 @@ export default function Apps({
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
       />
 
-      <EachTrainInfo setRef={EachTrainInfoAsSR} data={trainInfo} />
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}
@@ -249,6 +289,13 @@ export default function Apps({
           navigate("Apps");
         }}
       />
+      <EachTrainInfo
+        setRef={EachTrainInfoAsSR}
+        data={trainInfo}
+        navigate={navigate}
+        originalStationList={originalStationList}
+        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+      />
     </View>
   );
 }

components/ActionSheetComponents/EachTrainInfo.js

@@ -6,14 +6,33 @@ import {
   Linking,
   Text,
   TouchableOpacity,
+  TouchableWithoutFeedback,
+  TouchableHighlight,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import trainList from "../../assets/originData/trainList";
+import { lineList } from "../../lib/getStationList";
+import { heightPercentageToDP } from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
 
-export const EachTrainInfo = ({ setRef, data }) => {
+export const EachTrainInfo = ({
+  setRef,
+  data,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
+}) => {
   const [trainData, setTrainData] = useState([]);
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
 
   useEffect(() => {
     if (!data.trainNum) return;
@@ -75,17 +94,26 @@ export const EachTrainInfo = ({ setRef, data }) => {
           <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
             {data.trainNum}
           </Text>
-          <Ionicons
+          {data.limited != undefined &&
-            name="reload"
+            getType(data.limited.split(":")[0]) &&
-            color="white"
+            !data.limited.split(":")[1].match("サンポート") && (
-            size={30}
+              <Ionicons
-            style={{ margin: 5 }}
+                name="subway"
-            onPress={() => {
+                color="white"
-              LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+                size={30}
-            }}
+                style={{ margin: 5 }}
-          />
+                onPress={() => {
+                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+
+                  navigate("trainbase", {
+                    info: "train.html?tn=" + data.trainNum,
+                  });
+                  setRef.current?.hide();
+                }}
+              />
+            )}
         </View>
-        <ScrollView>
+        <ScrollView style={{ maxHeight: heightPercentageToDP("70%") }}>
           <View
             style={{
               padding: 10,
@@ -103,7 +131,102 @@ export const EachTrainInfo = ({ setRef, data }) => {
               />
               <Text>ほげほげふがふが</Text> */}
               {trainData.map((i, index) => {
-                return <Text>{i}</Text>;
+                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);
+
+                const colorIDs =
+                  StationNumbers != null
+                    ? StationNumbers.map((d) => {
+                        console.log(d);
+                        return d.split("").filter((s) => "A" < s && s < "Z");
+                      }).reduce((newArray, e) => {
+                        return newArray.concat(e);
+                      }, [])
+                    : [];
+                const EachIDs =
+                  StationNumbers != null
+                    ? StationNumbers.map((d) => {
+                        console.log(d);
+                        return d
+                          .split("")
+                          .filter((s) => "0" <= s && s <= "9")
+                          .join("");
+                      })
+                    : [];
+                return (
+                  <TouchableWithoutFeedback
+                    onPress={() => openStationACFromEachTrainInfo(station)}
+                    key={station}
+                  >
+                    <View
+                      style={{
+                        padding: 8,
+                        flexDirection: "row",
+                        borderBottomWidth: 1,
+                        borderBottomColor: "#f0f0f0",
+                        paddingLeft: 60,
+                      }}
+                    >
+                      <View
+                        style={{
+                          width: 40,
+                          height: 40,
+                          position: "absolute",
+                          left: 10,
+                          top: 0,
+                          flexDirection: "row",
+                        }}
+                      >
+                        {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>
+                      <Text style={{ fontSize: 20 }}>{station}</Text>
+                      <View style={{ flex: 1 }} />
+                      <Text style={{ fontSize: 20 }}>
+                        {time} {se}
+                      </Text>
+                    </View>
+                  </TouchableWithoutFeedback>
+                );
               })}
             </View>
           </View>