Merge commit 'c8973c36fade15bc87cdd5d7367b3af4a79793a2' into develop

components/trainMenu.js

@@ -1,45 +1,71 @@
-import React, { useRef, useMemo } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import lineColorList from "../assets/originData/lineColorList";
+import { stationIDPair } from "../lib/getStationList2";
+import { lineListPair } from "../lib/getStationList";
 export default function TrainMenu({ stationData, style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
   const { navigate } = useNavigation();
-  const stationPin = useMemo(
+  const [stationPin, setStationPin] = useState([]);
-    () =>
+  const [selectedLine, setSelectedLine] = useState(undefined);
-      Object.keys(stationData).map((d, indexBase) =>
+  useEffect(() => {
-        stationData[d].map((D, index) => {
+    const stationPinData = [];
-          if (!D.StationMap) return null;
+    Object.keys(stationData).map((d, indexBase) =>
-          const latlng = D.StationMap.replace(
+      stationData[d].map((D, index) => {
-            "https://www.google.co.jp/maps/place/",
+        if (!D.StationMap) return null;
-            ""
+        if (selectedLine && selectedLine != d) return;
-          ).split(",");
+        const latlng = D.StationMap.replace(
-          if (latlng.length == 0) return null;
+          "https://www.google.co.jp/maps/place/",
-          return (
+          ""
-            <Marker
+        ).split(",");
-              key={index + indexBase}
+        if (latlng.length == 0) return null;
-              coordinate={{
+        stationPinData.push({ D, d, latlng, indexBase: 0, index });
-                latitude: parseFloat(latlng[0]),
+      })
-                longitude: parseFloat(latlng[1]),
+    );
-              }}
+    setStationPin(stationPinData);
-              onPress={() => {
+  }, [stationData, selectedLine]);
-                webview.current?.injectJavaScript(
+  useEffect(() => {
-                  `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+    mapRef.current.fitToCoordinates(
-                  setStrings();`
+      stationPin.map(({ latlng }) => ({
-                );
+        latitude: parseFloat(latlng[0]),
-                if (navigate) navigate("Apps");
+        longitude: parseFloat(latlng[1]),
-              }}
+      })),
-            ></Marker>
+      { edgePadding: { top: 100, bottom: 50, left: 50, right: 50 } } // Add margin values here
-          );
+    );
-        })
+  }, [stationPin]);
-      ),
-    [stationData]
-  );
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
+      {selectedLine && (
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: lineColorList[stationIDPair[selectedLine]],
+            padding: 10,
+            zIndex: 100,
+            alignItems: "center",
+          }}
+        >
+          <Text
+            style={{
+              color: "white",
+              fontWeight: "bold",
+              fontSize: 20,
+              textAlign: "center",
+            }}
+          >
+            {selectedLine ? lineListPair[stationIDPair[selectedLine]] : "全線"}
+          </Text>
+        </View>
+      )}
+
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -56,8 +82,54 @@ export default function TrainMenu({ stationData, style }) {
           longitudeDelta: 1.8,
         }}
       >
-        {stationPin}
+        {stationPin.map(({ D, d, latlng, indexBase, index }) => (
+          <MapPin
+            index={index}
+            indexBase={indexBase}
+            latlng={latlng}
+            D={D}
+            d={d}
+            navigate={navigate}
+            webview={webview}
+            key={index + indexBase}
+          />
+        ))}
       </MapView>
+      <View style={{ position: "relative" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            position: "absolute",
+            width: "100vw",
+            bottom: 0,
+            flex: 1,
+          }}
+        >
+          <Text style={{ position: "absolute", bottom: 40 }}>
+            路線記号からフィルタリング
+          </Text>
+          {Object.keys(stationData).map((d) => (
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                backgroundColor: lineColorList[stationIDPair[d]],
+                padding: 5,
+                margin: 2,
+                borderRadius: 10,
+                alignItems: "center",
+                opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5,
+              }}
+              onPress={() => setSelectedLine(selectedLine == d ? undefined : d)}
+            >
+              <Text
+                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
+              >
+                {stationIDPair[d]}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
       {navigate && (
         <View style={{ flexDirection: "row" }}>
           <UsefulBox
@@ -137,3 +209,22 @@ const UsefulBox = (props) => {
     </TouchableOpacity>
   );
 };
+
+const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => {
+  return (
+    <Marker
+      key={index + indexBase}
+      coordinate={{
+        latitude: parseFloat(latlng[0]),
+        longitude: parseFloat(latlng[1]),
+      }}
+      onPress={() => {
+        webview.current?.injectJavaScript(
+          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+        setStrings();`
+        );
+        if (navigate) navigate("Apps");
+      }}
+    ></Marker>
+  );
+};

lib/getStationList.js

@@ -29,6 +29,17 @@ export const lineList = [
   "鳴門線(池谷-鳴門間)[N]",
   "瀬戸大橋線(宇多津-児島間)[M]",
 ];
+export const lineListPair = {
+  Y: "予讃線(高松-松山間)[Y]",
+  U: "予讃線(松山-宇和島間)[U]",
+  S: "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
+  D: "土讃線(多度津-高知間)[D]",
+  K: "土讃線(高知-窪川間)[K]",
+  T: "高徳線(高松-徳島間)[T]",
+  B: "徳島線(徳島-阿波池田)[B]",
+  N: "鳴門線(池谷-鳴門間)[N]",
+  M: "瀬戸大橋線(宇多津-児島間)[M]",
+};
 
 export const getStationList = async (props) => {
   if (status) return status;

lib/getStationList2.js

@@ -1,4 +1,3 @@
-let status = undefined;
 import yosan from "../assets/originData/yosan";
 import uwajima from "../assets/originData/uwajima";
 import uwajima2 from "../assets/originData/uwajima2";
@@ -21,3 +20,15 @@ export const getStationList2 = async (props) => {
     seto,
   };
 };
+
+export const stationIDPair = {
+  yosan: "Y",
+  uwajima: "U",
+  uwajima2: "S",
+  dosan: "D",
+  dosan2: "K",
+  koutoku: "T",
+  tokushima: "B",
+  naruto: "N",
+  seto: "M",
+};