上部にテキスト表示を追加

components/trainMenu.js

@@ -6,16 +6,19 @@ 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, setStationPin] = useState([]);
+  const [selectedLine, setSelectedLine] = useState(undefined);
   useEffect(() => {
     const stationPinData = [];
     Object.keys(stationData).map((d, indexBase) =>
       stationData[d].map((D, index) => {
         if (!D.StationMap) return null;
+        if (selectedLine && selectedLine != d) return;
         const latlng = D.StationMap.replace(
           "https://www.google.co.jp/maps/place/",
           ""
@@ -25,7 +28,7 @@ export default function TrainMenu({ stationData, style }) {
       })
     );
     setStationPin(stationPinData);
-  }, [stationData]);
+  }, [stationData, selectedLine]);
   useEffect(() => {
     mapRef.current.fitToCoordinates(
       stationPin.map(({ latlng }) => ({
@@ -37,6 +40,32 @@ export default function TrainMenu({ stationData, style }) {
   }, [stationPin]);
   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}
@@ -76,20 +105,9 @@ export default function TrainMenu({ stationData, style }) {
               margin: 2,
               borderRadius: 5,
               alignItems: "center",
+              opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5,
             }}
-            onPress={() => {
-              setStationPin(
-                stationData[d].map((D, index) => {
-                  if (!D.StationMap) return null;
-                  const latlng = D.StationMap.replace(
-                    "https://www.google.co.jp/maps/place/",
-                    ""
-                  ).split(",");
-                  if (latlng.length == 0) return null;
-                  return { D, d, latlng, indexBase: 0, index };
-                })
-              );
-            }}
+            onPress={() => setSelectedLine(selectedLine == d ? undefined : d)}
           >
             <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
               {stationIDPair[d]}

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;