現在地ベースのボタンとか追加

2025-04-11 15:35:25 +00:00 · 2025-04-11 15:35:25 +00:00 · cf025d3add
commit cf025d3add
parent 190be0fa67
3 changed files with 153 additions and 66 deletions
--- a/components/atom/UsefulBox.js
+++ b/components/atom/UsefulBox.js
@ -1,7 +1,7 @@
 import { TouchableOpacity, Text } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 export const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const { icon, backgroundColor, flex, onPressButton, children, disable = false } = props; 
  return (
    <TouchableOpacity
      style={{
@ -11,6 +11,7 @@ export const UsefulBox = (props) => {
        alignItems: "center",
        margin: 2,
      }}
+      disabled={disable}
      onPress={onPressButton}
    >
      <MaterialCommunityIcons name={icon} color="white" size={50} />
--- a/components/発車時刻表/LED_vidion.js
+++ b/components/発車時刻表/LED_vidion.js
@ -10,8 +10,7 @@ import { Footer } from "./LED_Vision_Component/Footer";
 import { Header } from "./LED_Vision_Component/Header";
 import { Description } from "./LED_inside_Component/Description";
 import { EachData } from "./EachData";
-
-
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";

 /**
 *
@ -43,13 +42,8 @@ import { EachData } from "./EachData";
 * 9062D 四国まんなか千年ものがたり(臨時？)
 */
 export default function LED_vision(props) {
-  const {
-    station,
-    trainDiagram,
-    getCurrentTrain,
-    navigate,
-    openStationACFromEachTrainInfo,
-  } = props;
+  const { station, getCurrentTrain, navigate, openStationACFromEachTrainInfo } =
+    props;
  const { currentTrain } = useCurrentTrain();
  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
  const [finalSwitch, setFinalSwitch] = useState(false);
@ -57,6 +51,7 @@ export default function LED_vision(props) {
  const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
  const [isInfoArea, setIsInfoArea] = useState(false);
  const { areaInfo, areaStationID } = useAreaInfo();
+  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();

  useEffect(() => {
    AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
@ -107,27 +102,29 @@ export default function LED_vision(props) {
  }, [trainTimeAndNumber, currentTrain, finalSwitch]);

  const getTime = (stationDiagram, station) => {
-    const returnData = Object.keys(stationDiagram).map((trainNum) => {
-      let trainData = {};
-      stationDiagram[trainNum].split("#").forEach((data) => {
-        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];
-            trainData.lastStation = "当駅止";
+    const returnData = Object.keys(stationDiagram)
+      .map((trainNum) => {
+        let trainData = {};
+        stationDiagram[trainNum].split("#").forEach((data) => {
+          if (data.match("着")) {
+            trainData.lastStation = data.split(",着,")[0];
          }
-        }
-      });
-      return {
-        train: trainNum,
-        time: trainData.time,
-        lastStation: trainData.lastStation,
-      };
-    }).filter((d) => d.time);
+          if (data.split(",")[0] === station.Station_JP) {
+            if (data.match(",発,")) {
+              trainData.time = data.split(",発,")[1];
+            } else if (data.match(",着,")) {
+              trainData.time = data.split(",着,")[1];
+              trainData.lastStation = "当駅止";
+            }
+          }
+        });
+        return {
+          train: trainNum,
+          time: trainData.time,
+          lastStation: trainData.lastStation,
+        };
+      })
+      .filter((d) => d.time);
    return returnData.sort((a, b) => {
      switch (true) {
        case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
--- a/menu.js
+++ b/menu.js
@ -15,12 +15,10 @@ import * as Location from "expo-location";
 import {
  configureReanimatedLogger,
  ReanimatedLogLevel,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 import StatusbarDetect from "./StatusbarDetect";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { Ionicons } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
-import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";

 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
@ -52,7 +50,7 @@ export default function Menu({ getCurrentTrain }) {
  const { originalStationList } = useStationList();
  const { height, width } = useWindowDimensions();
  const scrollRef = useRef(null);
-  const [mapsOpacity, setMapsOpacity] = useState(1);
+  const [mapsOpacity, setMapsOpacity] = useState(false);
  const mapsRef = useRef(null);
  const mapsSizeOffset =
    (height / 100) * 60 -
@ -81,13 +79,17 @@ export default function Menu({ getCurrentTrain }) {
      );
    });
  }, []);
-
+  const [position, setPosition] = useState(undefined);
  const getCurrentPosition = () => {
    if (!locationStatus) return () => {};
-    Location.getCurrentPositionAsync({}).then((location) =>
-      makeCurrentStation(location)
-    );
+    Location.getCurrentPositionAsync({}).then((location) => {
+      setPosition(location);
+    });
  };
+  useEffect(() => {
+    if (!position) return () => {};
+    makeCurrentStation(position);
+  }, [position]);
  const makeCurrentStation = (location) => {
    if (!originalStationList) return () => {};
    const findStationEachLine = (selectLine) => {
@ -157,8 +159,6 @@ export default function Menu({ getCurrentTrain }) {
  }, [selectedCurrentStation]);

  //全列車ダイヤリストを作成するuseEffect
-  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
-
  const oPSign = () => {
    const payload = {
      currentStation:
@ -177,22 +177,20 @@ export default function Menu({ getCurrentTrain }) {

  useEffect(() => {
    console.log(selectedCurrentStation);
-    if(allStationData.length == 0) return;
-    const currentStationData =
+    if (allStationData.length == 0) return;
+    if (allStationData[selectedCurrentStation] == undefined) return;
+    const { lat, lng } =
      originalStationList &&
      allStationData[selectedCurrentStation] &&
      allStationData[selectedCurrentStation][0];
-      console.log(currentStationData);
-      const {lat, lng} = currentStationData;
-      const mapRegion = {
-        latitude: lat,
-        longitude: lng,
-        latitudeDelta: 0.05,
-        longitudeDelta: 0.05,
-      };
-      mapsRef.current.animateToRegion(mapRegion, 1000);
-    
-  }, [selectedCurrentStation, currentStation, allStationData,mapsRef]);
+    const mapRegion = {
+      latitude: lat,
+      longitude: lng,
+      latitudeDelta: 0.05,
+      longitudeDelta: 0.05,
+    };
+    mapsRef.current.animateToRegion(mapRegion, 1000);
+  }, [selectedCurrentStation, currentStation, allStationData, mapsRef]);

  useEffect(() => {
    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
@ -228,10 +226,8 @@ export default function Menu({ getCurrentTrain }) {
        decelerationRate={"normal"}
        onScroll={(d) => {
          console.log(Object.keys(scrollRef.current));
-          const scrollY = d.nativeEvent.contentOffset.y;
-          if (scrollY < mapsSizeOffset) {
-            setMapsOpacity(scrollY / mapsSizeOffset);
-          }
+          const scrollY = d.nativeEvent.contentOffset.y + 100;
+          setMapsOpacity(scrollY < mapsSizeOffset);
        }}
        snapToOffsets={[mapsSizeOffset]}
      >
@ -244,7 +240,7 @@ export default function Menu({ getCurrentTrain }) {
              position: "absolute",
              height:
                (height / 100) * 60 + (((width / 100) * 80) / 20) * 9 + 60,
-              opacity: 1 - mapsOpacity,
+              opacity: mapsOpacity ? 1 : 0,
            }}
            showsUserLocation={true}
            loadingEnabled={true}
@ -263,8 +259,103 @@ export default function Menu({ getCurrentTrain }) {
            }}
          ></MapView>
        </View>
-        <TopMenuButton />
-        <View style={{ height: mapsSizeOffset }} />
+        <TopMenuButton show={mapsOpacity} />
+        <View style={{ height: mapsSizeOffset, position: "relative" }}>
+          <View
+            style={{
+              width: "100%",
+              position: "absolute",
+              bottom: 0,
+              flexDirection: "row",
+              display: mapsOpacity ? "flex" : "none",
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                backgroundColor: "#0099CC",
+                padding: 5,
+                alignItems: "center",
+                flexDirection: "row",
+                marginHorizontal: 5,
+                borderRadius: 30,
+              }}
+              disabled={!locationStatus}
+              onPress={()=>{
+                if(!position) return;
+                const { latitude, longitude } = position.coords;
+                mapsRef.current.animateToRegion(
+                  {
+                    latitude,
+                    longitude,
+                    latitudeDelta: 0.05,
+                    longitudeDelta: 0.05,
+                  },
+                  1000
+                );
+              }}
+            >
+              <Ionicons
+                name="locate-outline"
+                size={14}
+                color="white"
+                style={{ margin: 5 }}
+              />
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  flex: 1,
+                  textAlign: "center",
+                }}
+              >
+                現在地基準
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                backgroundColor: "#0099CC",
+                padding: 5,
+                alignItems: "center",
+                flexDirection: "row",
+
+                marginHorizontal: 5,
+                borderRadius: 30,
+              }}
+              onPress={() => {
+                // お気に入りリスト更新
+              }}
+            >
+              <Ionicons
+                name="star"
+                size={14}
+                color="white"
+                style={{ margin: 5 }}
+              />
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  flex: 1,
+                  textAlign: "center",
+                }}
+              >
+                お気に入りリスト
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View
+            style={{
+              height: 0,
+              backgroundColor: "white",
+              position: "absolute",
+              top: mapsSizeOffset,
+            }}
+          />
+        </View>
        <></>
        {originalStationList.length != 0 && allStationData.length != 0 && (
          <View style={{ flex: 1, paddingTop: 10 }}>
@ -346,10 +437,7 @@ export default function Menu({ getCurrentTrain }) {
          originalStationList.length != 0 &&
          allStationData[selectedCurrentStation] && (
            <LED_vision
-              station={
-                originalStationList && allStationData[selectedCurrentStation]
-              }
-              trainDiagram={trainDiagram}
+              station={allStationData[selectedCurrentStation]}
              getCurrentTrain={getCurrentTrain}
              navigate={navigate}
              openStationACFromEachTrainInfo={() => {}}
@ -362,7 +450,7 @@ export default function Menu({ getCurrentTrain }) {
  );
 }

-const TopMenuButton = () => {
+const TopMenuButton = ({ show }) => {
  const buttonList = [
    {
      backgroundColor: "#F89038",
@ -388,12 +476,13 @@ const TopMenuButton = () => {
    },
  ];
  return (
-    <View style={{ flexDirection: "row" }}>
+    <View style={{ flexDirection: "row", opacity: !show ? 1 : 0 }}>
      {buttonList.map((d, index) => (
        <UsefulBox
          backgroundColor={d.backgroundColor}
          icon={d.icon}
          flex={1}
+          disable={show}
          onPressButton={d.onPress}
          key={index + d.icon}
        >