LEDから列車視点版への移動が可能に

App.js

@@ -110,6 +110,18 @@ function menuPage() {
         }}
       />
       <Stack.Screen name="setting" component={Setting} options={optionData} />
+      <Stack.Screen
+        name="trainbase"
+        component={trainbase}
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+          gestureResponseDistance: { vertical: 300 },
+        }}
+      />
     </Stack.Navigator>
   );
 }

Apps.js

@@ -109,7 +109,7 @@ export default function Apps(props) {
 
   const onMessage = (event) => {
     if (!event.nativeEvent.data.includes("PopUpMenu")) {
-      navigate("trainbase", { info: event.nativeEvent.data });
+      navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
       return;
     }
     if (!originalStationList) {

components/発車時刻表/LED_vidion.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { customTrainDataDetector } from "../custom-train-data";
@@ -92,7 +92,6 @@ export default function LED_vision(props) {
         returnData[key] = trainDiagram[key];
       }
     });
-    console.log(returnData);
     setStationDiagram(returnData);
   }, [trainDiagram, props.station]);
 
@@ -132,7 +131,6 @@ export default function LED_vision(props) {
       });
       return { train: d, time: a.time, lastStation: a.lastStation };
     });
-    console.log(returnData);
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
@@ -152,7 +150,6 @@ export default function LED_vision(props) {
   useEffect(() => {
     //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
     if (objectIsEmpty(stationDiagram)) return () => {};
-    console.log(stationDiagram);
     const getTimeData = getTime(stationDiagram, props.station);
     setTrainTimeAndNumber(getTimeData);
   }, [stationDiagram]);
@@ -173,18 +170,7 @@ export default function LED_vision(props) {
 
     return false;
   };
-  const getTrainType = (data) => {
-    switch (data) {
-      case "Rapid":
-        return { color: "aqua", name: "快速" };
-      case "LTDEXP":
-        return { color: "red", name: "特急" };
-      case "NightLTDEXP":
-        return { color: "red", name: "寝台特急" };
-      case "Normal":
-        return { color: "white", name: "普通列車" };
-    }
-  };
+
   const [selectedTrain, setSelectedTrain] = useState([]);
   useEffect(() => {
     if (!trainTimeAndNumber) return () => {};
@@ -194,7 +180,7 @@ export default function LED_vision(props) {
       .filter(timeFiltering)
       .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
     setSelectedTrain(data);
-  }, [trainTimeAndNumber, currentTrain]);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
   return (
     <View
       style={{
@@ -213,8 +199,8 @@ export default function LED_vision(props) {
           trainDescriptionSwitch={trainDescriptionSwitch}
           props={props}
           currentTrain={currentTrain}
-          getTrainType={getTrainType}
           customTrainDataDetector={customTrainDataDetector}
+          navigate={props.navigate}
         />
       ))}
       <Footer
@@ -310,13 +296,25 @@ const EachData = ({
   trainDescriptionSwitch,
   props,
   currentTrain,
-  getTrainType,
   customTrainDataDetector,
+  navigate,
 }) => {
+  const getTrainType = (data) => {
+    switch (data) {
+      case "Rapid":
+        return { color: "aqua", name: "快速" };
+      case "LTDEXP":
+        return { color: "red", name: "特急" };
+      case "NightLTDEXP":
+        return { color: "red", name: "寝台特急" };
+      case "Normal":
+        return { color: "white", name: "普通列車" };
+    }
+  };
   const train = customTrainDataDetector(d.train);
   return (
     <>
-      <View
+      <TouchableOpacity
         style={{
           alignContent: "center",
           alignItems: "center",
@@ -326,6 +324,14 @@ const EachData = ({
           backgroundColor: "#000",
           flexDirection: "row",
         }}
+        onPress={() => {
+          if (train.type != "Normal") {
+            navigate("trainbase", {
+              info: "train.html?tn=" + d.train,
+              from: "LED",
+            });
+          }
+        }}
       >
         <TrainName
           train={train}
@@ -336,7 +342,7 @@ const EachData = ({
         <LastStation d={d} />
         <DependTime d={d} />
         <StatusAndDelay currentTrain={currentTrain} d={d} props={props} />
-      </View>
+      </TouchableOpacity>
       {trainDescriptionSwitch && !!train.info && <Description train={train} />}
     </>
   );

menu.js

@@ -160,7 +160,7 @@ export default function Menu(props) {
               originalStationList={originalStationList}
               oP={StationBoardAcSR.current?.setModalVisible}
             />
-            <LED_vision station={currentStation[0]} />
+            <LED_vision station={currentStation[0]} navigate={navigate} />
           </>
         )}
         <JRSTraInfoBox

trainbaseview.js

@@ -1,9 +1,18 @@
 import React, { Component, useRef } from "react";
-import { StatusBar, Platform, View } from "react-native";
+import {
+  StatusBar,
+  Platform,
+  View,
+  TouchableOpacity,
+  Text,
+} from "react-native";
 import { WebView } from "react-native-webview";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 
-export default function TrainBase({ route }) {
-  const { info } = route.params;
+export default function TrainBase({ route, navigation }) {
+  const { info, from } = route.params;
+  const { navigate } = navigation;
+  console.log(info);
   const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${
@@ -28,6 +37,27 @@ export default function TrainBase({ route }) {
         setSupportMultipleWindows={false}
         onMessage={(event) => {}}
       />
+      {from == "LED" && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "black",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() => navigate("menu")}
+        >
+          <View style={{ flex: 1 }} />
+          <MaterialCommunityIcons name="close" color="black" size={30} />
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
+            閉じる
+          </Text>
+          <View style={{ flex: 1 }} />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }