From dfdd9a7f3749cc16092babe2af8113b2f4113c83 Mon Sep 17 00:00:00 2001
From: harukin-OneMix4 <harukin@haruk.in>
Date: Fri, 7 Jul 2023 22:29:31 +0900
Subject: [PATCH] =?UTF-8?q?=E6=A8=AA=E6=96=B9=E5=90=91=E3=83=A1=E3=83=8B?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E8=BF=BD=E5=8A=A0(=E7=8F=BE=E6=99=82?=
 =?UTF-8?q?=E7=82=B9=E3=81=A7=E3=81=AF=E6=8E=A1=E7=94=A8=E3=81=97=E3=81=AA?=
 =?UTF-8?q?=E3=81=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionSheetComponents/EachTrainInfo.js    | 256 ++++++++++++------
 1 file changed, 177 insertions(+), 79 deletions(-)

diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index d906cf1..a4be3b5 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -15,7 +15,10 @@ 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 {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
 import lineColorList from "../../assets/originData/lineColorList";
 
 export const EachTrainInfo = ({
@@ -225,61 +228,22 @@ export const EachTrainInfo = ({
               />
             )}
         </View>
-        <View
-          style={{ flexDirection: "row", height: heightPercentageToDP("20%") }}
+        <ScrollView
+          style={{
+            flexDirection: "row",
+            //width: widthPercentageToDP("200%"),
+            height: heightPercentageToDP("20%"),
+          }}
+          horizontal
+          pagingEnabled
         >
           <View
             style={{
-              flex: 1,
-              backgroundColor: "white",
-              borderRadius: 10,
-              padding: 10,
-              margin: 10,
+              flexDirection: "row",
+              height: heightPercentageToDP("20%"),
+              width: widthPercentageToDP("100%"),
             }}
           >
-            <Text style={{ fontSize: 15, color: "#0099CC" }}>
-              現在地 {currentPosition.toString()}
-            </Text>
-            <View style={{ flex: 1 }} />
-            {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
-              <>
-                <Text
-                  style={{
-                    fontSize: 28,
-                    color: "#0099CC",
-                    textAlign: "right",
-                  }}
-                >
-                  {
-                    data.trainData?.Pos.replace("（下り）", "")
-                      .replace("（上り）", "")
-                      .split("～")[0]
-                  }
-                </Text>
-                <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
-                <Text
-                  style={{
-                    fontSize: 28,
-                    color: "#0099CC",
-                    textAlign: "right",
-                  }}
-                >
-                  {
-                    data.trainData?.Pos.replace("（下り）", "")
-                      .replace("（上り）", "")
-                      .split("～")[1]
-                  }
-                </Text>
-              </>
-            ) : (
-              <Text
-                style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
-              >
-                {data.trainData?.Pos}
-              </Text>
-            )}
-          </View>
-          <View style={{ flex: 1, flexDirection: "column" }}>
             <View
               style={{
                 flex: 1,
@@ -290,42 +254,176 @@ export const EachTrainInfo = ({
               }}
             >
               <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                現在地 {currentPosition.toString()}
               </Text>
               <View style={{ flex: 1 }} />
-              <Text
-                style={{
-                  fontSize: 32,
-                  color: "#0099CC",
-                  textAlign: "right",
-                }}
-              >
-                {data.trainData?.delay}
-                {isNaN(data.trainData?.delay) ? "" : "分"}
-              </Text>
+              {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
+                <>
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {
+                      data.trainData?.Pos.replace("（下り）", "")
+                        .replace("（上り）", "")
+                        .split("～")[0]
+                    }
+                  </Text>
+                  <Text style={{ color: "#0099CC", textAlign: "right" }}>
+                    ～
+                  </Text>
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {
+                      data.trainData?.Pos.replace("（下り）", "")
+                        .replace("（上り）", "")
+                        .split("～")[1]
+                    }
+                  </Text>
+                </>
+              ) : (
+                <Text
+                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
+                >
+                  {data.trainData?.Pos}
+                </Text>
+              )}
             </View>
-            <View
-              style={{
-                flex: 1,
-                backgroundColor: "white",
-                borderRadius: 10,
-                padding: 10,
-                margin: 10,
-              }}
-            >
-              <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
-              <Text
+            <View style={{ flex: 1, flexDirection: "column" }}>
+              <View
                 style={{
-                  fontSize: 32,
-                  color: "#0099CC",
-                  textAlign: "right",
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
                 }}
               >
-                {data.trainData?.num}
-              </Text>
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                  {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                </Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 32,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  {data.trainData?.delay}
+                  {isNaN(data.trainData?.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",
+                  }}
+                >
+                  {data.trainData?.num}
+                </Text>
+              </View>
             </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>
+        </ScrollView>
         <ScrollView
           style={{ maxHeight: heightPercentageToDP("55%") }}
           nestedScrollEnabled