地図表示の挙動変更、位置情報への移動ボタンを実装

components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js

@@ -33,7 +33,7 @@ export const LandscapeTrainInfo = (props) => {
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
         onScroll={(d) => {
-          console.log(d.nativeEvent.contentOffset.y);
+          // Handle scroll events
         }}
       >
         <View style={{ height: 0 }} />

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -51,7 +51,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
         )
           .then((d) => d.json())
           .then((d) => {
-            console.log(d);
             if (d.trainStatus == "〇") {
               //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
             } else if (d.trainStatus == "▲") {
@@ -76,7 +75,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
         )
           .then((d) => d.json())
           .then((d) => {
-            console.log(d);
             if (d.trainStatus == "〇") {
               //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
             } else if (d.trainStatus == "▲") {

components/ActionSheetComponents/StationDeteilView.js

@@ -18,6 +18,7 @@ import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
 import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
 import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
 import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
+import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPositionButton";
 
 export const StationDeteilView = (props) => {
   if (!props.payload) return <></>;
@@ -104,16 +105,23 @@ export const StationDeteilView = (props) => {
                   }
                 />
               </View>
-              {currentStation[0].JrHpUrl &&
-                currentStation[0].StationNumber != "M12" && (
-                  <駅構内図 //児島例外/
-                    navigate={navigate}
-                    goTo={goTo}
-                    useShow={useShow}
-                    address={currentStation[0].JrHpUrl}
-                    onExit={onExit}
-                  />
-                )}
+              <View style={{ flexDirection: "row" }}>
+                <StationTrainPositionButton
+                  stationNumber={currentStation[0].StationNumber}
+                  onExit={onExit}
+                  navigate={navigate}
+                />
+                {currentStation[0].JrHpUrl &&
+                  currentStation[0].StationNumber != "M12" && (
+                    <駅構内図 //児島例外/
+                      navigate={navigate}
+                      goTo={goTo}
+                      useShow={useShow}
+                      address={currentStation[0].JrHpUrl}
+                      onExit={onExit}
+                    />
+                  )}
+              </View>
               <View style={{ flexDirection: "row" }}>
                 {!currentStation[0].JrHpUrl || (
                   <WebSiteButton
@@ -135,7 +143,12 @@ export const StationDeteilView = (props) => {
                     useShow={useShow}
                   />
                 )}
-                <StationMapButton stationMap={currentStation[0].StationMap || `https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`} />
+                <StationMapButton
+                  stationMap={
+                    currentStation[0].StationMap ||
+                    `https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`
+                  }
+                />
                 {!trainBus || (
                   <TrainBusButton
                     address={trainBus.address}

components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx

@@ -19,6 +19,7 @@ export const 駅構内図:FC<Props> = (props) => {
         alignContent: "center",
         alignItems: "center",
         margin: 2,
+        flex: 1,
       }}
       onPress={() => {
         navigate("howto", { info, goTo, useShow });

components/ActionSheetComponents/StationDeteilView/StationTrainPositionButton.tsx

@@ -0,0 +1,54 @@
+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 = {
+  stationNumber: string;
+  onExit: () => void;
+  navigate?: (screen: string, params: { screen: string }) => void;
+};
+export const StationTrainPositionButton: FC<Props> = (props) => {
+  const { stationNumber, onExit, navigate } = props;
+  const {
+    inject,
+  } = useCurrentTrain();
+  const { getInjectJavascriptAddress } = useStationList();
+  return (
+    <TouchableOpacity
+      style={{
+        height: 50,
+        backgroundColor: "#0099CC",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+        margin: 2,
+        flex: 1
+      }}
+      onPress={() => {
+        navigate("positions", { screen: "Apps" });
+        const script = getInjectJavascriptAddress(stationNumber);
+        inject(script);
+        onExit();
+      }}
+    >
+      <View style={{ flex: 1 }} />
+      <AntDesign
+        name={"barchart"}
+        size={20}
+        color={"white"}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+      />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        走行位置に移動
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/Menu/Carousel/CarouselBox.tsx

@@ -29,8 +29,7 @@ export const CarouselBox = ({
 
   useEffect(() => {
     if (!carouselBadgeScrollViewRef.current) return;
-    const scrollToIndex = listIndex * (width / listUpStation.length) + 10;
-    console.log("scrollToIndex", scrollToIndex);
+    const scrollToIndex = (dotButton ? 28 : 22) * listIndex - (width / 2) + (dotButton ? 28 : 22) - 5;
     carouselBadgeScrollViewRef.current.scrollTo({
       x: scrollToIndex,
       animated: true,

components/Settings/FavoliteSettings/FavoiliteSettingsItem.js

@@ -8,7 +8,6 @@ import { AS } from "../../../storageControl";
 export const FavoriteSettingsItem = ({ currentStation }) => {
   const lineIDs = [];
   const EachIDs = [];
-  console.log(currentStation);
   currentStation.forEach((d) => {
     if (!d.StationNumber) return;
     const textArray = d.StationNumber.split("");

menu.js

@@ -178,18 +178,30 @@ export default function Menu(props) {
       const returnData = [];
       Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
         originalStationList[d].forEach((D, index) => {
-          if (isSearchMode && isSearchMode != stationIDPair[lineList_LineWebID[d]]) return;
+          if (
+            isSearchMode &&
+            isSearchMode != stationIDPair[lineList_LineWebID[d]]
+          )
+            return;
           const latlng = [D.lat, D.lng];
           if (latlng.length == 0) return null;
-          if(D.StationNumber == undefined) {
+          if (D.StationNumber == undefined) {
             return null;
           }
           returnData.push([D]);
         });
       });
+      if (mapMode) {
+        mapsRef?.current.fitToCoordinates(
+          listUpStation.map((d) => ({
+            latitude: parseFloat(d[0].lat),
+            longitude: parseFloat(d[0].lng),
+          })),
+          { edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
+        );
+      }
       setListUpStation(returnData);
-    }
-    else if (stationListMode == "position") {
+    } else if (stationListMode == "position") {
       setListUpStation(nearPositionStation.filter((d) => d != undefined));
     } else {
       setListUpStation(favoriteStation.filter((d) => d != undefined));
@@ -200,12 +212,16 @@ export default function Menu(props) {
       setListIndex(0);
       return;
     }
+    if (listUpStation.length == 1) {
+      setListIndex(0);
+      return;
+    }
     if (listUpStation[listIndex] == undefined) {
       const count = listIndex - 1;
       setMapMode(false);
       setListIndex(count);
     }
-  }, [listIndex, nearPositionStation, listUpStation]);
+  }, [listIndex, nearPositionStation, listUpStation, isSearchMode]);
   useEffect(() => {
     if (originalStationList == undefined) return;
     if (listUpStation.length == 0) return;
@@ -258,7 +274,6 @@ export default function Menu(props) {
         }}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={(e) => {
-          console.log(e.nativeEvent.velocity);
           if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
             if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
               goToMap();

stateBox/useCurrentTrain.js

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

stateBox/useStationList.tsx

@@ -92,7 +92,6 @@ export const StationListProvider: FC<Props> = ({ children }) => {
           return;
         }
         if (x.StationNumber == StationNumber) {
-          console.log(originalStationList[d]);
           if (!x.MyStation) findNearStations = true;
           else bootStationList.push({ line: lineName, station: x });
         }