LEDの枠に位置情報ジャンプボタンを追加

components/FavoriteList.tsx

@@ -8,11 +8,13 @@ import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { FavoriteListItem } from "./atom/FavoriteListItem";
 import { BigButton } from "./atom/BigButton";
+import { useStationList } from "@/stateBox/useStationList";
 export const FavoriteList: FC = () => {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const { mapsStationData: stationData } = useTrainMenu();
+  const { getInjectJavascriptAddress } = useStationList();
 
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
@@ -38,27 +40,16 @@ export const FavoriteList: FC = () => {
       </Text>
       <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
         {favoriteStation
-          .filter((d) => d[0].StationMap)
           .map((currentStation) => {
             return (
               <FavoriteListItem
                 currentStation={currentStation}
                 onPress={() => {
-                  const getStationLine = (now) => {
-                    const returnData = Object.keys(stationData).filter((d) => {
-                      const cache = stationData[d].findIndex(
-                        (data) => data.Station_JP == now.Station_JP
-                      );
-                      return cache != -1;
-                    });
-                    return returnData[0];
-                  };
-                  const lineName = getStationLine(currentStation[0]);
-
-                  webview.current?.injectJavaScript(
-                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}');
-                    document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
+                  const scriptString = getInjectJavascriptAddress(
+                    currentStation[0].StationNumber
                   );
+                  if (!scriptString) return;
+                  webview.current?.injectJavaScript(scriptString);
                   goBack();
                   if (canGoBack()) goBack();
                 }}

components/発車時刻表/LED_Vision_Component/Header.js

@@ -1,48 +1,74 @@
 import { View, Text } from "react-native";
 import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
 import LottieView from "lottie-react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, AntDesign } from "@expo/vector-icons";
+import { useStationList } from "@/stateBox/useStationList";
+import { useNavigation } from "@react-navigation/native";
 
-export const Header = () => {
-    const { currentTrainLoading, setCurrentTrainLoading,getCurrentTrain } = useCurrentTrain();
-    return (
-      <View
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "100%",
-          marginVertical: 10,
-          flexDirection: "row",
-        }}
-      >
-        <View style={{ flex: 1 }}></View>
-        <View style={{}}>
-          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
-            次の列車
-          </Text>
-          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
-        </View>
-        <View style={{ flex: 1, flexDirection: "row-reverse" }}>
-          {currentTrainLoading == "loading" ? (
-            <LottieView
-              autoPlay
-              loop
-              style={{ width: 40, height: 40, marginRight: 30 }}
-              source={require("../../../assets/51690-loading-diamonds.json")}
-            />
-          ) : currentTrainLoading == "error" ? (
-            <Ionicons
-              name="reload"
-              color="white"
-              size={30}
-              style={{ marginRight: 30 }}
-              onPress={() => {
-                setCurrentTrainLoading("loading");
-                getCurrentTrain();
-              }}
-            />
-          ) : null}
-        </View>
+export const Header = ({ station }) => {
+  const {
+    currentTrainLoading,
+    setCurrentTrainLoading,
+    getCurrentTrain,
+    inject,
+  } = useCurrentTrain();
+  const { getInjectJavascriptAddress } = useStationList();
+  const { navigate } = useNavigation();
+  return (
+    <View
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "100%",
+        marginVertical: 10,
+        flexDirection: "row",
+      }}
+    >
+      <View style={{ flex: 1, flexDirection: "column", alignItems: "center" }}>
+        <AntDesign
+          name={"barchart"}
+          size={20}
+          color={"white"}
+          style={{
+            borderWidth: 1,
+            borderColor: "white",
+            padding: 10,
+            borderRadius: 10,
+          }}
+          onPress={() => {
+            navigate("positions", { screen: "Apps" });
+            const script = getInjectJavascriptAddress(station.StationNumber);
+            inject(script);
+          }}
+        />
       </View>
-    );
-  };
+      <View style={{}}>
+        <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+          次の列車
+        </Text>
+        <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
+      </View>
+      <View style={{ flex: 1, flexDirection: "row-reverse" }}>
+        {currentTrainLoading == "loading" ? (
+          <LottieView
+            autoPlay
+            loop
+            style={{ width: 40, height: 40, marginRight: 30 }}
+            source={require("../../../assets/51690-loading-diamonds.json")}
+          />
+        ) : currentTrainLoading == "error" ? (
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ marginRight: 30 }}
+            onPress={() => {
+              setCurrentTrainLoading("loading");
+              getCurrentTrain();
+            }}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};

components/発車時刻表/LED_vidion.js

@@ -222,7 +222,7 @@ export default function LED_vision(props) {
         marginHorizontal: width * 0.01,
       }}
     >
-      <Header />
+      <Header station={station[0]} />
       {selectedTrain.map((d) => (
         <EachData
           {...{

stateBox/useCurrentTrain.js

@@ -15,6 +15,7 @@ const initialState = {
   currentTrainLoading: "loading",
   setCurrentTrainLoading: () => {},
   getCurrentTrain: () => {},
+  inject: () => {},
 };
 
 const CurrentTrainContext = createContext(initialState);