Merge commit 'c7487d38dba1f34e3f4fbe4a2071c4e7b227fce5' into develop

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -25,7 +25,7 @@ export const TrainDataView = ({
 
   const { width, height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
-  const { inject } = useCurrentTrain();
+  const { setInjectData } = useCurrentTrain();
 
   const { allCustomTrainData } = useAllTrainDiagram();
   const [mapsStationData, setMapsStationData] = useState(undefined);
@@ -150,27 +150,18 @@ export const TrainDataView = ({
         <TouchableOpacity
           style={{ flex: 1, flexDirection: "row" }}
           //disabled={!onLine}
-          onLongPress={openEditWindow}
+          //onLongPress={openEditWindow}
+          onLongPress={()=>{
+            if (!onLine) return;
+            setInjectData({ type:"train", value:currentTrainData?.num, fixed:true});
+            navigate("positions", { screen: "Apps" });
+            SheetManager.hide("EachTrainInfo");
+          }}
           onPress={() => {
             if (!onLine) return;
-            const test = [];
+            setInjectData({ type: "station", value: currentPosition[0], fixed: false });
-            Object.keys(mapsStationData).forEach((d) => {
+            
-              mapsStationData[d].forEach((x) => {
-                if (x.StationNumber == currentPosition[0])
-                  test.push({ line: d, station: x });
-              });
-              if (currentPosition[0] == "M12") {
-                test.push({
-                  line: "seto",
-                  station: { Station_JP: "児島", MyStation: "0" },
-                });
-              }
-            });
-            if (!test.length) return;
             navigate("positions", { screen: "Apps" });
-            inject(
-              `MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
-            );
             SheetManager.hide("EachTrainInfo");
           }}
         >

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -42,7 +42,8 @@ export const EachTrainInfoCore = ({
   from,
   navigate,
 }) => {
-  const { currentTrain } = useCurrentTrain();
+  const { currentTrain, getCurrentStationData, getPosition } =
+    useCurrentTrain();
   const { originalStationList, stationList } = useStationList();
   const { allTrainDiagram: trainList, allCustomTrainData } =
     useAllTrainDiagram();
@@ -50,13 +51,10 @@ export const EachTrainInfoCore = ({
   const [currentTrainData, setCurrentTrainData] = useState();
 
   useEffect(() => {
-    if (!currentTrain.length) return;
+    const stationData = getCurrentStationData(data.trainNum);
-    setCurrentTrainData(
+    if (stationData) {
-      checkDuplicateTrainData(
+      setCurrentTrainData(stationData);
-        currentTrain.filter((d) => d.num == data.trainNum),
+    }
-        stationList
-      )
-    );
   }, [currentTrain, data.trainNum]);
 
   useEffect(() => {
@@ -205,7 +203,10 @@ export const EachTrainInfoCore = ({
     setHeadStation([]);
     setTailStation([]);
     if (!TD) {
-      const specialTrainActualIDs = searchSpecialTrain(data.trainNum, trainList);
+      const specialTrainActualIDs = searchSpecialTrain(
+        data.trainNum,
+        trainList
+      );
       setTrueTrainID(specialTrainActualIDs || []);
       setTrainData([]);
       return;
@@ -247,71 +248,8 @@ export const EachTrainInfoCore = ({
   }, [trainData, data]);
 
   useEffect(() => {
-    //currentTrainData.Pos = "鴨川～端岡"; //test
+    const position = getPosition(currentTrainData);
-    if (!currentTrainData) return;
+    if (position) setCurrentPosition(position);
-    if (!currentTrainData?.Pos) return;
-    if (currentTrainData?.Pos.match("～")) {
-      const pos = currentTrainData?.Pos.replace("（下り）", "")
-        .replace("（上り）", "")
-        .replace("（徳島線）", "")
-        .replace("（高徳線）", "")
-        .split("～");
-      const direction = parseInt(currentTrainData?.Direction) || 0;
-      if (pos[0] == "児島" && pos[1] == "宇多津") {
-        setCurrentPosition(["M12", "Y09"]);
-        return;
-      } else if (pos[1] == "児島" && pos[0] == "宇多津") {
-        setCurrentPosition(["Y09", "M12"]);
-        return;
-      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
-        setCurrentPosition(["S18", "S14"]);
-        return;
-      } else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
-        setCurrentPosition(["S14", "S18"]);
-        return;
-      } else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
-        setCurrentPosition(["U14", "U14"]);
-        return;
-      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
-        setCurrentPosition(["U14", "U14"]);
-        return;
-      }
-      const currentPosID = Object.keys(originalStationList).map((key) => {
-        let firstStation = false;
-        let firstStationID = "";
-        let secondStation = false;
-        let secondStationID = "";
-        originalStationList[key].forEach((station) => {
-          if (station.Station_JP === pos[0]) {
-            firstStation = true;
-            firstStationID = station.StationNumber;
-          }
-          if (station.Station_JP === pos[1]) {
-            secondStation = true;
-            secondStationID = station.StationNumber;
-          }
-        });
-        if (firstStation && secondStation) {
-          return [firstStationID, secondStationID];
-        } else return false;
-      });
-      const currentPos = currentPosID.filter((d) => d != false)[0];
-      if (currentPos) {
-        setCurrentPosition(direction == 0 ? currentPos.reverse() : currentPos);
-      } else if (direction == 0) {
-        setCurrentPosition([
-          getStationID(pos[1], stationList),
-          getStationID(pos[0], stationList),
-        ]);
-      } else {
-        setCurrentPosition([
-          getStationID(pos[0], stationList),
-          getStationID(pos[1], stationList),
-        ]);
-      }
-    } else {
-      setCurrentPosition([getStationID(currentTrainData?.Pos, stationList)]);
-    }
   }, [currentTrainData]);
 
   useEffect(() => {
@@ -393,7 +331,12 @@ export const EachTrainInfoCore = ({
         containerProps={{
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
-            backgroundColor:getTrainType(customTrainDataDetector(data.trainNum, allCustomTrainData).type).data === "notService" ? "#777777ff" :"white"
+            backgroundColor:
+              getTrainType(
+                customTrainDataDetector(data.trainNum, allCustomTrainData).type
+              ).data === "notService"
+                ? "#777777ff"
+                : "white",
           },
         }}
         shortHeader={
@@ -424,7 +367,13 @@ export const EachTrainInfoCore = ({
           />
         }
       >
-        {getTrainType(customTrainDataDetector(data.trainNum, allCustomTrainData).type).data === "notService" &&<Text style={{backgroundColor:"#ffffffc2",fontWeight:"bold"}}>この列車には乗車できません。</Text>}
+        {getTrainType(
+          customTrainDataDetector(data.trainNum, allCustomTrainData).type
+        ).data === "notService" && (
+          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
+            この列車には乗車できません。
+          </Text>
+        )}
         {headStation.length != 0 &&
           headStation.map((i, index) =>
             showHeadStation.findIndex((d) => d == index) == -1 ? (
@@ -473,10 +422,11 @@ export const EachTrainInfoCore = ({
               borderWidth: 1,
               margin: 10,
               borderRadius: 5,
-              alignItems: "center", backgroundColor:"#ffffffc2"
+              alignItems: "center",
+              backgroundColor: "#ffffffc2",
             }}
           >
-            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black",}}>
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
               Twitterで検索
             </Text>
           </TouchableOpacity>
@@ -494,12 +444,14 @@ export const EachTrainInfoCore = ({
                 currentTrainData,
                 openStationACFromEachTrainInfo,
                 showThrew,
-                key: i + "-stop"
               }}
+              key={i + "-stop"}
             />
           )
         )}
-        <Text style={{backgroundColor:"#ffffffc2"}}>時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。</Text>
+        <Text style={{ backgroundColor: "#ffffffc2" }}>
+          時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
+        </Text>
         {tailStation.length != 0 &&
           tailStation.map(({ station, dia }, index) =>
             showTailStation.findIndex((d) => d == index) == -1 ? (

components/ActionSheetComponents/StationDeteilView/StationTrainPositionButton.tsx

@@ -1,6 +1,5 @@
 import { FC } from "react";
 import { TouchableOpacity, View, Text, Linking } from "react-native";
-import { useStationList } from "@/stateBox/useStationList";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import AntDesign from "react-native-vector-icons/AntDesign";
 type Props = {
@@ -10,10 +9,7 @@ type Props = {
 };
 export const StationTrainPositionButton: FC<Props> = (props) => {
   const { stationNumber, onExit, navigate } = props;
-  const {
+  const { setInjectData } = useCurrentTrain();
-    inject,
-  } = useCurrentTrain();
-  const { getInjectJavascriptAddress } = useStationList();
   return (
     <TouchableOpacity
       style={{
@@ -23,12 +19,16 @@ export const StationTrainPositionButton: FC<Props> = (props) => {
         alignContent: "center",
         alignItems: "center",
         margin: 2,
-        flex: 1
+        flex: 1,
+      }}
+      onLongPress={() => {
+        navigate("positions", { screen: "Apps" });
+        setInjectData({ type: "station", value:stationNumber, fixed: true });
+        onExit();
       }}
       onPress={() => {
         navigate("positions", { screen: "Apps" });
-        const script = getInjectJavascriptAddress(stationNumber);
+        setInjectData({ type: "station", value: stationNumber, fixed: false });
-        inject(script);
         onExit();
       }}
     >

components/Apps.js

@@ -4,6 +4,7 @@ import {
   Platform,
   useWindowDimensions,
   LayoutAnimation,
+  Text,
 } from "react-native";
 import Constants from "expo-constants";
 import * as Updates from "expo-updates";
@@ -23,6 +24,7 @@ import { MapsButton } from "./Apps/MapsButton";
 import { ReloadButton } from "./Apps/ReloadButton";
 import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
 import { useStationList } from "../stateBox/useStationList";
+import { FixedPositionBox } from "./Apps/FixedPositionBox";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -30,7 +32,7 @@ var Status = StatusbarDetect(); */
 const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 
 export default function Apps() {
-  const { webview } = useCurrentTrain();
+  const { webview, fixedPosition, setFixedPosition } = useCurrentTrain();
   const { height, width } = useWindowDimensions();
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
@@ -125,6 +127,10 @@ export default function Apps() {
           }}
         />
       )}
+      {fixedPosition.type && (
+        <FixedPositionBox />
+      )}
+
       {mapSwitch == "true" ? (
         <ReloadButton
           onPress={() => Updates.reloadAsync()}

components/Apps/FixedPositionBox.tsx

@@ -0,0 +1,31 @@
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { View, Platform } from "react-native";
+import Constants from "expo-constants";
+import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
+import { FixedStation } from "./FixedPositionBox/FixedStationBox";
+
+export const FixedPositionBox = () => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        borderRadius: 5,
+        zIndex: 1500,
+        width: "100%",
+        height: 50,
+        flexDirection: "row",
+      }}
+    >
+      {fixedPosition.type === "station" && (
+        <FixedStation stationID={fixedPosition.value} />
+      )}
+      {fixedPosition.type === "train" && (
+        <FixedTrain trainID={fixedPosition.value} />
+      )}
+    </View>
+  );
+};
+

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -0,0 +1,354 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { customTrainDataDetector } from "@/components/custom-train-data";
+import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
+import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
+import { typeID } from "@/lib/getStringConfig";
+import { getTrainDelayStatus } from "@/lib/getTrainDelayStatus";
+import { getTrainType } from "@/lib/getTrainType";
+import { objectIsEmpty } from "@/lib/objectIsEmpty";
+import { trainPosition } from "@/lib/trainPositionTextArray";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useAreaInfo } from "@/stateBox/useAreaInfo";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList, StationProps } from "@/stateBox/useStationList";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+export const FixedStation = ({ stationID }) => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+  const { getStationDataFromId } = useStationList();
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromId(stationID);
+    setStation(data);
+  }, [stationID]);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "white";
+  ////
+
+  const timeFiltering = (d) => {
+    const baseTime = 2;
+    if (currentTrain.filter((t) => t.num == d.train).length == 0) {
+      const date = dayjs();
+      const trainTime = date
+        .hour(parseInt(d.time.split(":")[0]))
+        .minute(parseInt(d.time.split(":")[1]));
+
+      if (date.isAfter(trainTime)) {
+        return false;
+      } else if (trainTime.diff(date) < baseTime * 60 * 60 * 1000) {
+        return true;
+      }
+      return false;
+    } else {
+      const Pos = trainPosition(
+        currentTrain.filter((t) => t.num == d.train)[0]
+      );
+      const nextPos = Pos.isBetween ? Pos.Pos.to : Pos.Pos.Pos;
+      const PrePos = Pos.isBetween ? Pos.Pos.from : "";
+      if (station[0].Station_JP == nextPos) {
+        if (d.lastStation != station[0].Station_JP) return true;
+      } else if (station[0].Station_JP == PrePos) {
+        return false;
+      }
+      let [h, m] = d.time.split(":");
+      let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay)
+        ? 0
+        : currentTrain.filter((t) => t.num == d.train)[0].delay;
+      const date = dayjs();
+      let targetHour = parseInt(h);
+
+      // 4時を日付変更線として処理
+      if (targetHour < 4) {
+        targetHour += 24;
+      }
+
+      let currentHour = date.hour();
+      if (currentHour < 4) {
+        currentHour += 24;
+      }
+
+      const db = dayjs()
+        .hour(targetHour)
+        .minute(parseInt(m) + parseInt(delay));
+      const currentTime = dayjs().hour(currentHour);
+
+      return !currentTime.isAfter(db);
+    }
+  };
+  type trainDataProps = {
+    train?: string;
+    lastStation?: string;
+    time?: string;
+    isThrough?: boolean;
+  };
+  const getTime = (stationDiagram, station) => {
+    const returnData = Object.keys(stationDiagram)
+      .map((trainNum) => {
+        let trainData: trainDataProps = {};
+        stationDiagram[trainNum].split("#").forEach((data) => {
+          if (data.match("着")) {
+            trainData.lastStation = data.split(",着,")[0];
+          }
+          if (data.match("着編")) {
+            trainData.lastStation = data.split(",着編,")[0];
+          }
+          if (data.split(",")[0] === station.Station_JP) {
+            if (data.match(",発,")) {
+              trainData.time = data.split(",発,")[1];
+            } else if (data.match(",発編,")) {
+              trainData.time = data.split(",発編,")[1];
+            } else if (data.match(",通編,")) {
+              trainData.time = data.split(",通編,")[1];
+              trainData.isThrough = true;
+            } else if (data.match(",着,")) {
+              trainData.time = data.split(",着,")[1];
+            } else if (data.match(",着編,")) {
+              trainData.time = data.split(",着編,")[1];
+            }
+          }
+        });
+        return {
+          train: trainNum,
+          time: trainData.time,
+          lastStation: trainData.lastStation,
+          isThrough: trainData.isThrough,
+        };
+      })
+      .filter((d) => d.time);
+    return returnData.sort((a, b) => {
+      switch (true) {
+        case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
+          return -1;
+        case parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0]):
+          return 1;
+        case parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1]):
+          return -1;
+        case parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1]):
+          return 1;
+        default:
+          return 0;
+      }
+    });
+  };
+
+  const { allTrainDiagram } = useAllTrainDiagram();
+  const { areaInfo, areaStationID } = useAreaInfo();
+  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
+  const [isInfoArea, setIsInfoArea] = useState(false);
+  const { currentTrain } = useCurrentTrain();
+
+  useEffect(() => {
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
+    if (!allTrainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    if (station.length == 0) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(allTrainDiagram).forEach((key) => {
+      if (allTrainDiagram[key].match(station[0].Station_JP + ",")) {
+        returnData[key] = allTrainDiagram[key];
+      }
+    });
+    setStationDiagram(returnData);
+    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
+  }, [allTrainDiagram, station]);
+
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState([]);
+
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station[0]);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
+  const [selectedTrain, setSelectedTrain] = useState<
+    {
+      isThrough?: boolean;
+      train?: string;
+      lastStation?: string;
+      time?: string;
+    }[]
+  >([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) //現在の列車に絞る[ToDo]
+      .filter(timeFiltering).filter(d=>!d.isThrough)
+      .filter((d) =>  d.lastStation != station[0].Station_JP) //最終列車表示設定
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
+
+  return (
+    <TouchableOpacity
+      style={{ flex: 1, flexDirection: "row" }}
+      onPress={() => {
+        setFixedPosition({ type: null, value: null });
+      }}
+    >
+      <View
+        style={{
+          flex: 3,
+          flexDirection: "column",
+          alignContent: "center",
+          alignSelf: "center",
+          alignItems: "center",
+          height: "100%",
+          backgroundColor: "white",
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: lineColor,
+            flexDirection: "row",
+            width: "100%",
+            alignContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <StationNumberMaker
+            currentStation={station}
+            singleSize={18}
+            useEach={true}
+          />
+          <Text
+            style={{
+              fontSize: 18,
+              textAlignVertical: "center",
+              margin: 0,
+              padding: 0,
+              flex: 1,
+              color:"white"
+            }}
+          >
+            {station[0]?.Station_JP}
+          </Text>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: lineColor,
+              borderTopColor: lineColor,
+              borderBottomColor: "white",
+              borderBottomWidth: 16,
+              borderLeftWidth: 8,
+              borderRightWidth: 0,
+              borderTopWidth: 5,
+              height: "100%",
+            }}
+          />
+        </View>
+        <View
+          style={{
+            height: "100%",
+            backgroundColor: "white",
+            flex: 1,
+          }}
+        >
+          <Text style={{ fontSize: 20 }}>次の発車予定：</Text>
+        </View>
+      </View>
+
+      <View
+        style={{
+          flex: 5,
+          flexDirection: "column",
+          backgroundColor: "white",
+          borderTopWidth: 5,
+          borderTopColor: lineColor,
+          overflow: "hidden",
+        }}
+      >
+        {selectedTrain.length > 0 ? (
+          selectedTrain.map((d) => (
+            <FixedStationBoxEachTrain
+              d={d}
+              station={station[0]}
+              key={d.train + "-fixedStationBox"}
+            />
+          ))
+        ) : (
+          <View style={{ backgroundColor: "white", flex: 1 }}>
+            <Text style={{ fontSize: 20 }}>
+              当駅を発着する走行中の列車はありません。
+            </Text>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const FixedStationBoxEachTrain = ({ d, station }) => {
+  const { currentTrain } = useCurrentTrain();
+  const { stationList } = useStationList();
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const currentTrainData = checkDuplicateTrainData(
+    currentTrain.filter((a) => a.num == d.train),
+    stationList
+  );
+
+  const trainDelayStatus = `${getTrainDelayStatus(
+    currentTrainData,
+    station.Station_JP
+  )}`;
+  const getTrainDataFromCurrentTrain = (trainNum: string) => {
+    const customTrainData = customTrainDataDetector(
+      d.train,
+      allCustomTrainData
+    );
+    switch (customTrainData.type) {
+      case "Normal":
+      case "OneMan":
+        const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
+        if (currentTrainData.length == 0) return customTrainData;
+        else if (currentTrainData[0].Type.includes("rapid:")) {
+          const typeText = currentTrainData[0].Type.split(":");
+          const returnData = {
+            type: "Rapid",
+            trainName: typeText[1].replace("\r", ""),
+            trainIcon: null,
+            trainNumDistance: null,
+            info: "",
+          };
+          return returnData;
+        }
+        return customTrainData;
+      default:
+        return customTrainData;
+    }
+  };
+  const [train, setTrain] = useState<{
+    ToData: string;
+    TrainNumber: string;
+    id: string;
+    img: string;
+    isWanman: boolean;
+    trainName: string;
+    trainNumDistance: number;
+    type: typeID;
+    viaData: string;
+    info?: string;
+    uwasa?: string;
+  }>(getTrainDataFromCurrentTrain(d.train));
+  useEffect(() => {
+    setTrain(getTrainDataFromCurrentTrain(d.train));
+  }, [currentTrain, d.train]);
+  const { name, color } = getTrainType(train.type, true);
+  return (
+    <View style={{ backgroundColor: "white", flexDirection: "row",height:"33%",overflow:"visible" }}>
+      <Text style={{ fontSize: 14, flex: 3 }}>{d.time}</Text>
+      <Text style={{ fontSize: 14, flex: 4, color }}>{name}</Text>
+      <Text style={{ fontSize: 14, flex: 4 }}>{d.lastStation}行</Text>
+      <Text style={{ fontSize: 14, flex: 3 }}>{trainDelayStatus}</Text>
+    </View>
+  );
+};

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -0,0 +1,525 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList, StationProps } from "@/stateBox/useStationList";
+import { FC, useEffect, useState } from "react";
+import { Text, TouchableOpacity, View, Image } from "react-native";
+import { customTrainDataDetector } from "../../custom-train-data";
+import { getStringConfig, typeID } from "@/lib/getStringConfig";
+import { getTrainType } from "@/lib/getTrainType";
+import { trainPosition } from "@/lib/trainPositionTextArray";
+import { StationNumberMaker } from "../../駅名表/StationNumberMaker";
+import { lineListPair, stationIDPair } from "@/lib/getStationList";
+import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
+
+type props = {
+  trainID: string;
+};
+
+export const FixedTrain: FC<props> = ({ trainID }) => {
+  const {
+    fixedPosition,
+    setFixedPosition,
+    currentTrain,
+    getCurrentStationData,
+    getPosition,
+  } = useCurrentTrain();
+  const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
+
+  const getTrainDataFromCurrentTrain = (trainNum: string) => {
+    const customTrainData = customTrainDataDetector(
+      trainNum,
+      allCustomTrainData
+    );
+    switch (customTrainData.type) {
+      case "Normal":
+      case "OneMan":
+        const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
+        if (currentTrainData.length == 0) return customTrainData;
+        else if (currentTrainData[0].Type.includes("rapid:")) {
+          const typeText = currentTrainData[0].Type.split(":");
+          const returnData = {
+            type: "Rapid",
+            trainName: typeText[1].replace("\r", ""),
+            trainIcon: null,
+            trainNumDistance: null,
+            info: "",
+          };
+          return returnData;
+        }
+        return customTrainData;
+      default:
+        return customTrainData;
+    }
+  };
+  const [train, setTrain] = useState<{
+    Pos?: string;
+    Direction?: number;
+    Index?: number;
+    Line?: string;
+    PosNum?: number;
+    Type?: string;
+    delay?: string | number;
+    num?: string;
+  }>(null);
+  const [customData, setCustomData] = useState<{
+    ToData: string;
+    TrainNumber: string;
+    id: string;
+    img: string;
+    isWanman: boolean;
+    trainName: string;
+    trainNumDistance: number;
+    type: typeID;
+    viaData: string;
+    info?: string;
+    uwasa?: string;
+  }>(getTrainDataFromCurrentTrain(trainID));
+  useEffect(() => {
+    setCustomData(getTrainDataFromCurrentTrain(trainID));
+  }, [currentTrain, trainID]);
+  useEffect(() => {
+    const stationData = getCurrentStationData(trainID);
+    if (stationData) {
+      setTrain(stationData);
+    }
+  }, [trainID, currentTrain]);
+
+  const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
+
+  const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
+    []
+  );
+
+  useEffect(() => {
+    const trainData = allTrainDiagram[trainID]?.split("#");
+    if (!trainData) return;
+    //let haveThrough = false;
+    //
+    const stopStationList = trainData.map((i) => {
+      const [station, se, time] = i.split(",");
+      //if (se == "通編") setHaveThrough(true);
+      return stationList.map((a) => a.filter((d) => d.StationName == station));
+    });
+    const allThroughStationList = stopStationList.map((i, index, array) => {
+      let allThroughStation = [];
+      if (index == array.length - 1) return;
+
+      const firstItem = array[index];
+      const secondItem = array[index + 1];
+      let betweenStationLine = "";
+      let baseStationNumberFirst = "";
+      let baseStationNumberSecond = "";
+      Object.keys(stationIDPair).forEach((d, index2, array) => {
+        if (!d) return;
+        const haveFirst = firstItem[index2];
+        const haveSecond = secondItem[index2];
+        if (haveFirst.length && haveSecond.length) {
+          betweenStationLine = d;
+          baseStationNumberFirst = haveFirst[0].StationNumber;
+          baseStationNumberSecond = haveSecond[0].StationNumber;
+        }
+      });
+      if (!betweenStationLine) return;
+      let reverse = false;
+      originalStationList[
+        lineListPair[stationIDPair[betweenStationLine]]
+      ].forEach((d) => {
+        if (
+          d.StationNumber > baseStationNumberFirst &&
+          d.StationNumber < baseStationNumberSecond
+        ) {
+          allThroughStation.push(`${d.Station_JP},通過,`);
+          //setHaveThrough(true);
+          reverse = false;
+        } else {
+          if (
+            d.StationNumber < baseStationNumberFirst &&
+            d.StationNumber > baseStationNumberSecond
+          ) {
+            allThroughStation.push(`${d.Station_JP},通過,`);
+            //setHaveThrough(true);
+            reverse = true;
+          }
+        }
+      });
+      if (reverse) allThroughStation.reverse();
+      return allThroughStation;
+    });
+    let mainArray = [...trainData];
+    let indexs = 0;
+    trainData.forEach((d, index, array) => {
+      indexs = indexs + 1;
+      if (!allThroughStationList[index]) return;
+      if (allThroughStationList[index].length == 0) return;
+      mainArray.splice(indexs, 0, ...allThroughStationList[index]);
+      indexs = indexs + allThroughStationList[index].length;
+    });
+    setTrainDataWithThrough(mainArray);
+  }, [allTrainDiagram, stationList, trainID]);
+  const stopStationIDList = trainDataWidhThrough.map((i) => {
+    const [station, se, time] = i.split(",");
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == station)
+    );
+    const StationNumbers =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, []).map((d) => d.StationNumber);
+    return StationNumbers;
+  });
+  const [currentPosition, setCurrentPosition] = useState([]);
+
+  useEffect(() => {
+    const position = getPosition(train);
+    if (position) setCurrentPosition(position);
+  }, [train]);
+
+  const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
+  const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const points = findReversalPoints(currentPosition, stopStationIDList);
+    if (!points) return;
+    if (points.length == 0) return;
+    let searchCountBase = points.findIndex((d) => d == true);
+    for (
+      let searchCount = searchCountBase;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      console.log(trainDataWidhThrough[searchCount]);
+      const nextPos = trainDataWidhThrough[searchCount];
+      if (nextPos) {
+        const [station, se, time] = nextPos.split(",");
+        if (se.includes("通")) continue;
+        else {
+          setNextStationData(getStationDataFromName(station));
+          break;
+        }
+      }
+    }
+    let trainList = [];
+    for (
+      let searchCount = searchCountBase - 1;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      trainList.push(trainDataWidhThrough[searchCount]);
+    }
+    setUntilStationData(trainList);
+  }, [currentPosition, trainDataWidhThrough]);
+  const [ToData, setToData] = useState("");
+  useEffect(() => {
+    if (customData.ToData && customData.ToData != "") {
+      setToData(customData.ToData);
+    } else {
+      if (trainDataWidhThrough.length == 0) return;
+      setToData(
+        trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
+      );
+    }
+  }, [customData, trainDataWidhThrough]);
+  const [stringConfig, setStringConfig] = useState([, ,]);
+  useEffect(() => {
+    const x = getStringConfig(customData.type, customData.TrainNumber);
+    setStringConfig(x);
+  }, [customData]);
+
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromName(ToData);
+    setStation(data);
+  }, [ToData]);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "black";
+  return (
+    <TouchableOpacity
+      style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
+      onPress={() => {
+        setFixedPosition({ type: null, value: null });
+      }}
+    >
+      <View
+        style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }}
+      >
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <View
+            style={{
+              backgroundColor: getTrainType(customData.type, true).color,
+              flexDirection: "row",
+              alignContent: "center",
+              alignSelf: "center",
+              height: "100%",
+            }}
+          >
+            <Image
+              source={{ uri: customData.img }}
+              width={14}
+              height={17}
+              style={{ margin: 5 }}
+            />
+            <View
+              style={{
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 14,
+                  fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
+                  fontWeight: !stringConfig[1] ? "bold" : undefined,
+                  marginTop: stringConfig[1] ? 3 : 0,
+                  color: "white",
+                  textAlignVertical: "center",
+                  textAlign: "center",
+                }}
+              >
+                {stringConfig[0]}
+              </Text>
+              {customData.trainName && (
+                <Text
+                  style={{
+                    fontSize: customData?.trainName?.length > 6 ? 9 : 14,
+                    color: "white",
+                    maxWidth: 65,
+                    textAlignVertical: "center",
+                  }}
+                >
+                  {customData.trainName}
+                </Text>
+              )}
+            </View>
+            <View
+              style={{
+                backgroundColor: getTrainType(customData.type, true).color,
+                width: 10,
+                borderLeftColor: getTrainType(customData.type, true).color,
+                borderTopColor: lineColor,
+                borderBottomColor: lineColor,
+                borderTopWidth: 14,
+                borderBottomWidth: 14,
+                borderLeftWidth: 10,
+                borderRightWidth: 0,
+              }}
+            ></View>
+          </View>
+          <View
+            style={{
+              flexDirection: "row",
+              alignContent: "center",
+              alignSelf: "center",
+              height: "100%",
+              backgroundColor: lineColor,
+              flex: 1,
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
+                alignItems: "center",
+              }}
+            >
+              <StationNumberMaker
+                currentStation={station}
+                singleSize={20}
+                useEach={true}
+              />
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: "white",
+                  fontWeight: "bold",
+                  textAlignVertical: "center",
+                  margin: 0,
+                  padding: 0,
+                  height: "100%",
+                }}
+              >
+                {ToData}行
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View
+          style={{
+            backgroundColor: "black",
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 10,
+              fontWeight: "bold",
+              color: "white",
+              marginHorizontal: 5,
+            }}
+          >
+            {nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
+          </Text>
+          <StationNumberMaker
+            currentStation={nextStationData}
+            singleSize={20}
+            useEach={true}
+          />
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: "bold",
+              color: "white",
+              flex: 1,
+            }}
+          >
+            {nextStationData[0]?.Station_JP || "不明"}
+          </Text>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: "black",
+              borderTopColor: "black",
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 25,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+            }}
+          ></View>
+        </View>
+      </View>
+      <CurrentPositionBox
+        train={train}
+        lineColor={lineColor}
+        trainDataWithThrough={untilStationData}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
+  let firstText = "";
+  let secondText = "";
+  let marginText = "";
+  let externalText = "";
+  const { isBetween, Pos: PosData } = trainPosition(train);
+  if (isBetween === true) {
+    const { from, to } = PosData;
+    firstText = from;
+    secondText = to;
+    marginText = "→";
+  } else {
+    const { Pos } = PosData;
+    if (Pos !== "") {
+      firstText = Pos;
+    }
+  }
+  return (
+    <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
+      <View style={{ flexDirection: "column", height: "100%" }}>
+        <View
+          style={{
+            backgroundColor: "white",
+            width: 10,
+            borderLeftColor: lineColor,
+            borderTopColor: lineColor,
+            borderBottomColor: "white",
+            borderRightColor: "white",
+            borderTopWidth: 25,
+            borderBottomWidth: 0,
+            borderLeftWidth: 0,
+            borderRightWidth: 10,
+            flex: 1,
+          }}
+        ></View>
+        <View
+          style={{
+            backgroundColor: "white",
+            width: 10,
+            borderLeftColor: "white",
+            borderTopColor: "white",
+            borderBottomColor: "white",
+            borderRightColor: "white",
+            borderTopWidth: 25,
+            borderBottomWidth: 0,
+            borderLeftWidth: 0,
+            borderRightWidth: 10,
+            flex: 1,
+          }}
+        ></View>
+      </View>
+      <View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}>
+        {trainDataWithThrough.length > 0 &&
+          trainDataWithThrough.map((d, index, array) => {
+            if (!d) return null;
+            if (d == "") return null;
+            const [station, se, time] = d.split(",");
+            return (
+              <>
+                {(index == 0 && secondText == "") || <View
+                  style={{
+                    flexDirection: "column",
+                    backgroundColor: "#6e6e6eff",
+                    borderRadius: 10,
+                    marginHorizontal: 2,
+                    padding: 2,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    overflow: "hidden",
+                  }}
+                >
+                  {station.split("").map((i, index) => {
+                    return (
+                      <Text
+                        key={index}
+                        style={{
+                          fontSize: 6,
+                          color: "white",
+                          margin: 0,
+                          padding: 0,
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {i}
+                      </Text>
+                    );
+                  })}
+                  <View style={{ flex: 1 }} />
+                  <Text style={{ fontSize: 8, color: "white" }}>
+                    {se.includes("通") ? "" : "●"}
+                  </Text>
+                </View>}
+                {(index == 0 && secondText != "") && (
+                  <View
+                    style={{
+                      flexDirection: "column",
+                      backgroundColor: "#6e6e6e0e",
+                      borderRadius: 10,
+                      marginHorizontal: 2,
+                      padding: 2,
+                      justifyContent: "center",
+                      alignItems: "center",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <View style={{ flex: 1 }} />
+                    <Text style={{ fontSize: 8, color: "black" }}>＞</Text>
+                  </View>
+                )}
+              </>
+            );
+          })}
+      </View>
+    </View>
+  );
+};

components/Apps/MapsButton.tsx

@@ -37,6 +37,7 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch == "true" ? "flex" : "none",
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Apps/ReloadButton.tsx

@@ -38,6 +38,7 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch,
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Apps/WebView.jsx

@@ -23,7 +23,8 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape } = useDeviceOrientationChange();
-  const { originalStationList, stationList, getInjectJavascriptAddress } = useStationList();
+  const { originalStationList, stationList, getInjectJavascriptAddress } =
+    useStationList();
   const {
     setSelectedLine,
     mapsStationData: stationData,
@@ -51,7 +52,6 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
         break;
     }
   };
-
   const onMessage = (event) => {
     const { data } = event.nativeEvent;
     /**
@@ -137,7 +137,9 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
     if (!stationData) return () => {};
     if (!originalStationList) return () => {};
     if (favoriteStation.length < 1) return () => {};
-    const string = getInjectJavascriptAddress(favoriteStation[0][0].StationNumber);
+    const string = getInjectJavascriptAddress(
+      favoriteStation[0][0].StationNumber
+    );
     if (!string) return () => {};
     webview?.current.injectJavaScript(string);
     once = true;

components/Menu/StationPagination.tsx

@@ -3,20 +3,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { useInterval } from "../../lib/useInterval";
 
 import lineColorList from "../../assets/originData/lineColorList";
-
+import { StationProps } from "@/stateBox/useStationList";
-type StationProps = {
-  DispNum: string;
-  JrHpUrl: string;
-  MyStation: string;
-  StationMap: string;
-  StationNumber: string | null;
-  StationTimeTable: string;
-  Station_EN: string;
-  Station_JP: string;
-  jslodApi: string;
-  lat: number;
-  lng: number;
-};
 type StationNumberProps = {
   currentStation: StationProps[];
   active: boolean;

components/駅名表/Sign.js

@@ -197,9 +197,7 @@ export default function Sign(props) {
           source={require("../../assets/StationSign.json")}
         />
       )}
-      <StationNumberMaker
+      <StationNumberMaker {...{ currentStation: currentStationData }} />
-        {...{ currentStation: currentStationData, isMatsuyama }}
-      />
       <StationNameArea
         {...{ currentStation: currentStationData, isMatsuyama }}
       />

components/駅名表/StationNumberMaker.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { FC } from "react";
 import { Text, View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import lineColorList from "../../assets/originData/lineColorList";
+import { StationProps } from "@/stateBox/useStationList";
 
-export const StationNumberMaker = (props) => {
+type props = {
-  const { currentStation, isMatsuyama } = props;
+  currentStation: StationProps[];
+  useEach?: boolean;
+  singleSize?: number;
+};
+export const StationNumberMaker: FC<props> = (props) => {
+  const { currentStation, useEach = false, singleSize } = props;
   const { width } = useWindowDimensions();
   const getTop = (array: number[], index: number) => {
     if (array.length == 1) return 20;
@@ -12,7 +18,7 @@ export const StationNumberMaker = (props) => {
     else if (index == 1) return 35;
     else return 20;
   };
-  return currentStation
+  return <>{currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => {
       const lineID = d.StationNumber.slice(0, 1);
@@ -20,29 +26,41 @@ export const StationNumberMaker = (props) => {
       return (
         <View
           style={{
-            position: "absolute",
             alignContent: "center",
             alignItems: "center",
-            top: `${getTop(array, index)}%`,
-            right: "10%",
-            width: (width / 100 * 10),
-            height: (width / 100 * 10),
             borderColor: lineColorList[lineID],
             backgroundColor: "white",
+            ...(useEach ? {
+            width: singleSize,
+            height: singleSize,
+            borderWidth: parseInt("1%"),
+            borderRadius: parseInt("100%"),
+          } : {
+            width: (width / 100) * 10,
+            height: (width / 100) * 10,
             borderWidth: parseInt("3%"),
             borderRadius: parseInt("100%"),
+            position: "absolute",
+            top: `${getTop(array, index)}%`,
+            right: "10%"
+          })
           }}
           key={array[index].StationNumber}
         >
           <View style={{ flex: 1 }} />
           <Text
             style={{
-              fontSize: parseInt("13%"),
               margin: 0,
               padding: 0,
               textAlign: "center",
               color: "black",
               fontWeight: "bold",
+              ...(useEach ? {
+
+              fontSize: 6,//singleSize * 0.03,
+              }:{
+              fontSize: parseInt("13%"),
+              })
             }}
           >
             {lineID + "\n" + lineName}
@@ -50,5 +68,5 @@ export const StationNumberMaker = (props) => {
           <View style={{ flex: 1 }} />
         </View>
       );
-    });
+    })}</>
 };

lib/getTrainType.ts

@@ -51,7 +51,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
       };
     case "Rapid":
     case "OneManRapid":
-      return { color:  whiteMode ? "#00b8d8cc" : "aqua", name: "快速", data: "rapid" };
+      return { color:  whiteMode ? "#00a0bdff" : "aqua", name: "快速", data: "rapid" };
     case "LTDEXP":
       return { color: "red", name: "特急", data: "express" };
     case "NightLTDEXP":
@@ -66,7 +66,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
     case "Party":
       return { color: "#ff7300ff", name: "団体臨時", data: "normal" };
     case "Freight":
-      return { color: "#00869ecc", name: "貨物", data: "notService" };
+      return { color: "#007488ff", name: "貨物", data: "notService" };
     case "Forwarding":
       return { color: "#727272cc", name: "回送", data: "notService" };
     case "FreightForwarding":

lib/useInterval.ts

@@ -24,6 +24,8 @@ export const useInterval = (fn: Fn, interval: number, autostart = true) => {
   useEffect(() => {
     if (autostart) {
       setState("RUNNING");
+    }else{
+      setState("STOPPED");
     }
   }, [autostart]);
   useEffect(() => {

stateBox/useCurrentTrain.js

@@ -8,6 +8,9 @@ import React, {
 import { HeaderConfig } from "../lib/HeaderConfig";
 
 import useInterval from "../lib/useInterval";
+import { useStationList } from "./useStationList";
+import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
 const initialState = {
   webview: {},
   currentTrain: [],
@@ -16,6 +19,11 @@ const initialState = {
   setCurrentTrainLoading: () => {},
   getCurrentTrain: () => {},
   inject: (i) => {},
+  fixedPosition: null,
+  setFixedPosition: (e) => {},
+  setInjectData: (e) => {},
+  getCurrentStationData: (e) => {},
+  getPosition: (e) => {},
 };
 
 const CurrentTrainContext = createContext(initialState);
@@ -27,6 +35,136 @@ export const useCurrentTrain = () => {
 export const CurrentTrainProvider = ({ children }) => {
   const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
   const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
+
+  const { getInjectJavascriptAddress, stationList, originalStationList } =
+    useStationList();
+
+  const [fixedPosition, setFixedPosition] = useState({
+    type: null,
+    value: null,
+  });
+  const [_, setIntervalState] = useInterval(
+    () => {
+      if (!webview.current) return;
+      if (fixedPosition.type == "station") {
+        const script = getInjectJavascriptAddress(fixedPosition.value);
+        inject(script);
+      } else if (fixedPosition.type == "train") {
+        const currentTrain = getCurrentStationData(fixedPosition.value);
+        const values = getPosition(currentTrain);
+        if (!values) return;
+        if (values[0] == "M12" || values[1] == "M12") {
+          const script = getInjectJavascriptAddress("M12");
+          inject(script);
+          return;
+        }
+
+        const script = getInjectJavascriptAddress(
+          values[values.length == 2 ? currentTrain.Direction : 0]
+        );
+        inject(script);
+      }
+    },
+    5000, //60000,
+    false
+  );
+  useEffect(() => {
+    if (fixedPosition) {
+      setIntervalState.start();
+    } else {
+      setIntervalState.stop();
+    }
+  }, [fixedPosition]);
+  const getPosition = (currentTrainData) => {
+    //currentTrainData.Pos = "鴨川～端岡"; //test
+    if (!currentTrainData) return;
+    if (!currentTrainData?.Pos) return;
+    if (currentTrainData?.Pos.match("～")) {
+      const pos = currentTrainData?.Pos.replace("（下り）", "")
+        .replace("（上り）", "")
+        .replace("（徳島線）", "")
+        .replace("（高徳線）", "")
+        .split("～");
+      const direction = parseInt(currentTrainData?.Direction) || 0;
+      if (pos[0] == "児島" && pos[1] == "宇多津") {
+        return ["M12", "Y09"];
+      } else if (pos[1] == "児島" && pos[0] == "宇多津") {
+        return ["Y09", "M12"];
+      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
+        return ["S18", "S14"];
+      } else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
+        return ["S14", "S18"];
+      } else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
+        return ["U14", "U14"];
+      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
+        return ["U14", "U14"];
+      }
+      const currentPosID = Object.keys(originalStationList).map((key) => {
+        let firstStation = false;
+        let firstStationID = "";
+        let secondStation = false;
+        let secondStationID = "";
+        originalStationList[key].forEach((station) => {
+          if (station.Station_JP === pos[0]) {
+            firstStation = true;
+            firstStationID = station.StationNumber;
+          }
+          if (station.Station_JP === pos[1]) {
+            secondStation = true;
+            secondStationID = station.StationNumber;
+          }
+        });
+        if (firstStation && secondStation) {
+          return [firstStationID, secondStationID];
+        } else return false;
+      });
+      const currentPos = currentPosID.filter((d) => d != false)[0];
+      if (currentPos) {
+        return direction == 0 ? currentPos.reverse() : currentPos;
+      } else if (direction == 0) {
+        return [
+          getStationID(pos[1], stationList),
+          getStationID(pos[0], stationList),
+        ];
+      } else {
+        return [
+          getStationID(pos[0], stationList),
+          getStationID(pos[1], stationList),
+        ];
+      }
+    } else {
+      return [getStationID(currentTrainData?.Pos, stationList)];
+    }
+  };
+  const getCurrentStationData = (e) => {
+    //e:trainNumber
+    if (!currentTrain.length) return;
+    return checkDuplicateTrainData(
+      currentTrain.filter((d) => d.num == e),
+      stationList
+    );
+  };
+  const setInjectData = ({ type, value, fixed }) => {
+    if (type === "station") {
+      const script = getInjectJavascriptAddress(value);
+      inject(script);
+    } else if (type === "train") {
+      const currentTrain = getCurrentStationData(value);
+      const values = getPosition(currentTrain);
+      if (!values) return;
+      let script;
+      if (values[0] == "M12" || values[1] == "M12") {
+        script = getInjectJavascriptAddress("M12");
+      } else {
+        const valuesIndex = values.length == 2 ? currentTrain.Direction : 0;
+        script = getInjectJavascriptAddress(values[valuesIndex]);
+      }
+      inject(script);
+    }
+    if (fixed) {
+      setFixedPosition({ type, value });
+    }
+  };
   const getCurrentTrain = () => {
     fetch("https://n8n.haruk.in/webhook/c501550c-7d1b-4e50-927b-4429fe18931a")
       .then((response) => response.json())
@@ -88,6 +226,11 @@ export const CurrentTrainProvider = ({ children }) => {
         setCurrentTrainLoading,
         getCurrentTrain,
         inject,
+        setInjectData,
+        getCurrentStationData,
+        getPosition,
+        fixedPosition,
+        setFixedPosition,
       }}
     >
       {children}

stateBox/useDeviceOrientationChange.js

@@ -18,8 +18,8 @@ export const DeviceOrientationChangeProvider = ({ children }) => {
     );
   };
   useEffect(() => {
-    data();
+    //data();
-    //ScreenOrientation.unlockAsync();
+    ScreenOrientation.unlockAsync();
   }, []);
 
   // useEffect(() => {

stateBox/useStationList.tsx

@@ -10,12 +10,24 @@ import {
   getStationList,
   lineList_LineWebID,
 } from "../lib/getStationList";
-
+export type StationProps = {
+  DispNum: string;
+  JrHpUrl: string;
+  MyStation: string;
+  StationMap: string;
+  StationNumber: string | null;
+  StationTimeTable: string;
+  Station_EN: string;
+  Station_JP: string;
+  jslodApi: string;
+  lat: number;
+  lng: number;
+};
 type initialStateType = {
-  originalStationList: any[][];
+  originalStationList: StationProps[][];
-  setOriginalStationList: React.Dispatch<React.SetStateAction<any[]>>;
+  setOriginalStationList: React.Dispatch<React.SetStateAction<StationProps[]>>;
-  getStationDataFromName: (id: string) => any[];
+  getStationDataFromName: (id: string) => StationProps[];
-  getStationDataFromId: (id: string) => any[];
+  getStationDataFromId: (id: string) => StationProps[];
   getStationDataFromNameBase: (name: string) => any[];
   stationList: any[];
   getInjectJavascriptAddress: (StationNumber: string) => string;

stateBox/useTrainMenu.js

@@ -94,7 +94,7 @@ export const TrainMenuProvider = ({ children }) => {
     //列車アイコンスイッチ
     ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
     //地図スイッチ
-    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
+    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "true", u: true });
     //駅メニュースイッチ
     ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
     //列車メニュースイッチ