From df7608acaf71e2e5eec3239af976cfb6826746ac Mon Sep 17 00:00:00 2001
From: harukin-OneMix4 <harukin@haruk.in>
Date: Tue, 27 Jun 2023 00:57:14 +0900
Subject: [PATCH] =?UTF-8?q?EachTrainInfo=E8=A1=A8=E9=9D=A2=E3=82=92?=
 =?UTF-8?q?=E4=BB=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Apps.js                                       | 11 +++
 .../ActionSheetComponents/EachTrainInfo.js    | 90 +++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 components/ActionSheetComponents/EachTrainInfo.js

diff --git a/Apps.js b/Apps.js
index 25dadb1..a146969 100644
--- a/Apps.js
+++ b/Apps.js
@@ -15,6 +15,7 @@ import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { getStationList2 } from "./lib/getStationList2";
+import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -35,6 +36,13 @@ export default function Apps({
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
 
+  //列車情報表示関連
+  const EachTrainInfoAsSR = useRef(null);
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+  });
+
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
@@ -142,6 +150,8 @@ export default function Apps({
       case "ShowTrainTimeInfo": {
         const { trainNum, limited } = dataSet;
         //alert(trainNum, limited);
+        setTrainInfo({ trainNum, limited });
+        EachTrainInfoAsSR.current?.setModalVisible();
         return;
       }
       default: {
@@ -225,6 +235,7 @@ export default function Apps({
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
       />
 
+      <EachTrainInfo setRef={EachTrainInfoAsSR} data={trainInfo} />
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}
diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
new file mode 100644
index 0000000..c3dd567
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+export const EachTrainInfo = (props) => {
+  const { setRef, data } = props;
+  console.log(data);
+  return (
+    <ActionSheet ref={setRef} gestureEnabled CustomHeaderComponent={<></>}>
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.limited ? data.limited : ""}
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.trainNum}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => {
+              LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+            }}
+          />
+        </View>
+        <ScrollView>
+          <View
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 5,
+              borderBottomRightRadius: 5,
+            }}
+          >
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text>
+            </View>
+          </View>
+
+          <View style={{ padding: 10 }}>
+            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+              列車遅延情報EXについて
+            </Text>
+            <Text style={{ color: "white" }}>
+              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+            </Text>
+          </View>
+        </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};