From 32e61a824bfe061a402b2a2f9f142574c08f92cc Mon Sep 17 00:00:00 2001
From: harukin-OneMix4 <harukin@haruk.in>
Date: Tue, 6 Feb 2024 16:19:30 +0900
Subject: [PATCH] =?UTF-8?q?EachTrainInfo=E3=82=92=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=83=95=E3=82=A1?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E5=88=86=E5=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionSheetComponents/EachTrainInfo.js    | 269 +-----------------
 .../EachTrainInfo/DataFromButton.js           |  36 +++
 .../EachTrainInfo/EachStopList.js             | 137 +++++++++
 .../EachTrainInfo/StateBox.js                 |  32 +++
 .../EachTrainInfo/TrainDataView.js            |  74 +++++
 5 files changed, 283 insertions(+), 265 deletions(-)
 create mode 100644 components/ActionSheetComponents/EachTrainInfo/DataFromButton.js
 create mode 100644 components/ActionSheetComponents/EachTrainInfo/EachStopList.js
 create mode 100644 components/ActionSheetComponents/EachTrainInfo/StateBox.js
 create mode 100644 components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index 0c961c5..829d91a 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -21,13 +21,15 @@ import {
   heightPercentageToDP,
   widthPercentageToDP,
 } from "react-native-responsive-screen";
-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 { EachStopList } from "./EachTrainInfo/EachStopList";
+import { DataFromButton } from "./EachTrainInfo/DataFromButton";
+import { TrainDataView } from "./EachTrainInfo/TrainDataView";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -647,7 +649,7 @@ export const EachTrainInfo = (props) => {
             i.split(",")[1] == "提" ? (
               <DataFromButton i={i} />
             ) : (
-              <StationButton
+              <EachStopList
                 i={i}
                 index={index}
                 stationList={stationList}
@@ -697,266 +699,3 @@ export const EachTrainInfo = (props) => {
     </ActionSheet>
   );
 };
-
-const DataFromButton = ({ i }) => {
-  const [station, se, time] = i.split(",");
-  return (
-    <TouchableWithoutFeedback
-      onPress={() => Linking.openURL(time)}
-      key={station}
-    >
-      <View style={{ flexDirection: "row" }}>
-        <View
-          style={{
-            padding: 8,
-            flexDirection: "row",
-            borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
-            flex: 1,
-          }}
-        >
-          <Text style={{ fontSize: 20 }}>{station}</Text>
-          <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 18 }}>
-            提供元
-            <MaterialCommunityIcons
-              name={"open-in-new"}
-              color="black"
-              size={20}
-            />
-          </Text>
-        </View>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};
-
-const StationButton = ({
-  i,
-  index,
-  stationList,
-  points,
-  currentTrainData,
-  openStationACFromEachTrainInfo,
-}) => {
-  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(":");
-
-  return (
-    <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",
-            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>
-  );
-};
-
-const TrainDataView = ({
-  currentTrainData,
-  currentPosition,
-  nearTrainIDList,
-  openTrainInfo,
-}) => {
-  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" }}>
-        <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, style }) => (
-  <View style={{ ...boxStyle, ...style }}>
-    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
-    <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 25, 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: 25,
-  color: "#0099CC",
-  textAlign: "right",
-};
diff --git a/components/ActionSheetComponents/EachTrainInfo/DataFromButton.js b/components/ActionSheetComponents/EachTrainInfo/DataFromButton.js
new file mode 100644
index 0000000..664a8bf
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/DataFromButton.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+export const DataFromButton = ({ i }) => {
+  const [station, se, time] = i.split(",");
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => Linking.openURL(time)}
+      key={station}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <View
+          style={{
+            padding: 8,
+            flexDirection: "row",
+            borderBottomWidth: 1,
+            borderBottomColor: "#f0f0f0",
+            flex: 1,
+          }}
+        >
+          <Text style={{ fontSize: 20 }}>{station}</Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 18 }}>
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
+          </Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
diff --git a/components/ActionSheetComponents/EachTrainInfo/EachStopList.js b/components/ActionSheetComponents/EachTrainInfo/EachStopList.js
new file mode 100644
index 0000000..218a025
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/EachStopList.js
@@ -0,0 +1,137 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import dayjs from "dayjs";
+import lineColorList from "../../../assets/originData/lineColorList";
+
+export const EachStopList = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+}) => {
+  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(":");
+
+  return (
+    <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",
+            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>
+  );
+};
diff --git a/components/ActionSheetComponents/EachTrainInfo/StateBox.js b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
new file mode 100644
index 0000000..933b930
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const StateBox = ({ text, title, style }) => (
+  <View style={{ ...boxStyle, ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <View style={{ fontSize: 25, 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: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};
diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
new file mode 100644
index 0000000..a98ca15
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
@@ -0,0 +1,74 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { StateBox } from "./StateBox";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+
+export const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  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" }}>
+        <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>
+  );
+};